html5新语义化标签

(逆战班)HTML5新语义化标签

html5中多了很多新的语义化标签，他们和div类似，但是可以让人们更加理解结构，还可以针对特殊人群如盲人使用的屏幕阅读器，这些语义化标签相比传统标签更加友好。
下面列举一些新的语义化标签。

header ：页眉

一般用在结构的头部。

footer：页脚

一般用在结构的尾部。

main：主体

结构的主体部分

注：上述三个标签在一个页面中只能出现一次。

hgroup：标题组合

标题组合可以写在里面
例：
	<hgroup>
		<h1>大标题</h1>
		<h2>小标题</h2>
	</hgroup>

nav：导航

页面中的导航通常用到
例：
	<nav> 
		<ul>
			<li>	</li>
			<li>	</li>
		 </ul>
	</nav>

article：独立的内容

应用场景如：
论坛帖子
报纸文章
博客条目
用户评论

aside:辅助信息的内容

比如侧边栏等

section：区域

和div的功能和语义是一样的

figure：描述图像或视频

figcaption: 描述图像或视频的标题部分

上述两个标签可以合在一起用
例
<figure>
	<img src="./1.jpg" alt=" ">
	<figcaption>
		<h3>标题<h3>
		<p>描述文字<p>
	</figcation>
<figure>

datalist:选项列表

<datalist id="elem">
	<option value="a"></option>
	<option value="ab"></option>
</datalist>

details / summary ：文档细节 /文档标题

<details>
	<summary>HTML</summary>
	<p>超文本标记语言</p>
</details>

progress /meter ：定义进度条 /定义度量范围

<progress min="0" max="100" value="50"></progress>
<meter min="0" max="100" value="80" low="30" high="70"></meter>

time ：定义时间

<p今天是<time>3月3日</time></p>

<p今天是<time title="2月14日">情人节</time></p>

音频与视频

<audio> </audio>:音频，双标签
controls：显示控件
loop：循环播放
autoplay：自动播放，考虑到用户体验的问题，现在各大浏览器现在已经禁止
muted：静音
注：音频和视频的默认控件是隐藏的

注：如果想做出和qq音乐一样的效果，audio标签+隐藏控件（默认的，控件的样式用html+css模拟）+JavaScript 来实现交互功能。

<video></video>:视频
autoplay+muted：可以自动播放
object：cover ：可以让视频把容器铺满
注：默认情况下，视频是不能进行拉伸的，必须成比列。
为了支持多个设备文件的兼容问题，可以添加source  标签。