前端面試 HTML篇

1. src和href的區(qū)別

src和href都是用來引用外部的資源，它們的區(qū)別如下：

• src：表示對資源的引用，它指向的內(nèi)容會嵌入到當前標簽所在的位置。src會將其指向的資源下載并應(yīng)?到?檔內(nèi)，如請求js腳本。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)?完畢，所以?般js腳本會放在頁面底部。
• href：表示超文本引用，它指向一些網(wǎng)絡(luò)資源，建立和當前元素或本文檔的鏈接關(guān)系。當瀏覽器識別到它他指向的?件時，就會并?下載資源，不會停?對當前?檔的處理。 常用在a、link等標簽上。

2. 對HTML語義化的理解

語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標簽（代碼語義化）。通俗來講就是用正確的標簽做正確的事情。

語義化的優(yōu)點如下：

• 對機器友好，帶有語義的文字表現(xiàn)力豐富，更適合搜索引擎的爬蟲爬取有效信息，有利于SEO。除此之外，語義類還支持讀屏軟件，根據(jù)文章可以自動生成目錄；
• 對開發(fā)者友好，使用語義類標簽增強了可讀性，結(jié)構(gòu)更加清晰，開發(fā)者能清晰的看出網(wǎng)頁的結(jié)構(gòu)，便于團隊的開發(fā)與維護。

常見的語義化標簽：

• <header></header>  頭部
• <nav></nav>  導(dǎo)航欄
• <section></section>  區(qū)塊（有語義化的div）
• <main></main>  主要區(qū)域
• <article></article>  主要內(nèi)容
• <aside></aside>  側(cè)邊欄
• <footer></footer>  底部

3. DOCTYPE(?檔類型) 的作?

DOCTYPE是HTML5中一種標準通用標記語言的文檔類型聲明，它的目的是告訴瀏覽器（解析器）應(yīng)該以什么樣（html或xhtml）的文檔類型定義來解析文檔，不同的渲染模式會影響瀏覽器對 CSS 代碼甚? JavaScript 腳本的解析。它必須聲明在HTML?檔的第??。

瀏覽器渲染頁面的兩種模式（可通過document.compatMode獲取，比如，語雀官網(wǎng)的文檔類型是CSS1Compat）：

• CSS1Compat：標準模式（Strick mode），默認模式，瀏覽器使用W3C的標準解析渲染頁面。在標準模式中，瀏覽器以其支持的最高標準呈現(xiàn)頁面。
• BackCompat：怪異模式(混雜模式)(Quick mode)，瀏覽器使用自己的怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后兼容的方式顯示。

4. script標簽中defer和async的區(qū)別

如果沒有defer或async屬性，瀏覽器會立即加載并執(zhí)行相應(yīng)的腳本。它不會等待后續(xù)加載的文檔元素，讀取到就會開始加載和執(zhí)行，這樣就阻塞了后續(xù)文檔的加載。

下圖可以直觀的看出三者之間的區(qū)別:

其中藍色代表js腳本網(wǎng)絡(luò)加載時間，紅色代表js腳本執(zhí)行時間，綠色代表html解析。

defer 和 async屬性都是去異步加載外部的JS腳本文件，它們都不會阻塞頁面的解析，其區(qū)別如下：

• 執(zhí)行順序：多個帶async屬性的標簽，不能保證加載的順序；多個帶defer屬性的標簽，按照加載順序執(zhí)行；
• 腳本是否并行執(zhí)行：async屬性，表示后續(xù)文檔的加載和執(zhí)行與js腳本的加載和執(zhí)行是并行進行的，即異步執(zhí)行；defer屬性，加載后續(xù)文檔的過程和js腳本的加載(此時僅加載不執(zhí)行)是并行進行的(異步)，js腳本需要等到文檔所有元素解析完成之后才執(zhí)行，DOMContentLoaded事件觸發(fā)執(zhí)行之前。

5. 常?的meta標簽有哪些

