摘要：前端工作面試相關(guān)問(wèn)題文檔類型的作用是什么在中有兩個(gè)主要目的。而當(dāng)元素的內(nèi)容只有圖片時(shí)，如的單元格。在下，單元格中的圖片的屬性默認(rèn)為，因此，在圖片底部會(huì)有幾像素的空間。所以百分比的高度必須在父元素有聲明高度時(shí)使用。關(guān)閉窗口后，即被銷毀。

Q: doctype（文檔類型）的作用是什么？

A: 在HTML中 doctype 有兩個(gè)主要目的。

對(duì)文檔進(jìn)行有效性驗(yàn)證:

它告訴用戶代理和校驗(yàn)器這個(gè)文檔是按照什么DTD 寫的。這個(gè)動(dòng)作是被動(dòng)的，每次頁(yè)面加載時(shí)，瀏覽器并不會(huì)下載DTD 并檢查合法性，只有當(dāng)手動(dòng)校驗(yàn)頁(yè)面時(shí)才啟用。

決定瀏覽器的呈現(xiàn)模式:

對(duì)于實(shí)際操作，通知瀏覽器讀取文檔時(shí)用哪種解析算法。如果沒(méi)有寫，則瀏覽器則根據(jù)自身的規(guī)則對(duì)代碼進(jìn)行解析，可能會(huì)嚴(yán)重影響HTML 排版布局。瀏覽器有三種方式解析HTML文檔。

非怪異（標(biāo)準(zhǔn)）模式

怪異模式

部分怪異（近乎標(biāo)準(zhǔn)）模式

關(guān)于IE瀏覽器的文檔模式，瀏覽器模式，嚴(yán)格模式，怪異模式，DOCTYPE標(biāo)簽，可詳細(xì)閱讀模式？標(biāo)準(zhǔn)！的內(nèi)容。

Q: 瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？

A: 在“標(biāo)準(zhǔn)模式”(Standards Mode) 頁(yè)面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對(duì)舊版本瀏覽器設(shè)計(jì)、并未嚴(yán)格遵循 W3C 標(biāo)準(zhǔn)的網(wǎng)頁(yè)而產(chǎn)生的一種頁(yè)面渲染模式。瀏覽器基于頁(yè)面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個(gè)完整的DOCTYPE則瀏覽器將會(huì)采用標(biāo)準(zhǔn)模式，而如果它缺失則瀏覽器將會(huì)采用怪異模式。

強(qiáng)烈建議閱讀加深理解：怪異模式（Quirks Mode）對(duì) HTML 頁(yè)面的影響，這里列下瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別：

盒模型：

在怪異模式下，盒模型為IE盒模型而非標(biāo)準(zhǔn)模式下的W3C 盒模型：在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom。
而在 W3C 標(biāo)準(zhǔn)的盒模型中，box 的大小就是 content 的大小。

圖片元素的垂直對(duì)齊方式:

對(duì)于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 屬性默認(rèn)取值為baseline。而當(dāng)inline元素的內(nèi)容只有圖片時(shí)，如table的單元格table-cell。在 IE Quirks Mode 下，table單元格中的圖片的 vertical-align 屬性默認(rèn)為bottom，因此，在圖片底部會(huì)有幾像素的空間。

CSS 中，描述font的屬性有font-family，font-size，font-style，font-weigh,上述屬性都是可以繼承的。而在 IE Quirks Mode 下，對(duì)于table 元素，字體的某些屬性將不會(huì)從body或其他封閉元素繼承到table中，特別是 font-size屬性。

內(nèi)聯(lián)元素的尺寸:

在 IE Standards Mode 下，non-replaced inline 元素?zé)o法自定義大小，而在 IE Quirks Mode 下，定義這些元素的width和height 屬性，能夠影響該元素顯示的大小尺寸。

元素的百分比高度:

CSS 中對(duì)于元素的百分比高度規(guī)定如下，百分比為元素包含塊的高度，不可為負(fù)值。如果包含塊的高度沒(méi)有顯式給出，該值等同于“auto”（即取決于內(nèi)容的高度）。所以百分比的高度必須在父元素有聲明高度時(shí)使用。

當(dāng)一個(gè)元素使用百分比高度時(shí)，在 IE Standards Mode 下，高度取決于內(nèi)容的變化，而在 Quirks Mode 下，百分比高度則被正確應(yīng)用。

