前端面試題1（html）

時間 2019-11-05

標籤端面試題 html 欄目 HTML 简体版

原文原文鏈接

HTML
* Doctype做用？嚴格模式與混雜模式如何區分？它們有何意義?
1.<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範javascript

所謂的標準模式是指，瀏覽器按 W3C 標準解析執行代碼；怪異模式則是使用瀏覽器本身的方式解析執行代碼，由於不一樣瀏覽器解析執行的方式不同，因此咱們稱之爲怪異模式。
瀏覽器解析時到底使用標準模式仍是怪異模式，與你網頁中的 DTD 聲明直接相關， DTD 聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略 DTD 聲明 , 將使網頁進入怪異模式。

* HTML5 爲何只須要寫 <!DOCTYPE HTML>？
doctype是document type（文檔類型）的簡寫，在頁面中，用來指定頁面所使用的xhtml（或者html）的版本。要想製做符合標準的頁面，一個必不可少的關鍵組成部分就是doctype聲明。只有肯定了一個正確的doctype，xhtml裏的標識和css才能正常生效。html 告訴瀏覽器這個文件是html格式網頁文件.
兩個合起來就是 html5標準網頁聲明,原先的是一串很長的字符串,如今是這個簡潔形式,支持html5標準的主流瀏覽器都認識這個聲明。 php

* 行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
行內元素有：a b span img input select strong（強調的語氣）
塊級元素有：div ul ol li dl dt dd h1-h6 p
知名的空元素：
css

<img> <input> <link> <meta>
不爲人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

常見塊元素(block element) address - 地址 blockquote - 塊引用 center - 居中對齊塊 dir - 目錄列表 div - 經常使用塊級容器，也是css layout的主要標籤 dl - 定義列表 fieldset - form控制組 form - 交互表單 h1 - 大標題 h2 - 副標題 h3 - 3級標題 h4 - 4級標題 h5 - 5級標題 h6 - 6級標題 hr - 水平分隔線 isindex - input prompt menu - 菜單列表 noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容） noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容） ol - 排序表單 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表（無序列表）
常見行內元素(inline element) a - 錨點 abbr - 縮寫 acronym - 首字 b - 粗體(不推薦) bdo - bidi override big - 大字體 br - 換行 cite - 引用 code - 計算機代碼(在引用源碼的時候須要) dfn - 定義字段 em - 強調 font - 字體設定(不推薦) i - 斜體 img - 圖片 input - 輸入框 kbd - 定義鍵盤文本 label - 表格標籤 q - 短引用 s - 中劃線(不推薦) samp - 定義範例計算機代碼 select - 項目選擇 small - 小字體文本 span - 經常使用內聯容器，定義文本內區塊 strike - 中劃線 strong - 粗體強調 sub - 下標 sup - 上標 textarea - 多行文本輸入框 tt - 電傳文本 u - 下劃線 var - 定義變量
可變元素可變元素由上下文語境來決定是塊元素仍是內聯元素[1] 。 applet - java applet button - 按鈕 del - 刪除文本 iframe - inline frame ins - 插入的文本 map - 圖片區塊（map） object - object對象 script - 客戶端腳本
空元素因爲HTML元素的內容是開始標籤與結束標籤之間的內容。而某些 HTML 元素具備空內容。（empty content），那些含有空內容的HTML元素，就是空元素。空元素[2] 是在開始標籤中關閉的。例子
就是沒有關閉標籤的空元素。

* 頁面導入樣式時，使用link和@import有什麼區別？
（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
（4 ）：使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。
（5）：@import能夠在css中再次引入其餘樣式表，好比能夠建立一個主樣式表，在主樣式表中再引入其餘的樣式表. html

* 介紹一下你對瀏覽器內核的理解？
主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
　　渲染引擎：負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。
　　JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。前端

* 常見的瀏覽器內核有哪些？
常見的有四大內核:
Trident： IE瀏覽器使用的內核，該內核程序在1997年的IE4中首次被採用，是微軟在Mosaic代碼的基礎之上修改而來的，並沿用到目前的IE9。Trident其實是一款開放的內核，其接口內核設計的至關成熟，所以纔有許多采用IE內核而非IE的瀏覽器涌現（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。

Gecko： Netscape6開始採用的內核，後來的Mozilla FireFox (火狐瀏覽器) 也採用了該內核，Gecko的特色是代碼徹底公開，所以，其可開發程度很高，全世界的程序員均可覺得其編寫代碼，增長功能。Gecko引擎的由來跟IE不無關係，前面說過IE沒有使用W3C的標準，這致使了微軟內部一些開發人員的不滿；他們與當時已經中止更新了的 Netscape的一些員工一塊兒創辦了Mozilla，以當時的Mosaic內核爲基礎從新編寫內核，因而開發出了Geckos。不過事實上，Gecko 內核的瀏覽器仍然仍是Firefox (火狐) 用戶最多，因此有時也會被稱爲Firefox內核。此外Gecko也是一個跨平臺內核，能夠在Windows、 BSD、Linux和Mac OS X中使用。

