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

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

A: 在HTML中 doctype 有兩個主要目的。

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

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

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

對于實際操作，通知瀏覽器讀取文檔時用哪種解析算法。如果沒有寫，則瀏覽器則根據(jù)自身的規(guī)則對代碼進(jìn)行解析，可能會嚴(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) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計、并未嚴(yán)格遵循 W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個完整的DOCTYPE則瀏覽器將會采用標(biāo)準(zhǔn)模式，而如果它缺失則瀏覽器將會采用怪異模式。

強烈建議閱讀加深理解：怪異模式（Quirks Mode）對 HTML 頁面的影響，這里列下瀏覽器標(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 的大小。

圖片元素的垂直對齊方式:

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

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

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

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

元素的百分比高度:

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

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

元素溢出的處理：

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

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

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

如果頁面使用 "application/xhtml+xml" 會有什么問題嗎？

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

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

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

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

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

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

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

css 盒子會因為內(nèi)容尺寸不一樣出現(xiàn)不對齊偏移

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

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

div.dataset.commentNum; // 10

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

即：當(dāng)沒有合適的屬性和元素時，自定義的 data 屬性是能夠存儲頁面或 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òu)建模塊有哪些？

A: 開放網(wǎng)絡(luò)平臺:

  
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.

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

將 HTML5 看做開放網(wǎng)絡(luò)平臺，那它的構(gòu)建模塊有哪些？我想，所謂構(gòu)建模塊，指的應(yīng)該是開放網(wǎng)絡(luò)平臺這個技術(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: 請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

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

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

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

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

Cookie

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

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

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

會隨請求發(fā)送到服務(wù)器

LocalStorage

永久存儲

單個域名存儲量比較大（推薦5MB，各瀏覽器不同）

總體數(shù)量無限制

SessionStorage

只在 Session 內(nèi)有效

存儲量更大（推薦沒有限制，但是實際上各瀏覽器也不同）

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

A: 區(qū)別如下：

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

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

總結(jié)：

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

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

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

paddingme

Witcher42

鄭州網(wǎng)建