1. html5不在是SGL(通用標記語言)的一個子集,而包含了:圖像、位置、存儲、多任務等功能
2. 新增的圖像為canvas類,媒體回放video和audio元素;本地離線存儲localStorage,在浏覽器關閉後也可以保存數據;而sessionStorage在浏覽器關閉後會自動刪除數據
3.新增內容標簽:article、footer、header、nav、section;新增加表單控件:calendar、date、time、email、url、search;控件元素:webworker、websocket、Geolocation。
4、移除的元素:basefont、big、center、font、s、strike、tt、u等內容修改標簽、以及性能較差的frame、frameset、noframes。
5、處理h5新標簽浏覽器的兼容性問題
5.1、IE8-可以通過document.createElement來創建標簽,並給標簽默認的樣式和能力
5.2、也可以引用html5shim框架
6、區分html與html5:主要是通過doctype頭、新標簽和功能元素。
1、在樣式丟失的情況下,頁面呈現的結構也是清晰的
2、屏幕閱讀器完全可以根據語義標簽來讀取內容(如盲人網站)
3、pad、手機可以根據語義標簽做不同的處理,如手機上標題顯示粗體,而pad上標題顯示較大字體
4、對搜索引擎和爬蟲的友好
1、優點
1.1、在不刷新的情況下重新載入的新的頁面;
1.2、方便用於後台管理,或不用於對搜索引擎友好的系統
2、缺點:
2.1、不利用搜索引擎,因為爬蟲只能看到框架而見不到框架的鏈接
2.2、框架有時候會讓人迷惑,尤其是多個框架出滾動條的時候
2.3、不容易打印(暫時只能分框架頁的打印,而不能打印整個frameset)
2.4、浏覽器後退按鈕無效(他只能後退當前獲得光標的iframe)
2.5、多數pad、手機不支持框架
2.6、增加http請求
2.7、iframe會阻塞頁面的加載,包含iframe的頁面的window.onload事件,只有等待iframe加載完成後才能觸發,但可以通過js來動態設置iframe的src屬性可以避免這種情況(chrome和safari支持)
3、iframe和frame的區別
3.1、iframe和frame實現的功能相同;
3.2、iframe可以單獨使用,而frame必須和frameset一起使用
3.5、在html5中iframe僅支持src屬性,而對frameset和frame不在受支持
1、lable標簽主要是作為一種標題說明元素存儲的,通常有:for關聯、以及將form control放在label標簽中的方式
2、lable標簽主要屬性:
2.1、for屬性,做標簽關聯,但for關聯的必須是一個form control標簽
2.2、accesskey屬性:用於設置熱鍵,但不能與浏覽器熱鍵沖突,否則會先觸發浏覽器的熱鍵
3、label的嵌套
3.1、labe標簽內不能再嵌套label
3.2、label只能包含一個input子孫(包含checkbox、text等元素)、button、select、textarea元素
3.3、label嵌套時,事件的觸發遵循冒泡原則
<label id="inputOne" > <input id="inputOne_inner" type="button" value="Test" /> </label><script type="text/javascript">
由於在inputOne_inner的click事件中阻止的冒泡,所以單擊時只輸出 ‘input……………….’。
4、for關聯
4.1、for關聯,在labe標簽上的事件,會觸發關聯元素的相應事件(並且關聯元素的冒泡阻止動作無效):
<label id="labeTow" for="inputTow" >Tow-label</label> <!--labe綁定的事件,會觸發關聯元素的事件--> <input id="inputTow" type="button" value="Tow" /><script type="text/javascript">
單擊labeTow會做如下輸出(label會先觸發自身的事件,然後觸發關聯元素相應的事件):
labelTow…………….
inputTow……………
單擊inpuTow會做如輸出:
inputTow………….
5、label標簽不能為a和button標簽的後代
6、html5中對lable標簽加了form屬性,規則label所屬的一個或多個表單