Presto：目前Opera採用的內核，該內核在2003年的Opera7中首次被使用，該款引擎的特色就是渲染速度的優化達到了極致，也是目前公認網頁瀏覽速度最快的瀏覽器內核，然而代價是犧牲了網頁的兼容性。實際上這是一個動態內核，與前面幾個內核的最大的區別就在腳本處理上，Presto有着天生的優點，頁面的所有或者部分都可以在迴應腳本事件時等狀況下被從新解析。此外該內核在執行Javascrīpt的時候有着最快的速度，根據在同等條件下的測試，Presto內核執行同等Javascrīpt所需的時間僅有Trident和Gecko內核的約1/3（Trident內核最慢，不過二者相差沒有多大）。只惋惜Presto是商業引擎，這很大程度上限制了Presto的發展。

Webkit：蘋果公司本身的內核，也是蘋果的Safari瀏覽器使用的內核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟件，在GPL條約下受權，同時支持BSD系統的開發。因此Webkit也是自由軟件，同時開放源代碼。在安全方面不受IE、Firefox的制約，因此Safari瀏覽器在國內仍是很安全的。google的chrome也使用webkit做爲內核。WebKit 內核在手機上的應用也十分普遍，例如 Google 的手機 Gphone、 Apple 的 iPhone，等所使用的 Browser 內核引擎，都是基於 WebKit。win 10 的IE edge也是....... html5

* 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；
   --兼容:1.IE8/IE7/IE6支持經過document.createElement方法產生的標籤，利用這一特性讓這些瀏覽器支持HTML5新標籤。2.使用是html5shim框架
   --區分:DOCTYPE聲明的方式是區分HTML和HTML5標誌的一個重要因素，此外，還能夠根據新增的結構、功能元素來加以區分。
java

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

* HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？
HTML5的一個重要特性就是離線存儲，所謂的離線存儲就是將一些資源文件保存在本地，這樣後續的頁面從新加載將使用本地資源文件，在離線狀況下能夠繼續訪問web應用，同時經過必定的手法(更新相關文件或者使用相關API)，能夠更新、刪除離線存儲等操做;
如何使用：上面提到的HTML5的離線存儲是基於一個新建的.appcache文件的，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。
（1）頁面頭部像下面同樣加入一個manifest的屬性；
（2）在cache.manifest文件的編寫離線存儲的資源；
    CACHEMANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
   resourse/logo.png
    FALLBACK:
    //offline.html
（3）在離線狀態時，操做window.applicationCache進行需求實現。 web

* 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的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的優勢：
1.iframe可以原封不動的把嵌入的網頁展示出來。
2.若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的更改，方便快捷。
3.網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長代碼的可重用。
4.若是遇到加載緩慢的第三方內容如圖標和廣告，這些問題能夠由iframe來解決。
iframe的缺點：
1.會產生不少頁面，不容易管理。
2.iframe框架結構有時會讓人感到迷惑，若是框架個數多的話，可能會出現上下、左右滾動條，會分散訪問者的注意力，用戶體驗度差。
3.代碼複雜，沒法被一些搜索引擎索引到，這一點很關鍵，如今的搜索引擎爬蟲還不能很好的處理iframe中的內容，因此使用iframe會不利於搜索引擎優化。
4.不少的移動設備（PDA 手機）沒法徹底顯示框架，設備兼容性差。
5.iframe框架頁面會增長服務器的http請求，對於大型網站是不可取的。
分析了這麼多，如今基本上都是用Ajax來代替iframe，因此iframe已經漸漸的退出了前端開發。

* Label的做用是什麼？是怎麼用的？（加 for 或包裹）
label 標籤爲 input 元素定義標註（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。若是您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。
Label 中有兩個屬性是很是有用的,一個是FOR、另一個就是ACCESSKEY了。
FOR屬性 :
功能：表示Label標籤要綁定的HTML元素，你點擊這個標籤的時候，所綁定的元素將獲取焦點。
ACCESSKEY屬性：
功能：表示訪問Label標籤所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。

* HTML5的form如何關閉自動完成功能？
autocomplete 屬性規定表單是否應該啓用自動完成功能。
自動完成容許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。

<form autocomplete="on/off">

on 默認。規定啓用自動完成功能。
off 規定禁用自動完成功能。

