前端開發面試題——HTML篇

二、HTML篇

2.1、標籤上title屬性與alt屬性的區別是什麼？

alt屬性是為了給那些不能看到你文件中影像的瀏覽者提供文字說明的。且長度必須少於100個英文字元或者使用者必須保證替換文字儘可能的短。

這包括那些使用本來就不支援影像顯示或者影像顯示被關閉的瀏覽器的使用者，視覺障礙的使用者和使用螢幕閱讀器的使用者等。

title屬性為設定該屬性的元素提供建議性的資訊。使用title屬性提供非本質的額外資訊。參考《alt和title屬性的區別及應用》

2.2、分別寫出以下幾個HTML標籤：文字加粗、下標、居中、字型

加粗：、

下標：

居中：

字型：、、參考《HTML標籤列表》

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

section：定義文件中的一個章節

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

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

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

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

參考《HTML5 標籤列表》

2.4、請說說你對標籤語義化的理解？

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

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

c. 方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；

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

2.5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

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

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

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

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

2.6、你知道多少種Doctype文件型別？

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

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

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

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

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

2.7、HTML與XHTML——二者有什麼區別

a. XHTML 元素必須被正確地巢狀。

b. XHTML 元素必須被關閉。

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

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

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

2.8、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.9、iframe的優缺點？

優點：

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

b. iframe無重新整理檔案上傳

c. iframe跨域通訊

缺點：

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

b. 無法被一些搜尋引擎索引到

c. 頁面會增加伺服器的http請求

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

參考《iframe的一些記錄》

2.10、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模式下卻會失效。

2.11、請闡述table的缺點

a. 太深的巢狀，比如table>tr>td>h3，會導致搜尋引擎讀取困難，而且，最直接的損失就是大大增加了冗餘程式碼量。

b. 靈活性差，比如要將tr設定border等屬性，是不行的，得通過td

c. 程式碼臃腫，當在table中套用table的時候，閱讀程式碼會顯得異常混亂

d. 混亂的colspan與rowspan，用來佈局時，頻繁使用他們會造成整個文件順序混亂。

e. table需要多次計算才能確定好其在渲染樹中節點的屬性，通常要花3倍於同等元素的時間。

f. 不夠語義

參考《為什麼說table表格佈局不好？》

2.12、簡述一下src與href的區別

src用於替換當前元素；href用於在當前文件和引用資源之間確立聯絡。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置

href是Hypertext Reference的縮寫，指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結

原文連結：http://www.gbtags.com/gb/share/10027.htm