前端工做面試HTML相關問題

前端工做面試HTML相關問題

• Q: doctype（文檔類型）的做用是什麼？

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

  • 對文檔進行有效性驗證:

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

  • 決定瀏覽器的呈現模式:

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

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

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

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

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

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

  1. 盒模型：

     在怪異模式下，盒模型爲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 的大小。

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

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

  3. <table>元素中的字體:

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

  4. 內聯元素的尺寸:

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

  5. 元素的百分比高度:

     CSS 中對於元素的百分比高度規定以下，百分比爲元素包含塊的高度，不可爲負值。若是包含塊的高度沒有顯式給出，該值等同於「auto」（即取決於內容的高度）。因此百分比的高度必須在父元素有聲明高度時使用。

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

  6. 元素溢出的處理：

     在 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 必需要閉合。空標籤也必須閉合。例如<img />, <br/>, <input />等。另外要在屬性值上使用雙引號。一旦遇到錯誤，馬上中止解析，並顯示錯誤信息。
  若是頁面使用'application/xhtml+xml',一些老的瀏覽器會不兼容。

• Q: 若是網頁內容須要支持多語言，你會怎麼作？

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

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

  • 應用字符集的選擇
  • 語言書寫習慣&導航結構
  • 數據庫驅動型網站
  • css 盒子會由於內容尺寸不同出現不對齊偏移

• Q: data-屬性的做用是什麼？

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

  <div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>

  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	post
後退/刷新	無害	請求從新提交
書籤	可作書籤	不可作
緩存	可被緩存	不能被緩存
歷史	保留在瀏覽器記錄裏	不保留
對數據長度限制	限制（2048字符）	不限制
安全性	url中暴露數據	相對安全
可見性	url中可見	不可見

總結：

• 對於get 來講，是向服務器端請求數據，其請求在url 中可見，其長度有限制（2048字符）個體方法是安全冪等，這裏的安全是指用於獲取信息而非修改信息，冪等是指每次請求獲得的結果都同樣。
• 對於post 來講，是向服務器端提交數據，每次刷新或者後退都會從新提交，post 請求的數據封裝在http 請求的首部裏。

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

• paddingme
• Witcher42
• 鄭州網建