今天我们结合之前上传的知识资源来回顾学习的Html5前端知识，与大家共勉，一起学习。
目录
介绍
了解
注释
标签结构
排版标签
标题标签
编辑
段落标签
编辑
换⾏标签
编辑
⽔平分割线
⽂本格式化标签
媒体标签
绝对路径
相对路径
音频标签
格式
编辑
注意点
视频标签
格式
注意点
媒体标签的注意点
连接标签
介绍
格式
注意点
总结
介绍
HTML5是“HyperText Markup Language 5”的缩写，即超文本标记语言第五版，是构建以及呈现互联网内容的一种语言方式，是互联网的下一代标准，也是目前Web开发中最广泛使用的技术之一。HTML5是HTML的第五次重大修改和扩展，它引入了新的元素、属性和行为，为Web开发提供了更丰富的功能和更好的用户体验。
HTML5引入了许多新的语义化标签，这些标签使得网页的结构更加清晰，有利于搜索引擎优化。
了解
注释
注释可供⾃⼰和其他程序员阅读，并为阅读代码提供提示，且注释不会被执行。其基本格式如下：
<!--
以下是一个被注释的代码块，它不会被执行或显示。
<p>这段文本将不会显示在网页上。</p>
-->标签结构
标签结构图：开始标签+包裹内容+结束标签。
说明：成对出现的标签叫双标钱，例如最基础的p标签；其余的叫单标签，例如强制换行标签br标签。<>包裹的叫标签名。
标签有两种关系，分别是⽗⼦关系（嵌套关系）和兄弟关系（并列关系）。关系示例图如下所示：
排版标签
排版标签一共有四种，分别是标题、段落、换⾏、⽔平分割线。
标题标签
标题标签有h1-h6六级标签，重要程度依次递减，它的三个特点如下：
- ⽂字⾃动加粗
- ⽂字都会变⼤，且逐级减⼩
- 独占⼀⾏
六级标签我们使用六句话为大家展示他们的小区别：
<h1>这是一个h1标签，我很大对不对</h1>
<h2>这是一个h2标签，我小一点，但是我也不差</h2>
<h3>这是一个h3标签，中等吧哈哈哈</h3>
<h4>这是一个h4标签，虽然不及以上但是也不能阻挡我要三连的决心</h4>
<h5>这是一个h5标签，嗯</h5>
<h6>这是一个h6标签，麻雀虽小 五脏俱全</h6>
段落标签
段落标签主要是<p></p>，段落间存在空隙，每个段落独占⼀⾏，但是同⼀个段落如果顶满⼀⾏则会⾃动换⾏。正如大家所见，下面这是一段非常长的文字，这个足以向大家展示段落标签的换行特性：
<p>我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢</p>
换⾏标签
换行标签主要是<br>标签，是单标签，其使用方法非常简单，如下展示：
<p>我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大<br>家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢</p>
<br>
<p>这里换行了，没换行打我</p>
⽔平分割线
水平分割线主要包含<hr>标签，在⻚⾯中显示⼀条⽔平线且为单标签。
<p>我是来自CSDN的PleaSure乐事</p>
<hr>
<p>这里换行了，没换行打我</p>
⽂本格式化标签
文本格式化标签主要有三种，分别是加粗、下划线、倾斜、删除线四种，使⽤时不强制换⾏。其代码样式和具体样例展示如下：
<p><b>我是来自</b>的<u>PleaSure乐事</u>，<i>可以喜欢我</i>，<s>谢谢！</s></p>
媒体标签
在使用媒体标签以前，我们需要先了解绝对路径和相对路径的概念。
绝对路径
绝对路径是指⽂件下的绝对位置，可以直接到达⽬标位置，通常从盘符开始（盘符：c盘、d盘等）或者⼀个完整的⽹址（⽹址⼀般不⽤），但是网址一般不用。
相对路径
相对路径是指从当前⽂件开始出发找⽬标⽂件，分别有同级⽬录、下级⽬录、上级⽬录。
同级目录
- 可以直接写文件名
- 可以用./文件名的形式寻找
下级目录
- 直接使用文件名/图片名的形式
上级目录
- ⽤../返回上级⽬录+图⽚名
音频标签
格式
音频标签的格式如下：<audio src="⾳频地址" controls autoplay loop> </audio>，是一个货真价实的双标签，可以使用controls、autoplay、loop、volume来控制循环播放等，其中src的引号部分可以换成任何你想要的音频的地址，地址的书写方式可以参考上方的绝对路径和相对路径。
- controls是显示播放的控件，⼿动播放不是⾃动播放
- autoplay是⾃动播放，但是部分浏览器不⽀持⾃动播放，⼀般不使⽤
- loop是循环播放的控件
- volume是控制⾳量的空间，范围0-1
<audio src="李荣浩-年少有为.mp3" controls autoplay loop> </audio>
注意点
⾳频标签⽬前仅⽀持MP3、Wav、Ogg三种格式。
视频标签
格式
视频标签与音频标签类似，格式为<video src="⾳频地址" controls autoplay loop> </vedio>，同样也包含controls、autoplay、loop、volume这四个功能可以选择。需要注意的是autoplay在⾕歌浏览器中需要配合muted静⾳播放使⽤。
<video src="video.mp4" controls autoplay loop></video>
注意点
- ⽬前主要适⽤MP4、WebM、Ogg三种格式。
- poster是video的独有属性，但视频不可⽤时向⽤户展示的替代图⽚，从⽽防⽌视频不可⽤⻚⾯⼀⽚空⽩的现象
- 可以⽤width和height来设置视频的宽⾼，否则使⽤默认⼤⼩
媒体标签的注意点
preload表明是否需要预先加载，默认是⾃动加载，若不想预先加载，则复制none。
source让视频、⾳频有planB，有可以备选的视频、⾳频。
连接标签
介绍
连接标签主要指超链接，也叫a标签、锚标签点击后会实现跳转，是双标签。
格式
<a href="⽬标⽹⻚的路径" target=“跳转形式”>⼀些⽂字</a>
可以在⽬录当中通过相对路径跳转，也可以⽤⽹址进⾏跳转。如果实在不知道写⼀个#代表空链接，等知道了以后再更换掉。
<a href="https://www.csdn.net">访问CSDN</a>
<a href="index.html">访问个人网页</a>
在target当中，一般可以写的东西如下：
_self：默认值。在当前浏览器窗口或标签页中打开链接。_blank：在新浏览器窗口或新标签页中打开链接。这是最常用的非默认值，因为它允许用户在当前浏览会话中保持当前页面不变，同时打开一个新的页面。_parent：在父框架集中打开链接。如果当前页面没有被嵌入框架中，这个值的效果和_self相同。_top：在顶层框架中打开链接。这意味着如果当前页面在框架中，链接将在整个浏览器窗口中打开，移除所有框架。
注意点
可以在⽬录当中通过相对路径跳转，也可以⽤⽹址进⾏跳转。如果在href当中实在不知道写⼀个#代表空链接，等知道了以后再更换掉。
总结
今天为大家介绍了如上的知识点，下篇我也将在不久的将来完成撰写然后放出，希望对大家有所帮助，也希望大家可以留下点赞、收藏、关注和评论，这对我真的很重要，非常感谢！
