HTML5新增了很多標(biāo)簽和屬性，實(shí)現(xiàn)Web頁面語義化壹粟，使頁面可讀性更強(qiáng)拜隧；增加Web表單功能，使表單更豐富更友好；還支持音頻洪添，視頻垦页，繪圖等高級(jí)功能，如此一來干奢，我們可以在不使用插件的情況下痊焊，展示出更牛逼的效果。
1. 頁面語義化
在構(gòu)建HTML頁面時(shí)忿峻，div標(biāo)簽是做布局的首選（早期前端工程師喜歡用table元素薄啥，但是table渲染開銷大，而且布局不靈活炭菌，所以建議只在構(gòu)建表格時(shí)使用）罪佳，利用div，可以把頁面分為特定區(qū)域：頁眉黑低，頁腳赘艳，側(cè)邊欄，導(dǎo)航等等克握。
但是蕾管，如果只看HTML文檔，你是無法知道哪個(gè)div是導(dǎo)航區(qū)菩暗，哪個(gè)div是內(nèi)容掰曾？
HTML5的新元素，可以表達(dá)出某些特定含義停团，那么旷坦，我們就能夠通過HTML文檔，讀懂頁面分區(qū)和內(nèi)容佑稠；而且秒梅，這種語義化文檔可以被屏幕閱讀器或其他閱讀工具讀懂，幫助殘疾人士無障礙訪問頁面舌胶；并且捆蜀，搜索引擎通過語義化文檔能夠索引到更多信息，從而搜索結(jié)果更加準(zhǔn)確幔嫂。
總之辆它，可以看到，語義化頁面是HTML5一大亮點(diǎn)履恩。
那么锰茉，現(xiàn)在都支持哪些語義元素呢？
(1)頁面結(jié)構(gòu)相關(guān)
都是塊元素切心。
| 語義元素 | 說明 |
|---|---|
| <article> | 表示文章洞辣。比如：新聞報(bào)道董饰，論壇帖子塔猾，博客文章等 |
| <aside> | 表示獨(dú)立于周圍內(nèi)容的一個(gè)完整內(nèi)容塊。比如：附錄欄 |
| <figure>和<figcaption> | 表示一副插圖。<figure>是最外層元素有梆，<figcaption>用于標(biāo)注插圖的標(biāo)題或描述信息 |
| <footer> | 頁腳 |
| <header> | 頁眉吨掌，或者是標(biāo)題塊 |
| <nav> | 表示頁面中重要的一組鏈接洒扎，一般用于導(dǎo)航欄 |
| <hgroup> | 表示增強(qiáng)型的標(biāo)題瓣履，可以包含多個(gè)<h1>/<h2>...元素 |
| <section> | 表示文檔中的一個(gè)區(qū)塊，或表示一組文檔 |
(2)和文本描述相關(guān)
都是內(nèi)聯(lián)元素材原。
| 語義元素 | 說明 |
|---|---|
| <time> | 標(biāo)注日期和時(shí)間 |
| <output> | 標(biāo)注JavaScript返回值 |
| <mark> | 標(biāo)注突出文本 |
(3)和圖片顯示相關(guān)
| 語義元素 | 說明 |
|---|---|
| <picture> | 根據(jù)某些條件顯示圖片 |
比如沸久，根據(jù)不同設(shè)備尺寸顯示不同的圖片：
<picture>
<source media="(min-width: 650px)" srcset="demo1.jpg">
<source media="(min-width: 465px)" srcset="demo2.jpg">
<img src="img_girl.jpg">
</picture>
再比如，在支持webp的瀏覽器上顯示webp圖片：
<picture>
<source srcset={img.webp} type="image/webp" />
<img src={defaultPic.png} />
</picture>
2.Web表單
Web表單是前端開發(fā)中不可或缺也是非常重要的功能余蟹，HTML5為其增加了很多新屬性卷胯，新元素，實(shí)現(xiàn)了需要JavaScript腳本才能夠?qū)崿F(xiàn)的功能威酒。
(1) 新屬性
| 屬性 | 說明 | 使用 |
|---|---|---|
| placeholder | 通過占位符文本添加提示信息 | <input type="text" placeholder="hi" /> |
| autofocus | 自動(dòng)聚焦 | <input type="text" autofocus /> |
| required | 表單驗(yàn)證：必填項(xiàng) | <input type="text" required /> |
| novalidate | 關(guān)閉表單驗(yàn)證功能 | <form id="myForm" novalidate> |
| contentEditable | 支持富文本編輯 | <div id="myEditor" contentEditable> |
(2)新的輸入控件
HTML5還支持了新的輸入控件窑睁，都是應(yīng)用在<input type="xxx" />元素的type屬性。
| 控件 | 說明 |
|---|---|
| 電子郵箱地址 | |
| url | 網(wǎng)址 |
| number | 整數(shù)類型 |
| range | 滑動(dòng)條 |
| datetime/date/month/week/time | 日期和時(shí)間 |
| color | 顏色 |
| file | 讀取文件 |
注意葵孤，不同瀏覽器對(duì)其支持情況不同担钮，頁面表現(xiàn)形式也不同。
(3)新元素
| 元素 | 說明 |
|---|---|
| datalist | 顯示輸入建議 |
| progress | 任務(wù)進(jìn)度條 |
| meter | 計(jì)量條 |
3. 高級(jí)功能
| 元素 | 說明 | 例子 |
|---|---|---|
| <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> |
上面三個(gè)功能每一個(gè)都可以深入展開尤仍，尤其是canvas箫津，它推動(dòng)了HTML5小游戲開發(fā)，如今宰啦，已經(jīng)有不少基于canvas的游戲引擎了苏遥。本文僅為介紹，不再過多講解赡模。
下一節(jié)：HTML5簡明教程（三）使用CSS3