meta 標簽由 name 和 content 屬性定義，用來描述網(wǎng)頁文檔的屬性，比如網(wǎng)頁的作者，網(wǎng)頁描述，關(guān)鍵詞等，除了HTTP標準固定了一些 name作為大家使用的共識，開發(fā)者還可以自定義name。

常用的meta標簽：

（1）?charset?，用來描述HTML文檔的編碼類型：

<meta charset="UTF-8" >

（2） keywords，頁面關(guān)鍵詞：

<meta name="keywords" content="關(guān)鍵詞" />

（3）description，頁面描述：

<meta name="description" content="頁面描述內(nèi)容" />

（4）refresh，頁面重定向和刷新：

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，適配移動端，可以控制視口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中，content 參數(shù)有以下幾種：

• ?width viewport? ：寬度(數(shù)值/device-width)
• ?height viewport? ：高度(數(shù)值/device-height)
• ?initial-scale? ：初始縮放比例
• ?maximum-scale? ：最大縮放比例
• ?minimum-scale? ：最小縮放比例
• ?user-scalable? ：是否允許用戶縮放(yes/no）

（6）搜索引擎索引方式：

<meta name="robots" content="index,follow" />

其中，content 參數(shù)有以下幾種：

• ?all?：文件將被檢索，且頁面上的鏈接可以被查詢；
• ?none?：文件將不被檢索，且頁面上的鏈接不可以被查詢；
• ?index?：文件將被檢索；
• ?follow?：頁面上的鏈接可以被查詢；
• ?noindex?：文件將不被檢索；
• ?nofollow?：頁面上的鏈接不可以被查詢。

6. HTML5有哪些更新

1. 語義化標簽

• header：定義文檔的頁眉（頭部）；
• nav：定義導(dǎo)航鏈接的部分；
• footer：定義文檔或節(jié)的頁腳（底部）；
• article：定義文章內(nèi)容；
• section：定義文檔中的節(jié)（section、區(qū)段）；
• aside：定義其所處內(nèi)容之外的內(nèi)容（側(cè)邊）；

2. 媒體標簽

（1） audio：音頻

<audio src='' controls autoplay loop='true'></audio>

屬性：

• controls 控制面板
• autoplay 自動播放
• loop='true' 循環(huán)播放

（2）video視頻

<video src='' poster='imgs/aa.jpg' controls></video>

屬性：

• poster：指定視頻還沒有完全下載完畢，或者用戶還沒有點擊播放前顯示的封面。默認顯示當前視頻文件的第一針畫面，當然通過poster也可以自己指定。
• controls 控制面板
• width
• height

（3）source標簽

因為瀏覽器對視頻格式支持程度不一樣，為了能夠兼容不同的瀏覽器，可以通過source來指定視頻源。

<video>
    <source src='aa.flv' type='video/flv'></source>
    <source src='aa.mp4' type='video/mp4'></source>
</video>

3. 表單

表單類型：

• email ：能夠驗證當前輸入的郵箱地址是否合法
• url ： 驗證URL
• number ： 只能輸入數(shù)字，其他輸入不了，而且自帶上下增大減小箭頭，max屬性可以設(shè)置為最大值，min可以設(shè)置為最小值，value為默認值。
• search ： 輸入框后面會給提供一個小叉，可以刪除輸入的內(nèi)容，更加人性化。
• range ： 可以提供給一個范圍，其中可以設(shè)置max和min以及value，其中value屬性可以設(shè)置為默認值
• color ： 提供了一個顏色拾取器
• time ： 時分秒
• data ： 日期選擇年月日
• datatime ： 時間和日期(目前只有Safari支持)
• datatime-local ：日期時間控件
• week ：周控件
• month：月控件

表單屬性：

• placeholder ：提示信息
• autofocus ：自動獲取焦點
• autocomplete=“on” 或者 autocomplete=“off” 使用這個屬性需要有兩個前提：
• 表單必須提交過
• 必須有name屬性。
• required：要求輸入框不能為空，必須有值才能夠提交。
• pattern=" " 里面寫入想要的正則模式，例如手機號patte="^(+86)?\d{10}$"
• multiple：可以選擇多個文件或者多個郵箱
• form=" form表單的ID"

表單事件：

• oninput 每當input里的輸入框內(nèi)容發(fā)生變化都會觸發(fā)此事件。
• oninvalid 當驗證不通過時觸發(fā)此事件。

4. 進度條、度量器

• progress標簽：用來表示任務(wù)的進度（IE、Safari不支持），max用來表示任務(wù)的進度，value表示已完成多少
• meter屬性：用來顯示剩余容量或剩余庫存（IE、Safari不支持）
• high/low：規(guī)定被視作高/低的范圍
• max/min：規(guī)定最大/小值
• value：規(guī)定當前度量值

設(shè)置規(guī)則：min < low < high < max

5.DOM查詢操作

• document.querySelector()
• document.querySelectorAll()

它們選擇的對象可以是標簽，可以是類(需要加點)，可以是ID(需要加#)

6. Web存儲

HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：

• localStorage - 沒有時間限制的數(shù)據(jù)存儲
• sessionStorage - 針對一個 session 的數(shù)據(jù)存儲

7. 其他

• 拖放：拖放是一種常見的特性，即抓取對象以后拖到另一個位置。設(shè)置元素可拖放：

<img draggable="true" />

• 畫布（canvas ）： canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域，可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

<canvas id="myCanvas" width="200" height="100"></canvas>

• SVG：SVG 指可伸縮矢量圖形，用于定義用于網(wǎng)絡(luò)的基于矢量的圖形，使用 XML 格式定義圖形，圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有損失，它是萬維網(wǎng)聯(lián)盟的標準
• 地理定位：Geolocation（地理定位）用于定位用戶的位置?！?/li>

總結(jié)：

（1）新增語義化標簽：nav、header、footer、aside、section、article

（2）音頻、視頻標簽：audio、video

（3）數(shù)據(jù)存儲：localStorage、sessionStorage

（4）canvas（畫布）、Geolocation（地理定位）、websocket（通信協(xié)議）

（5）input標簽新增屬性：placeholder、autocomplete、autofocus、required

（6）history API：go、forward、back、pushstate

移除的元素有：

• 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
• 對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；

7. img的srcset屬性的作?？

響應(yīng)式頁面中經(jīng)常用到根據(jù)屏幕密度設(shè)置不同的圖片。這時就用到了 img 標簽的srcset屬性。srcset屬性用于設(shè)置不同屏幕密度下，img 會自動加載不同的圖片。用法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代碼，就能實現(xiàn)在屏幕密度為1x的情況下加載image-128.png, 屏幕密度為2x時加載image-256.png。

按照上面的實現(xiàn)，不同的屏幕密度都要設(shè)置圖片地址，目前的屏幕密度有1x,2x,3x,4x四種，如果每一個圖片都設(shè)置4張圖片，加載就會很慢。所以就有了新的srcset標準。代碼如下：

<img src="image-128.png"
     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
     sizes="(max-width: 360px) 340px, 128px" />

其中srcset指定圖片的地址和對應(yīng)的圖片質(zhì)量。sizes用來設(shè)置圖片的尺寸零界點。對于 srcset 中的 w 單位，可以理解成圖片質(zhì)量。如果可視區(qū)域小于這個質(zhì)量的值，就可以使用。瀏覽器會自動選擇一個最小的可用圖片。

sizes語法如下：

sizes="[media query] [length], [media query] [length] ... "

sizes就是指默認顯示128px, 如果視區(qū)寬度大于360px, 則顯示340px。

8. 行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

• 行內(nèi)元素有：?a b span img input select strong?；
• 塊級元素有：?div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p?；

空元素，即沒有內(nèi)容的HTML元素?？赵厥窃陂_始標簽中關(guān)閉的，也就是空元素沒有閉合標簽：

• 常見的有：?<br>?、?<hr>?、?<img>?、?<input>?、?<link>?、?<meta>?；
• 鮮見的有：?<area>?、?<base>?、?<col>?、?<colgroup>?、?<command>?、?<embed>?、?<keygen>?、?<param>?、?<source>?、?<track>?、?<wbr>?。

9. 說一下 web worker

在 HTML 頁面中，如果在執(zhí)行腳本時，頁面的狀態(tài)是不可響應(yīng)的，直到腳本執(zhí)行完成后，頁面才變成可響應(yīng)。web worker 是運行在后臺的 js，獨立于其他腳本，不會影響頁面的性能。 并且通過 postMessage 將結(jié)果回傳到主線程。這樣在進行復(fù)雜操作的時候，就不會阻塞主線程了。

如何創(chuàng)建 web worker：

1. 檢測瀏覽器對于 web worker 的支持性
2. 創(chuàng)建 web worker 文件（js，回傳函數(shù)等）
3. 創(chuàng)建 web worker 對象

10. HTML5的離線儲存怎么使用，它的工作原理是什么

離線存儲指的是：在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點或應(yīng)用，在用戶與因特網(wǎng)連接時，更新用戶機器上的緩存文件。

原理：HTML5的離線存儲是基于一個新建的 .appcache 文件的緩存機制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示

使用方法：

（1）創(chuàng)建一個和 html 同名的 manifest 文件，然后在頁面頭部加入 manifest 屬性：

<html lang="en" manifest="index.manifest">

（2）在 ?cache.manifest? 文件中編寫需要離線存儲的資源：

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

• CACHE: 表示需要離線存儲的資源列表，由于包含 manifest 文件的頁面將被自動離線存儲，所以不需要把頁面自身也列出來。
• NETWORK: 表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會被離線存儲，所以在離線情況下無法使用這些資源。不過，如果在 CACHE 和 NETWORK 中有一個相同的資源，那么這個資源還是會被離線存儲，也就是說 CACHE 的優(yōu)先級更高。
• FALLBACK: 表示如果訪問第一個資源失敗，那么就使用第二個資源來替換他，比如上面這個文件表示的就是如果訪問根目錄下任何一個資源失敗了，那么就去訪問 offline.html 。

（3）在離線狀態(tài)時，操作 window.applicationCache 進行離線緩存的操作。

如何更新緩存：

（1）更新 manifest 文件

（2）通過 javascript 操作

（3）清除瀏覽器緩存

注意事項：

（1）瀏覽器對緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個站點 5MB）。

（2）如果 manifest 文件，或者內(nèi)部列舉的某一個文件不能正常下載，整個更新過程都將失敗，瀏覽器繼續(xù)全部使用老的緩存。

（3）引用 manifest 的 html 必須與 manifest 文件同源，在同一個域下。

（4）FALLBACK 中的資源必須和 manifest 文件同源。

（5）當一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。

（6）站點中的其他頁面即使沒有設(shè)置 manifest 屬性，請求的資源如果在緩存中也從緩存中訪問。

（7）當 manifest 文件發(fā)生改變時，資源請求本身也會觸發(fā)更新。

11. 瀏覽器是如何對 HTML5 的離線儲存資源進行管理和加載？

• 在線的情況下，瀏覽器發(fā)現(xiàn) html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問頁面 ，那么瀏覽器就會根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過頁面并且資源已經(jīng)進行離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，就會重新下載文件中的資源并進行離線存儲。
• 離線的情況下，瀏覽器會直接使用離線存儲的資源。

12. title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

• strong標簽有語義，是起到加重語氣的效果，而b標簽是沒有的，b標簽只是一個簡單加粗標簽。b標簽之間的字符都設(shè)為粗體，strong標簽加強字符的語氣都是通過粗體來實現(xiàn)的，而搜索引擎更側(cè)重strong標簽。
• title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取有很大的影響
• i內(nèi)容展示為斜體，em表示強調(diào)的文本

13. iframe 有那些優(yōu)點和缺點？

iframe 元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）。

優(yōu)點：

• 用來加載速度較慢的內(nèi)容（如廣告）
• 可以使腳本可以并行下載
• 可以實現(xiàn)跨子域通信

缺點：

• iframe 會阻塞主頁面的 onload 事件
• 無法被一些搜索引擎索識別
• 會產(chǎn)生很多頁面，不容易管理

14. label 的作用是什么？如何使用？

label標簽來定義表單控件的關(guān)系：當用戶選擇label標簽時，瀏覽器會自動將焦點轉(zhuǎn)到和label標簽相關(guān)的表單控件上。

• 使用方法1：

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

• 使用方法2：

<label>Date:<input type="text"/></label>

15. Canvas和SVG的區(qū)別

（1）SVG：

SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言XML描述的2D圖形的語言，SVG基于XML就意味著SVG DOM中的每個元素都是可用的，可以為某個元素附加Javascript事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。

其特點如下：

• 不依賴分辨率
• 支持事件處理器
• 最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
• 復(fù)雜度高會減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）
• 不適合游戲應(yīng)用

（2）Canvas：

Canvas是畫布，通過Javascript來繪制2D圖形，是逐像素進行渲染的。其位置發(fā)生改變，就會重新進行繪制。

其特點如下：

• 依賴分辨率
• 不支持事件處理器
• 弱的文本渲染能力
• 能夠以 .png 或 .jpg 格式保存結(jié)果圖像
• 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

注：矢量圖，也稱為面向?qū)ο蟮膱D像或繪圖圖像，在數(shù)學(xué)上定義為一系列由線連接的點。矢量文件中的圖形元素稱為對象。每個對象都是一個自成一體的實體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。

16. head 標簽有什么作用，其中什么標簽必不可少？

標簽用于定義文檔的頭部，它是所有頭部元素的容器。 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等。

文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。

下面這些標簽可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, <title>。

其中 <title> 定義文檔的標題，它是 head 部分中唯一必需的元素。

17. 文檔聲明（Doctype）和<!Doctype html>有何作用? 嚴格模式與混雜模式如何區(qū)分？它們有何意義?

文檔聲明的作用：文檔聲明是為了告訴瀏覽器，當前 HTML文檔使用什么版本的 HTML來寫的，這樣瀏覽器才能按照聲明的版本來正確的解析。

<!Doctype html>的作用：<!doctype html> 的作用就是讓瀏覽器進入標準模式，使用最新的 HTML5 標準來解析渲染頁面；如果不寫，瀏覽器就會進入混雜模式，我們需要避免此類情況發(fā)生。

嚴格模式與混雜模式的區(qū)分：

• 嚴格模式： 又稱為標準模式，指瀏覽器按照 ?W3C? 標準解析代碼；
• 混雜模式： 又稱怪異模式、兼容模式，是指瀏覽器用自己的方式解析代碼?；祀s模式通常模擬老式瀏覽器的行為，以防止老站點無法工作；

區(qū)分：網(wǎng)頁中的 DTD，直接影響到使用的是嚴格模式還是瀏覽模式，可以說 DTD的使用與這兩種方式的區(qū)別息息相關(guān)。

• 如果文檔包含嚴格的 ?DOCTYPE ?，那么它一般以嚴格模式呈現(xiàn)（嚴格 DTD ——嚴格模式）；
• 包含過渡 ?DTD ?和 ?URI ?的 ?DOCTYPE ?，也以嚴格模式呈現(xiàn)，但有過渡 ?DTD ?而沒有 ?URI ?（統(tǒng)一資源標識符，就是聲明最后的地址）會導(dǎo)致頁面以混雜模式呈現(xiàn)（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式）；
• ?DOCTYPE ?不存在或形式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)（DTD不存在或者格式不正確——混雜模式）；
• ?HTML5 ?沒有 ?DTD ?，因此也就沒有嚴格模式與混雜模式的區(qū)別，?HTML5 ?相對寬松，實現(xiàn)時，已經(jīng)盡可能大的實現(xiàn)了向后兼容(HTML5 沒有嚴格和混雜之分)。

