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