HTML详细基础(二)文件路径

目录

一.相对路径

二.绝对路径

三.超链接标签 

四.锚点链接


首先,扩展一些HTML执行的原理:

htmL(hypertext markup Language) 是一种规范(或者说是一种标准),它通过标记符(tag)来标记要显示的网页的各个部分。

通过在网页中添加标记符,可以告诉浏览器如何显示网页,即确定内容的格式。

浏览器按顺序阅读网页文件(htmL文件),然后根据内容周围的htmL标记符解释和显示各种内容,这个过程叫做语法分析。

htmL中的超文本功能,也就是超链接功能,使网页之间可以链接起来。

网页与网页的链接构成了网站,而网站与网站的链接就构成了多姿多彩的www

 

一.相对路径

如下是3种不同等级的语法:

同级目录:src="同级目录.png"

上级目录:src="下级目录/下级目录.jpg"

下级目录:src="../上级目录.jpg"

文件中,不同级别文件目录的存放方式如下:

 整体的代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div> <img src="同级目录.png" width="400" title="这是同级目录"/></div><!-- 同级目录直接使用图片名及文件类型 --><div> <img src="下级目录/下级目录.jpg" width="300" title="这是下级目录"/></div><!-- 下级目录使用"/"来依次跳级 --><div> <img width="500" title="这是上级目录"/></div><!-- 上级目录使用"../进行依次跳级" -->
</body>
</html>

效果图:

二.绝对路径

 绝对路径是指,文件本质上存在的位置——而并不是相对于某一物品而言的。

<body><img src="E:\照片\太理美景\111.jpg" width="400"/><!-- 斜杠位置与相对路径相反,一定要注意 --><!-- 绝对路径直接复制文件在当前pc端的位置即可 --><!-- 实际开发中一般不会用绝对路径,平时方便练习偶尔用用。 --><img src="https://img0.baidu.com/it/u=2024927183,22484188&fm=26&fmt=auto&gp=0.jpg"/><!-- 也可以直接复制图片在网络上的地址,也作为绝对路径的一种。 --></body>
  • 斜杠位置与相对路径相反,一定要注意
  • 绝对路径直接复制文件在当前pc端的位置即可
  • 实际开发中一般不会用绝对路径,因为耦合度过高,不易于项目的维护~

三.超链接标签 

超链接又被称为超文本,超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式,用以显示文本及与文本之间相关的内容。现时超文本普遍以电子文档方式存在,其中的文字包含有可以链结到其他位置或者文档的连结,允许从当前阅读位置直接切换到超文本连结所指向的位置。超文本的格式有很多,最常使用的是超文本标记语言(标准通用标记语言下的一个应用)及富文本格式。

非常重要的标签,在日常接触的各种网页或web应用程序中,每一个跳转界面的功能都由该标签实现~
 

<a href="">跳转</a>

href属性规定了a标签所跳转到的路径。

外部链接:

<a href="http://www.qq.com" target="_blank">腾讯</a>

内部链接:(也可以跳转到项目内部的网页)

<a href="E:\HTML 文件\案例1-9号(目录文件夹练习)\7号 文本格式化.html">第一个页面</a>

空链接——实际开发中的暂略方式

<a href="#">空连接</a>

 下载链接——点击后下载目标文件

<a href="12号辅助.zip">下载连接</a>

 元素链接

<a href="12号第二辅助.jpg">元素链接</a>

四.锚点链接

HTML中的链接,正确的说法应该称作"锚点",它命名锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的便利工具,让链接对象接近焦点.,便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时,标记锚点是最佳的方法。

通俗地说,锚点链接是网页开发中增强用户体验的一种技术,可以跳转到页面中的指定位置:

跳转的目的地:

<h1 id="ddd">目的地<br /></h1> <!-- id值为ddd,点击相关链接即可跳转 -->

实现跳转的目标(按钮 )

   <h4><a href="#ddd">返回顶部</h4></a><!-- 注意不能缺少#号 -->

 格式一定要保证对,实现跳转的元素使用href属性,id名前加#号;而目的地需要用id属性标识名称

在百度百科等诸多博客类型的网站里面,锚点链接的应用尤为频繁~如下图:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/92706.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【FreeRTOS】FreeRTOS移植stm32详细步骤介绍

我在查找FreeRTOS移植的相关教程特别少&#xff0c;所以想非常详细的介绍FreeRTOS移植stm32详细步骤&#xff0c;包括源码的下载&#xff0c;源码介绍&#xff0c;系统移植&#xff0c;代码验证等&#xff0c;每一步都有对应的介绍和解释&#xff0c;希望可以帮助到你们。 文章…

openGauss学习笔记-84 openGauss 数据库管理-内存优化表MOT管理-内存表特性-MOT部署服务器优化:x86

文章目录 openGauss学习笔记-84 openGauss 数据库管理-内存优化表MOT管理-内存表特性-MOT部署服务器优化&#xff1a;x8684.1 BIOS84.2 操作系统环境设置84.3 网络 openGauss学习笔记-84 openGauss 数据库管理-内存优化表MOT管理-内存表特性-MOT部署服务器优化&#xff1a;x86 …

基于vue+Element Table Popover 弹出框内置表格的封装

文章目录 项目场景&#xff1a;实现效果认识组件代码效果分析 封装&#xff1a;代码封装思路页面中使用 项目场景&#xff1a; 在选择数据的时候需要在已选择的数据中对比选择&#xff0c;具体就是点击一个按钮&#xff0c;弹出一个小的弹出框&#xff0c;但不像对话框那样还需…

[DS资源推荐] Data Structure 严书配套代码

下图引入自康建伟老师博客 Github地址 使用说明&#xff1a;康老师博客 使用感受&#xff1a;Orz&#xff01;非常非常非常全面&#xff01;终于能看得下去严书了…

