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

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

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

對文檔進行有效性驗證:

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

決定瀏覽器的呈現模式:

對于實際操作，通知瀏覽器讀取文檔時用哪種解析算法。如果沒有寫，則瀏覽器則根據自身的規則對代碼進行解析，可能會嚴重影響HTML 排版布局。瀏覽器有三種方式解析HTML文檔。

非怪異（標準）模式

怪異模式

部分怪異（近乎標準）模式

關于IE瀏覽器的文檔模式，瀏覽器模式，嚴格模式，怪異模式，DOCTYPE標簽，可詳細閱讀模式？標準！的內容。

Q: 瀏覽器標準模式和怪異模式之間的區別是什么？

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

強烈建議閱讀加深理解：怪異模式（Quirks Mode）對 HTML 頁面的影響，這里列下瀏覽器標準模式和怪異模式的區別：

盒模型：

在怪異模式下，盒模型為IE盒模型而非標準模式下的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 標準的盒模型中，box 的大小就是 content 的大小。

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

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

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

內聯元素的尺寸:

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

元素的百分比高度:

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

當一個元素使用百分比高度時，在 IE Standards Mode 下，高度取決于內容的變化，而在 Quirks Mode 下，百分比高度則被正確應用。

元素溢出的處理：

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

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

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

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

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

Q: 如果網頁內容需要支持多語言，你會怎么做？

在設計和開發多語言網站時，有哪些問題你必須要考慮？

A: 編碼使用UTF-8，空間域名需要支持多瀏覽地址,準備多套模板。
在設計和開發多語言網站時，需要考慮

應用字符集的選擇

語言書寫習慣&導航結構

數據庫驅動型網站

css 盒子會因為內容尺寸不一樣出現不對齊偏移

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

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

div.dataset.commentNum; // 10

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

即：當沒有合適的屬性和元素時，自定義的 data 屬性是能夠存儲頁面或 App 的私有的自定義數據。

  
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 看作做一個開放平臺，那它的構建模塊有哪些？

A: 開放網絡平臺:

  
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.

開放網絡平臺（Open Web Platform）是一些開放的（免版權）技術的集合，這些技術激活了互聯網。使用開放網絡平臺時，每個人都有權實現 Web 上的一個組件，而不用向任何人索取許可和證書。

將 HTML5 看做開放網絡平臺，那它的構建模塊有哪些？我想，所謂構建模塊，指的應該是開放網絡平臺這個技術集合中的技術。

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 的區別？

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

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

cookies會發送到服務器端。其余兩個不會。

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

Cookie

每個域名存儲量比較小（各瀏覽器不同，大致4K）

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

有個數限制（各瀏覽器不同）

會隨請求發送到服務器

LocalStorage

永久存儲

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

總體數量無限制

SessionStorage

只在 Session 內有效

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

請描述一下 GET 和 POST 的區別?

A: 區別如下：

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

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

總結：

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

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

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

paddingme

Witcher42

鄭州網建