前端面試題——HTML

前端面試題——HTML篇

1. Doctype作用？標準模式與兼容模式各有什么區(qū)別?

<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html>標簽之前。告知瀏覽器的解析器 用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔 以兼容模式呈現(xiàn)。 標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中， 頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

2.HTML5 為什么只需要寫 <!DOCTYPE HTML>

HTML5 不基于SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行 為（讓瀏覽器按照它們應(yīng)該的方式來運行）； 而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

3.行內(nèi)元素有哪些？塊級元素有哪些？空(void)元素有那些？

首先：CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有 默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內(nèi)”元素。
（1）行內(nèi)元素有：<a> <b> <span> <img> <input> <select> <strong>
（2）塊級元素有：<div><ul> <ol> <li> <dl> <dt> <dd> <h1> <h2> <h3> <h4>…<p>
（3）常見的空元素：<img><input><link><meta><br><hr>
鮮為人知的是： <area><base><col><command><embed><keygen><param><source><track><wbr>

4.頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用； 而@import是CSS提供的，只能用于加載CSS; 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加 載; import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;

5.介紹一下你對瀏覽器內(nèi)核的理解？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS 等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不
同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子 郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向 于只指渲染引擎。

6.常見的瀏覽器內(nèi)核有哪些？

Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。
[Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？

如何區(qū)分 HTML 和 HTML5？

  • HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的 增加。
    繪畫 canvas;
    用于媒介回放的 video 和 audio 元素;本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
    sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
    語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
    表單控件，calendar、date、time、email、url、search;
    新的技術(shù)webworker, websocket, Geolocation;
    純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
    對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；
  • 支持HTML5新標簽：
    IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽，
    可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
    瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式。
    當(dāng)然也可以直接使用成熟的框架、比如html5shim;
  • 如何區(qū)分HTML5： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
    H5新特性
    表單 畫布 音視頻 地理定位 媒體查詢 css新特性 離線緩存 本地存儲 拖拽

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

用正確的標簽做正確的事情。
html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;
使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

9.HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

在用戶沒有連網(wǎng)時，可以正常訪問站點或應(yīng)用，在用戶與網(wǎng)絡(luò)連接時更新用戶機器上 的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技 術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。

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

在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果 是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。

11.請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

cookie是網(wǎng)站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密），cookie還可以設(shè)置有效時間
cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞，沒次ajax請求都會吧cookie傳送到后臺，cookie一半用做用戶登陸，后臺可以根據(jù)cookie信息判斷用戶是否登陸狀態(tài)sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
區(qū)別在于
存儲大?。?br> cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除。
cookie設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉

12.iframe有那些缺點？

iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題。

13.Label的作用是什么？是怎么用的？

label標簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標簽時，瀏覽器會自動將焦點轉(zhuǎn)到
和標簽相關(guān)的表單控件上。
<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label>

14.如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信?

WebSocket、也可以調(diào)用localstorge、cookies等本地存儲方式，還可以使用頁面的路由參數(shù)傳遞localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一個事件，我們通過監(jiān)聽事件，控制它的值來進行頁面信息通信；

15.如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域？

map+area或者svg border-radius純js實現(xiàn) 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

16.title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
strong是標明重點內(nèi)容，有語氣加強的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時：<strong>會重讀，而<B>是展示強調(diào)內(nèi)容。
i內(nèi)容展示為斜體，em表示強調(diào)的文本；

17.data-屬性的作用是什么？

h5新增的屬性可以通過ele.dataset獲取到標簽上的data-*的屬性返回一個對象

18.常見兼容性問題？

問題：png24位的圖片在iE6瀏覽器上出現(xiàn)背景，
解決：解決方案是做成PNG8.
問題：瀏覽器默認的margin和padding不同。
解決：方案是加一個全局的{margin:0;padding:0;}來統(tǒng)一。
問題：IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會產(chǎn)生20px的距離，
解決：解決方案是在float的標簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個符號只有ie6會識別) 漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。
· css
.bb{
background-color:#f1ee18;/所有識別/
.background-color:#00deff\9; /IE6、7、8識別/
+background-color:#a200ff;/IE6、7識別/
_background-color:#1e0bd1;/IE6識別*/
}
問題：IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性，F(xiàn)irefox下,只能使用getAttribute()獲取自定義屬性.
解決：解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.
問題：IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性，F(xiàn)irefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。
問題：Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,
解決：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
問題：超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了
解決：方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover
{} a:active {}

19.你知道多少種Doctype文檔類型？

該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標準的網(wǎng)頁，而 Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器
而設(shè)計的網(wǎng)頁。

20. HTML與XHTML——二者有什么區(qū)別？

1.所有的標記都必須要有一個相應(yīng)的結(jié)束標記
2.所有標簽的元素和屬性的名字都必須使用小寫
3.所有的XML標記都必須合理嵌套
4.所有的屬性必須用引號""括起來
5.把所有<和&特殊符號用編碼表示
6.給所有屬性賦一個值
7.不要在注釋內(nèi)容中使“--”
8.圖片必須有說明文字

21.<img>的title和alt有什么區(qū)別？

title是global attributes之一，用于為元素提供附加的advisory information。通常當(dāng)鼠標滑動到元素上的時候顯示。
alt是<img>的特有屬性，是圖片內(nèi)容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片?？商釄D片高可訪問性，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會重點分析。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容