HTML5總結(jié).doc

HTML5總結(jié)前些天看了IT最新動(dòng)向，發(fā)現(xiàn)HTML5發(fā)展非常之快，所以這兩天花了些時(shí)間學(xué)了一下，在網(wǎng)上查到的東西一般都很瑣碎，我在這里稍微整理一下。起步首先，先了解一下HTML5的發(fā)展起步。HTML5是W3C和WHATWG合作的結(jié)果。注： W3C 指 World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟。WHATWG 指 Web Hypertext Application Technology Working Group。網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作組他們對(duì)HTML5建立了一些規(guī)則：l 新特性應(yīng)該基于HTML、CSS、DOM以及JavaScriptl 減少對(duì)外部插件的需求（比如Flash）l 更優(yōu)秀的錯(cuò)誤處理l 更多取代腳本的標(biāo)記l HTML5應(yīng)該獨(dú)立于設(shè)備l 開(kāi)發(fā)進(jìn)程應(yīng)該對(duì)公眾透明HTML5中一些有趣的新特性：l 用于繪畫的canvas元素l 用于媒介回放的video和audio元素l 對(duì)本地離線存儲(chǔ)的更好的支持l 新的特殊內(nèi)容元素，比如article、footer、header、nav、sectionl 新的表單控件，比如：calendar、date、time、email、url、search最新版本的Safari、Chrome（谷歌瀏覽器）、Firefox以及Opera支持某些HTML5特性，IE9將支持某些特性。Web視頻現(xiàn)如今，大多數(shù)的視頻都是插件（比如Flash）來(lái)顯示的，但是并非所有的瀏覽器都擁有同樣的插件。HTML5規(guī)定了一種通過(guò)video元素來(lái)包含視頻的標(biāo)準(zhǔn)方法（不需要插件的哦！強(qiáng)大吧）當(dāng)前，video元素支持三種視頻格式：Ogg、MPEG4、WebM在HTML5中顯示視頻，您所需的只是這樣寫：您的瀏覽器不支持該功能！ 與 之間插入的內(nèi)容是供不支持 video 元素的瀏覽器顯示的。video 元素允許多個(gè) source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式： 您的瀏覽器不支持該功能！標(biāo)簽的屬性Web音頻和視頻一樣，大多數(shù)音頻都需要插件（比如Flash）才能播放，HTML5規(guī)定了一種通過(guò)audio元素來(lái)包含音頻的標(biāo)準(zhǔn)方法。Audio元素能夠播放聲音文件或者音頻流。Audio元素支持三種音頻格式：Ogg Vorbis、MP3、Wav使用方法和video標(biāo)簽的方法一摸一樣，超像的！標(biāo)簽的屬性Canvas（在網(wǎng)頁(yè)上繪制圖形）HTML5的canvas元素使用Javascript在網(wǎng)頁(yè)上繪制圖形。畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素Canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。向HTML5中添加canvas元素，方法如下：另外需要聲明的是canvas元素本身沒(méi)有繪圖能力，所有的繪制工作必須在JavaScript內(nèi)部完成。現(xiàn)在繪制一個(gè)紅色的矩形，如下：var c=document.getElementById(myCanvas);var cxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75);現(xiàn)在對(duì)這段代碼進(jìn)行解析：JavaScript使用id尋找canvas元素var c=document.getElementById(myCanvas);然后，創(chuàng)建context對(duì)象var cxt=c.getContext(2d);getContext(2d) 對(duì)象是內(nèi)建的 HTML5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。下面的兩行代碼繪制一個(gè)紅色的矩形：cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75);fillStyle 方法將其染成紅色，fillRect 方法規(guī)定了形狀、位置和尺寸。想看更多例子，請(qǐng)上W3School的HTML5課程！在客戶端存儲(chǔ)數(shù)據(jù)HTML5的這個(gè)功能是讓我感到最不可思議的，HTML5提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法l localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)l sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)之前，這些存儲(chǔ)工作都是由cookie完成的，現(xiàn)在cookie看來(lái)要換人了，cookie不適合存儲(chǔ)大量的數(shù)據(jù)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來(lái)傳遞，這使得cookie的速度慢而且效率低。在H5中數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)，他使在不影響網(wǎng)站性能的情況下，存儲(chǔ)大量數(shù)據(jù)成為可能。對(duì)于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)在不同的區(qū)域，而且一個(gè)網(wǎng)站只能訪問(wèn)其自身的數(shù)據(jù)。H5使用JavaScript存儲(chǔ)和訪問(wèn)數(shù)據(jù)。發(fā)現(xiàn)了沒(méi)，H5的很多功能都需要利用JS來(lái)實(shí)現(xiàn)，呵呵，看來(lái)還是離不了Java現(xiàn)在，首先介紹第一種存儲(chǔ)方式，localStoragelocalStorage 方法存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。創(chuàng)建和訪問(wèn)localStoragelocalStorage.lastname=Smith;document.write(localStorage.lastname);這樣就OK了，是不是很簡(jiǎn)單哈！第二個(gè)，sessionStoragesessionStorage 方法針對(duì)一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。創(chuàng)建和訪問(wèn)sessionStorage的方法和localStorage的差不多一樣，只是名稱不一樣，效果不一樣而已。sessionStorage.lastname=Smith;document.write(sessionStorage.lastname);HTML5新的Input類型H5擁有多個(gè)新的表單輸入類型，這些新特性提供了更好的輸入控制和驗(yàn)證?，F(xiàn)在介紹的輸入類型有以下幾種：emailurlnumberrangeDate pickers (date, month, week, time, datetime, datetime-local)searchcolor看張截圖EmailEmail類型用于應(yīng)該包含email地址的輸入域，在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證email域的值。E-mail: 是不是很簡(jiǎn)單，就跟HTML的普通標(biāo)簽是一樣的。URLUrl的用法好Email的一樣，用于包含Url地址的輸入域，在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證url域的值。Numbernumber 類型用于應(yīng)該包含數(shù)值的輸入域。您還能夠設(shè)定對(duì)所接受的數(shù)字的限定：Points: 這個(gè)應(yīng)該不用解釋了吧Number的屬性如下Rangerange 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range 類型顯示為滑動(dòng)條。您還能夠設(shè)定對(duì)所接受的數(shù)字的限定：Range的屬性和number的是一樣的，相互借鑒以下就OK了Date Pickers（數(shù)據(jù)檢出器）HTML5 擁有多個(gè)可供選取日期和時(shí)間的新輸入類型：date - 選取日、月、年month - 選取月、年week - 選取周和年time - 選取時(shí)間（小時(shí)和分鐘）datetime - 選取時(shí)間、日、月、年（UTC 時(shí)間）datetime-local - 選取時(shí)間、日、月、年（本地時(shí)間）下面的例子允許您從日歷中選取一個(gè)日期：Date: MyGod！我現(xiàn)在才發(fā)現(xiàn)文筆不好的時(shí)候，文字顯得是那么的蒼白，我實(shí)在是描繪不出H5的效果，實(shí)在是太炫了，還是親自試一下就知道了，在這里我表示很無(wú)力searchsearch 類型用于搜索域，比如站點(diǎn)搜索或 Google 搜索。search 域顯示為常規(guī)的文本域。HTML5新的表單元素HTML5 擁有若干涉及表單的元素和屬性。datalistkeygenoutputdatalist 元素datalist 元素規(guī)定輸入域的選項(xiàng)列表。列表是通過(guò) datalist 內(nèi)的 option 元素創(chuàng)建的。如需把 datalist 綁定到輸入域，請(qǐng)用輸入域的 list 屬性引用 datalist 的 id：Webpage: 其最終效果就像是百度中的搜索下拉框一樣，想象以下。keygen 元素keygen 元素的作用是提供一種驗(yàn)證用戶的可靠方法。keygen 元素是密鑰對(duì)生成器（key-pair generator）。當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰。私鑰（private key）存儲(chǔ)于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶的客戶端證書（client certificate）。目前，瀏覽器對(duì)此元素的糟糕的支持度不足以使其成為一種有用的安全標(biāo)準(zhǔn)。Username: Enc