一、排版标签
一）标题标签（h1-h6）
1.使用场景：
常用于新闻和文章的页面中，用标题标签来突出文章主题
2.代码格式：
一级标题：
<h1>1级标题</h1>
显示：
1级标题
二级标题：
<h2>2级标题</h2>
显示：
2级标题
三级标题：
<h3>3级标题</h3>
显示：
3级标题
四级标题：
<h4>4级标题</h4>
显示：
4级标题
五级标题：
<h5>5级标题</h5>
显示：
5级标题
六级标题：
<h6>6级标题</h6>
显示：
6级标题
3.语义：
1~6级标题，重要程度依次递减，h1的字号最大，h6的字号最小，每个元素占一行。
4.特点：
*文字都有加粗；
*文字都有变大，且从h1->h6文字逐渐减小；
*独占一行。
5.注意事项：
*h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分等。
二）段落标签（< p >)
1.使用场景：
常用于新闻和文章的页面中，用于分段显示。
2.代码格式：
<p>我是一段文字</p>
3.语义：段落
4.特点：
*段落之间存在间距；
*独占一行；
三）换行标签（< br >)
1.使用场景：让文字强制换行显示
2.代码格式：
我是一段文字<br>
我是一段文字<br>
3.语义：换行
4.特点：
*单标签；
*让文字强制换行。
四）水平线标签（< hr >)
1.使用场景：分隔不同主题内容的水平线
2.代码格式：
例：
<h3>我是一个标题</h3>
<hr>
<p>我是一段文字我是一段文字我是一段文字我是一段文字</p>
显示：
我是一个标题
我是一段文字我是一段文字我是一段文字我是一段文字
3.语义：主题的分割转换
4.特点：
*单标签;
*在页面中显示一条水平线。
\
二、文本格式化标签
一）使用场景：
需要对文字添加加粗、倾斜、下划线等效果时。
二）代码格式及语义：
| 标签 | 语义化标签 | 语义 | css中相同效果属性 |
|---|---|---|---|
| < b >##< /b > | < strong >##< /strong > | 加粗 | font-weight: bloder; |
| < u >##< /u > | < ins >##< /ins > | 下划线 | text-decoration: underline; |
| < i >##< /i > | < em >##< /em > | 倾斜 | |
| < s >##< /s > | < del >##< /del > | 删除线 | text-decoration: line-through |
| < cite > | < block qupte>(左侧有线） | 引用 | |
三）标签语义化
实际开发项目中选择标签的原则：优先使用语义化标签。
原因：对人来说更好理解记忆，对机器来说更好解析
三、媒体标签
一）图片标签（< img >)
（< img src="" alt=""><标记名 属性>）
1.图片标签的src属性
属性名：src；
属性值：目标图片的路径；
注意事项：
*当前网页和目标在同一个文件夹中，路径直接写目标图片的名字即可（要带后缀名）；
*如果在其他文件夹中，记得./or../跳出文件夹选择；
*可以用网络图片，需填写图片的完整域名。
2.图片标签的alt属性
属性名：alt；
属性值：替换文本；
注意事项：
*当图片加载失败时才会显示出来的文字内容（图片路径错误时所显示的文字）
3.图片标签的title属性
属性名：title；
属性值：提示文本，当鼠标悬停在目标图片上时，会显示出来的文本。
注意事项：title属性不仅可以用于图片标签，还可用于其他标签。
代码格式：
<img src="" alt="图片不见了" title="这是一只猫">
4.图片标签的宽高属性（hight、width）
属性名：hight和width；
属性值：高度和宽度（数字 常用单位排序）
代码格式：
注意点：
*如果只设置了一张图片的高度而没有设宽度，那么其宽度则会根据高度自动等比例缩放；
*高宽设置不当，图片有可能会发生变形。
二）路径的介绍
使用场景：页面需要加载图片，需要通过路径找到对应的图片。
两种路径：绝对路径和相对路径。
1.绝对路径：
1）概念：
指目录下的绝对位置，可以直接达到目标位置，访问外网资源时（站外资源），只能使用绝对路径
2）书写格式1：协议://域名/目录
3）书写格式2：盘符:\目录
例：D:\day01\imges\1.jpg
2.相对路径：
1）概念：
当前文件出发寻找目标文件的过程(引用站内资源时，用相对路径)
2)相对路径分类：
同级目录、下级目录、上级目录
3）使用方法：
a.同级目录
访问同一文件夹中的另一b.html时：
例：要从a中访问b时：
<a href="./b.html"></a>
或：
<a href="b.html"></a>
b.上级目录
a访问根目录相同的c.html:
<a href="./../c.html"></a>
(注意：第一组./不可省略)
c.跳级1
a访问根目录相同的文件夹中的e.html:
<a href="./../002文件夹/e.html"></a>
d.跳级2
a访问根目录相同的文件夹中的文件夹中的d.html
<a href="./../002文件夹/003文件夹/d.html"></a>
e.跳级3
d访问a：
<a href="../../001文件夹/a.html"></a>
三）音频标签的介绍
1.使用场景：
在页面中插入音频
2.代码格式：
<audio src="" controls></audio>
3.常见属性：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件（播放钮进度条等） |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
4.注意事项：
音频标签目前只支持MP3、Wav、Ogg三种格式
四）视频标签的介绍：
1.使用场景：
在页面中插入视频
2.代码格式：
<video src="" controls></video>
3.常见属性：
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器需要配合muted实现静音播放） |
| loop | 循环播放 |
4.注意事项：
视频标签目前只支持MP4、WebM、Ogg三种格式
\
四、链接标签
一）介绍
1.使用场景：
点击之后从一个页面跳转到另一个页面
2.别名:
a标签、超链接
3.代码格式：
<a href="./目标网页.html">目标网页</a>">
4.特点：
1）是双标签，中间可以包裹内容；
2）实现跳转需要设置href属性；
3）a标签默认文字有下划线
想要取消可以在css中设置{text-decoration: none;}
4）a标签默认在从未点击过时文字颜色为蓝色，点击之后变为紫色（清除浏览器历史记录可恢复颜色）
想要重新设置字体颜色可在css中设置{color：red}
二）链接标签的href属性：
属性名：href
属性值：目标网页的路径
外部链接：< a href="www.baidu.com/">百度一下< /a >
内部链接：< a href="./目标网页.html">目标网页< /a >
三）链接标签的target属性：
属性名：target
属性值：目标网页的打开形式
作用：在a元素里增加target属性，可控制在点击超链接后，新的页面是否在新窗口中打开（写在body里）
取值：
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前标签页面中跳转（覆盖原网页） |
| _blank | 在新标签页面中跳转（保留原网页） |
代码格式：
<a href="http://www.baodu.com/" target="_blank">百度一下</a>
四）空连接（拓展补充）
1.使用场景：
开发中不确定该链接最终跳转位置时，用空连接占个位置，点击之后回到网页顶部
2.代码格式：
<a href="#">空连接</a>
\
