前端開發面試題——HTML篇

時間 2019-12-13

標籤前端開發面試 html 欄目快樂工作简体版

原文原文鏈接

2、HTML篇

2.一、<img>標籤上title屬性與alt屬性的區別是什麼？

alt屬性是爲了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少於100個英文字符或者用戶必須保證替換文字儘量的短。html

這包括那些使用原本就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。html5

title屬性爲設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》web

2.二、分別寫出如下幾個HTML標籤：文字加粗、下標、居中、字體

加粗：、跨域

下標：瀏覽器

居中：<center>服務器

字體：、<basefont>、參考《HTML標籤列表》websocket

2.三、請寫出至少5個html5新增的標籤，並說明其語義和應用場景

section：定義文檔中的一個章節網絡

nav：定義只包含導航連接的章節session

header：定義頁面或章節的頭部。它常常包含 logo、頁面標題和導航性的目錄。框架

footer：定義頁面或章節的尾部。它常常包含版權信息、法律信息連接和反饋建議用的地址。

aside：定義和頁面內容關聯度較低的內容——若是被刪除，剩下的內容仍然很合理。

參考《HTML5 標籤列表》

2.四、請說說你對標籤語義化的理解？

a. 去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

b. 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

c. 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

d. 便於團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

2.五、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。

嚴格模式的排版和 JS 運做模式是，以該瀏覽器支持的最高標準運行。

在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

2.六、你知道多少種Doctype文檔類型？

標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，

Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

2.七、HTML與XHTML——兩者有什麼區別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關閉。

c. 標籤名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差別》

2.八、html5有哪些新特性、移除了那些元素？

a. HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內容標籤（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失

h. sessionStorage 的數據在頁面會話結束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產生負面影響的元素：frame，frameset，noframes；

2.九、iframe的優缺點？

優勢：

a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通訊

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 沒法被一些搜索引擎索引到

c. 頁面會增長服務器的http請求

d. 會產生不少頁面，不容易管理。

參考《iframe的一些記錄》

2.十、Quirks模式是什麼？它和Standards模式有什麼區別？

在寫程序時咱們也會常常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤爲是新功能不兼容舊功能時。IE6之前的頁面你們都不會去寫DTD，因此IE6就假定若是寫了DTD，就意味着這個頁面將採用對CSS支持更好的佈局，而若是沒有，則採用兼容以前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：整體會有佈局、樣式解析和腳本執行三個方面的區別。

a. 盒模型：在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

d. 設置水平居中：使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下卻會失效。