關於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所屬的一個或多個表單