總之，嚴格模式讓各個瀏覽器統(tǒng)一執(zhí)行一套規(guī)范兼容模式保證了舊網(wǎng)站的正常運行。

18. 瀏覽器亂碼的原因是什么？如何解決？

產(chǎn)生亂碼的原因：

• 網(wǎng)頁源代碼是 ?gbk? 的編碼，而內(nèi)容中的中文字是 ?utf-8? 編碼的，這樣瀏覽器打開即會出現(xiàn) ?html? 亂碼，反之也會出現(xiàn)亂碼；
• ?html? 網(wǎng)頁編碼是 ?gbk?，而程序從數(shù)據(jù)庫中調(diào)出呈現(xiàn)是 ?utf-8? 編碼的內(nèi)容也會造成編碼亂碼；
• 瀏覽器不能自動檢測網(wǎng)頁編碼，造成網(wǎng)頁亂碼。

解決辦法：

• 使用軟件編輯HTML網(wǎng)頁內(nèi)容；
• 如果網(wǎng)頁設(shè)置編碼是 ?gbk?，而數(shù)據(jù)庫儲存數(shù)據(jù)編碼格式是 ?UTF-8?，此時需要程序查詢數(shù)據(jù)庫數(shù)據(jù)顯示數(shù)據(jù)前進程序轉(zhuǎn)碼；
• 如果瀏覽器瀏覽時候出現(xiàn)網(wǎng)頁亂碼，在瀏覽器中找到轉(zhuǎn)換編碼的菜單進行轉(zhuǎn)換。

