html面試

時間 2019-11-12

標籤 html 面試欄目 HTML 简体版

原文原文鏈接

1 DOCTYPE有什麼做用？標準模式與混雜模式如何區分？它們有何意義?javascript

告訴瀏覽器使用哪一個版本的HTML規範來渲染文檔。DOCTYPE不存在或形式不正確會致使HTML文檔以混雜模式呈現。
標準模式（Standards mode）以瀏覽器支持的最高標準運行；混雜模式（Quirks mode）中頁面是一種比較寬鬆的向後兼容的方式顯示。css

2 HTML5爲何只須要寫 <!DOCTYPE HTML>？html

HTML5不基於SGML（Standard Generalized Markup Language 標準通用標記語言），所以不須要對DTD（DTD 文檔類型定義）進行引用，可是須要DOCTYPE來規範瀏覽器行爲。java

HTML4.01基於SGML，因此須要引用DTD。才能告知瀏覽器文檔所使用的文檔類型，以下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">web

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

行內元素：a span img input select
塊級元素：div ul ol li dl dt dd h1 p
空元素：<br> <hr> <link> <meta>數據庫

4 頁面導入樣式時，使用link和@import有什麼區別？canvas

相同的地方，都是外部引用CSS方式，區別：瀏覽器

link是xhtml標籤，除了加載css外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS
link引用CSS時候，頁面載入時同時加載；@import須要在頁面徹底加載之後加載，並且@import被引用的CSS會等到引用它的CSS文件被加載完才加載
link是xhtml標籤，無兼容問題；@import是在css2.1提出來的，低版本的瀏覽器不支持
link支持使用javascript控制去改變樣式，而@import不支持
link方式的樣式的權重高於@import的權重
import在html使用時候須要<style type="text/css">標籤

5 無樣式內容閃爍（FOUC）Flash of Unstyle Content安全

@import導入CSS文件會等到文檔加載完後再加載CSS樣式表。所以，在頁面DOM加載完成到CSS導入完成之間會有一段時間頁面上的內容是沒有樣式的。

解決方法：使用link標籤加載CSS樣式文件。由於link是順序加載的，這樣頁面會等到CSS下載完以後再下載HTML文件，這樣先佈局好，就不會出現FOUC問題。

6 介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。
JS引擎：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

7 常見的瀏覽器內核有哪些？

Trident( MSHTML )：IE MaxThon TT The World 360 搜狗瀏覽器
Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto：Opera7及以上(Opera內核原爲：Presto，現爲：Blink)
Webkit：Safari Chrome

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

新增長了圖像、位置、存儲、多任務等功能。
新增元素：

canvas
用於媒介回放的video和audio元素
本地離線存儲。localStorage長期存儲數據，瀏覽器關閉後數據不丟失;sessionStorage的數據在瀏覽器關閉後自動刪除
語意化更好的內容元素，好比 article footer header nav section
位置API：Geolocation
表單控件，calendar date time email url search
新的技術：web worker(web worker是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行) web socket
拖放API：drag、drop

移除的元素：

純表現的元素：basefont big center font s strike tt u
性能較差元素：frame frameset noframes

區分：

DOCTYPE聲明的方式是區分重要因素
根據新增長的結構、功能來區分

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

去掉或丟失樣式的時候可以讓頁面呈現出清晰的結構。
有利於SEO和搜索引擎創建良好溝通，有助於爬蟲抓取更多的信息，爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重。
方便其它設備解析。
便於團隊開發和維護，語義化根據可讀性。

10 HTML5的文件離線儲存怎麼使用，工做原理是什麼？

在線狀況下，瀏覽器發現HTML頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問，那麼瀏覽器就會根據manifest文件的內容下載相應的資源，並進行離線存儲。若是已經訪問過而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面。而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不會作任何操做，若是文件改變了，那麼就會從新下載文件中的資源，而且進行離線存儲。例如，

在頁面頭部加入manifest屬性

在cache.manifest文件中編寫離線存儲的資源

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
Resourse/logo.png
FALLBACK:
//offline.html

11 cookies，sessionStorage和localStorage的區別？

共同點：都是保存在瀏覽器端，且是同源的。

