前端開發面試題－－html

時間 2019-11-10

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

原文原文鏈接

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

doctype是告訴瀏覽器個人html使用哪一個版本的html協議寫的，讓瀏覽器按照神明的協議執行。html
區別：嚴格模式是瀏覽器根據規範去顯示頁面，混雜模式是一種向後兼容的方式去顯示。html5
意義：決定瀏覽器如何去渲染網站即瀏覽器使用哪一種規範去解析網頁。觸發：瀏覽器根據doctype是否存在和使用的是那種dtd來決定。web

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

由於h5不基於SGML，所以不須要對DTD進行引用。可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照他的方式來運行）。而html4.0.1基於SGML，須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型canvas

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

css中規定，每個元素都有display屬性。肯定該元素的類型，每個元素都有默認的display值，好比div的display爲block：塊級元素。span的display爲inline：行內元素。跨域
行內元素有：a b span img input select strong瀏覽器
塊級元素：div ul li ol p dl dt dd h1 h2 h3…緩存
知名的空元素：<br> <hr> <img> <input> <link> <meta> 不爲人知的還有：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

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

link屬於XHTML標籤，而@import是CSS提供的;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題;
link方式的樣式的權重高於@import的權重.

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

內核只是一個通俗的說法，其英文名稱爲「Layout engine」，翻譯過來就是「排版引擎」，也被稱爲「頁面渲染引擎」（下文中各類說法通用）。它負責取得網頁的內容（HTML、XML、圖像等等）、整理信息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要排版引擎。不一樣的瀏覽器內核對網頁編寫語法的解釋也有不一樣，所以同一網頁在不一樣的內核的瀏覽器裏的渲染（顯示）效果也可能不一樣，這也是網頁編寫者須要在不一樣內核的瀏覽器中測試網頁顯示效果的緣由。
這就是編寫網頁的麻煩所在啊。。。要讓全部瀏覽器顯示大概一致，有時候很麻煩。

常見的瀏覽器內核有哪些?

使用Trident的是internet explorer，國產的絕大部分瀏覽器。Trident是就是ie內核
使用Gecko的是Mozilla Firefox，使用 Gecko 內核的瀏覽器也有很多，如 Netscape MozillaSuite/SeaMonkey 等
使用Presto的是opera，這是目前公認網頁瀏覽速度最快的瀏覽器內核
使用WebKit的有蘋果的safari，谷歌的chrome，還有國產的大部分雙核瀏覽器其中一核就是WebKit

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

.IE8/IE7/IE6支持經過document.方法產生的標籤，利用這一特性讓這些瀏覽器支持HTML5新標籤。
使用是html5shim框架
html5的新特性：好比說其中的canvas繪圖，新增的API包括canvas，geolocation，web socket，web storage，還有新增的若干標籤：video，audio等
移除的元素
    font, center, strike, big, s, u, acronym, applet, dir...
    移除的屬性
    如link和a元素的rev屬性, link元素的target屬性, td的scope屬性，script元素的language屬性, body元素的alink，link，text和vlink屬性...
處理兼容問題有兩種方式
另外，DOCTYPE聲明的方式是區分HTML和HTML5標誌的一個重要因素，此外，還能夠根據新增的結構、功能元素來加以區分。（答案參考：http://toutiao.com/a6210139903877480705/）

簡述一下你對HTML語義化的理解（參考http://www.cnblogs.com/freeyiyi1993/p/3615179.html）

語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），可以便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
語義化有利於SEO，有利於搜索引擎爬蟲更好的理解咱們的網頁，從而獲取更多的有效信息，提高網頁的權重。
在沒有CSS的時候可以清晰的看出網頁的結構，加強可讀性。
便於團隊開發和維護，語義化的HTML可讓開發者更容易的看明白，從而提升團隊的效率和協調能力。
支持多終端設備的瀏覽器渲染。

HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

sessionStorage 對象負責存儲一個會話的數據。若是用戶關閉了頁面或瀏覽器，則會銷燬數據
The localStorage 對象負責存儲沒有到期的數據。當 Web 頁面或瀏覽器關閉時，仍會保持數據的存儲，固然這還取決於爲此用戶的瀏覽器設置的存儲量。
內置到 HTML5 中的 Web 存儲對象有兩種類型：

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

HTML5的離線存儲使用一個manifest文件來標明哪些文件是須要被存儲的，使用如來引入一個manifest文件，這個文件的路徑能夠是相對的，也能夠是絕對的，若是你的web應用不少，並且但願能集中管理manifest文件，那麼靜態文件服務器是個不錯的選擇
當用戶本地再次聯網的時候，本地的離線存儲資源須要檢查是否須要更新，這個更新過程，也是經過manifest的更新來控制的，更新了manifest文件，瀏覽器會自動的從新下載新的manifest文件並在下一次刷新頁面的時候進行資源文件的從新請求(第三次刷新替換本地緩存爲最新緩存)，並且這個請求是全局性的，也就是全部在manifest緩存列表中的文件都會被請求一次，而不是單獨請求某個特定修改過的資源文件，由於manifest是不知道哪一個文件被修改過了的。
因此控制離線存儲的更新，須要2個步驟，一是更新資源文件，二是更新manifest文件，特別的，更新manifest文件是不須要修改什麼特定內容的，只要是這個文件隨意一處被修改，那麼瀏覽器就會感知，對於咱們的資源文件一般名稱是固定的，好比**.css，更新內容不會帶有文件名更新的狀況下，須要更新manifest文件怎麼操做呢?一個比較好的方式是更新任意一處# 開頭的註釋便可，其目的只是告訴瀏覽器這個manifest文件被更新過。

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

共同點：都是保存在瀏覽器端，且同源的。
區別：cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。

iframe有那些缺點？