19. 漸進增強和優(yōu)雅降級之間的區(qū)別

（1）漸進增強（progressive enhancement）：主要是針對低版本的瀏覽器進行頁面重構(gòu)，保證基本的功能情況下，再針對高級瀏覽器進行效果、交互等方面的改進和追加功能，以達到更好的用戶體驗。

（2）優(yōu)雅降級 graceful degradation： 一開始就構(gòu)建完整的功能，然后再針對低版本的瀏覽器進行兼容。

兩者區(qū)別：

• 優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始的，并試圖減少用戶體驗的供給；而漸進增強是從一個非?；A(chǔ)的，能夠起作用的版本開始的，并在此基礎(chǔ)上不斷擴充，以適應(yīng)未來環(huán)境的需要；
• 降級（功能衰竭）意味著往回看，而漸進增強則意味著往前看，同時保證其根基處于安全地帶。

“優(yōu)雅降級”觀點認為應(yīng)該針對那些最高級、最完善的瀏覽器來設(shè)計網(wǎng)站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。 在這種設(shè)計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗?？梢宰鲆恍┬〉恼{(diào)整來適應(yīng)某個特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點，因此除了修復(fù)較大的錯誤之外，其它的差異將被直接忽略。

“漸進增強”觀點則認為應(yīng)關(guān)注于內(nèi)容本身。內(nèi)容是建立網(wǎng)站的誘因，有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點是它們?nèi)忌婕暗絻?nèi)容。這使得“漸進增強”成為一種更為合理的設(shè)計范例。這也是它立即被 Yahoo 所采納并用以構(gòu)建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

20. 說一下 HTML5 drag API

• dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時觸發(fā)。
• darg：事件主體是被拖放元素，在正在拖放被拖放元素時觸發(fā)。
• dragenter：事件主體是目標元素，在被拖放元素進入某元素時觸發(fā)。
• dragover：事件主體是目標元素，在被拖放在某元素內(nèi)移動時觸發(fā)。
• dragleave：事件主體是目標元素，在被拖放元素移出目標元素是觸發(fā)。
• drop：事件主體是目標元素，在目標元素完全接受被拖放元素時觸發(fā)。
• dragend：事件主體是被拖放元素，在整個拖放操作結(jié)束時觸發(fā)。