HTML5新增属性和标签
1、新增结构标签
2、新增属性
其实很多时候自己都会忘记用HTML5的一些标签，除了音视频这些，所以今天专门来巩固一下
1、新增结构标签
刚学前端三大件的时候，一直用div，span这些容器进行页面布局，但是有了HTML5之后，布局不用考虑那么多，一起看看吧。
< header >
标记一个页面或区域的头部
< nav >
导航栏
< section >
节（我觉得用书的节 翻译更合适）——大致表示某一个连续的、内容相关的区域
< saide >
标记为侧边栏
< article >
标记为主体部分
< footer >
标记为页面或区域的底部
<header>header</header> <section> <aside>aside</aside> <article>article</article> </section> <footer>footer</footer>
我的理解：
其实他们都是div，只不过，他们比div更加形象化（比如header，你一看就知道这里是页面头部内容，但是你写 < div class=“header” >，可能我们人乍一看没什么，但是电脑爬虫就不一样了，header会更友好），所以有需要的时候，尽量使用语义化的标签。
说到这里，HTML语义化是什么？
还是用我的理解来说，用正确的标签，做应该做的事。
比如 header标签，就表示标签里面的是页面头部内容，footer就负责页面底部内容
见名知 “ 作 用 ”
当然了，还有很多其他标签（上面只列举我觉得我可能常用的）
表单元素：
< datalist >——标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。
<form action=""> <input type="text" list="city"> <datalist id="city"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> </datalist> </form>
其他语义结构标签
< command > —— 定义命令按钮，比如单选按钮、复选框或按钮
< details > —— 用于描述文档或文档某个部分的细节
< dialog > —— 定义对话框，比如提示框
< summary > —— 标签包含 details 元素的标题
< figure > —— 规定独立的流内容（图像、图表、照片、代码等等）
< figcaption > —— 定义 < figure > 元素的标题
< mark > ——定义带有记号的文本
< progress > —— 定义任何类型的任务的进度
< time > —— 定义日期或时间
音视频标签
video（视频）
兼容性：
safari 支持mp4、不支持webm和ogv
ie8- 不支持 video 标签
ie9+ 支持 video 标签（但只支持 mp4 ）
<video 视频地址 src="http://vodkgeyttp8.vod.126.net/cloudmusic/MjQ3NDQ3MjUw/89a6a279dc2acfcd068b45ce72b1f560/533e4183a709699d566180ed0cd9abe9.mp4?wsSecret=c10a5d3580f11032fc133a97722baf05&wsTime=1642146321" autoplay="autoplay" 自动播放 controls="controls" 播放控件 loop="loop" 循环播放 width="500" 宽度 height="500" 高度 poster="..." 封面 muted> //其中loop设置循环 poster设置封面 muted静音
标记一个页面或区域的头部
< nav >
导航栏
< section >
节（我觉得用书的节 翻译更合适）——大致表示某一个连续的、内容相关的区域
< saide >
标记为侧边栏
< article >
标记为主体部分
< footer >
标记为页面或区域的底部
<header>header</header>
<section>
<aside>aside</aside>
<article>article</article>
</section>
<footer>footer</footer>
我的理解：
其实他们都是div，只不过，他们比div更加形象化（比如header，你一看就知道这里是页面头部内容，但是你写 < div class=“header” >，可能我们人乍一看没什么，但是电脑爬虫就不一样了，header会更友好），所以有需要的时候，尽量使用语义化的标签。
说到这里，HTML语义化是什么？
还是用我的理解来说，用正确的标签，做应该做的事。
比如 header标签，就表示标签里面的是页面头部内容，footer就负责页面底部内容
见名知 “ 作 用 ”
当然了，还有很多其他标签（上面只列举我觉得我可能常用的）
表单元素：
< datalist >——标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。
<form action="">
<input type="text" list="city">
<datalist id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</datalist>
</form>
其他语义结构标签
< command > —— 定义命令按钮，比如单选按钮、复选框或按钮
< details > —— 用于描述文档或文档某个部分的细节
< dialog > —— 定义对话框，比如提示框
< summary > —— 标签包含 details 元素的标题
< figure > —— 规定独立的流内容（图像、图表、照片、代码等等）
< figcaption > —— 定义 < figure > 元素的标题
< mark > ——定义带有记号的文本
< progress > —— 定义任何类型的任务的进度
< time > —— 定义日期或时间
音视频标签
video（视频）
兼容性：
safari 支持mp4、不支持webm和ogv
ie8- 不支持 video 标签
ie9+ 支持 video 标签（但只支持 mp4 ）
<video
视频地址
src="http://vodkgeyttp8.vod.126.net/cloudmusic/MjQ3NDQ3MjUw/89a6a279dc2acfcd068b45ce72b1f560/533e4183a709699d566180ed0cd9abe9.mp4?wsSecret=c10a5d3580f11032fc133a97722baf05&wsTime=1642146321"
autoplay="autoplay" 自动播放
controls="controls" 播放控件
loop="loop" 循环播放
width="500" 宽度
height="500" 高度
poster="..." 封面
muted>
//其中loop设置循环 poster设置封面 muted静音
audio（音频）
兼容性：
safari 支持 mp3 和 wav、不支持 ogg
chrome和opera不能自动播放 (静音情况下可以)
<audio src="http://m7.music.126.net/20220114162506/6b2da4d844615134943f768d5d565985/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3" autoplay="autoplay" controls="controls" loop="loop" width="500" height="500">
