HTML常見面試題收集

一. Html5 有哪些新特性、移除了那些元素？

新特性：

拖拽釋放(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；

二. HTML 語義化的了解

用正确的标簽做正确的事情
html 語義化讓頁面的内容結構化，結構更清晰，便于對浏覽器、搜尋引擎解析；即使在沒有樣式 CSS 情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜尋引擎的爬蟲也依賴于 HTML 标記來确定上下文和各個關鍵字的權重，利于 SEO;
使閱讀源代碼的人對網站更容易将網站分塊，便于閱讀維護了解。

三. HTML裡的meta标簽

meta标簽是什麼？

META标簽是HTML語言HEAD區的一個輔助性标簽
meta标簽是幹什麼用的？

META标簽用來描述一個HTML網頁文檔的屬性，例如作者、日期和時間、網頁描述、關鍵詞、頁面重新整理等。它提供的資訊雖然使用者不可見，但卻是文檔的最基本的中繼資料
中繼資料是什麼？

中繼資料(Metadata)是用來概括描述資料的一些基本資料。也就是描述資料的資料。
meta标簽的使用meta标簽共有兩個屬性：http-equiv和name;不同的屬性又有不同的參數值，這些不同的參數值就實作了不同的網頁功能

name屬性

keywords用來告訴搜尋引擎你網頁的關鍵字是什麼
＜meta name="keywords" content="science,education,culture,politics,ecnomics，relationships, entertaiment, human"＞
description用來告訴搜尋引擎你的網站主要内容
＜meta name="description" content="This page is about the meaning of science, education,culture."＞
author(作者) 标注網頁的作者
＜meta name="author" content"root,[email protected]"＞

http-equiv屬性___相當于http協定中檔案頭的作用

content-Type參數(顯示字元集的設定)
＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞
Expires(網頁到期期限)
＜meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞
Pragma(cache模式：禁止浏覽器從本地計算機的緩存中通路頁面内容)
＜meta http-equiv="Pragma" content="no-cache"＞
Refresh(重新整理并指向新頁面)
＜meta http-equiv="Refresh" content="2; URL=http://www.root.net"＞
Set-Cookie(cookie設定，如果網頁過期，那麼存盤的cookie将被删除)
＜meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/"＞
Window-target(顯示視窗的設定：強制頁面在目前視窗以獨立頁面顯示)
＜meta http-equiv="Window-target" content="_top"＞

HTML5使用的編碼方式 ＜meta charset=”UTF-8”＞
目前 viewport 的寬度等于裝置的寬度＜meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/＞

四. HTML 與 XHTML 二者有什麼差別

應該使用XHTML，因為XHTML是XML重寫了HTML的規範，比HTML更加嚴格，表現如下：

XHTML中所有的标記都必須有一個相應的結束标簽；
XHTML所有标簽的元素和屬性的名字都必須使用小寫；
所有的XML标記都必須合理嵌套；
所有的屬性都必須用引号“”括起來；
把所有<和&特殊符号用編碼表示；
給所有屬性附一個值；
不要在注釋内容中使用“--”；
圖檔必須使用說明文字。

五. HTML5 的 form 如何關閉自動完成功能

将不想要自動完成的 form 或 input 設定為 autocomplete=off。

六. HTML檔案頭裡都有個Doctype，這是幹什麼的麼

<! DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 标簽之前。
Doctype告知浏覽器文檔使用哪種 HTML 或 XHTML 規範。
Doctype告訴浏覽器按照何種規範解析頁（如果你的頁面沒有 DOCTYPE 的聲明，那麼 compatMode 預設就是 BackCompat, 浏覽器按照自己的方式解析渲染頁面）

解析：

doctype 是一種标準通用标記語言的文檔類型聲明，目的是告訴标準通用标記語言解析器要使用什麼樣的文檔類型定義（DTD）來解析文檔。
<! DOCTYPE>聲明是用來訓示web浏覽器關于頁面使用哪個HTML版本進行編寫的指令。
<! DOCTYPE>聲明必須是HTML文檔的第一行，位于html标簽之前。

而浏覽器本身分為兩種模式，一種是标準模式，一種是怪異模式，浏覽器通過 doctype 來區分這兩種模式，doctype 在 html 中的作用就是觸發浏覽器的标準模式，

如果 html 中省略了 doctype，浏覽器就會進入到 Quirks 模式的怪異狀态，在這種模式下，有些樣式會和标準模式存在差異，而 html 标準和 dom 标準值規定了标準模式下的行為，沒有對怪異模式做出規定，

是以不同浏覽器在怪異模式下的處理也是不同的，是以一定要在 html 開頭使用 doctype。

七. HTML5 為什麼隻需要寫 <! DOCTYPE HTML> ？

HTML 4.01 中的 doctype 需要對 DTD 進行引用，因為 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，是以不需要對 DTD 進行引用，但是需要 doctype 來規範浏覽器的行為。

其中，SGML 是标準通用标記語言, 簡單的說，就是比 HTML, XML 更老的标準，HTML，XML這兩者都是由 SGML 發展而來的，而HTML5 不是的。

八. HTML5 的離線儲存怎麼使用，工作原理能不能解釋一下？

在使用者沒有與網際網路連接配接時，可以正常通路站點或應用，在使用者與網際網路連接配接時，更新使用者機器上的緩存檔案。

工作原理：HTML5 的離線存儲是基于一個建立的.appcache 檔案的緩存機制(不是存儲技術)，通過這個檔案上的解析清單離線存儲資源，這些資源就會像 cookie 一樣被存儲了下來。

之後當網絡在處于離線狀态下時，浏覽器會通過被離線存儲的資料進行頁面展示。

使用方法：（隻要在頭部加一個 manifest 屬性）

<!DOCTYPE html>
<html manifest="cache.manifest">
...
</html>

然後 cache.manifest 檔案的書寫方式如下：

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

代碼解析說明：

離線存儲的 manifest 一般由三個部分組成:

CACHE:表示需要離線存儲的資源清單，由于包含 manifest 檔案的頁面将被自動離線存儲，是以不需要把頁面自身也列出來。
NETWORK:表示在它下面列出來的資源隻有在線上的情況下才能通路，他們不會被離線存儲，是以在離線情況下無法使用這些資源。不過，如果在 CACHE 和 NETWORK 中有一個相同的資源，那麼這個資源還是會被離線存儲，也就是說 CACHE 的優先級更高。
FALLBACK:表示如果通路第一個資源失敗，那麼就使用第二個資源來替換他，比如上面這個檔案表示的就是如果通路根目錄下任何一個資源失敗了，那麼就去通路 offline.html。

浏覽器對H5的離線存儲管理和加載：

線上的情況下，浏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 檔案，如果是第一次通路 app，那麼浏覽器就會根據 manifest 檔案的内容下載下傳相應的資源并且進行離線存儲。如果已經通路過 app 并且資源已經離線存儲了，那麼浏覽器就會使用離線的資源加載頁面，然後浏覽器會對比新的 manifest 檔案與舊的 manifest 檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載下傳檔案中的資源并進行離線存儲。離線的情況下，浏覽器就直接使用離線存儲的資源。

九. HTML 全局屬性(global attribute)有哪些？

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: 元素和子孫節點内容是否需要本地化

十. HTML5 引入什麼新的表單屬性？

Datalist datetime output keygen date month week time number range emailurl

十一. HTML5 Canvas 元素有什麼用？

Canvas 元素用于在網頁上繪制圖形，該元素标簽強大之處在于可以直接在 HTML 上進行圖形操作，但無法像svg一樣對元素綁定事件。

十二. 新的 HTML5 文檔類型和字元集是？

HTML5文檔類型：<!doctype html>  HTML5使用的編碼<meta charset=”UTF-8”>

十三. html 常見相容性問題？

雙邊距 BUG float 引起的，解決辦法: 使用 display解決
2.3 像素問題使用 float 引起的，解決辦法: 使用 dislpay:inline -3px
超連結 hover 點選後失效，解決辦法: 使用正确的書寫順序 link visited hover active
Ie z-index 問題，解決辦法: 給父級添加 position:relative
Png 透明，解決辦法: 使用 js 代碼
Min-height 最小高度，解決辦法: ！Important 解決
7.select 在 ie6 下遮蓋，解決辦法: 使用 iframe 嵌套
為什麼沒有辦法定義 1px 左右的寬度容器，解決辦法: （IE6 預設的行高造成的，使用 over:hidden, zoom:0.08 line-height:1px）
IE5-8 不支援 opacity，解決辦法：

.opacity {
    opacity: 0.4;
    filter: alpha(opacity=60);/_ for IE5-7 _/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";/_ for IE 8_/
  }

IE6 不支援 PNG 透明背景，解決辦法: IE6 下使用 gif 圖檔

十四. 前端頁面由哪三層構成，分别作用是什麼？

分成：結構層、表示層、行為層。

結構層（structural layer）

由 HTML 或 XHTML 之類的标記語言負責建立。标簽，也就是那些出現在尖括号裡的單詞，對網頁内容的語義含義做出了描述，但這些标簽不包含任何關于如何顯示有關内容的資訊。例如，P 标簽表達了這樣一種語義：“這是一個文本段。”
表示層（presentation layer）

由 CSS 負責建立。 CSS 對“如何顯示有關内容”的問題做出了回答。
行為層（behaviorlayer）

負責回答“内容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。

十五. 對 WEB 标準以及 W3C 的了解與認識

web 标準簡單來說可以分為結構、表現和行為。其中結構主要是有 HTML 标簽組成。或許通俗點說，在頁面 body 裡面我們寫入的标簽都是為了頁面的結構。表現即指 css 樣式表，通過 css 可以是頁面的結構标簽更具美感。

行為是指頁面和使用者具有一定的互動，同時頁面結構或者表現發生變化，主要是由 js 組成。

web 标準一般是将該三部分獨立分開，使其更具有子產品化。但一般産生行為時，就會有結構或者表現的變化，也使這三者的界限并不那麼清晰。

W3C 對 web 标準提出了規範化的要求，也就是在實際程式設計中的一些代碼規範：包含如下幾點

對于結構要求：（标簽規範可以提高搜尋引擎對頁面的抓取效率，對 SEO 很有幫助）

1）标簽字母要小寫

2）标簽要閉合

3）标簽不允許随意嵌套
對于 css 和 js 來說

1）盡量使用外鍊 css 樣式表和 js 腳本。是結構、表現和行為分為三塊，符合規範。同時提高頁面渲染速度，提高使用者的體驗。

2）樣式盡量少用行間樣式表，使結構與表現分離，标簽的 id 和 class 等屬性命名要做到見文知義，标簽越少，加載越快，使用者體驗提高，代碼維護簡單，便于改版

3）不需要變動頁面内容，便可提供列印版本而不需要複制内容，提高網站易用性。

十六. 為什麼最好把 CSS 的 <link> 标簽放在 <head></head> 之間？

把

<link>

标簽放在

<head></head>

之間是規範要求的内容。這種做法可以讓頁面逐漸呈現，提高了使用者體驗。如果将樣式表放在文檔底部附近，會使許多浏覽器（包括 Internet Explorer）不能逐漸呈現頁面。

一些浏覽器會阻止渲染，以避免在頁面樣式發生變化時，重新繪制頁面中的元素。這種做法可以防止呈現給使用者空白的頁面或沒有樣式的内容

十七. 為什麼最好把 JS 的 <script> 标簽恰好放在 </body> 之前？

腳本在下載下傳和執行期間會阻止 HTML 解析。把

<script>

标簽放在底部，保證 HTML 首先完成解析，将頁面盡早呈現給使用者。

例外情況：

是當你的腳本裡包含

document.write()

時。（但是現在

document.write()

不推薦使用）。同時你将

<script>

标簽放在底部，意味着浏覽器直到整個文檔（document）被解析完成不能開始下載下傳腳本。

也許，對此比較好的做法是，

<script>

使用

defer

屬性，放在

<head>

中。

十八. iframe 的作用以及優缺點

iframe 是用來在網頁中插入第三方頁面，早期的頁面使用 iframe 主要是用于導航欄這種很多頁面都相同的部分，這樣在切換頁面的時候避免重複下載下傳。

優點：

便于修改，模拟分離，像一些資訊管理系統會用到。
但現在基本不推薦使用。除非特殊需要，一般不推薦使用。

缺點：

iframe 的建立比一般的 DOM 元素慢了 1-2 個數量級
架構結構中出現各種滾動條
iframe 和首頁面共享連接配接池，而浏覽器對相同域的連接配接有限制，是以會影響頁面的并行加載
iframe 标簽會阻塞頁面的的加載，如果頁面的 onload 事件不能及時觸發，會讓使用者覺得網頁加載很慢，使用者體驗不好，在 Safari 和 Chrome 中可以通過 js 動态設定 iframe 的 src 屬性來避免阻塞。
iframe 對于 SEO 不友好，替換方案一般就是動态語言的 Incude 機制和 ajax 動态填充内容等。

十九. Label 的作用是什麼？是怎麼用的？

label 标簽來定義表單控制間的關系, 當使用者選擇該标簽時，浏覽器會自動将焦點轉到和标簽相關的表單控件上。

解析：兩種用法：一種是 id 綁定，一種是嵌套

<label for="Name">Number:</label>

 <input type=“text“name="Name" id="Name" />

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

二十. title 與 h1 的差別、b 與 strong 的差別、i 與 em 的差別？

title用于網站資訊标題，突出網站标題或關鍵字，一個網站可以有多個title，seo權重高于H1；H1概括的是文章主題，一個頁面最好隻用一個H1，seo權重低于title。

從網站角度而言，title則重于網站資訊标題，突出網站标題或關鍵字用title，一篇文章，一個頁面最好隻用一個H1，H1用得太多，會稀釋主題；一個網站可以有多個title，最好一個單頁用一個title以便突出網站頁面主題資訊。
從文章角度而言，H1則概括的是文章主題，突出文章主題，用H1，面對的使用者，要突出其視覺效果。
從SEO角度而言，title的權重高于H1，其适用性要比H1廣。

b為了加粗而加粗，strong為了标明重點而加粗

b這個标簽對應 bold，即文本加粗，其目的僅僅是為了加粗顯示文本，是一種樣式／風格需求；
strong這個标簽意思是加強字元的語氣，表示該文本比較重要，提醒讀者／終端注意。為了達到這個目的，浏覽器等終端将其加粗顯示；

i為了斜體而斜體，em為了标明重點而斜體，且對于搜尋引擎來說strong和em比b和i要重視的多

二十一. img 上 title 與 alt作用

title 指圖檔的資訊、alt 指圖檔不顯示時顯示的文字

二十二. DOM 和 BOM 有什麼差別？

DOM

Document Object Model，文檔對象模型

DOM 是為了操作文檔出現的 API，document 是其的一個對象

DOM 和文檔有關，這裡的文檔指的是網頁，也就是 html 文檔。DOM 和浏覽器無關，他關注的是網頁本身的内容。
BOM

Browser Object Model，浏覽器對象模型

BOM 是為了操作浏覽器出現的 API，window 是其的一個對象

window 對象既為 javascript 通路浏覽器提供 API，同時在 ECMAScript 中充當 Global 對象

二十三. Canvas 和 SVG 有什麼差別？

Canvas 和 SVG 都可以在浏覽器中建立圖形，但是它們在根本上是不同的。

Canvas：

通過 Javascript 來繪制 2D 圖形。是逐像素進行渲染的。其位置發生改變，會重新進行繪制。

SVG：

一種使用 XML 描述的 2D 圖形語言， SVG 基于 XML意味着SVG DOM 中的每個元素都是可用的，可以為某個元素附加 Javascript 事件處理器。

在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那麼浏覽器能夠自動重制圖形。

差別比較：

Canvas

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

SVG

不依賴分辨率
支援事件處理器
最适合帶有大型渲染區域的應用程式（比如谷歌地圖）
複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不适合遊戲應用

二十四. src 與 href 的差別？

src 用于引用資源，替換目前元素；href 用于在目前文檔和引用資源之間确立聯系。

href

href 辨別超文本引用，用在 link 和 a 等元素上，href 是引用和頁面關聯，是在目前元素和引用資源之間建立聯系

若在文檔中添加 href ，浏覽器會識别該文檔為 CSS

檔案，就會并行下載下傳資源并且不會停止對目前文檔的處理。這也是為什麼建議使用 link 方式加載 CSS，而不是使用 @import 方式。
src

src 表示引用資源，替換目前元素，用在 img，script，iframe 上，src 是頁面内容不可缺少的一部分。

當浏覽器解析到 src ，會暫停其他資源的下載下傳和處理（圖檔不會暫停其他資源下載下傳和處理），直到将該資源加載、編譯、執行完畢，圖檔和架構等也如此，類似于将所指向資源應用到目前内容。這也是為什麼建議把

js 腳本放在底部而不是頭部的原因。

二十五. 請描述下 SEO 中的 TDK？

在 SEO 中，所謂的 TDK 其實就是 title、description、keywords 這三個标簽，title 标題标簽，description 描述标簽，keywords 關鍵詞标簽

二十六. 前端需要注意哪些 SEO？

合理的 title、description、keywords：搜尋對着三項的權重逐個減小，title 值強調重點即可，重要關鍵詞出現不要超過 2 次，而且要靠前，不同頁面 title 要有所不同；description 把頁面内容高度概括，長度合适，不可過分堆砌關鍵詞，不同頁面 description

有所不同；keywords 列舉出重要關鍵詞即可
語義化的 HTML 代碼，符合 W3C 規範：語義化代碼讓搜尋引擎容易了解網頁
重要内容 HTML 代碼放在最前：搜尋引擎抓取 HTML 順序是從上到下，有的搜尋引擎對抓取長度有限制，保證重要内容一定會被抓取
重要内容不要用 js 輸出：爬蟲不會執行 js 擷取内容
少用 iframe：搜尋引擎不會抓取 iframe 中的内容
非裝飾性圖檔必須加 alt
提高網站速度：網站速度是搜尋引擎排序的一個重要名額

二十七. viewport 原理是什麼？

meta viewport 标簽的作用是讓目前 viewport 的寬度等于裝置的寬度，同時不允許使用者進行手動縮放

viewport的原理：移動端浏覽器通常都會在一個比移動端螢幕更寬的虛拟視窗中渲染頁面，這個虛拟視窗就是 viewport; 目的是正常展示沒有做移動端适配的網頁，讓他們完整的展示給使用者；

解析：

Viewport ：字面意思為視圖視窗，在移動 web 開發中使用。表示将裝置浏覽器寬度虛拟成一個特定的值（或計算得出），這樣利于移動 web 站點跨裝置顯示效果基本一緻。移動版的 Safari 浏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport

的大小和縮放，其他手機浏覽器也基本支援。

在移動端浏覽器當中，存在着兩種視口，一種是可見視口（也就是我們說的裝置大小），另一種是視窗視口（網頁的寬度是多少）。舉個例子：如果我們的螢幕是 320 像素 * 480 像素的大小（iPhone4），假設在浏覽器中，320 像素的螢幕寬度能夠展示 980 像素寬度的内容。那麼 320

像素的寬度就是可見視口的寬度，而能夠顯示的 980 像素的寬度就是視窗視口的寬度。

為了顯示更多的内容，大多數的浏覽器會把自己的視窗視口擴大，簡易的了解，就是讓原本 320 像素的螢幕寬度能夠容下 980 像素甚至更寬的内容（将網頁等比例縮小）。

Viewport 屬性值：

width 設定 layout viewport 的寬度，為一個正整數，或字元串"width-device"

initial-scale 設定頁面的初始縮放值，為一個數字，可以帶小數

minimum-scale 允許使用者的最小縮放值，為一個數字，可以帶小數

maximum-scale 允許使用者的最大縮放值，為一個數字，可以帶小數

height 設定 layout viewport 的高度，這個屬性對我們并不重要，很少使用

user-scalable 是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes 代表允許這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗号隔開就行了。

二十八. 網頁驗證碼是幹嘛的，是為了解決什麼安全問題？

防止惡意破解密碼、刷票、論壇灌水等等，視訊上則是防止刷課視訊等，同時也一定程度上防止用特定程式暴力破解網站等

二十九. 如何在頁面上實作一個圓形的可點選區域？

在css3、js、map 加 area三個方面實作

border-radius (css3)：

對于圓形，最直接的方法想到的就是 css3 的圓角屬性，這個屬性可以将 html 元素的形狀設定為圓形。border-radius：50%

通過事件坐标來實作（js）：

也就是通過 js 來進行一個區域判斷，進而簡介地的形成可點區域，以下給出主要的 js 測試代碼：

// 擷取目标元素
var box = document.getElementById("box");

// 對目标元素target的圓形區域進行一個點選事件綁定
function bindClickOnCircleArea(target, callback) {
    target.onclick = function(e) {
        e = e || window.event;

        // target中心點的坐标
        var x1 = 100;
        var y1 = 100;

        // 事件源坐标
        var x2 = e.offsetX;
        var y2 = e.offsetY;

        // 校驗是否在圓形點選區，在的話就執行callback回調
        // 計算事件觸發點與target中心的位置
        var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
        // 通過半徑進行校驗
        if (len <= 100) {
            callback();
        } else {
            alert("死鬼，跑哪去啊，你老婆我是黃皮膚還是白皮膚都分不清了嗎");
        }
    };
}

// 執行
bindClickOnCircleArea(box, function() {
    alert("老婆，你讓我好找啊，嗚嗚嗚");
});

通過 map 加 area

<img src="../imgs/test.jpg" width="200" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="circle" coords="100,100,100" href="http://www.baidu.com" target="_blank" />
</map>

三十. 為什麼用多個域名存儲網站資源更有效？

CDN 緩存更友善
突破浏覽器并發限制
節約 cookie 帶寬
節約主域名的連接配接數，優化頁面響應速度
防止不必要的安全問題

三十一. 頁面可見性（Page Visibility）API 可以有哪些用途？

頁面可見性：就是對于使用者來說，頁面是顯示還是隐藏, 所謂顯示的頁面，就是我們使用者所看到的頁面；隐藏的頁面，就是我們使用者沒有看到頁面。

了解上頁面設定隐藏的和把浏覽器最小化頁面不可見都是頁面可見性的種類。

API 由document.hidden 傳回一個布爾值，如果是 true, 表示頁面不可見，false 則表示，頁面顯示可見。不同頁面之間來回切換，觸發 visibilitychange 事件。還有一個 document.visibilityState, 表示頁面所處的狀态，取值：visible, hidden 等四個。

document.addEventListener("visibilitychange", function() {
    if (document.hidden) {
        document.title = "hidden";
    } else {
        document.title = "visibile";
    }
 });

用途上類似一般按鈕的顯示，動畫，視訊，音頻都可以在頁面顯示時打開，在頁面隐藏時關閉，條件化表格等等都可以用到

三十二. Quirks(怪癖）和 Standards（标準）模式有什麼差別？

以 ie6 為例，如果寫了 DTD，就意味着這個頁面将采用對 CSS 支援更好的布局，而如果沒有，則采用相容之前的布局方式。這就是 Quirks 模式（怪癖模式，詭異模式，怪異模式）。

總體會有布局、樣式解析和腳本執行三個方面的差別：（幾個常見執行個體差別如下）

盒模型：在 W3C 标準中，如果設定一個元素的寬度和高度，指的是元素内容的寬度和高度，而在 Quirks 模式下，IE 的寬度和高度還包含了 padding 和 border。
設定行内元素的高寬：在 Standards 模式下，給 <span> 等行内元素設定 wdith 和 height 都不會生效，而在 quirks 模式下，則會生效。
設定百分比的高度：在 standards 模式下，一個元素的高度是由其包含的内容來決定的，如果父元素沒有設定百分比的高度，子元素設定一個百分比的高度是無效的
用 margin:0 auto 設定水準居中：使用 margin:0 auto 在 standards 模式下可以使元素水準居中，但在 quirks 模式下卻會失效。

三十三. div+css 的布局較 table 布局有什麼優點？

表現與結構相分離，改版的時候更友善隻要改 css 檔案。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
易于優化（seo）搜尋引擎更友好，排名更容易靠前。

三十四. 描述一下漸進增強和優雅降級之間的不同？

漸進增強 progressive enhancement：

針對低版本浏覽器進行建構頁面，保證最基本的功能，然後再針對進階浏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。（一開始保證最基本的功能，再改進和追加功能）

優雅降級 graceful degradation：

一開始就建構完整的功能，然後再針對低版本浏覽器進行相容。（一開始就建構完整的功能，再針對低版本浏覽器進行相容。）

差別：

優雅降級是從複雜的現狀開始，并試圖減少使用者體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以适應未來環境需要。

降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處于安全地帶。

三十五. 常見的浏覽器核心有哪些？

Trident 核心：IE, MaxThon, TT, The World, 360, 搜狗浏覽器等。
Gecko 核心：Netscape6 及以上版本，FF、MozillaSuite/SeaMonkey 等
[Opera 核心原為：Presto，現為：Blink; ]
Webkit 核心：Safari、Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）]

三十六. 跨标簽頁的通訊方式有哪些？

BroadCast Channel
Service Worker
LocalStorage + window.onstorage監聽
Shared Worker + 定時器輪詢(setInterval)
IndexedDB + 定時器輪詢(setInterval)
cookie + 定時器輪詢(setInterval)
window.open + window.postMessage
Websocket

具體實作或方法可以自行查找試驗

三十七. 浏覽器是如何渲染UI的？

浏覽器将擷取的HTML文檔解析成DOM樹
處理CSS标記，屬性樣式表模型CSSOM(CSS Object Model)
将DOM和CSSOM合并為渲染樹（渲染樹）将被建立，代表尊貴将被渲染的對象
渲染樹的每個元素都可以計算過的内容，才能被渲染布局布局。浏覽使用一種流式處理的方法，隻需要一次渲染操作就可以渲染所有的元素
将渲染樹的每個節點畫到螢幕上，這一步被畫

圖形說明：

HTML常見面試題收集

繼續閱讀

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪月光部落格：第一部落格是如何打造成的

門戶通專訪草根站長九天狼：做站貴在堅持

專家訪談：搜尋開源力量：Lucene技術前景

如何成為一名.net 工程師?

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

30天了解30種技術系列---(10)面向Cloud的搜尋引擎 ElasticSearch

layui多任務上傳添加進度條