* 如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
即將到來的 SharedWorker API 可以在 iframe 甚至瀏覽器標籤或窗口中傳輸數據。它在幾年前就已在 Chrome 中得以實現，不久前也在 Firefox 上實現了，不過它在 IE 和 Safari 中仍然難覓蹤跡。
(須要對如下應用情景找到一個優雅的解決方案：假設有我的訪問了你的網站。他依次登陸，打開第二個標籤頁並在那個標籤頁裏選擇了註銷。這時，他所打開的第一個標籤頁看起來仍然保留着「已登陸」的狀態，但這時他的全部操做要麼會重定向到登陸頁面，要麼會直接讓他抓狂。更吸引人的解決方式則是判斷用戶是否已註銷，並對頁面作相應的改變。譬如能夠顯示一個對話框來提示用戶須要從新驗證，或者顯示本來的登陸視圖。)
這個功能能夠經過 WebSocket API 來實現，不過這就有些小題大作了。畢竟殺雞焉用牛刀，因而我開始尋找一些其它的跨標籤頁通訊方式。我首先想到的就是使用 cookies ，來週期性地經過 setInterval 檢查用戶是否登陸。對這個方案我並不滿意，由於這樣會把許多 CPU 週期耗費在檢查一個可能自始至終都不會知足的條件上。這時候我就以爲還不如就直接用「comet」（又名輪詢）、服務器端事件或者 WebSockets 算了呢。
當我發現本身是在騎驢找驢的時候仍是很吃驚，由於答案就是一直以來的 localStorage！
你知道 localStorage 會觸發一個事件嗎？具體地說，不論其中的哪一項在另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件。實際上，這就意味着不論在哪一個瀏覽器的標籤頁裏訪問了 localStorage，全部其它的標籤頁都能經過 window 對象監聽到這個事件.不論某個標籤頁在什麼時候修改了 localStorage，都會對其他的全部標籤觸發事件。這就意味着咱們只要爲 localStorage 賦值，就可以跨瀏覽器標籤通訊了。

* webSocket如何兼容低瀏覽器？(阿里)
(WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通訊(full-duplex)。在瀏覽器中經過http僅能實現單向的通訊,comet能夠必定程度上模擬雙向通訊,但效率較低,並須要服務器有較好的支持; flash中的socket和xmlsocket能夠實現真正的雙向通訊,經過 flex ajax bridge,能夠在javascript中使用這兩項功能. 能夠預見,若是websocket一旦在瀏覽器中獲得實現,將會替代上面兩項技術,獲得普遍的使用.)
WebSocket是目前"惟一"的一個瀏覽器下的Socket的標準, 它是經過瀏覽器內部提供的API來實現訪問的. 低版本的瀏覽器沒有WebSocket這個標準, 就意味這些瀏覽器不容許用戶經過它們來實現Socket通信. 解決兼容性的辦法就是準備一套Ajax + Server-side Script的後備方案. 好比Ajax + PHP Socket.
其餘方案:Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基於 multipart 編碼
發送 XHR 、基於長輪詢的 XHR.

* 頁面可見性（Page Visibility）API 能夠有哪些用途？
經過visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；

* 如何在頁面上實現一個圓形的可點擊區域？
（1）map+area或者svg
（2）border-radius
（3）純js實現須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

* 實現不使用 border 畫出1px高的線，在不一樣瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。

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

* 網頁驗證碼是幹嗎的，是爲了解決什麼安全問題？
防止惡意註冊和暴力破解所謂惡意註冊和暴力破解都是用軟件進行的。人工註冊再快，也須要一項一項輸入資料，速度很慢，對服務器基本沒有影響。若是沒有驗證碼可使用軟件註冊的話，能夠同時運行成千上萬個線程，一次能註冊成千上萬個用戶，讓服務器的數據庫很快變得臃腫不堪，運行效率降低。若是一個無聊的人或競爭對手對某網站懷有敵意，那麼這種方法很容易就能讓對方癱瘓。

* tite與h1的區別、b與strong的區別、i與em的區別？
tilte與h1的區別
從搜索引擎角度來講，title標籤是用來描述這個頁面的主題的，是一個網頁權重的最高點。但title標籤並不出如今文章的正文中。而h1標籤通常出如今文章的正文中，是展現給訪問者的文章的標題。因此說這兩個標籤不只不衝突的，而是合做的關係。一篇文章既要有title又要有h1標籤，既突出了文章的主題，又突出了標題和關鍵字，達到雙重優化網站的效果。通常會把title和h1標籤的內容寫成同樣，並且通常狀況下一篇文章最好只用一個h1標籤，過多的h1標籤反而會讓搜索引擎迷糊，認不清文章的主題。
b與strong的區別、i與em的區別
其實這兩對標籤最大區別就是一個給搜索引擎看的，一個是給用戶看的。就用b和strong標籤作例子吧。
b標籤和strong標籤給咱們的主觀感覺都是加粗，但對搜索引擎來講b標籤和普通的文字並無什麼區別，而strong標籤倒是起強調做用的。也就是說若是你想讓搜索引擎認爲你的某句話很重要時那就用strong標籤。若是隻是想讓用戶看到加粗的效果，那就用b標籤。同理如em標籤也是針對搜索引擎來起做用的，i標籤只是讓用戶看到展現的是斜體。

轉載於猿2048:➩《前端面試題1（html）》