HTML5 是對(duì) HTML 標(biāo)準(zhǔn)的第五次修訂

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

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