前端之HTML相關面試題。
1.Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
Doctype可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的html文檔。Doctype是document type（文檔類型）的簡寫，是用來說明所用的XHTML或html是什麼版本的。DOCTYPE聲明位於文檔中的最前面，處於 html 標籤之前。告知瀏覽器以何種模式來渲染文檔。
所謂的標準模式是指，瀏覽器按W3C標準解析代碼；混雜模式則是使用瀏覽器自己的方式執行代碼，因爲不同的瀏覽器解析執行的方式不一樣，所以我們稱之爲混雜模式。
DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。2.HTML5 爲什麼只需要寫 !DOCTYPE HTML？
html4.01中的doctype需要對DTD進行引用，因爲html4.01基於SGML。而html5不基於SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行爲。3.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
常用的行內元素（也稱內聯元素）有<a>、<span>、<br>、<i>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的塊級元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
知名的空元素： <br/> <hr/> <img/> <input/> <link/> <meta/>
鮮爲人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>4.頁面導入樣式時，使用link和@import有什麼區別？
（1）link是xhtml標籤，除了加載css外，還可以定義rss等其他事務；@import屬於css範疇，只能加載css.
(2)link引用css時，在頁面載入時同時加載；@import需要頁面網頁完全載入之後加載。
（3）link是Xhtml標籤，無兼容問題；@import是css2.1提出的，低版本的瀏覽器不支持。
（4）link支持使用JavaScript控制dom去改變樣式；而@import不支持。5.介紹一下你對瀏覽器內核的理解？
瀏覽器內核主要分爲兩部分：渲染引擎和js引擎
渲染引擎：負責取得網頁的內容、整理訊息，以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不同。
js引擎：解析和執行javascript來實現網頁的動態效果。6.常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。7.Html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
拖拽釋放(Drag and drop) API
語義化更好的內容標籤（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
表單控件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation
* 移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；8.簡述一下你對HTML語義化的理解？
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。9.HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
1、頁面頭部像下面一樣加入一個manifest的屬性；
2、在cache.manifest文件的編寫離線存儲的資源；
3、在離線狀態時，操作window.applicationCache進行需求實現。10.瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源並進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。11.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage的概念很特別，引入了一個“瀏覽器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一頁面，數據仍然存在。關閉窗口後，sessionStorage即被銷燬。同時“獨立”打開的不同窗口，即使是同一頁面，sessionStorage對象也是不同的。12.iframe有那些缺點？
（1）在網頁中使用框架結構最大的弊病是搜索引擎的“蜘蛛”程序無法解讀這種頁面。當“蜘蛛”程序遇到由數個框架組成的網頁時，它們只看到框架而無法找到鏈接，因此它們會以爲該網站是個死站點，並且很快轉身離去。對一個網站來說這無異於一場災難。
（2）框架結構有時會讓人感到迷惑，特別是在幾個框架中都出現上下、左右滾動條的時候。這些滾動條除了會擠佔已經非常有限的頁面空間外，還會分散訪問者的注意力。訪問者遇到這種網站往往會立刻轉身離開。他們會想，既然你的主頁如此混亂，那麼網站的其他部分也許更不值得瀏覽。
（3）鏈接導航問題。使用框架結構時，你必須保證正確設置所有的導航鏈接，如不然，會給訪問者帶來很大的麻煩。比如被鏈接的頁面出現在導航框架內，這種情況下訪問者便被陷住了，因爲此時他沒有其他地方可去。13.Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B" /></label>14.HTML5的form如何關閉自動完成功能？
autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。15.如何實現瀏覽器內多個標籤頁之間的通信?
調用localstorge、cookies等本地存儲方式。
方法一：
localstorge在一個標籤頁裏被添加、修改或刪除時，都會觸發一個storage事件，通過在另一個標籤頁裏監聽storage事件，即可得到localstorge存儲的值，實現不同標籤頁之間的通信。
方法二：
使用cookie+setInterval，將要傳遞的信息存儲在cookie中，每隔一定時間讀取cookie信息，即可隨時獲取要傳遞的信息。16.webSocket如何兼容低瀏覽器？
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR17.頁面可見性（Page Visibility）API 可以有哪些用途
頁面可見性： 就是對於用戶來說，頁面是顯示還是隱藏, 所謂顯示的頁面，就是我們正在看的頁面；隱藏的頁面，就是我們沒有看的頁面。18.如何在頁面上實現一個圓形的可點擊區域？
（1） map+area
<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" />
</map>
（2）border-radius（H5）
<style>
.disc{
width:100px;
height:100px;
background-color:dimgray;
border-radius: 50%;
cursor: pointer;
position: absolute;
left:50px;
top:50px;
line-height: 100px;
text-align: center;
color: white;
}
</style>
<div class="disc">點擊</div> 19.驗證碼的用途？
驗證碼是爲了防止一些人使用軟件惡意註冊、發帖等行爲而設的。 它的存在是爲了確保登陸網站的是一個坐在電腦面前的真人，而不是一個自動登陸的軟件。20.tite與h1的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義只表示是個標題， H1 則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時： 會重讀，而 是展示強調內容。
i內容展示爲斜體， em 表示強調的文本；