HTML5简明教程（二）新标签和新属性

HTML5新增了很多标签和属性，实现Web页面语义化，使页面可读性更强；增加Web表单功能，使表单更丰富更友好；还支持音频，视频，绘图等高级功能，如此一来，我们可以在不使用插件的情况下，展示出更牛逼的效果。

1. 页面语义化

在构建HTML页面时，div标签是做布局的首选（早期前端工程师喜欢用table元素，但是table渲染开销大，而且布局不灵活，所以建议只在构建表格时使用），利用div，可以把页面分为特定区域：页眉，页脚，侧边栏，导航等等。

但是，如果只看HTML文档，你是无法知道哪个div是导航区，哪个div是内容？

HTML5的新元素，可以表达出某些特定含义，那么，我们就能够通过HTML文档，读懂页面分区和内容；而且，这种语义化文档可以被屏幕阅读器或其他阅读工具读懂，帮助残疾人士无障碍访问页面；并且，搜索引擎通过语义化文档能够索引到更多信息，从而搜索结果更加准确。

总之，可以看到，语义化页面是HTML5一大亮点。

那么，现在都支持哪些语义元素呢？

(1)页面结构相关

都是块元素。

语义元素	说明
	表示文章。比如：新闻报道，论坛帖子，博客文章等
	表示独立于周围内容的一个完整内容块。比如：附录栏
和	表示一副插图。 是最外层元素， 用于标注插图的标题或描述信息
	页脚
	页眉，或者是标题块
	表示页面中重要的一组链接，一般用于导航栏
	表示增强型的标题，可以包含多个 / ...元素
	表示文档中的一个区块，或表示一组文档

(2)和文本描述相关

都是内联元素。

语义元素	说明
	标注日期和时间
	标注JavaScript返回值
	标注突出文本

2.Web表单

Web表单是前端开发中不可或缺也是非常重要的功能，HTML5为其增加了很多新属性，新元素，实现了需要JavaScript脚本才能够实现的功能。

(1) 新属性

属性	说明	使用
placeholder	通过占位符文本添加提示信息
autofocus	自动聚焦
required	表单验证：必填项
novalidate	关闭表单验证功能
contentEditable	支持富文本编辑

(2)新的输入控件

HTML5还支持了新的输入控件，都是应用在元素的type属性。

控件	说明
email	电子邮箱地址
url	网址
number	整数类型
range	滑动条
datetime/date/month/week/time	日期和时间
color	颜色
file	读取文件

注意，不同浏览器对其支持情况不同，页面表现形式也不同。

(3)新元素

元素	说明
datalist	显示输入建议
progress	任务进度条
meter	计量条

3. 高级功能

元素	说明	例子
	音频	"
	视频
	绘图

上面三个功能每一个都可以深入展开，尤其是canvas，它推动了HTML5小游戏开发，如今，已经有不少基于canvas的游戏引擎了。本文仅为介绍，不再过多讲解。

下一节：HTML5简明教程（三）使用CSS3

更多高阶内容，可移步《小专栏-娜姐聊前端》。