前端面試 HTML篇

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

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

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

2. 對(duì)HTML語(yǔ)義化的理解

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

語(yǔ)義化的優(yōu)點(diǎn)如下：

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

常見(jiàn)的語(yǔ)義化標(biāo)簽：

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

3. DOCTYPE(?檔類(lèi)型) 的作?

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

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

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

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

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

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

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

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

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

5. 常?的meta標(biāo)簽有哪些

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

常用的meta標(biāo)簽：

（1）?charset?，用來(lái)描述HTML文檔的編碼類(lèi)型：

<meta charset="UTF-8" >

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

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

（3）description，頁(yè)面描述：

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

（4）refresh，頁(yè)面重定向和刷新：

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

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

<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?：文件將被檢索，且頁(yè)面上的鏈接可以被查詢；
• ?none?：文件將不被檢索，且頁(yè)面上的鏈接不可以被查詢；
• ?index?：文件將被檢索；
• ?follow?：頁(yè)面上的鏈接可以被查詢；
• ?noindex?：文件將不被檢索；
• ?nofollow?：頁(yè)面上的鏈接不可以被查詢。

6. HTML5有哪些更新

1. 語(yǔ)義化標(biāo)簽

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

2. 媒體標(biāo)簽

（1） audio：音頻

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

屬性：

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

（2）video視頻

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

屬性：

• poster：指定視頻還沒(méi)有完全下載完畢，或者用戶還沒(méi)有點(diǎn)擊播放前顯示的封面。默認(rèn)顯示當(dāng)前視頻文件的第一針畫(huà)面，當(dāng)然通過(guò)poster也可以自己指定。
• controls 控制面板
• width
• height

（3）source標(biāo)簽

因?yàn)闉g覽器對(duì)視頻格式支持程度不一樣，為了能夠兼容不同的瀏覽器，可以通過(guò)source來(lái)指定視頻源。

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

3. 表單

表單類(lèi)型：

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

表單屬性：

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

表單事件：

• oninput 每當(dāng)input里的輸入框內(nèi)容發(fā)生變化都會(huì)觸發(fā)此事件。
• oninvalid 當(dāng)驗(yàn)證不通過(guò)時(shí)觸發(fā)此事件。

4. 進(jìn)度條、度量器

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

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

5.DOM查詢操作

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

它們選擇的對(duì)象可以是標(biāo)簽，可以是類(lèi)(需要加點(diǎn))，可以是ID(需要加#)

6. Web存儲(chǔ)

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

• localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
• sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)

7. 其他

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

<img draggable="true" />

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

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

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

總結(jié)：

（1）新增語(yǔ)義化標(biāo)簽：nav、header、footer、aside、section、article

（2）音頻、視頻標(biāo)簽：audio、video

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

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

（5）input標(biāo)簽新增屬性：placeholder、autocomplete、autofocus、required

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

移除的元素有：

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

7. img的srcset屬性的作?？

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

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

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

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

<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指定圖片的地址和對(duì)應(yīng)的圖片質(zhì)量。sizes用來(lái)設(shè)置圖片的尺寸零界點(diǎn)。對(duì)于 srcset 中的 w 單位，可以理解成圖片質(zhì)量。如果可視區(qū)域小于這個(gè)質(zhì)量的值，就可以使用。瀏覽器會(huì)自動(dòng)選擇一個(gè)最小的可用圖片。

sizes語(yǔ)法如下：

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

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

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

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

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

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

9. 說(shuō)一下 web worker

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

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

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

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

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

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

使用方法：

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

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

（2）在 ?cache.manifest? 文件中編寫(xiě)需要離線存儲(chǔ)的資源：

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

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

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

如何更新緩存：

（1）更新 manifest 文件

（2）通過(guò) javascript 操作

（3）清除瀏覽器緩存

注意事項(xiàng)：

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

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

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

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

（5）當(dāng)一個(gè)資源被緩存后，該瀏覽器直接請(qǐng)求這個(gè)絕對(duì)路徑也會(huì)訪問(wèn)緩存中的資源。

（6）站點(diǎn)中的其他頁(yè)面即使沒(méi)有設(shè)置 manifest 屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪問(wèn)。

（7）當(dāng) manifest 文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新。

11. 瀏覽器是如何對(duì) HTML5 的離線儲(chǔ)存資源進(jìn)行管理和加載？

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

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

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

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

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

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

label標(biāo)簽來(lái)定義表單控件的關(guān)系：當(dāng)用戶選擇label標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和label標(biāo)簽相關(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）是基于可擴(kuò)展標(biāo)記語(yǔ)言XML描述的2D圖形的語(yǔ)言，SVG基于XML就意味著SVG DOM中的每個(gè)元素都是可用的，可以為某個(gè)元素附加Javascript事件處理器。在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

其特點(diǎn)如下：

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

（2）Canvas：

Canvas是畫(huà)布，通過(guò)Javascript來(lái)繪制2D圖形，是逐像素進(jìn)行渲染的。其位置發(fā)生改變，就會(huì)重新進(jìn)行繪制。

其特點(diǎn)如下：

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

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

16. head 標(biāo)簽有什么作用，其中什么標(biāo)簽必不可少？

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

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

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

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

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

文檔聲明的作用：文檔聲明是為了告訴瀏覽器，當(dāng)前 HTML文檔使用什么版本的 HTML來(lái)寫(xiě)的，這樣瀏覽器才能按照聲明的版本來(lái)正確的解析。

<!Doctype html>的作用：<!doctype html> 的作用就是讓瀏覽器進(jìn)入標(biāo)準(zhǔn)模式，使用最新的 HTML5 標(biāo)準(zhǔn)來(lái)解析渲染頁(yè)面；如果不寫(xiě)，瀏覽器就會(huì)進(jìn)入混雜模式，我們需要避免此類(lèi)情況發(fā)生。

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

• 嚴(yán)格模式： 又稱(chēng)為標(biāo)準(zhǔn)模式，指瀏覽器按照 ?W3C? 標(biāo)準(zhǔn)解析代碼；
• 混雜模式： 又稱(chēng)怪異模式、兼容模式，是指瀏覽器用自己的方式解析代碼?；祀s模式通常模擬老式瀏覽器的行為，以防止老站點(diǎn)無(wú)法工作；

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

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

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

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

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

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

解決辦法：

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

19. 漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的區(qū)別

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

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

兩者區(qū)別：

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

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

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

20. 說(shuō)一下 HTML5 drag API

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