關於HTML面試題彙總之H5

小龍女先生發表於2016-07-30
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所屬的一個或多個表單

相關文章