元素溢出的處理：

在 IE Standard Mode 下，overflow取默認(rèn)值 visible，即溢出可見(jiàn)，這種情況下，溢出內(nèi)容不會(huì)被裁剪，呈現(xiàn)在元素框外。而在 Quirks Mode 下，該溢出被當(dāng)做擴(kuò)展box來(lái)對(duì)待，即元素的大小由其內(nèi)容決定，溢出不會(huì)被裁剪，元素框自動(dòng)調(diào)整，包含溢出內(nèi)容。

另可參考閱讀：https://www.cs.tut.fi/~jkorpela/quirks-mode.html

Q: 使用 XHTML 的局限有哪些？

如果頁(yè)面使用 "application/xhtml+xml" 會(huì)有什么問(wèn)題嗎？

A: xhtml 語(yǔ)法要求嚴(yán)格，必須有head、body 每個(gè)dom 必須要閉合?？諛?biāo)簽也必須閉合。例如,
, 等。另外要在屬性值上使用雙引號(hào)。一旦遇到錯(cuò)誤，立刻停止解析，并顯示錯(cuò)誤信息。
如果頁(yè)面使用"application/xhtml+xml",一些老的瀏覽器會(huì)不兼容。

Q: 如果網(wǎng)頁(yè)內(nèi)容需要支持多語(yǔ)言，你會(huì)怎么做？

在設(shè)計(jì)和開(kāi)發(fā)多語(yǔ)言網(wǎng)站時(shí)，有哪些問(wèn)題你必須要考慮？

A: 編碼使用UTF-8，空間域名需要支持多瀏覽地址,準(zhǔn)備多套模板。
在設(shè)計(jì)和開(kāi)發(fā)多語(yǔ)言網(wǎng)站時(shí)，需要考慮

應(yīng)用字符集的選擇

語(yǔ)言書寫習(xí)慣&導(dǎo)航結(jié)構(gòu)

數(shù)據(jù)庫(kù)驅(qū)動(dòng)型網(wǎng)站

css 盒子會(huì)因?yàn)閮?nèi)容尺寸不一樣出現(xiàn)不對(duì)齊偏移

Q: data-屬性的作用是什么？

A: data-為前端開(kāi)發(fā)者提供自定義的屬性，這些屬性集可以通過(guò)對(duì)象的dataset屬性獲取，不支持該屬性的瀏覽器可以通過(guò)getAttribute方法獲取:

div.dataset.commentNum; // 10

需要注意的是，data-之后的以連字符分割的多個(gè)單詞組成的屬性，獲取的時(shí)候使用駝峰風(fēng)格。并不是所有的瀏覽器都支持.dataset屬性，測(cè)試的瀏覽器中只有Chrome 和Opera 支持。

即：當(dāng)沒(méi)有合適的屬性和元素時(shí)，自定義的 data 屬性是能夠存儲(chǔ)頁(yè)面或 App 的私有的自定義數(shù)據(jù)。

  
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

Q:如果把 HTML5 看作做一個(gè)開(kāi)放平臺(tái)，那它的構(gòu)建模塊有哪些？

A: 開(kāi)放網(wǎng)絡(luò)平臺(tái):

  
The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. Using the Open Web Platform, everyone has the right to implement a software component of the Web without requiring any approvals or waiving license fees.

開(kāi)放網(wǎng)絡(luò)平臺(tái)（Open Web Platform）是一些開(kāi)放的（免版權(quán)）技術(shù)的集合，這些技術(shù)激活了互聯(lián)網(wǎng)。使用開(kāi)放網(wǎng)絡(luò)平臺(tái)時(shí)，每個(gè)人都有權(quán)實(shí)現(xiàn) Web 上的一個(gè)組件，而不用向任何人索取許可和證書。

將 HTML5 看做開(kāi)放網(wǎng)絡(luò)平臺(tái)，那它的構(gòu)建模塊有哪些？我想，所謂構(gòu)建模塊，指的應(yīng)該是開(kāi)放網(wǎng)絡(luò)平臺(tái)這個(gè)技術(shù)集合中的技術(shù)。

HTML

DOM

CSS

SVG

MathML

Web APIs

Canvas WebGL

Audio

Web Storage

File, File System

History, contentEditable, Drag & Drop, HTML Editing Commands

