--HTML常見題目
01、doctype 的作用？嚴格模式與混雜模式如何區分？它們有何意義？
DOCTYPE是document type (文檔類型) 的縮寫。 < !DOCTYPE > 聲明位於文檔的最前面，處於標簽之前，它不是html標簽。主要作用是告訴瀏覽器的解析器使用哪種HTML規范或者XHTML規范來解析頁面。
嚴格模式和混雜模式都是瀏覽器的呈現模式，瀏覽器究竟使用混雜模式還是嚴格模式呈現頁面與網頁中的DTD（文件類型定義）有關，DTD里面包含了文檔的規則。比如：loose.dtd
- 嚴格模式：又稱標准模式，是指瀏覽器按照W3C標准來解析代碼，呈現頁面
- 混雜模式：又稱為怪異模式或者兼容模式，是指瀏覽器按照自己的方式來解析代碼，使用一種比較寬松的向后兼容的方式來顯示頁面。
02、HTML5 為什么只需寫< !DOCTYPE HTML> ?
HTML5不基於 SGML （標准通用標記語言），因此不需要對DTD（ DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。）進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
03、行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？
- 行內：
<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<q>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<tt>、<var>
- 塊級：
<address>、<caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>
- 空：
常見的：<br> <hr> <img> <input> <link> <meta>
鮮為人知的：<area> <base> <col> <command> <embed> <link> <meta><keygen> <param> <source> <track> <wbr>
04、頁面導入樣式時，使用link和@import有什么區別？
- link屬於XHTML標簽，import是CSS提供的方式。link方式除了CSS，還可以定義RSS，定義rel連接屬性等，而import只能加載CSS
- link是頁面加載時同時執行的，而import是在頁面加載完之后，才會執行的
- link支持使用Javascript控制DOM去改變樣式；而@import不支持
- link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本(IE5及以下)的瀏覽器不支持
05、介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
渲染引擎：用於獲取html、css和圖片,然后會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS引擎：解析和執行 javascript 來實現網頁的動態效果。
06、常見的瀏覽器內核有哪些？
- Trident：IE、360
- Gecko：Firefox
- Webkit：Safari、Chrome內核原型
- Chromium/Blink：Chrome
- Blink：opera
07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
HTML5 現在已經不是SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加
新特性：
- 繪畫canvas
- 用於媒介回放的video 和audio 元素
- 本地離線存儲localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
- sessionStorage 的數據在瀏覽器關閉后自動刪除
- 語意化更好的內容元素，比如：article、footer、header、nav、section
- 表單控件：calendar、date、time、email、url、search
- 新的技術：webworker,websockt, Geolocation
移除的元素：
- 純表現的元素：basefont，big，center，font, s，strike，tt，u;
- 對可用性產生負面影響的元素：frame，frameset，noframes；
兼容問題：
- IE6/IE7/IE8 支持通過 document.createElment 方法產生的標簽，利用這一特性讓這些瀏覽器支持 HTML5 新標簽。瀏覽器支持新標簽后，還需要添加標簽默認的樣式。
- 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
08、如何區分 HTML 和 HTML5？
-
- 在文檔類型聲明上不同： HTML 是很長的一段代碼，很難記住，而HTML5卻只有簡簡單單的聲明，方便記憶。
-
-
在結構語義上不同：
HTML：沒有體現結構語義化的標簽，通常都是這樣來命名的
<div id="header"></div>，這樣表示網站的頭部。HTML5：在語義上卻有很大的優勢。提供了一些新的標簽，比如：
<header><article><footer>
-
09、簡述一下你對HTML語義化的理解？
用正確的標簽做正確的事情:
- HTML 語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
- 即使在沒有樣式 CSS 的情況下也能以一種文檔格式顯示，並且是容易閱讀的
- 搜索引擎的爬蟲也依賴於 HTML 標記來確定上下文和各個關鍵字的權重，有利於 SEO
- 使閱讀源代碼的人更容易將網站分塊，便於閱讀、維護和理解
10、HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
-
使用：
1.頁面頭部像下面一樣加入一個manifest的屬性
<html manifest = "cache.manifest">2.在cache.manifest文件的編寫離線存儲的資源
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html -
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
11、瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
在線的情況下，瀏覽器發現Html頭部有manifest屬性，它會請求manifest文件。
如果是第一次訪問APP，那么瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。
如果已經訪問過APP並且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面。然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源並進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
12、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
-
存儲大小
cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。 -
有效時間
sessionStorage和localStorage：雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。 sessionStorage：數據在當前瀏覽器窗口關閉后自動刪除。 cookie：設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉 -
數據與服務器之間的交互方式
cookie的數據會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端。 sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
13、iframe有那些缺點？
- 會產生很多頁面，不容易管理。
- 代碼復雜，無法被一些搜索引擎解讀。
- 小型的移動設備無法完全顯示框架，設備兼容性差。
- 如果框架個數多的話，可能會出現上下、左右滾動條導致用戶體驗度差。
- iframe框架頁面會增加服務器的http請求，對於大型網站是不可取的。
14、Label的作用是什么？是怎么用的？（加 for 或 包裹）
- label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上
<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/>
或者
<label>Date:<input type="text" name="B" /></label>
15、HTML5的form如何關閉自動完成功能？
給不想要的提示信息標簽里設置：autocomplete為"on"或者"off"來開啟或者關閉自動完成功能
16、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
方法1：使用localStorage
<!--在一個標簽頁里面使用 localStorage.setItem(key,value)添加（修改、刪除）內容；-->
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
localStorage.setItem("name", name);
});
});
</script>
<!--在另一個標簽頁里面監聽 storage 事件。
即可得到 localstorge 存儲的值，實現不同標簽頁之間的通信。-->
<script type="text/javascript">
$(function(){
window.addEventListener("storage", function(event){
console.log(event.key + "=" + event.newValue);
});
});
</script>
方法2：調用cookie+setInterval()
將要傳遞的信息存儲在cookie中，每隔一定時間讀取cookie信息，即可隨時獲取要傳遞的信息。
頁面1：
將：
localStorage.setItem("name", name);
改為：
document.cookie="name="+name;
頁面2：
<script type="text/javascript">
$(function(){
function getCookie(key) {
return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}
setInterval(function(){
console.log("name=" + getCookie("name"));
}, 10000);
});
</script>
17、webSocket如何兼容低瀏覽器？(阿里)
- Adobe Flash Socket
- ActiveX HTMLFile (IE)
- 基於 multipart 編碼發送 XHR
- 基於長輪詢的 XHR
18、頁面可見性（Page Visibility）API 可以有哪些用途？
- 通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
- 在頁面被切換到其他后台進程的時候，自動暫停音樂或視頻的播放；
19、如何在頁面上實現一個圓形的可點擊區域？
- 1.map+area或者svg
<img src="task6.jpg" width="1366" height="768" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="100,100,50" href="https://www.baidu.com" target="_blank" />
</map>
- 2.border-radius
<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>
- 3.純js實現
<script>
document.onclick = function(e){
var r = 50; //圓的半徑
var x1 = 100, y1 = 100;
var x2 = e.clientX,
y2 = e.clientY;
var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
if(len<=50){
console.log("Inner");
}else{
console.log("Outer");
}
}
</script>
20、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
<div style="height:1px;overflow:hidden;background:red"></div>
21、網頁驗證碼是干嘛的，是為了解決什么安全問題？
- 區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水；
- 有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。
22、title與h1的區別、b與strong的區別、i與em的區別？
- title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響;
- strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：
<strong>會重讀，而<B>是展示強調內容。 - i內容展示為斜體，em表示強調的文本；