HTML5 中的一些有趣的新特性：
- 用于繪畫的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支持
- 新的特殊內(nèi)容元素，比如 article、footer吕嘀、header胡诗、nav旧找、section
- 新的表單控件究驴，比如 calendar、date夹攒、time、email胁塞、url咏尝、search
<!DOCTYPE html>
中文網(wǎng)頁需要使用 <meta charset="utf-8">
補充DOCTYPE文檔解析類型：標(biāo)準(zhǔn)模式是根據(jù)W3C標(biāo)準(zhǔn)進(jìn)行文檔解析，怪異模式是根據(jù)瀏覽器自己的標(biāo)準(zhǔn)進(jìn)行文檔解析啸罢。
新的語義和結(jié)構(gòu)元素
<article> 定義頁面獨立的內(nèi)容區(qū)域编检。
<aside> 定義頁面的側(cè)邊欄內(nèi)容。
<header> 定義了文檔的頭部區(qū)域
<footer> 定義 section 或 document 的頁腳扰才。
<nav> 定義導(dǎo)航鏈接的部分允懂。
<section> 定義文檔中的節(jié)（section、區(qū)段）衩匣。
<time> 定義日期或時間蕾总。
<canvas> 標(biāo)簽定義圖形粥航，比如圖表和其他圖像。該標(biāo)簽基于 JavaScript 的繪圖 API
新多媒體元素
[<audio>] | 定義音頻內(nèi)容 |
[<video>] | 定義視頻（video 或者 movie）
[<source>]定義多媒體資源 <video> 和 <audio>
新表單元素
<datalist> 定義選項列表生百。請與 input 元素配合使用該元素递雀，來定義 input 可能的值
詳細(xì)說明：
canva
一個畫布在網(wǎng)頁中是一個矩形框，通過 <canvas> 元素來繪制.
注意: 默認(rèn)情況下 <canvas> 元素沒有邊框和內(nèi)容置侍。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
注意: 標(biāo)簽通常需要指定一個id屬性 (腳本中經(jīng)常引用), width 和 height 屬性定義的畫布的大小.提示:你可以在HTML頁面中使用多個 <canvas> 元素.使用 style 屬性來添加邊框
canvas 元素本身是沒有繪圖能力的映之。所有的繪制工作必須在 JavaScript 內(nèi)部完成適合圖像密集型的游戲。
內(nèi)聯(lián)svg
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用于定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有損失
SVG 是一種使用 XML 描述 2D 圖形的語言蜡坊。
而Canvas 通過 JavaScript 來繪制 2D 圖形杠输。
適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
拖放（Drag 和 Drop）
具體代碼查看 http://www.runoob.com/html/html5-draganddrop.html
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 定義一個框
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> 定義一張圖片
1.設(shè)置元素為可拖放 首先，為了使元素可拖動秕衙，把 draggable 屬性設(shè)置為 true ：
<img draggable="true">
2.拖動什么 - ondragstart 和 setData()
ondragstart 屬性調(diào)用了一個函數(shù)蠢甲，drag(event)，它規(guī)定了被拖動的數(shù)據(jù)据忘。
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值
3.放到何處 - ondragover
ondragover 事件規(guī)定在何處放置被拖動的數(shù)據(jù)鹦牛。
默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中勇吊。如果需要設(shè)置允許放置曼追，我們必須阻止對元素的默認(rèn)處理方式。
這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
4.進(jìn)行放置 - ondrop
ondrop 屬性調(diào)用了一個函數(shù)汉规，drop(event)
調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)礼殊。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。
被拖數(shù)據(jù)是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標(biāo)元素）中
Video(視頻)
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
您的瀏覽器不支持Video標(biāo)簽针史。
<video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg:
MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
[<video>] 定義一個視頻
[<source>] 定義多種媒體資源,比如 <video> 和<audio>
[<track>] 定義在媒體播放器文本軌跡
Audio(音頻)
<audio controls> control 屬性供添加播放晶伦、暫停和音量控件。
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素啄枕。
</audio>
input類型
color 類型用在input字段主要用于選取顏色
從拾色器中選擇一個顏色: <input type="color" name="favcolor">
date 類型允許你從一個日期選擇器選擇一個日期
生日: <input type="date" name="bday">
number 類型用于應(yīng)該包含數(shù)值的輸入域
數(shù)量 ( 1 到 5 之間 ): <input type="number" name="quantity" min="1" max="5">
maxlength 規(guī)定輸入字段的最大字符長度 value 規(guī)定輸入字段的默認(rèn)值
url 類型用于應(yīng)該包含 URL 地址的輸入域婚陪。在提交表單時，會自動驗證 url 域的值频祝。
添加您的主頁: <input type="url" name="homepage">
input 表單屬性
<input> pattern 屬性 描述了一個正則表達(dá)式用于驗證 <input> 元素的值泌参。
適用于以下類型的 <input> 標(biāo)簽: text, search, url, tel, email, 和 password.
只能包含三個字母的文本域：
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input> placeholder 屬性
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值常空。
適用于以下類型的 <input> 標(biāo)簽：text, search, url, telephone, email 以及 password
<input> required 屬性 required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）及舍。
適用于以下類型的 <input> 標(biāo)簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file
什么是語義元素?
一個語義元素能夠清楚的描述其意義給瀏覽器和開發(fā)者。
無語義 元素實例: <div> 和 <span> - 無需考慮內(nèi)容.
語義元素實例: <form>, <table>, and <img> - 清楚的定義了它的內(nèi)容.
<section> 元素 標(biāo)簽定義文檔中的節(jié)（section窟绷、區(qū)段）锯玛。比如章節(jié)、頁眉、頁腳或文檔中的其他部分攘残。
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<article> 元素 標(biāo)簽定義獨立的內(nèi)容拙友。
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(縮寫為 IE9 )在2011年3月14日21:00 發(fā)布。</p>
</article>
<nav> 標(biāo)簽定義導(dǎo)航鏈接的部分歼郭。
<nav> 元素用于定義頁面的導(dǎo)航鏈接部分區(qū)域遗契，但不是所有的鏈接都需要包含在 <nav> 元素中。
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
</nav>
<aside> 標(biāo)簽定義頁面主區(qū)域內(nèi)容之外的內(nèi)容（比如側(cè)邊欄）
aside 標(biāo)簽的內(nèi)容應(yīng)與主區(qū)域的內(nèi)容相關(guān).
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<header>元素描述了文檔的頭部區(qū)域病曾，在頁面中你可以使用多個<header> 元素.
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9(縮寫為 IE9 )是在2011年3月14日21:00發(fā)布的</p>
</article>
<footer> 元素描述了文檔的底部區(qū)域.文檔中你可以使用多個 <footer>元素.
一個頁腳通常包含文檔的作者牍蜂，著作權(quán)信息，鏈接的使用條款泰涂，聯(lián)系信息等
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
讓這些塊及元素在所有版本的瀏覽器中生效鲫竞，你需要在樣式表文件中設(shè)置一下屬性
header, section, footer, aside, nav, article, figure
{
display: block;
}
代碼規(guī)范
文檔類型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
推薦使用小寫字母屬性名:
同時使用大小寫是非常不好的習(xí)慣。
你不一定要關(guān)閉所有元素 (例如 <p> 元素)逼蒙，但我們建議每個元素都要添加關(guān)閉標(biāo)簽从绘。
屬性值我們推薦使用引號:
如果屬性值含有空格需要使用引號。
圖片：
通常使用 alt 屬性是牢。 在圖片不能顯示時僵井，它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
等號和空格：
推薦少用空格:<link rel="stylesheet" href="styles.css">
空行和縮進(jìn)：
為每個邏輯功能塊添加空行驳棱，這樣更易于閱讀批什。
縮進(jìn)使用兩個空格，不建議使用 TAB社搅。
表格實例：
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
列表：
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
注釋可以寫在 <!-- 和 --> 中:
樣式表使用簡潔的語法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js">
