前端面試題集錦——HTML

阿新 • • 發佈：2018-12-04

對WEB標準以及W3C的理解與認識

標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，容易維護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性。

xhtml和html有什麼區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言。

最主要的不同：

XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文件必須擁有根元素。

Doctype作用？標準模式與相容模式各有什麼區別?

（1）<!DOCTYPE>宣告位於位於HTML文件中的第一行，處於 <html> 標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。

（2）標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。

使用 window.top.document.compatMode 可顯示為什麼模式

doctype型別: Strict、Transitional

以及 Frameset

如果不宣告: 不寫doctype，瀏覽器會進入quirks mode （混雜模式）。即，如果不宣告doctype，瀏覽器不引入w3c的標準，那麼早期的瀏覽器會按照自己的解析方式渲染頁面。瀏覽器採用自身方式解析頁面的行為稱為"quirks mode（混雜模式也稱怪異模式）"；採用w3c方式解析就是"strict mode（標準模式）"。如果完全採用strict mode就不會出任何的差錯，但這樣會降低程式的容錯率，加重開發人員的難度

用哪種:

沒有doctype宣告的採用quirks mode解析
對於有doctype的大多數採用standard mode。

特殊情況：
- 對於那些瀏覽器不能識別的doctype ,瀏覽器採用quirks mode；
- 沒有宣告DTD或者html版本宣告低於4.0採用quirks mode，其他使用standard mode；
- ie6中，如果在doctype宣告前有一個xml宣告(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，則採用quirks mode解析

標準模式與怪異模式的區別:

標準模式：瀏覽器根據規範呈現頁面
混雜模式（怪異模式）：頁面以一種比較寬鬆的相容方式顯示。
他們最大的不同是對盒模型的解析。
- 在strict mode中：width是內容寬度，也就是說,元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
- 在quirks mode中：width則是元素的實際寬度，內容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + 　border-right-width)

HTML5 為什麼只需要寫 `<!DOCTYPE HTML>`？

HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）；

而HTML4.01基於SGML，所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。

行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

CSS規範規定，每個元素都有display屬性，確定該元素的型別，每個元素都有預設的display值，如div的display預設值為“block”，則為“塊級”元素；span預設display屬性值為“inline”，是“行內”元素。

（1）行內元素有：a b span img input select strong

（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常見的空元素：
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

頁面匯入樣式時，使用link和`@import`有什麼區別？

（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;

（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;

（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題;

（4) link方式的樣式的權重高於@import的權重。

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？

HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
- 繪畫 canvas;
- 用於媒介回放的 video 和 audio 元素;
- 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
- sessionStorage 的資料在瀏覽器關閉後自動刪除;
- 語意化更好的內容元素，比如 article、footer、header、nav、section;
- 表單控制元件，calendar、date、time、email、url、search;
- 新的技術webworker, websocket, Geolocation;
移除的元素：
- 純表現的元素：basefont，big，center，font, s，strike，tt，u;
- 對可用性產生負面影響的元素：frame，frameset，noframes；
支援HTML5新標籤：

IE8/IE7/IE6支援通過document.createElement方法產生的標籤，可以利用這一特性讓這些瀏覽器支援HTML5新標籤，瀏覽器支援新標籤後，還需要新增標籤預設的樣式。

當然也可以直接使用成熟的框架、比如html5shim;
```

```
如何區分HTML5：
- DOCTYPE宣告
- 新增的結構元素
- 功能元素

簡述一下你對HTML語義化的理解？

用正確的標籤做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
即使在沒有樣式CSS情況下也以一種文件格式顯示，並且是容易閱讀的;
搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

如何使用：

儘可能少的使用無語義的標籤div和span；
在語義不明顯時，既可以使用div或者p時，儘量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；
不要使用純樣式標籤，如：b、font、u等，改用css設定。
需要強調的文字，可以包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong預設樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
每個input標籤對應的說明文字都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。

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

在離線狀態時，操作window.applicationCache進行需求實現。

詳細的使用請參考：有趣的HTML5：離線儲存

瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？

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

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）。

cookie資料始終在同源的http請求中攜帶（即使不需要），即會在瀏覽器和伺服器間來回傳遞。

sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。

儲存大小：

cookie資料大小不能超過4k。
sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

有期時間：

localStorage：儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
sessionStorage：資料在當前瀏覽器視窗關閉後自動刪除。
cookie：設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

iframe的優缺點？

優點：
- 解決載入緩慢的第三方內容如圖示和廣告等的載入問題
- Security sandbox
- 並行載入指令碼
缺點：
- iframe會阻塞主頁面的Onload事件；
- 搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO;
- iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript。

動態給iframe新增src屬性值，這樣可以繞開以上兩個問題。

Label的作用是什麼？是怎麼用的？

