HTML5新增了很多标签和属性，实现Web页面语义化，使页面可读性更强；增加Web表单功能，使表单更丰富更友好；还支持音频，视频，绘图等高级功能，如此一来，我们可以在不使用插件的情况下，展示出更牛逼的效果。
1. 页面语义化
在构建HTML页面时，div标签是做布局的首选（早期前端工程师喜欢用table元素，但是table渲染开销大，而且布局不灵活，所以建议只在构建表格时使用），利用div，可以把页面分为特定区域：页眉，页脚，侧边栏，导航等等。
但是，如果只看HTML文档，你是无法知道哪个div是导航区，哪个div是内容？
HTML5的新元素，可以表达出某些特定含义，那么，我们就能够通过HTML文档，读懂页面分区和内容；而且，这种语义化文档可以被屏幕阅读器或其他阅读工具读懂，帮助残疾人士无障碍访问页面；并且，搜索引擎通过语义化文档能够索引到更多信息，从而搜索结果更加准确。
总之，可以看到，语义化页面是HTML5一大亮点。
那么，现在都支持哪些语义元素呢？
(1)页面结构相关
都是块元素。
| 语义元素 | 说明 |
|---|---|
| <article> | 表示文章。比如：新闻报道，论坛帖子，博客文章等 |
| <aside> | 表示独立于周围内容的一个完整内容块。比如：附录栏 |
| <figure>和<figcaption> | 表示一副插图。<figure>是最外层元素，<figcaption>用于标注插图的标题或描述信息 |
| <footer> | 页脚 |
| <header> | 页眉，或者是标题块 |
| <nav> | 表示页面中重要的一组链接，一般用于导航栏 |
| <hgroup> | 表示增强型的标题，可以包含多个<h1>/<h2>...元素 |
| <section> | 表示文档中的一个区块，或表示一组文档 |
(2)和文本描述相关
都是内联元素。
| 语义元素 | 说明 |
|---|---|
| <time> | 标注日期和时间 |
| <output> | 标注JavaScript返回值 |
| <mark> | 标注突出文本 |
2.Web表单
Web表单是前端开发中不可或缺也是非常重要的功能，HTML5为其增加了很多新属性，新元素，实现了需要JavaScript脚本才能够实现的功能。
(1) 新属性
| 属性 | 说明 | 使用 |
|---|---|---|
| placeholder | 通过占位符文本添加提示信息 | <input type="text" placeholder="hi" /> |
| autofocus | 自动聚焦 | <input type="text" autofocus /> |
| required | 表单验证：必填项 | <input type="text" required /> |
| novalidate | 关闭表单验证功能 | <form id="myForm" novalidate> |
| contentEditable | 支持富文本编辑 | <div id="myEditor" contentEditable> |
(2)新的输入控件
HTML5还支持了新的输入控件，都是应用在<input type="xxx" />元素的type属性。
| 控件 | 说明 |
|---|---|
| 电子邮箱地址 | |
| url | 网址 |
| number | 整数类型 |
| range | 滑动条 |
| datetime/date/month/week/time | 日期和时间 |
| color | 颜色 |
| file | 读取文件 |
注意，不同浏览器对其支持情况不同，页面表现形式也不同。
(3)新元素
| 元素 | 说明 |
|---|---|
| datalist | 显示输入建议 |
| progress | 任务进度条 |
| meter | 计量条 |
3. 高级功能
| 元素 | 说明 | 例子 |
|---|---|---|
| <audio> | 音频 | <audio src="a.mp3" controls autoplay loop></audio>" |
| <video> | 视频 | <video src="a.mp4" controls width="300" height="200"></video> |
| <canvas> | 绘图 | <canvas id="drawing" width="300" height="200"></canvas> |
上面三个功能每一个都可以深入展开，尤其是canvas，它推动了HTML5小游戏开发，如今，已经有不少基于canvas的游戏引擎了。本文仅为介绍，不再过多讲解。
微信公众号：
网友评论