關於HTML面試題匯總之H5

一、H5有哪些新特性，移除了哪些元素？如何處理h5新標簽的浏覽器兼容性問題，如何區分html和html5

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頭、新標簽和功能元素。

二、html語義化的好處

1、在樣式丟失的情況下，頁面呈現的結構也是清晰的

2、屏幕閱讀器完全可以根據語義標簽來讀取內容（如盲人網站）

3、pad、手機可以根據語義標簽做不同的處理，如手機上標題顯示粗體，而pad上標題顯示較大字體

4、對搜索引擎和爬蟲的友好

三、iframe優缺點

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不在受支持

四、label標簽的作用、應用

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">
$(function(){
$('#inputOne').click(function(){
console.log('label.........');
});
$('#inputOne_inner').click(function(event){
event.stopPropagation();
console.log('input.........')
});
});
</script>

由於在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">
$(function(){
$('#labeTow').click(function(){
console.log('labelTow.........');
});
$('#inputTow').click(function(event){
event.stopPropagation();
console.log('inputTow.........');
});
});
</script>

單擊labeTow會做如下輸出(label會先觸發自身的事件，然後觸發關聯元素相應的事件)：
labelTow…………….
inputTow……………
單擊inpuTow會做如輸出：
inputTow………….
5、label標簽不能為a和button標簽的後代
6、html5中對lable標簽加了form屬性，規則label所屬的一個或多個表單