前端面試之HTML篇整理
HTML5新特性，語義化
語義化標籤比起傳統的div+css的樣式佈局來說，更遵循W3C規則，有利於團隊的開發維護，更有利於SEO優化，方便其他裝置解析
舉幾個例說明：
| 標籤 | 語義化 |
|---|---|
<section></section> |
定義文件中的主體部分的節、段。 |
<article></article> |
定義引入的外部文字 |
<aside></aside> |
常用作側邊欄 |
<header></header> |
頁面頭部 |
<footer></footer> |
頁面尾部 |
<nav></nav> |
導航欄 |
<datalist> |
可輸入的下拉選擇框 |
個人覺得最實用的新增屬性是表單屬性
新增的有參照連結
其他html5新增的實用屬性
瀏覽器的標準模式和怪異模式
瀏覽器解析css有兩種模式：標準模式和怪異模式。標準模式下瀏覽器按W3C標準解析執行程式碼；怪異模式下，為了解決相容老頁面，瀏覽器按照各自的模式去解析文件
瀏覽器是如何區分這兩種模式呢？
1.標準模式：
即文件頭部具有完整的DOCTYPE聲名；瀏覽器會按照doctype中的DTD宣告指向來解析，比如
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 瀏覽器會按照HTML 4.01 的標準來解析
2.怪異模式：
文件中沒有DOCTYPE宣告，或者說沒有嚴格的DTD宣告，另外一種情況：如果doctype宣告在xml之後，IE會解析成怪異模式。
標準模式與怪異模式對CSS解析的區別
- 盒模型：IE標準下：
content+padding+border+margin；IE怪異下：content+margin，其中content就包含了padding和border - 行內元素的垂直對齊:基於 Gecko 的瀏覽器【Mozilla Firefox、HotBrowser、Mozilla Suite、Camino】標準模式對齊至基線，怪異模式對齊至底部
- 怪異模式中，IE6/7/8都不認識!important宣告 ;標準模式中只有IE6不認識!important宣告
- 設定行內元素的高寬： 在標準模式下，給等行內元素設定wdith和height都不會生效，而在怪異模式下，則會生效。
- 使用margin:0 auto在標準模式下可以使元素水平居中，但在怪異模式下卻會失效。
xhtml和html的區別
xhtml 實際上是符合 XML 標準的改進型 HTML，對語法的苛刻程式和其它基於 XML 的一樣；
使用data-的好處
HTML data-* 屬性：使用 data-* 屬性來嵌入自定義資料
儲存的（自定義）資料能夠被頁面的 JavaScript 中利用，以建立更好的使用者體驗（不進行 Ajax 呼叫或伺服器端資料庫查詢）
在高版本瀏覽器中，可以使用js方法dataset來獲取到data-存放的資料
meta標籤
meta標籤的作用：它裡面存放的資料是供機器解讀的，告訴機器該如何解析這個頁面
它不會顯示在頁面上，但是對於機器是可讀的。
可用於瀏覽器：1.（如何顯示內容或重新載入頁面），2.搜尋引擎（關鍵詞），3.或其他 web 服務。
meta的必需屬性和可選屬性：
必須屬性：當有http-equiv或name屬性的時候，一定要有content屬性對其進行說明。
meta的可選屬性：http-equiv、name和scheme
<meta http-equiv="Refresh" content="5;url=http://www.baidu.com" />在頁面中加入這個後，5秒鐘後就會跳轉到百度
常用的屬性及用法：
charset：宣告編碼格式，解決亂碼
SEO優化：使用name=”*” content=”…”
移動端頁面佈局：
<meta name="viewport" content="width=device-width, initial-scale=1.0">告訴各個瀏覽器去執行什麼操作
比如：優先使用最新的chrome版本
<meta http-equiv="X-UA-Compatible" content="chrome=1" />UC手機瀏覽器全屏顯示頁面
<meta name="full-screen" content="yes">canvas
談起canvas，不得不說的是與svg的區別：
canvas是html5提供的新元素<canvas>
svg是比canvas要早很多，用xml技術（描述二維圖形的語言）
canvas可以看做是一個畫布。其繪製出來的圖形為標量圖；可以在canvas中引入jpg或png這類格式的圖片，適合製作遊戲、圖表等
而svg，所繪製的圖形為向量圖。svg中不能引入普通的圖片，適合製作小圖示；
canvas裡面繪製的圖形不能被引擎抓取，不支援事件繫結，而svg的可以用標籤實現，並且svg可以支援事件繫結。
canvas可以使用canvas.onmouseover=function(){}
IE6 bug，和一些定位寫法
IE6對文件的解析是有很多bug的，比如 雙邊距問題、奇數寬高、浮動後3px問題、position:absolute定位中left和bottom的定位錯誤等等；
這些ie6的bug都可以通過觸發layout得到解決，如何觸發layout呢？
position:absolute 絕對定位元素的包含區塊(containing block)就會經常在這一方面出問題
float:left|right 由於layout元素的特性，浮動模型會有很多怪異的表現
display:inline-block 當一個內聯級別的元素需要layout的時候就往往符用到它，這也可能也是這個CSS屬性的唯一效果—-讓某個元素有layout
width: 除auto外的任何值
height: 除auto外的任何值
zoom: 除auto外的任何值
其中解決定位bug最常用的是：
1、給父層設定zoom:1觸發layout。
2、給父層設定寬度（width(定位left)/height(定位bottom)）。
關於viewport
當在meta標籤中設定 name=”viewport”
content內容
| 欄位名稱 | 型別 | 描述 |
|---|---|---|
| width number | device-width | 控制 viewport 的寬度 |
| height number | device-width | 控制 viewport 的寬度 |
| initial-scale device-width | 初始縮放比例，也即是當頁面第一次 load 的時候縮放比例 | |
| maximum-scale | number | 允許使用者縮放到的最大比例 |
| minimum-scale | number | 允許使用者縮放到的最小比例 |
| user-scalable | yes \no | 使用者是否可以手動縮放 |
如果不設定viewport，那麼width的預設為980;如果頁面的所有元素寬度都小於980，此時width為980，如果頁面最寬的位置超過980，那麼width等於最大寬度。
例如，
那麼ios下width還是按980顯示（即預設就會通過dpi縮放）
viewport的寬度可以通過 document.documentElement.clientWidth來獲取。