HTML5 是對 HTML 標準的第五次修訂

HTML5
HTML5 是對 HTML 標準的第五次修訂。其主要的目標是將互聯網語義化，以便更好地被人類和機器閱讀，并同時提供更好地支持各種媒體的嵌入。HTML5 的語法是向后兼容的。現在國內普遍說的 H5 是包括了 CSS3，JavaScript 的說法（嚴格意義上說，這么叫并不合適，但是已經這么叫開了，就將錯就錯了）。
:
HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定。
HTML5的設計目的是為了在移動設備上支持多媒體。
HTML5 中的一些有趣的新特性：
:用于繪畫的 canvas 元素。
:用于媒介回放的 video 和 audio 元素
:對本地離線存儲的更好的支持。
http:/ /www.iis7.com/b/plc/
:新的特殊內容元素，比如 article、footer、header、nav、section。
:新的表單控件，比如 calendar、date、time、email、url、search。
一.HTML5 的改進
新元素
新屬性
完全支持 CSS3
Video 和 Audio
2D/3D 制圖
本地存儲
本地 SQL 數據
Web 應用
二.HTML5 多媒體
使用 HTML5 你可以簡單的在網頁中播放 視頻(video)與音頻 (audio) 。
HTML5 <video>
HTML5 <audio>
三.HTML5 應用
使用 HTML5 你可以簡單地開發應用
本地數據存儲
訪問本地文件
本地 SQL 數據
緩存引用
Javascript 工作者
XHTMLHttpRequest 2
四.HTML5 圖形
使用 HTML5 你可以簡單的繪制圖形:
使用 <canvas> 元素。
使用內聯 SVG。
使用 CSS3 2D 轉換、CSS3 3D 轉換。
五.HTML5 使用 CSS3
新選擇器
新屬性
動畫
2D/3D 轉換
圓角
陰影效果
可下載的字體
:
HTML5 定了 8 個新的 HTML 語義（semantic） 元素。所有這些元素都是 塊級 元素。
為了能讓舊版本的瀏覽器正確顯示這些元素，你可以設置 CSS 的 display 屬性值為 block:
1.header,2. section,3. footer,4. aside,5. nav,6. main,7. article,8. figure
：
HTML5 新元素
<canvas>：標簽定義圖形，比如圖表和其他圖像。該標簽基于 JavaScript 的繪圖 API。
新多媒體元素：
<audio>，定義音頻內容。
<video>定義視頻（video 或者 movie）。
<source>，定義多媒體資源 <video> 和 <audio>。
<embed>，定義嵌入的內容，比如插件。
<track>，為諸如 <video> 和 <audio> 元素之類的媒介規定外部文本軌道。
新表單元素：
<datalist>，定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
<keygen>，規定用于表單的密鑰對生成器字段。
<output>，定義不同類型的輸出，比如腳本的輸出。
新的語義和結構元素：
HTML5提供了新的元素來創建更好的頁面結構。
<article>，定義頁面獨立的內容區域。
<aside>，定義頁面的側邊欄內容。
<bdi>，允許您設置一段文本，使其脫離其父元素的文本方向設置。
<command>，定義命令按鈕，比如單選按鈕、復選框或按鈕
<details>，用于描述文檔或文檔某個部分的細節
<dialog>，定義對話框，比如提示框
<summary>，標簽包含 details 元素的標題
<figure>，規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figcaption>，定義 <figure> 元素的標題
<footer>，定義 section 或 document 的頁腳。
<header>，定義了文檔的頭部區域
<mark>，定義帶有記號的文本。
<meter>，定義度量衡。僅用于已知最大和最小值的度量。
<nav>，定義導航鏈接的部分。
<progress>，定義任何類型的任務的進度。
<ruby>，定義 ruby 注釋（中文注音或字符）。
<rt>，定義字符（中文注音或字符）的解釋或發音。
<rp>，在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。
<section>，定義文檔中的節（section、區段）。
<time>，定義日期或時間。
<wbr>，規定在文本中的何處適合添加換行符。
：
HTML5 Canvas(畫布)：
<canvas>標簽定義圖形，比如圖表和其他圖像。該標簽基于 JavaScript 的繪圖 API。
<canvas>元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成。
<canvas>標簽定義圖形，只是圖形容器，比如圖表和其他圖像，您必須使用腳本來繪制圖形。
<canvas>元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成。
一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪制，注意: 默認情況下 <canvas> 元素沒有邊框和內容。
注意: 標簽通常需要指定一個id屬性 (腳本中經常引用), width 和 height 屬性定義的畫布的大小。
Javascript中的<fillRect(填充)(上下,左右,寬度,高度)。
實例解析:
首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然后，創建 context 對象：
var ctx=c.getContext("2d");
getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
設置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
Canvas 坐標：
canvas 是一個二維網格。
canvas 的左上角坐標為 (0,0)
上面的 fillRect 方法擁有參數 (0,0,150,75)。
意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。
Canvas 路徑：
在Canvas上畫線，我們將使用以下兩種方法：
moveTo(x,y) 定義線條的 "開始坐標"。
lineTo(x,y) 定義線條的 "結束坐標"。
stroke()，繪制線條。
：
在canvas中繪制圓形, 我們將使用以下方法:
beginPath()，繪制圓形。
arc(x,y,r,start,stop)(左右，上下，大小，開始點，停止點)
：
Canvas - 文本：
使用 canvas 繪制文本，重要的屬性和方法如下：
font，定義字體。
fillText(text,x,y)，在 canvas 上繪制實心的文本。
strokeText(text,x,y)，在 canvas 上繪制空心的文本(描邊的)。
：
Canvas - 漸變：
漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來設置Canvas漸變：
createLinearGradient(x,y,x1,y1)，創建線條漸變。
createRadialGradient(x,y,r,x1,y1,r1)，創建一個徑向/圓漸變。
當我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。
addColorStop()方法指定顏色停止，參數使用坐標來描述，可以是0至1。
使用漸變，設置fillStyle或strokeStyle的值為 漸變，然后繪制形狀，如矩形，文本，或一條線。
：
Canvas - 圖像
把一幅圖像放置到畫布上, 使用以下方法:
drawImage(image,x,y)。
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。
：
HTML5 內聯 SVG
HTML5 支持內聯 SVG。
一.什么是SVG？：
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)。
SVG 用于定義用于網絡的基于矢量的圖形。
SVG 使用 XML 格式定義圖形。
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失。
SVG 是萬維網聯盟的標準。
二.SVG優勢：
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在于：
SVG 圖像可通過文本編輯器來創建和修改。
SVG 圖像可被搜索、索引、腳本化或壓縮。
SVG 是可伸縮的。
SVG 圖像可在任何的分辨率下被高質量地打印。
SVG 可在圖像質量不下降的情況下被放大。
三.SVG 與 Canvas兩者間的區別：
SVG 是一種使用 XML 描述 2D 圖形的語言。
Canvas 通過 JavaScript 來繪制 2D 圖形。
SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
：
HTML5 MathML(數學標記語言)
HTML5 可以在文檔中使用 MathML 元素，對應的標簽是 <math>...</math> 。
MathML是數學標記語言，是一種基于XML（標準通用標記語言的子集）的標準，用來在互聯網上書寫 "數學符號" 和 "公式" 的置標語言。
：
HTML5 拖放（Drag(拖拽) 和 Drop(放下)）
拖放（Drag 和 drop）是 HTML5 標準的組成部分
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。
在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。
首先，為了使元素可拖動，把 draggable 屬性設置為 true 。
ondragover 事件規定在何處放置被拖動的數據。
：
HTML5 Geolocation（地理定位）
用于定位用戶的位置。
HTML5 Geolocation API 用于獲得用戶的地理位置。
鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。
注意: Geolocation（地理定位）對于擁有 GPS 的設備，比如 iPhone，地理定位更加精確。
請使用 getCurrentPosition()，方法來獲得用戶的位置。
getCurrentPosition()，方法的第二個參數用于處理錯誤。它規定當獲取用戶位置失敗時運行的函數。
Permission denied，用戶不允許地理定位。
Position unavailable，無法獲取當前位置。
Timeout，操作超時。
給定位置的信息：
更新本地信息。
顯示用戶周圍的興趣點。
交互式車載導航系統 (GPS)。
getCurrentPosition() 方法 - 返回數據：
若成功，則 getCurrentPosition() 方法返回對象。始終會返回 latitude、longitude 以及 accuracy 屬性。如果可用，則會返回其他下面的屬性。
屬性 描述
coords.latitude，十進制數的緯度。
coords.longitude，十進制數的經度。
coords.accuracy，位置精度。
coords.altitude，海拔，海平面以上以米計。
coords.altitudeAccuracy，位置的海拔精度。
coords.heading，方向，從正北開始以度計。
coords.speed，速度，以米/每秒計。
timestamp，響應的日期/時間。
watchPosition() - 返回用戶的當前位置，并繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。
clearWatch()，停止 watchPosition() 方法。
：
HTML5 Video(視頻)
很多站點都會使用到視頻. HTML5 提供了展示視頻的標準。
直到現在，仍然不存在一項旨在網頁上顯示視頻的標準。
今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規定了一種通過 video 元素來包含視頻的標準方法。
<video> 元素提供了 播放、暫停和音量控件來控制視頻，同時 <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。
<video> 與</video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。
<video> 元素支持多個 <source> 元素. <source> 元素可以鏈接不同的視頻文件，瀏覽器將使用第一個可識別的格式。
當前， <video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。
MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件。
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件。
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件。
HTML5 <video> 和 <audio> 元素同樣擁有方法、屬性和事件。
<video> 和 <audio>元素的方法、屬性和事件可以使用JavaScript進行控制.
其中的方法用于播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。
：
HTML5 Audio(音頻)
HTML5 提供了播放音頻文件的標準。
直到現在，仍然不存在一項旨在網頁上播放音頻的標準。
今天，大多數音頻是通過插件（比如 Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規定了在網頁上嵌入音頻元素的標準，即使用 <audio> 元素。
control 屬性供添加播放、暫停和音量控件。
在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。
<audio> 元素允許使用多個 <source> 元素. <source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件。
：
HTML5 新的 Input 類型：
color，類型用在input字段主要用于選取顏色。
date，類型允許你從一個日期選擇器選擇一個日期。
datetime，類型允許你選擇一個日期（UTC 時間）。
atetime-local，類型允許你選擇一個日期和時間 (無時區)。
email，類型用于應該包含 e-mail 地址的輸入域。
month，類型允許你選擇一個月份。
number，類型用于應該包含數值的輸入域,您還能夠設定對所接受的數字的限定1-5。
range，類型用于應該包含一定范圍內數字值的輸入域,range 類型顯示為滑動條。
search，類型用于搜索域，比如站點搜索或 Google 搜索。
tel，定義輸入電話號碼字段。
time，類型允許你選擇一個時間。
url，類型用于應該包含 URL 地址的輸入域。
week，類型允許你選擇周和年。
：
HTML5 表單元素:
<datalist>，元素規定輸入域的選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
<keygen>，元素的作用是提供一種驗證用戶的可靠方法，規定用于表單的密鑰對生成器字段加密。
<output>，元素用于不同類型的輸出，比如計算或腳本輸出。
HTML5 新的表單屬性:
autocomplete，屬性規定 form 或 input 域應該擁有自動完成功能。
autocomplete，屬性有可能在 form元素中是開啟的，而在input元素中是關閉的
novalidate，屬性是一個 boolean(布爾) 屬性.
novalidate，屬性規定在提交表單時不應該驗證 form 或 input 域
autofocus，屬性是一個 boolean 屬性.
autofocus，屬性規定在頁面加載時，域自動地獲得焦點
form，屬性規定輸入域所屬的一個或多個表單
The formaction，屬性用于描述表單提交的URL地址
The formaction，屬性會覆蓋<form> 元素中的action屬性
注意: The formaction 屬性用于 type="submit" 和 type="image"
formenctype 屬性描述了表單提交到服務器的數據編碼 (只對form表單中 method="post" 表單)
formenctype 屬性覆蓋 form 元素的 enctype 屬性。
主要: 該屬性與 type="submit" 和 type="image" 配合使用。
formmethod 屬性定義了表單提交的方式。
formmethod 屬性覆蓋了 <form> 元素的 method 屬性。
注意: 該屬性可以與 type="submit" 和 type="image" 配合使用。
novalidate 屬性是一個 boolean 屬性.
novalidate屬性描述了 <input> 元素在表單提交時無需被驗證。
formnovalidate 屬性會覆蓋 <form> 元素的novalidate屬性.
注意: formnovalidate 屬性與type="submit一起使用
formtarget 屬性指定一個名稱或一個關鍵字來指明表單提交數據接收后的展示。
The formtarget 屬性覆蓋 <form>元素的target屬性.
注意: formtarget 屬性與type="submit" 和 type="image"配合使用.
height 和 width 屬性只適用于 image 類型的<input> 標簽 圖標
list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表
min、max 和 step 屬性用于為包含數字或日期的 input 類型規定限定（約束
multiple 屬性是一個 boolean 屬性.
multiple 屬性規定<input> 元素中可選擇多個值。
注意: multiple 屬性適用于以下類型的 <input> 標簽：email 和 file:
pattern 屬性描述了一個正則表達式用于驗證 <input> 元素的值。
注意:pattern 屬性適用于以下類型的 <input> 標簽: text, search, url, tel, email, 和 password
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值
required 屬性是一個 boolean 屬性.
required 屬性規定必須在提交之前填寫輸入域（不能為空）
step 屬性為輸入域規定合法的數字間隔。
如果 step="3"，則合法的數是 -3,0,3,6 等
提示： step 屬性可以與 max 和 min 屬性創建一個區域值。
：
HTML5中新的語義元素：
語義= 意義，語義元素 = 有意義的元素。
<section>，標簽定義文檔中的節（section、區段）。章節、頁眉、頁腳或文檔中的其他部分
<article>，標簽定義獨立的內容
<nav>，標簽定義導航鏈接的部分，<nav>元素用于定義頁面的導航鏈接部分區域，但是，不是所有的鏈接都需要包含在 其元素中。
<aside>，標簽定義頁面主區域內容之外的內容（比如側邊欄），<aside>標簽的內容應與主區域的內容相關。
<header>元素描述了文檔的頭部區域，<header>元素主要用于定義內容的介紹展示區域。
<footer> 元素描述了文檔的底部區域，<footer> 元素應該包含它的包含元素，一個頁腳通常包含文檔的作者，著作權信息，鏈接的使用條款，聯系信息等。
<figure>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等），<figure>元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。
<figcaption> 標簽定義 <figure> 元素的標題，<figcaption>元素應該被置于 "figure" 元素的第一個或最后一個子元素的位置。
：
HTML5 Web 存儲：
HTML5 web 存儲，一個比cookie更好的本地存儲方式。
客戶端存儲數據的兩個對象為：
localStorage，用于長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。
sessionStorage，用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。
不管是 localStorage，還是sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
刪除單個數據：localStorage.removeItem(key);
刪除所有數據：localStorage.clear();
得到某個索引的key：localStorage.key(index);
sessionStorage 方法針對一個 session進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除。
網站列表程序實現以下功能：
可以輸入網站名，網址，以網站名作為key存入localStorage
根據網站名，查找網址
列出當前已保存的所有網站
HTML5 Web SQL 數據庫：
Web SQL 數據庫 API 并不是HTML規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端數據庫的 APIs
以下是規范中定義的三個核心方法：
openDatabase：這個方法使用現有的數據庫或者新建的數據庫創建一個數據庫對象。
transaction：這個方法讓我們能夠控制一個事務，以及基于這種情況執行提交或者回滾。
executeSql：這個方法用于執行實際的 SQL 查詢
HTML5 應用程序緩存：
應用程序緩存為應用帶來三個優勢：
離線瀏覽 - 用戶可在應用離線時使用它們。
速度 - 已緩存資源加載得更快
減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
：
HTML5 Web SQL 數據庫
Web SQL 數據庫 API 并不是 HTML5 規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端數據庫的 APIs。
以下是規范中定義的三個核心方法：
openDatabase：這個方法使用現有的數據庫或者新建的數據庫創建一個數據庫對象。
transaction：這個方法讓我們能夠控制一個事務，以及基于這種情況執行提交或者回滾。
executeSql：這個方法用于執行實際的 SQL 查詢。
打開數據庫
我們可以使用 openDatabase() 方法來打開已存在的數據庫，如果數據庫不存在，則會創建一個新的數據庫，使用代碼如下：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 1024 1024);
openDatabase() 方法對應的五個參數說明：

