目录
首先，扩展一些HTML执行的原理：
一.相对路径
如下是3种不同等级的语法：
文件中，不同级别文件目录的存放方式如下：
整体的代码：
<!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应用程序中，每一个跳转界面的功能都由该标签实现~
href属性规定了a标签所跳转到的路径。
四.锚点链接
通俗地说，锚点链接是网页开发中增强用户体验的一种技术，可以跳转到页面中的指定位置：
跳转的目的地：
<h1 id="ddd">目的地<br /></h1>
<!-- id值为ddd，点击相关链接即可跳转 -->
实现跳转的目标（按钮 ）
<h4><a href="#ddd">返回顶部</h4></a>
<!-- 注意不能缺少#号 -->格式一定要保证对，实现跳转的元素使用href属性，id名前加#号；而目的地需要用id属性标识名称
在百度百科等诸多博客类型的网站里面，锚点链接的应用尤为频繁~如下图：