會產生不少頁面，不容易管理
iframe框架結構有時會讓人感到迷惑，若是框架個數多的話，可能會出現上下、左右滾動條，會分散訪問者的注意力，用戶體驗度差
代碼複雜，沒法被一些搜索引擎索引到，這一點很關鍵，如今的搜索引擎爬蟲還不能很好的處理iframe中的內容，因此使用iframe會不利於搜索引擎優化。
不少的移動設備（PDA 手機）沒法徹底顯示框架，設備兼容性差
iframe框架頁面會增長服務器的http請求，對於大型網站是不可取的。
iframe可以原封不動的把嵌入的網頁展示出來
若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的更改，方便快捷
網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長代碼的可重用。
iframe是一種框架，也是一種很常見的網頁嵌入方式
iframe的優勢：
iframe的缺點：

Label的做用是什麼?是怎麼用的?(加 for 或包裹)

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">
侷限性：accessKey屬性所設置的快捷鍵不能與瀏覽器的快捷鍵衝突，不然將優先激活瀏覽器的快捷鍵。
要將 LABEL 綁定到其它的控件，請將 LABEL 元素的 FOR 屬性設置爲與該控件的 ID 相同。將 LABEL 綁定到控件的 NAME 屬性毫無用處。可是，要提交表單，你必須爲 LABEL 元素所綁定到的控件指定 NAME。
若是用戶單擊 LABEL，則會先觸發 LABEL 上的 onclick 事件，而後觸發由 htmlFor 屬性所指定的控件上的 onclick 事件。按下 LABEL 設定的快捷鍵將設置焦點但並不觸發 onclick 事件。
標籤不容許嵌套
Label 中有兩個屬性是很是有用的,一個是FOR、另一個就是ACCESSKEY了。

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

設置Form的autocomplete爲"on"或者"off"來開啓或者關閉自動完成功能

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

這個功能能夠經過 WebSocket API 來實現，不過這就有些小題大作了。畢竟殺雞焉用牛刀，因而我開始尋找一些其它的跨標籤頁通訊方式
我首先想到的就是使用 cookies 或者 localStorage ，來週期性地經過 setInterval 檢查用戶是否登陸。對這個方案我並不滿意，由於這樣會把許多 CPU 週期耗費在檢查一個可能自始至終都不會知足的條件上。
你知道 localStorage 會觸發一個事件嗎？具體地說，不論其中的哪一項在另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件。實際上，這就意味着不論在哪一個瀏覽器的標籤頁裏訪問了 localStorage
window.addEventListener('storage', function (event) {
console.log(event.key, event.newValue);
});
不論某個標籤頁在什麼時候修改了 localStorage，都會對其他的全部標籤觸發事件。這就意味着咱們只要爲 localStorage 賦值，就可以跨瀏覽器標籤通訊了

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

WebSocket API是下一代客戶端-服務器的異步通訊方法。WebSocket API最偉大之處在於服務器和客戶端能夠在給定的時間範圍內的任意時刻，相互推送信息。Ajax技術須要客戶端發起請求，而WebSocket服務器和客戶端能夠彼此相互推送信息；XHR受到域的限制，而WebSocket容許跨域通訊。

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

該API能夠用來檢測頁面對於用戶的可見性，即返回用戶當前瀏覽的頁面或標籤的狀態變化
提升用戶體驗

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

爬蟲腳本登陸,好比登陸以後批量發佈不良信息.
掃號腳本暴力探測用戶賬號,好比暴力破解某些用戶的密碼.
頻繁的使用某一個涉及後臺性能瓶頸的功能,致使系統負載太高.
增長驗證碼的主要目的是減小非正常的請求,以保護用戶權益.所謂非正常的請求有如下:

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

從網站角度看，title網站標題能直接告訴搜索引擎和用戶這個頁面是關於什麼主題和內容的網站。從文章的角度上看，用戶進到內容頁裏，想看到的固然就是文章的內容，H1文章標題則是最重要的、最應該突出的。一篇文章只能有一個標題，一個頁面最好採用一個H1;多個H1會形成搜索引擎不知道這個頁面哪一個標題內容最重要，致使淡化這個頁面標題和關鍵詞，起不到突出主題的效果。從網站角度而言，title則重於網站信息標題;從文章角度而言，H1則歸納的是文章主題。title與h1都歸爲代碼優化，同爲權重標籤，要從範圍來說title傳遞給搜索引擎信號更強些，言外之意就是title要表達的權重在必定意義上高於h1。能夠一塊兒使用，在列表頁時候兩個權重標籤就可使用了，列表頁使用title標籤去詮釋，列表頁的每條信息就可使用h1了。
<b> 標籤呈現粗體文本效果。<b> 標籤是基於內容的樣式標籤 <strong> 的物理版本，但它沒有後者的擴展意義。<b> 標籤明確地將包括在它和其結束標籤之間的字符或者文本變成粗體。若是某種加粗的字體不可用，瀏覽器將使用一些其餘的表現方法，例如反相顯示或者加下劃線等。舉一個例子，常常訪問 W3school 的用戶能夠注意到了，許多教程頁面的第一句摘要都是以粗體顯示的，而實際上，咱們對這一句摘要使用了 <strong> 標籤。使用這個標籤的理由是，咱們認爲教程摘要不只歸納了其所在頁面的內容，並且位於頁面的最重要的位置，其內容天然是很是重要的且值得強調的。
<i>標籤：顯示斜體文本效果<i>標籤告訴瀏覽器將包含其中的文本以斜體字（italic）或者傾斜（oblique）字體顯示；<em>標籤：
<em>標籤中的文本表示爲強調的內容，對於全部瀏覽器的顯示效果來講，是把這段文字用斜體來顯示；簡單的說一個是物理標記，一個邏輯標記