1. 數據庫名稱
2. 版本號
3. 描述文本
4. 數據庫大小
5. 創建回調
   第五個參數，創建回調會在創建數據庫后被調用。
   ：
   HTML5 應用程序緩存
   使用 HTML5，通過創建 cache manifest 文件，可以輕松地創建 web 應用的離線版本。
   什么是應用程序緩存（Application Cache）？：
   HTML5 引入了應用程序緩存，這意味著 web 應用可進行緩存，并可在沒有因特網連接時進行訪問。
   應用程序緩存為應用帶來三個優勢：
6. 離線瀏覽 - 用戶可在應用離線時使用它們
7. 速度 - 已緩存資源加載得更快
8. 減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
   ：
   HTML5 Web Workers
   web worker 是運行在后臺的 JavaScript，不會影響頁面的性能。
   什么是 Web Worker？：
   當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。
   web worker 是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續做任何愿意做的事情：點擊、選取內容等等，而此時 web worker 在后臺運行。
   ：
   HTML5 服務器發送事件(Server-Sent Events)
   HTML5 服務器發送事件（server-sent event）允許網頁獲得來自服務器的更新。
   Server-Sent 事件 - 單向消息傳遞：
   Server-Sent 事件指的是網頁自動獲取來自服務器的更新。
   以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。