區別：

cookies是爲了標識用戶身份而存儲在用戶本地終端上的數據，始終在同源http請求中攜帶，即cookies在瀏覽器和服務器間來回傳遞，而sessionstorage和localstorage不會自動把數據發給服務器，僅在本地保存。
存儲大小的限制不一樣。cookie保存的數據很小，不能超過4k，而sessionstorage和localstorage保存的數據大，可達到5M。
數據的有效期不一樣。cookie在設置的cookie過時時間以前一直有效，即便窗口或者瀏覽器關閉。sessionstorage僅在瀏覽器窗口關閉以前有效。localstorage始終有效，窗口和瀏覽器關閉也一直保存，用做長久數據保存。
做用域不一樣。cookie在全部的同源窗口都是共享；sessionstorage不在不一樣的瀏覽器共享，即便同一頁面；localstorage在全部同源窗口都是共享

12 iframe框架有那些優缺點？

優勢：

iframe可以原封不動的把嵌入的網頁展示出來。
若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的更改，方便快捷。
網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長代碼的可重用。
若是遇到加載緩慢的第三方內容如圖標和廣告，這些問題能夠由iframe來解決。

缺點：

搜索引擎的爬蟲程序沒法解讀這種頁面
框架結構中出現各類滾動條
使用框架結構時，保證設置正確的導航連接。
iframe頁面會增長服務器的http請求

13 label的做用是什麼? 是怎麼用的?

label標籤用來定義表單控件間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。label 中有兩個屬性是很是有用的, FOR和ACCESSKEY。
FOR屬性功能：表示label標籤要綁定的HTML元素，你點擊這個標籤的時候，所綁定的元素將獲取焦點。例如，

<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

ACCESSKEY屬性功能：表示訪問label標籤所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。例如，

<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">

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

HTML的輸入框能夠擁有自動完成的功能，當你往輸入框輸入內容的時候，瀏覽器會從你之前的同名輸入框的歷史記錄中查找出相似的內容並列在輸入框下面，這樣就不用所有輸入進去了，直接選擇列表中的項目就能夠了。但有時候咱們但願關閉輸入框的自動完成功能，例如當用戶輸入內容的時候，咱們但願使用AJAX技術從數據庫搜索並列舉而不是在用戶的歷史記錄中搜索。

方法：

在IE的internet選項菜單中裏的自動完成裏面設置
設置form輸入框的autocomplete爲on或者off來來開啓輸入框的自動完成功能

15 如何實現瀏覽器內多個標籤頁之間的通訊?

WebSocket SharedWorker
也能夠調用 localstorge、cookies 等本地存儲方式。 localstorge 在另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，咱們經過監聽事件，控制它的值來進行頁面信息通訊。

注意：Safari 在無痕模式下設置 localstorge 值時會拋出QuotaExceededError 的異常

16 webSocket如何兼容低瀏覽器？

Adobe Flash Socket ActiveX HTMLFile (IE) 基於 multipart 編碼發送 XHR 基於長輪詢的 XHR
引用WebSocket.js這個文件來兼容低版本瀏覽器。

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

經過visibility state的值得檢測頁面當前是否可見，以及打開網頁的時間。
在頁面被切換到其餘後臺進程時，自動暫停音樂或視頻的播放。

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

map+area或者svg
border-radius
純js實現，一個點不在圓上的算法

18 實現不使用 border 畫出1px高的線，在不一樣瀏覽器的Quirks mode和CSS Compat模式下都能保持同一效果

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

19 網頁驗證碼是幹嗎的，是爲了解決什麼安全問題？

區分用戶是計算機仍是人的程序;
能夠防止惡意破解密碼、刷票、論壇灌水；

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

title屬性沒有明確意義，只表示標題；h1表示層次明確的標題，對頁面信息的抓取也有很大的影響
strong標明重點內容，語氣增強含義；b是無心義的視覺表示
em表示強調文本；i是斜體，是無心義的視覺表示
視覺樣式標籤：b i u s
語義樣式標籤：strong em ins del code

21 元素的alt和title有什麼異同？

在alt和title同時設置的時候，alt做爲圖片的替代文字出現，title是圖片的解釋文字。