HTML面試題
1 DOCTYPE有什么作用？標准模式與混雜模式如何區分？它們有何意義?
告訴瀏覽器使用哪個版本的HTML規范來渲染文檔。DOCTYPE不存在或形式不正確會導致HTML文檔以混雜模式呈現。
標准模式（Standards mode）以瀏覽器支持的最高標准運行；混雜模式（Quirks mode）中頁面是一種比較寬松的向后兼容的方式顯示。
2 HTML5為什么只需要寫 ？
HTML5不基於SGML（Standard Generalized Markup Language 標准通用標記語言），因此不需要對DTD（DTD 文檔類型定義）進行引用，但是需要DOCTYPE來規范瀏覽器行為。
HTML4.01基於SGML，所以需要引用DTD。才能告知瀏覽器文檔所使用的文檔類型，如下：
3 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a span img input select
塊級元素：div ul ol li dl dt dd h1 p
空元素：
4 頁面導入樣式時，使用link和@import有什么區別？
相同的地方，都是外部引用CSS方式，區別：
link是xhtml標簽，除了加載css外，還可以定義RSS等其他事務；@import屬於CSS范疇，只能加載CSS
link引用CSS時候，頁面載入時同時加載；@import需要在頁面完全加載以后加載，而且@import被引用的CSS會等到引用它的CSS文件被加載完才加載
link是xhtml標簽，無兼容問題；@import是在css2.1提出來的，低版本的瀏覽器不支持
link支持使用javascript控制去改變樣式，而@import不支持
link方式的樣式的權重高於@import的權重
import在html使用時候需要<style type="text/css">標簽
6 介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS引擎：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
7 常見的瀏覽器內核有哪些？
- Trident( MSHTML )：IE MaxThon TT The World 360 搜狗瀏覽器
- Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
- Presto：Opera7及以上(Opera內核原為：Presto，現為：Blink)
- Webkit：Safari Chrome
8 HTML5有哪些新特性,移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5
新增加了圖像、位置、存儲、多任務等功能。
新增元素：
- canvas
- 用於媒介回放的video和audio元素
- 本地離線存儲。localStorage長期存儲數據，瀏覽器關閉后數據不丟失;sessionStorage的數據在瀏覽器關閉后自動刪除
- 語意化更好的內容元素，比如 article footer header nav section
- 位置API：Geolocation
- 表單控件，calendar date time email url search
- 新的技術：web worker(web worker是運行在后台的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在后台運行) web socket
- 拖放API：drag、drop
移除的元素：
- 純表現的元素：basefont big center font s strike tt u
- 性能較差元素：frame frameset noframes
區分：
- DOCTYPE聲明的方式是區分重要因素
- 根據新增加的結構、功能來區分
9 簡述一下你對HTML語義化的理解？
- 去掉或丟失樣式的時候能夠讓頁面呈現出清晰的結構。
- 有利於SEO和搜索引擎建立良好溝通，有助於爬蟲抓取更多的信息，爬蟲依賴於標簽來確定上下文和各個關鍵字的權重。
- 方便其它設備解析。
- 便於團隊開發和維護，語義化根據可讀性。
有哪些語義化標簽：
10 HTML5的文件離線儲存怎么使用，工作原理是什么？
在線情況下，瀏覽器發現HTML頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問，那么瀏覽器就會根據manifest文件的內容下載相應的資源，並進行離線存儲。如果已經訪問過並且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面。然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不會做任何操作，如果文件改變了，那么就會重新下載文件中的資源，並且進行離線存儲。例如，
在頁面頭部加入manifest屬性
<html manifest='cache.manifest'>
在cache.manifest文件中編寫離線存儲的資源
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
Resourse/logo.png
FALLBACK:
//offline.html
11 cookies，sessionStorage和localStorage的區別？
共同點：都是保存在瀏覽器端，且是同源的。
區別：
- cookies是為了標識用戶身份而存儲在用戶本地終端上的數據，始終在同源http請求中攜帶，即cookies在瀏覽器和服務器間來回傳遞，而sessionstorage和localstorage不會自動把數據發給服務器，僅在本地保存。
- 存儲大小的限制不同。cookie保存的數據很小，不能超過4k，而sessionstorage和localstorage保存的數據大，可達到5M。
- 數據的有效期不同。cookie在設置的cookie過期時間之前一直有效，即使窗口或者瀏覽器關閉。sessionstorage僅在瀏覽器窗口關閉之前有效。localstorage始終有效，窗口和瀏覽器關閉也一直保存，用作長久數據保存。
- 作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的瀏覽器共享，即使同一頁面；localstorage在所有同源窗口都是共享
13 label的作用是什么? 是怎么用的?
label標簽用來定義表單控件間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。label 中有兩個屬性是非常有用的, FOR和ACCESSKEY。
FOR屬性功能：表示label標簽要綁定的HTML元素，你點擊這個標簽的時候，所綁定的元素將獲取焦點。例如，
<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY屬性功能：表示訪問label標簽所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。例如，
<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBo
14 HTML5的form如何關閉自動完成功能？
HTML的輸入框可以擁有自動完成的功能，當你往輸入框輸入內容的時候，瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內容並列在輸入框下面，這樣就不用全部輸入進去了，直接選擇列表中的項目就可以了。但有時候我們希望關閉輸入框的自動完成功能，例如當用戶輸入內容的時候，我們希望使用AJAX技術從數據庫搜索並列舉而不是在用戶的歷史記錄中搜索。
方法：
- 在IE的internet選項菜單中里的自動完成里面設置
- 設置form輸入框的autocomplete為on或者off來來開啟輸入框的自動完成功能
15 如何實現瀏覽器內多個標簽頁之間的通信?
- WebSocket SharedWorker
- 也可以調用 localstorge、cookies 等本地存儲方式。 localstorge 在另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信。
注意：Safari 在無痕模式下設置 localstorge 值時會拋出QuotaExceededError 的異常
16 webSocket如何兼容低瀏覽器？
- Adobe Flash Socket ActiveX HTMLFile (IE) 基於 multipart 編碼發送 XHR 基於長輪詢的 XHR
- 引用WebSocket.js這個文件來兼容低版本瀏覽器。
17 頁面可見性（Page Visibility）API 可以有哪些用途？
- 通過visibility state的值得檢測頁面當前是否可見，以及打開網頁的時間。
- 在頁面被切換到其他后台進程時，自動暫停音樂或視頻的播放。
18 如何在頁面上實現一個圓形的可點擊區域？
- map+area或者svg
- border-radius
- 純js實現，一個點不在圓上的算法
19 實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirks mode和CSS Compat模式下都能保持同一效果
<div style="height:1px;overflow:hidden;background:red"></div>
20 title與h1的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義，只表示標題；h1表示層次明確的標題，對頁面信息的抓取也有很大的影響
strong標明重點內容，語氣加強含義；b是無意義的視覺表示
em表示強調文本；i是斜體，是無意義的視覺表示
視覺樣式標簽：b i u s
語義樣式標簽：strong em ins del code
21 元素的alt和title有什么異同？
在alt和title同時設置的時候，alt作為圖片的替代文字出現，title是圖片的解釋文字.
22. XHTML和HTML有什么區別?簡述一下你對HTML語義化的理解？
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的標記語言. html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
23.瀏覽器頁面有哪三層構成，分別是什么，作用是什么?
瀏覽器頁面構成：結構層、表示層、行為層
分別是：HTML、CSS、JavaScript
作用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。
24.知道的網頁制作會用到的圖片格式有哪些？
Webp：WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。
並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。
Apng：是PNG的位圖動畫擴展，可以實現png格式的動態圖片效果，有望代替GIF成為下一代動態圖標准。
25.知道的網頁制作會用到的圖片格式有哪些？
Webp：WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。
並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。
Apng：是PNG的位圖動畫擴展，可以實現png格式的動態圖片效果，有望代替GIF成為下一代動態圖標准。
26.div+css的布局有什么優點？
（1）改版的時候更方便 只要改css文件。
（2）頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
（3）易於優化（seo）搜索引擎更友好，排名更容易靠前。
27.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
首先：CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。
（1）行內元素有：a b span img input select
（2）塊級元素有：div p ul ol li dl dt dd h1-h6
（3）常見的空元素：br-換行，hr-水平分割線
28.隱藏元素的幾種方法
（1）display:none;
（2）visibility:hidden;
（3）opacity:0;
（4）position:absolute; left:-10000px;
29.簡述一下src與href的區別。
src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯系。
30.實現不使用 border 畫出1px高的線，在不同瀏覽器的標准模式與怪異模式下都能保持一致的效果
<div style="height:1px;overflow:hidden;background:red"></div>
31.清除浮動的方法有哪些？
第一種：clear:both
在父元素的里面添加一個空的clear的div（跟浮動的子級同級），然后再為這個類添加屬性值clear:both;便可以清除浮動。
第二種：overflow：hidden
在父元素的樣式中添加overflow: hidden;也可以清除浮動，如下css代碼，但不提倡使用這個方法，overflow: hidden;還有一個意思就是隱藏超出的部分，處理不好還是會給頁面帶來麻煩。
第三種：clearfix(推薦使用)
32、從瀏覽器地址欄輸入url到顯示頁面的步驟
瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
服務器交給后台處理完成后返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部數據結構（如HTML的DOM）；
載入解析到的資源文件，渲染頁面，完成。
33、HTML全局屬性(global attribute)有哪些
class:為元素設置類標識
data-*: 為元素增加自定義屬性
draggable: 設置元素是否可拖拽
id: 元素id，文檔內唯一
lang: 元素內容的的語言
style: 行內css樣式
title: 元素相關的建議信息