文章開(kāi)篇之前我們先了解一下什么是 html5，百度上是這樣定義 html5 的：萬(wàn)維網(wǎng)的核心語(yǔ)言、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言（HTML）的第五次重大修改。
其實(shí)說(shuō)白了 html5 也就是人為定義的一些規(guī)則和新的 api 的集合。下面我就介紹一些開(kāi)發(fā)常用的 html5 新特性：
一：canvas 標(biāo)簽
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>渲染結(jié)果：
通過(guò)這個(gè)元素你可以繪制你想要的圖案。
二：video標(biāo)簽??
<video src="視頻地址" controls="controls" autoplay="autoplay" >
your browser does not support the video tag //可以在開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示出不支持該標(biāo)簽的信息。
</video>video 標(biāo)簽具有以下屬性：
1.autoplay:如果出現(xiàn)該屬性，則視頻在就緒之后馬上播放
2.controls:如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕
3.height：設(shè)置視頻播放器高度
4.loop：如果出現(xiàn)該屬性，則會(huì)重復(fù)播放
5.preload：如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用“autoplay”，則忽略該屬性。
6.src：視頻地址
7.width：設(shè)置視頻播放器寬度
三：localStorage 和 sessionStorage
Web Storage 的概念和 cookie 相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie 的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候 Cookie 都會(huì)被發(fā)送過(guò)去，這樣無(wú)形中浪費(fèi)了帶寬，另外 cookie 還需要指定作用域，不可以跨域調(diào)用。
1.localStorage: 用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
2.sessionStorage: 用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷(xiāo)毀。因此 sessionStorage 不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。
Web Storage 擁有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端開(kāi)發(fā)者自己封裝 setCookie，getCookie。
sessionStorage.setItem("name", "三十億少女的夢(mèng)");
console.log(sessionStorage.getItem("name")); //三十億少女的夢(mèng)四：語(yǔ)義化標(biāo)簽
在 HTML5 出來(lái)之前，我們用 div 構(gòu)建頁(yè)面，但是這些 div 都沒(méi)有實(shí)際意義。我們只能通過(guò) id 等屬性認(rèn)為賦予它一些身份。為了便于開(kāi)發(fā)者觀察和 seo（搜索引擎優(yōu)化），html5 推出了這些語(yǔ)義化標(biāo)簽。
header：代表“網(wǎng)頁(yè)”或“section”的頁(yè)眉。
footer：代表“網(wǎng)頁(yè)”或“section”的頁(yè)腳，通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。
hgroup：代表“網(wǎng)頁(yè)”或“section”的標(biāo)題，當(dāng)元素有多個(gè)層級(jí)時(shí)，該元素可以將 h1 到 h6 元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合
nav：元素代表頁(yè)面的導(dǎo)航鏈接區(qū)域。用于定義頁(yè)面的主要導(dǎo)航部分。
aside：被包含在 article 元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標(biāo)簽、名次解釋等。
section：代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個(gè)頁(yè)面里的分組。
article：最容易跟 section 和 div 容易混淆，其實(shí) article 代表一個(gè)在文檔，頁(yè)面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開(kāi)發(fā)者獨(dú)立開(kāi)發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評(píng)論，一個(gè)互動(dòng)的 widget 小工具。（特殊的section）
五：新表單控件
html5 中添加了 date(日期選擇)、time(時(shí)間選擇)、email(郵箱地址)、url（鏈接）等表單控件，我個(gè)人非常喜歡這些添加。比如 email 控件，以前我們沒(méi)有這個(gè)控件的時(shí)候要判斷用戶輸入的是不是 email 格式只能通過(guò)js正則表達(dá)式來(lái)判斷，但 h5 之后只用在 input 的 type 屬性寫(xiě)上 email 就可以了，但這只是基本的判斷不能保證百分百過(guò)濾，為了安全，后臺(tái)還是要進(jìn)行 email 格式判斷的。
<input type="email" />
六：去掉 script 和 link 標(biāo)簽里的 type 屬性
html5 之后你的 script 和 link 不用再加 type 屬性，一樣可以工作正常，但是為了不出差錯(cuò)，最好還是加上。
七：contenteditable 屬性
你的任何 dom 節(jié)點(diǎn)只要加上 contenteditable="true"就可以變得可編輯，也是一個(gè)很棒的屬性添加,用這個(gè)你可以模擬 textarea。
八：input 添加了 placeholder，required,autofocus,pattern 等屬性
<input type="text" placeholder="請(qǐng)輸入姓名" />
<!--當(dāng)這個(gè)輸入框?yàn)榭諘r(shí)框內(nèi)顯示：請(qǐng)輸入姓名 -->
<input type="text" required /> <!--輸入框?yàn)楸靥睿駝t不能提交表單 -->
<input type="text" autofocus /> <!--進(jìn)入頁(yè)面，自動(dòng)聚焦到這個(gè)input -->
<input type="text" name="country_code" pattern="[A-z]{3}"> <!--輸入值必須與正則匹配-->
九：mark標(biāo)簽
使用 mark 標(biāo)簽可以使你的內(nèi)容有醒目的標(biāo)記，從 mark 這個(gè)單詞相信你就能猜出這個(gè)標(biāo)簽大概用途
十：pageInput 創(chuàng)建滑塊
HTML5 引用的 range 類(lèi)型可以創(chuàng)建滑塊，它接受 min, max, step 和 value 屬性，可以使用 css 的 :before 和 :after 來(lái)顯示 min 和 max 的值 ，但是顯示的不是很友善。
<style>
input[type=range]:before {
content: attr(min);
padding-right: 5px;
}
?
input[type=range]:after {
content: attr(max);
padding-left: 5px;}
}
</style>
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ />
