Web前端最全面試寶典- Html篇
HTML
1.對WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外 鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，容易維 護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性；
2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文件必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於宣告文件使用那種規範（html/Xhtml）一般為 嚴格 過度 基於框架的html文件
加入XMl宣告可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
5.HTML全域性屬性(global attribute)有哪些
參考資料：MDN: html global attribute或者W3C
HTML global-attributes
accesskey
:設定快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a
可啟用元素
class
:為元素設定類標識，多個類名用空格分開，CSS和javascript可通過class屬性獲取元素
contenteditable
: 指定元素內容是否可編輯
contextmenu
: 自定義滑鼠右鍵彈出選單內容
data-*
: 為元素增加自定義屬性
dir
: 設定元素文字方向
draggable
: 設定元素是否可拖拽
dropzone
: 設定元素拖放型別： copy, move, link
hidden
: 表示一個元素是否與文件。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果
id
: 元素id，文件內唯一
lang
: 元素內容的的語言
spellcheck
: 是否啟動拼寫和語法檢查
style
: 行內css樣式
tabindex
: 設定元素可以獲得焦點，通過tab可以導航
title
: 元素相關的建議資訊
translate
: 元素和子孫節點內容是否需要本地化
6.什麼是web語義化,有什麼好處
web語義化是指通過HTML標記表示頁面包含的資訊，包含了HTML標籤的語義化和css命名的語義化。 HTML標籤的語義化是指：通過使用包含語義的標籤（如h1-h6）恰當地表示文件結構 css命名的語義化是指：為html標籤新增有意義的class，id補充未表達的語義，如Microformat通過新增符合規則的class描述資訊
為什麼需要語義化：
去掉樣式後頁面呈現清晰的結構
盲人使用讀屏器更好地閱讀
搜尋引擎更好地理解頁面，有利於收錄
便團隊專案的可持續運作及維護
7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
新特性：
HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
- 拖拽釋放(Drag and drop) API
- 語義化更好的內容標籤（header,nav,footer,aside,article,section）
- 音訊、視訊API(audio,video)
- 畫布(Canvas) API
- 地理(Geolocation) API
- 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
- sessionStorage 的資料在瀏覽器關閉後自動刪除
- 表單控制元件，calendar、date、time、email、url、search
- 新的技術webworker, websocket, Geolocation
移除的元素：
- 純表現的元素：basefont，big，center，font, s，strike，tt，u；
- 對可用性產生負面影響的元素：frame，frameset，noframes；
支援HTML5新標籤：
- IE8/IE7/IE6支援通過 document.createElement 方法產生的標籤，可以利用這一特性讓這些瀏覽器支援 HTML5 新標籤，瀏覽器支援新標籤後，還需要新增標籤預設的樣式（當然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：
如何區分：
DOCTYPE宣告新增的結構元素、功能元素
8. HTML5 儲存型別有什麼區別？
HTML5 能夠本地儲存資料，在之前都是使用 cookies 使用的。HTML5 提供了下面兩種本地儲存方案：
localStorage - 沒有時間限制的資料儲存，資料永遠不會過期，關閉瀏覽器也不會丟失
sessionStorage - 針對一個 session 的資料儲存，同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。
9. HTML5 標準提供了哪些新的API？
1：canvas，不用多說，可以畫出很多絢麗的圖形，甚至可以直接做出偽3D遊戲。
2：媒體控制，也很好理解(直譯就是回放功能，假如只用html5.0以下的標籤寫，以前的音樂播放是不可能實現滾動條的。)
3：離線網頁程式，可以把資原始檔完全快取在客戶端，並且通過js的一些方法清空快取
4：文件編輯，應該是更好的支援對文件的編輯。
5：拖動，可以將檔案拖動到某些區域上傳
6：跨文件請求，websocket，一種更加高效的通訊方式
7：歷史管理，可以通過js管理和插入歷史記錄
8：MIME頭自定義
9：客戶端資料儲存，localstoage sessionstoage
10：地理位置共享
11：本地資料庫
12：索引資料庫
10.HTML5 應用程式快取和瀏覽器快取有什麼區別？
HTML5 引入了應用程式快取，這意味著 web 應用可進行快取，並可在沒有因特網連線時進行訪問。
應用程式快取為應用帶來三個優勢：
離線瀏覽 - 使用者可在應用離線時使用它們
速度 - 已快取資源載入得更快
減少伺服器負載 - 瀏覽器將只從伺服器下載更新過或更改過的資源。
11.常用那幾種瀏覽器測試？有哪些核心(Layout Engine)?
(Q1)瀏覽器：IE，Chrome，FireFox，Safari，Opera。
(Q2)核心：Trident，Gecko，Presto，Webkit。
12.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie在瀏覽器和伺服器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的儲存空間更大；
sessionStorage和localStorage有更多豐富易用的介面；
sessionStorage和localStorage各自獨立的儲存空間；
13.如何實現瀏覽器內多個標籤頁之間的通訊?
呼叫localstorge、cookies等本地儲存方式
14.請寫出localStorage物件的常用方法。
儲存 - localStorage.setItem(key, value) - 如果key存在，更新value
獲取 - localStorage.getItem(key) - 如果key不存在，返回null
刪除 - localStorage.removeItem(key) - 刪除key對應的資料
全部清除 - localStorage.clear() - 清空localStorage中所有資料
遍歷 - localStorage.length
遍歷 - localStorage.key(index)
15.如何在HTML5中啟用應用程式快取？
<html manifest="fileName.appcache">每個指定了manifest的頁面在使用者對其訪問時都會被快取。
.appcache是manifest檔案的副檔名
16.html5 離線儲存
Html5的一個重要特性就是離線儲存，所謂的離線儲存就是將一些資原始檔儲存在本地，這樣後續的頁面重新載入將使用本地資原始檔，在離線情況下可以繼續訪問web應用，同時通過一定的手法（更新相關檔案或者使用相關API），可以更新、刪除離線儲存等操作。
Html5的離線儲存使用一個manifest檔案來標明哪些檔案是需要被儲存的，使用如 <html manifest='offline.manifest'> 來引入一個manifest檔案，這個檔案的路徑可以是相對的，也可以是絕對的，如果你的web應用很多，而且希望能集中管理manifest檔案，那麼靜態檔案伺服器是個不錯的選擇。
17.HTML5 Canvas 元素有什麼用？
Canvas 元素用於在網頁上繪製圖形，該元素標籤強大之處在於可以直接在 HTML 上進行圖形操作