Web Sockets

Web Workers

Server-Send Events

XMLHttpRequest

Geolocation, Device Orientation

DOM Events, Touch Events, Progress Events

Custom application development

Clipboard and events

Web Notifications, Web Messaging

Offine Web Applications

Media Capture API

Timing control for script-based animations, Page Visibility, Navigation + Timing, Resource Timing

Selectors

DOM Traversal, DOM XPath, Element Traversal

EcmaScript / JavaScript

HTTP

URI

Media Accessibility Checklist

該答案引自: http://witcher42.github.io/2014/06/03/open-web-platform/

Q: 請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

A: sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web請(qǐng)求之間保存數(shù)據(jù)。有了本地?cái)?shù)據(jù)，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來(lái)回傳遞。

sessionStorage、localStorage、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)，其中sessionStorage 的概念很特別，引入了一個(gè)“瀏覽器窗口”的概念。sessionStorage 是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)。也就是說(shuō)只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉，即使刷新頁(yè)面或進(jìn)入同源另一頁(yè)面，數(shù)據(jù)仍然存在。關(guān)閉窗口后，sessionStorage 即被銷毀。同時(shí)“獨(dú)立”打開(kāi)的不同窗口，即使是同一頁(yè)面，sessionStorage 對(duì)象也是不同的

cookies會(huì)發(fā)送到服務(wù)器端。其余兩個(gè)不會(huì)。

Microsoft 指出 Internet Explorer 8 增加cookie 限制為每個(gè)域名50個(gè)，但I(xiàn)E7 似乎也允許每個(gè)域名50個(gè)cookie。Firefox 每個(gè)域名cookie 限制為50個(gè)。Opera每個(gè)域名cookie 限制為30個(gè)。Firefox 和Safari 允許cookie 多達(dá)4097個(gè)字節(jié)，包括名（name）、值（value）和等號(hào)。Opera 許cookie 多達(dá)4096個(gè)字節(jié)，包括：名（name）、值（value）和等號(hào)。Internet Explorer 允許cookie 多達(dá)4095個(gè)字節(jié)，包括：名（name）、值（value）和等號(hào)。

Cookie

每個(gè)域名存儲(chǔ)量比較?。ǜ鳛g覽器不同，大致4K）

所有域名的存儲(chǔ)量有限制（各瀏覽器不同，大致4K）

有個(gè)數(shù)限制（各瀏覽器不同）

會(huì)隨請(qǐng)求發(fā)送到服務(wù)器

LocalStorage

永久存儲(chǔ)

單個(gè)域名存儲(chǔ)量比較大（推薦5MB，各瀏覽器不同）

總體數(shù)量無(wú)限制

SessionStorage

只在 Session 內(nèi)有效

存儲(chǔ)量更大（推薦沒(méi)有限制，但是實(shí)際上各瀏覽器也不同）

請(qǐng)描述一下 GET 和 POST 的區(qū)別?

A: 區(qū)別如下：

get 向指定的資源請(qǐng)求數(shù)據(jù),請(qǐng)求的數(shù)據(jù)會(huì)附在URL 之后,就是把數(shù)據(jù)放置在請(qǐng)求行（request line）中），以?分割URL和傳輸數(shù)據(jù)，多個(gè)參數(shù)用&連接；

post 向指定的資源提交要被處理的數(shù)據(jù)。get 方法，查詢請(qǐng)求是在url中顯示的，有長(zhǎng)度限制，get 方法是安全冪等的。而post 方法請(qǐng)求是封裝在http 消息包體中

總結(jié)：

對(duì)于get 來(lái)說(shuō)，是向服務(wù)器端請(qǐng)求數(shù)據(jù)，其請(qǐng)求在url 中可見(jiàn)，其長(zhǎng)度有限制（2048字符）個(gè)體方法是安全冪等，這里的安全是指用于獲取信息而非修改信息，冪等是指每次請(qǐng)求得到的結(jié)果都一樣。

對(duì)于post 來(lái)說(shuō)，是向服務(wù)器端提交數(shù)據(jù)，每次刷新或者后退都會(huì)重新提交，post 請(qǐng)求的數(shù)據(jù)封裝在http 請(qǐng)求的首部里。

tips: 以上部分答案參考自：

paddingme

Witcher42

鄭州網(wǎng)建