HTML5中新语义化标签

HTML5中新增的语义化标签主要有：

header —>定义当前页面的表头
footer —>定义页面的页脚
main —>页面主体
注：header footer main 语义化标签在一个页面中只能出现一次

hgroup —>标题组合，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来
nav —>导航，在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等）
article —>显示一个独立的文章内容,如论坛帖子，网站新闻，报纸文章 ，博客条目，用户评论等
aside —> 辅助信息的内容
section —> 区域 , 跟div的功能以及语义是一样的，可以用于广告，成组的链接，侧边栏等
figure —> 描述图像或视频
figcaption —> 描述图像或视频的标题部分
figure和figcaption一般一起使用，例如

<figure>
	 <figcaption>这是一张图片</figcaption>
	 <img src="pic.jpg" alt“ ” >
   </figure>

datalist —> 选项列表
涉及到的语法：list id value …

<input type="text" list="elems">
<datalist id="elems">
      <option value="a"></option>
      <option value="ab"></option>
      <option value="abc"></option>
      <option value="abcd"></option>
      <option value="apple"></option>
      <option value="around"></option>
</datalist>

details / summary —> 文档细节 / 文档标题
相关语法：open属性

    <details open>
            <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>

mark —>带有记号的文本

音频与视频

autio：音频 双标签
controls 显示控件
loop：循环播放
autoplay：自动播放（ 很多浏览器已经禁止这个功能，因为考虑到用户体验的问题）
muted：静音
video：视频 双标签
object-fit:cover 可以让视频覆盖整个父容器
注：音频和视频的默认控件是隐藏的
如果想做出和QQ音乐一样的效果：audio标签+隐藏控件（默认的，控件的样式用过HTML+CSS）+Java Script来实现交互功能
在视频中，可以通过autoplay + muted可以在静音的情况下播放
为了能够支持多个备选文件的兼容支持，可以配合source标签

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

新的input控件

email：电子邮件地址输入框
url：网址输入框
number：数值输入框
range：滑动条
data / month / week：日期控件
search：搜索框（跟普通框多一个关闭按钮）
color：颜色控件
tel：电话号码输入框（ 跟普通框的区别，在移动端会调动手机的键盘）
time：时间控件