HTML5新增的属性和标签

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静音

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">