label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。

<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>

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

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

給不想要提示的 form 或某個 input 設定為 autocomplete=off。

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

WebSocket、SharedWorker；
也可以呼叫localstorge、cookies等本地儲存方式；

localstorge另一個瀏覽上下文裡被新增、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面資訊通訊；

注意：Safari 在無痕模式下設定localstorge值時會丟擲 QuotaExceededError 的異常；

webSocket如何相容低瀏覽器？(阿里)

Adobe Flash Socket
ActiveX HTMLFile (IE)
基於 multipart 編碼傳送 XHR
基於長輪詢的 XHR

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

通過 visibilityState 的值檢測頁面當前是否可見，以及開啟網頁的時間等;
在頁面被切換到其他後臺程序的時候，自動暫停音樂或視訊的播放；

如何在頁面上實現一個圓形的可點選區域？

map+area或者svg
border-radius
純js實現需要求一個點在不在圓上簡單演算法、獲取滑鼠座標等等

實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>

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

區分使用者是計算機還是人的公共全自動程式。可以防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定註冊使用者用特定程式暴力破解方式進行不斷的登陸嘗試。

title與h1的區別、b與strong的區別、i與em的區別？

title屬性沒有明確意義，只表示是個標題，h1則表示層次明確的標題，對頁面資訊的抓取也有很大的影響；

strong是標明重點內容，有語氣加強的含義，使用閱讀裝置閱讀網路時：<strong>會重讀，而<b>是展示強調內容。

i內容展示為斜體，em表示強調的文字；

Physical Style Elements – 自然樣式標籤

b, i, u, s, pre

Semantic Style Elements – 語義樣式標籤

strong, em, ins, del, code

應該準確使用語義樣式標籤, 但不能濫用, 如果不能確定時首選使用自然樣式標籤。

href和src的區別？

(1) href表示超文字引用，用於建立當前元素和文件之間的連結。常用的有link、a上使用，當前文件和引用資源之間確立聯絡，並行下載資源。

(2) src是sourse的縮寫，src指向的文件會嵌入到文件中當前標籤所在的位置。主要是引入，常用與img,script等元素上，替換當前元素，當瀏覽器解析該元素時，會暫停其他資源的下載和處理，直到完畢。

image和canvas在處理圖片的時候有什麼區別？

image是通過物件的形式描述圖片的
canvas通過專門的API將圖片繪製在畫布上

canvas和svg的區別?

svg:
- SVG是一種使用XML描述2D圖形的語言
- SVG基於XML, 這意味著SVG DOM中的每個元素都是可用的. 所以可以為每個元素附加JavaScript事件處理器
- 在SVG中, 每個被繪製的影象均被視為物件. 如果SVG物件的屬性發生變化, 那麼瀏覽器能夠自動重現影象
Canvas
- Canvas通過js來繪製2D圖形
- Canvas是逐畫素進行渲染的
- 在Canvas中, 一旦圖形被繪製完成, 它就不會繼續得到瀏覽器的關注. 如果其位置發生變化, 那麼整個場景也需要重新繪製, 包括任何或許已被圖形覆蓋的物件.
區別
- Canvas支援解析度, SVG不支援
- Canvas不支援事件處理器, SVG支援
- Canvas只有弱的文字渲染能力, 而SVG最適合帶有大型渲染區域的應用程式(比如谷歌地圖)
- Canvas能夠以.png或.jpg格式儲存結果影象
- SVG的複雜度過高的話會減慢渲染速度(任何過度使用DOM的應用都不快)
- Canvas最適合影象密集型的遊戲, 其中的許多物件會被頻繁重繪. 而SVG不適合遊戲應用
- Canvas是基於點陣圖的影象,它不能夠改變大小, 只能縮放顯示; SVG是基於向量的, 所以它能夠很好地處理圖形大小的改變
- Canvas提供的功能更原始, 適合畫素處理, 動態渲染和大資料量繪製; SVG功能更完善, 適合靜態圖片顯示, 高保真文件檢視和列印的應用場景
- 繪製Canvas物件後, 不能使用指令碼和CSS對它進行修改; 而SVG物件是文件物件模型的一部分, 所以可以隨時使用指令碼和CSS修改它們

img設定屬性title和alt的區別?

alt是img的特有屬性, 或與<input type="image">配合使用，規定影象的替代文字. 如果無法顯示影象, 瀏覽器將顯示替代文字. 用於圖片無法載入顯示、讀屏器閱讀圖片，可提高圖片可訪問性，搜尋引擎會重點分析。最長可包含1024個字元,
title為元素提供附加的提示資訊，用於滑鼠滑到元素上的時候顯示。其值可以比alt屬性值設定的更長, 但是有些瀏覽器會截斷過長的文字.