第一篇：HTML5總結（共）
HTML5總結
前些天看了IT最新動向，發現HTML5發展非常之快，所以這兩天花了些時間學了一下，在網上查到的東西一般都很瑣碎，我在這里稍微整理一下。
起步
首先，先了解一下HTML5的發展起步。HTML5是W3C和WHATWG合作的結果。
注： W3C 指 World Wide Web Consortium，萬維網聯盟。
WHATWG 指 Web Hypertext Application Technology Working Group。網絡超文本應用技術工作組
他們對HTML5建立了一些規則：
? 新特性應該基于HTML、CSS、DOM以及JavaScript ? 減少對外部插件的需求（比如Flash）? 更優秀的錯誤處理 ? 更多取代腳本的標記 ? HTML5應該獨立于設備 ? 開發進程應該對公眾透明 HTML5中一些有趣的新特性： ? 用于繪畫的canvas元素
? 用于媒介回放的video和audio元素 ? 對本地離線存儲的更好的支持
? 新的特殊內容元素，比如article、footer、header、nav、section ? 新的表單控件，比如：calendar、date、time、email、url、search 最新版本的Safari、Chrome（谷歌瀏覽器）、Firefox以及Opera支持某些HTML5特性，IE9將支持某些特性。
Web視頻
現如今，大多數的視頻都是插件（比如Flash）來顯示的，但是并非所有的瀏覽器都擁有同樣的插件。HTML5規定了一種通過video元素來包含視頻的標準方法（不需要插件的哦！！強大吧）
當前，video元素支持三種視頻格式：Ogg、MPEG4、WebM 在HTML5中顯示視頻，您所需的只是這樣寫：
之間插入的內容是供不支持 video 元素的瀏覽器顯示的。
video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
Web音頻
和視頻一樣，大多數音頻都需要插件（比如Flash）才能播放，HTML5規定了一種通過audio元素來包含音頻的標準方法。Audio元素能夠播放聲音文件或者音頻流。
Audio元素支持三種音頻格式：Ogg Vorbis、MP3、Wav 使用方法和video標簽的方法一摸一樣，超像的！
Canvas（在網頁上繪制圖形）
HTML5的canvas元素使用Javascript在網頁上繪制圖形。畫布是一個矩形區域，您可以控制其每一像素
Canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。向HTML5中添加canvas元素，方法如下：
另外需要聲明的是canvas元素本身沒有繪圖能力，所有的繪制工作必須在JavaScript內部完成。
現在繪制一個紅色的矩形，如下： 現在對這段代碼進行解析：
JavaScript使用id尋找canvas元素
var c=document.getElementById(“myCanvas”);然后，創建context對象 var cxt=c.getContext(“2d”);getContext(“2d”)對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
下面的兩行代碼繪制一個紅色的矩形： cxt.fillStyle=“#FF0000”;cxt.fillRect(0,0,150,75);fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。想看更多例子，請上W3School的HTML5課程！
在客戶端存儲數據
HTML5的這個功能是讓我感到最不可思議的，HTML5提供了兩種在客戶端存儲數據的新方法
? localStorage針對一個 session 的數據存儲
之前，這些存儲工作都是由cookie完成的，現在cookie看來要換人了，cookie不適合存儲大量的數據，因為它們由每個對服務器的請求來傳遞，這使得cookie的速度慢而且效率低。
在H5中數據不是由每個服務器請求傳遞的，而是只有在請求時使用數據，他使在不影響網站性能的情況下，存儲大量數據成為可能。
對于不同的網站，數據存儲在不同的區域，而且一個網站只能訪問其自身的數據。H5使用JavaScript存儲和訪問數據。發現了沒，H5的很多功能都需要利用JS來實現，呵呵，看來還是離不了Java 現在，首先介紹第一種存儲方式，localStorage localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之后，數據依然可用。
創建和訪問localStorage 這樣就OK了，是不是很簡單哈！第二個，sessionStorage sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除。創建和訪問sessionStorage的方法和localStorage的差不多一樣，只是名稱不一樣，效果不一樣而已。
HTML5新的Input類型
H5擁有多個新的表單輸入類型，這些新特性提供了更好的輸入控制和驗證。現在介紹的輸入類型有以下幾種： email url number range Date pickers(date, month, week, time, datetime, datetime-local)search color 看張截圖
Email Email類型用于應該包含email地址的輸入域，在提交表單時，會自動驗證email域的值。E-mail: 是不是很簡單，就跟HTML的普通標簽是一樣的。
URL Url的用法好Email的一樣，用于包含Url地址的輸入域，在提交表單時，會自動驗證url域的值。
Number number 類型用于應該包含數值的輸入域。您還能夠設定對所接受的數字的限定：
Points: 這個應該不用解釋了吧 Number的屬性如下
Range range 類型用于應該包含一定范圍內數字值的輸入域。range 類型顯示為滑動條。
您還能夠設定對所接受的數字的限定：
Range的屬性和number的是一樣的，相互借鑒以下就OK了
Date Pickers（數據檢出器）
HTML5 擁有多個可供選取日期和時間的新輸入類型： date選取月、年 week選取時間（小時和分鐘）
datetime選取時間、日、月、年（本地時間）下面的例子允許您從日歷中選取一個日期： Date:
MyGod！我現在才發現文筆不好的時候，文字顯得是那么的蒼白，我實在是描繪不出H5的效果，實在是太炫了，還是親自試一下就知道了，在這里我表示很無力……
search
search 類型用于搜索域，比如站點搜索或 Google 搜索。search 域顯示為常規的文本域。
HTML5新的表單元素
HTML5 擁有若干涉及表單的元素和屬性。datalist keygen output datalist 元素
datalist 元素規定輸入域的選項列表。列表是通過 datalist 內的 option 元素創建的。
如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id： Webpage: 其最終效果就像是百度中的搜索下拉框一樣，想象以下。
keygen 元素
keygen 元素的作用是提供一種驗證用戶的可靠方法。keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
私鑰（private key）存儲于客戶端，公鑰（public key）則被發送到服務器。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。
目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標準。
以上關于keygen的用法我是全盤復制，因為我看不懂他是什么意思，想著可能也不會用了。output 元素
output 元素用于不同類型的輸出，比如計算或腳本輸出： 其效果就像是動態計算器，你直接輸入數字，結果立馬就會發生變化，神吧
還有一些H5的新的表單屬性，實在是太多了，我寫不下去了，呵呵，等用到的時候，再搜，我覺得這是一個不錯的學習方法，可以加深印象。
第二篇：html總結
第一章 網頁基本框架：
第三篇：HTML規則學習總結
HTML
1、一套規則，瀏覽器認識的規則。
2、開發者：
學習Html規則
開發后臺程序：
數據庫獲取數據，然后替換到html文件的指定位置（Web框架）
3、本地測試
pycharm打開測試
4、編寫Html文件
html標簽，標簽內部可以寫屬性 ====> 只能有一個
自閉合標簽 http-equiv=“X-UA-Compatible” content=“IE=IE9;IE=IE8;” /> 搞圖標，欠
點擊咨詢 