HTML5新特性

摘要：本文主要介绍了HTML5的一些新特性。

1 简介

HTML5是新一代的HTML标准，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5在狭义上是指新一代的HTML标准，在广义上是指整个前端。

官网地址：

W3C官网：https://www.w3.org/TR/html/index.html
WHATWG官网：https://whatwg-cn.github.io/html/multipage

优势：

针对JavaScript新增了很多可操作的接口。
新增了一些布局元素和全局属性。
新增了多媒体元素，可以很好的替代Flash。
更加侧重语义化，对于SEO更友好。
可移植性好，可以大量应用在移动设备上。

2 新增元素

2.1 新增布局元素

新增的元素：

标签名	说明	单双
header	整个页面，或部分区域的头部	双标签
footer	整个页面，或部分区域的底部	双标签
nav	导航	双标签
article	文章	双标签
section	章节	双标签
aside	侧边栏	双标签

2.2 新增标量测量元素

新增的元素：

标签名	说明	单双
meter	定义已知范围内的标量测量，也被称为尺度	双标签

常用属性：

属性名	作用	取值
high	规定高值	数值
low	规定低值	数值
max	规定最大值	数值
min	规定最小值	数值
optimum	规定最优值	数值
value	规定当前值	数值

2.3 新增进度显示元素

新增的元素：

标签名	说明	单双
progress	显示某个任务完成的进度的指示器，一般用于表示进度条	双标签

常用属性：

属性名	作用	取值
max	规定目标值	数值
value	规定当前值	数值

2.4 新增列表元素

新增的元素：

标签名	说明	单双
details	用于展示问题和答案，或对专有名词进行解释	双标签
summary	写在`details`元素的里面，用于指定问题或专有名词	双标签

2.5 新增文本元素

新增的元素：

标签名	说明	单双
ruby	包裹需要注音的文字	双标签
rt	注音，写在`ruby`元素里面	双标签
mark	标记文字，建议用于标记搜索结果中的关键字	双标签

3 表单功能增强

3.1 新增通用属性

新增属性：

属性名	作用	取值
placeholder	提示文字，适用于文字输入类的表单控件	文字
required	是否必填，适用于除按钮外其他表单控件，表单提交时会验证	无
autofocus	自动获取焦点，适用于所有表单控件，对焦点时首个有效	无
autocomplete	自动完成，适用于文字输入类的表单控件，密码输入框和多行输入框不可用	on：默认值，自动完成 off：不自动完成
pattern	填写正则表达式校验输入内容是否符合表达式，适用于文本输入类表单控件，往往与`required`属性配合	正则表达式

3.2 输入框类型增强

input元素新增类型，对type属性新增的可选值：

email：邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
url：URL类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
number：数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
search：搜索类型的输入框，表单提交时不会验证格式。
tel：电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘。
range：范围选择框，默认值为50，表单提交时不会验证格式。
color：颜色选择框，默认值为黑色，表单提交时不会验证格式。
date：日期选择框，默认值为空，表单提交时不会验证格式。
month：月份选择框，默认值为空，表单提交时不会验证格式。
week：周选择框，默认值为空，表单提交时不会验证格式。
time：时间选择框，默认值为空，表单提交时不会验证格式。
datetime-local：日期时间选择框，默认值为空，表单提交时不会验证格式。

3.3 新增表单属性

form元素新增属性：

属性名	作用	取值
novalidate	表单提交的时候不再进行验证	无

3.4 新增下拉框元素

下拉框增强，可以在输入框选择下拉选项。

新增的元素：

标签名	说明	单双
datalist	用于搜索框的关键字提示，类似`select`元素	双标签

需要配合input元素的list属性使用。示例：

html

<form action="#">
  请选择省份：<input type="text" list="province">
  <datalist id="province">
    <option value="黑">黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉">吉林</option>
    <option value="粤">广东</option>
  </datalist>
</form>

4 支持多媒体功能

新增的元素：

标签名	说明	单双
audio	表示音频	双标签
video	表示视频	双标签

audio元素常用属性：

属性名	作用	取值
src	音频URL地址	URL地址
controls	向用户显示音频控件，比如播放和暂停按钮	无
muted	音频静音播放	无
autoplay	音频自动播放，媒体参与度超过阈值时才会有效	无
loop	音频循环播放	无
preload	音频预加载，如果使用了`autoplay`属性，则忽略该属性	none：不预加载音频 metadata：仅预先获取音频的元数据，例如长度 auto：可以下载整个音频文件，即使用户不希望使用它

video元素常用属性：

属性名	作用	取值
src	视频URL地址	URL地址
width	设置视频播放器的宽度	长度值
height	设置视频播放器的高度	长度值
controls	向用户显示视频控件，比如播放和暂停按钮	无
muted	视频静音播放	无
autoplay	视频自动播放，媒体参与度超过阈值时才会有效	无
loop	视频循环播放	无
poster	视频封面	URL地址
preload	视频预加载，如果使用了`autoplay`属性，则忽略该属性	none：不预加载视频 metadata：仅预先获取视频的元数据，例如长度 auto：可以下载整个视频文件，即使用户不希望使用它

媒体参与度：

启动autoplay属性并不能自动播放，还需要判断媒体参与度。
媒体参与度指的是用户和网页媒体的交互程度，媒体参与度超过阈值以后，才会在启动autoplay属性的前提下激活自动播放。
媒体参与度查询网址：
媒体参与度查询

5 新增全局属性

新增属性：

属性名	作用	取值
contenteditable	表示元素是否可被用户编辑	true：可编辑 false：不可编辑
draggable	表示元素可以被拖动	true：可拖动 false：不可拖动
hidden	隐藏元素	无
spellcheck	规定是否对元素进行拼写和语法检查	true：检查 false：不检查
contextmenu	规定元素的上下文菜单，在用户鼠标右键点击元素时显示	无
data-*	用于存储页面的私有定制数据	定制数据

6 兼容性处理

添加元信息，让浏览器处于最优渲染模式：

html

<!-- 设置IE总是使用最新的文档模式进行渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- 优先使用webkit内核（Chromium）进行渲染，针对360等壳浏览器 -->
<meta name="renderer" content="webkit">

使用html5shiv.js让低版本浏览器认识H5元素，但某些元素仍然不能被低版本浏览器识别：

html

1
2
3

<!--[if lt IE 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

扩展：

lt：小于
lte：小于等于
gt：大于
gte：大于等于
!：逻辑非

示例：

html

<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]>仅IE8以上可见<![endif]-->
<!--[if lt IE 8]>仅IE8以下可见<![endif]-->
<!--[if gte IE 8]>IE8及以上可见<![endif]-->
<!--[if lte IE 8]>IE8及以下可见<![endif]-->
<!--[if !IE 8]>非IE8的IE可见<![endif]-->