UWB技术在汽车智能制造的应用

返修区车辆管理项目 应用背景 在车辆总装生产线中&#xff0c;车辆下线后检测与返修是最后一个关键环节&#xff0c;整车一旦下线&#xff0c;由于流水线装配工艺、来料等原因&#xff0c;可能会出现部分整车存在瑕疵&#xff0c;进而进入返修区域待检。由于可能出现问题的不确…

区块链(9):java区块链项目的Web服务实现之实现web服务

1 引入pom依赖 <dependency><groupId>org.eclipse.jetty</groupId><artifactId>jetty-server</artifactId><version>9.4.8.v20171121</version></dependency><dependency><groupId>org.eclipse.jetty</groupId…

SpringCloud Alibaba - 基于 FeignClient 整合 Sentinel,实现“线程隔离”和“熔断降级”

目录 一、FeignClient 整合 Sentinel 1.1、整合原因 1.2、实现步骤 1.2.1、修改 OrderService 中的 application.yml 文件 1.2.2、给 FeignClient 编写失败后的降级逻辑 二、线程隔离 2.1、线程隔离的两种方式 2.1.1、线程池隔离 2.1.2、信号量隔离&#xff08;Sentin…

【自定义类型】--- 位段、枚举、联合

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言进阶之路&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅数据结构探索&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文…

智慧公厕与传统公共厕所对比五大优势是什么?

随着科技的不断发展&#xff0c;智慧公厕成为城市建设的新亮点。与传统公共厕所相比&#xff0c;它具备许多独特优势和巨大的价值。本文将以智慧公厕领先厂家广州中期科技有限公司&#xff0c;大量精品案例项目实景实例实图&#xff0c;深入探讨智慧公厕的各个方面的特点&#…

【VINS】苹果手机采集单目相机+IMU数据离线运行VINS-Mono

0.准备工作 开个新坑&#xff0c;之前用Android手机做过离线采集数据的实验&#xff0c;这次用IPhone来测试&#xff01; 1.虚拟机配置Mac OS 下载一个Mac OS 的ios镜像&#xff0c;打开虚拟机按照跟Ubuntu差不多的方式安装&#xff0c;但是发现没有Mac OS的入口。 因为VMwa…

[C++随笔录] stack queue模拟实现

stack && queue模拟实现 stack的实现stack测试用例queue的实现queue测试用例deque stack的实现 &#x1f5e8;️stack的容器适配器应该选什么比较好呢? 首先, stack的特点是 头部入, 尾部出 ⇒ 尾插 和 尾删操作比较频繁 我们前面学过的容器有 vector 和 list, vecto…

Vue中如何进行图表绘制

Vue中的图表绘制&#xff1a;数据可视化的艺术 数据可视化是现代Web应用程序的重要组成部分之一。Vue.js作为一种流行的JavaScript框架&#xff0c;提供了许多强大的工具和库&#xff0c;用于在前端应用程序中创建各种图表和数据可视化。本文将深入探讨在Vue中进行图表绘制的方…

以太网协议介绍(ARP、UDP、ICMP、IP)

以太网协议介绍 一、ARP协议 请求&#xff1a; 应答&#xff1a; ARP协议&#xff1a; 0x0001 0x0800 6 4硬件类型&#xff1a;2个字节&#xff0c;arp协议不仅能在以太网上运行还能在其他类型的硬件上运行。以太网用1来表示&#xff1b; 协议类型&#xff1a;两字节。指的是a…

【深入了解Java String类】

目录 String类 常用方法 字符串的不可变性 String的内存分析 StringBuilder类 解释可变和不可变字符串 常用方法 面试题&#xff1a;String&#xff0c;StringBuilder&#xff0c;StringBuffer之间的区别和联系 String类的OJ练习 String类 【1】直接使用&#xff0c…

【JUC并发编程--java线程】

文章目录 1. 线程1.1 线程的使用线程运行原理 1. 线程 1.1 线程的使用 方法一&#xff0c;直接使用 Thread&#xff1a; 方法二&#xff0c;使用 Runnable 配合 Thread&#xff1a; 把【线程】和【任务】&#xff08;要执行的代码&#xff09;分开 Thread 代表线程Runnabl…

为什么都说NFS读写性能差,如何进行优化?

使用基于NFS协议存储系统的同学经常遇到的问题是在小文件比较多的情况下性能会比较差。小文件访问性能差本身是可以理解的,但是NFS确实是太差了。不知大家是否深层次分析过,为什么NFS访问小文件性能会这么差? NFS文件系统与本地文件系统的差异在于多了一个网络传输的过程。…

毛玻璃用户卡交互

效果展示 页面结构组成 从效果展示可以看到&#xff0c;此效果都是比较常规的。主要的核心就是卡片的悬停效果。 CSS 知识点 backdrop-filter 回顾transitiontransform 页面基础布局实现 <section><div class"container"><div class"card&q…

react create-react-app v5配置 px2rem (暴露 eject方式)

环境信息&#xff1a; create-react-app v5 “react”: “^18.2.0” “postcss-plugin-px2rem”: “^0.8.1” 配置步骤&#xff1a; 我这个方式是 npm run eject 暴露 webpack配置的方法 1.安装 postcss-plugin-px2rem 和 lib-flexible cnpm install postcss-plugin-px2rem…

二叉树和堆

二叉树不存在度大于2的结点&#xff08;每个根最多只有两个子结点&#xff09;二叉树的子树有左右之分&#xff0c;次序不能颠倒&#xff0c;因此二叉树是有序树 两个特殊的二叉树——&#xff08;满二叉树&#xff0c;完全二叉树&#xff09; 满二叉树——每个根结点都有左右…