1. DOCTYPE 的作用是什么？
<!DOCTYPE> 聲明一般位於文檔的第一行，它的作用主要是告訴瀏覽器以什么樣的模式來解析文檔。一般指定了之后會以標准模式來 進行文檔解析，否則就以兼容模式進行解析。在標准模式下，瀏覽器的解析規則都是按照最新的標准進行解析的。而在兼容模式下，瀏 覽器會以向后兼容的方式來模擬老式瀏覽器的行為，以保證一些老的網站的正確訪問。
2. 標准模式與兼容模式各有什么區別？
- 標准模式的渲染方式和 JS 引擎的解析方式都是以該瀏覽器支持的最高標准運行。
- 兼容模式中，頁面以寬松的向后兼容的方式顯示 ，模擬老式瀏覽器的行為以防止站點無法工作。
3. HTML5 為什么只需要寫 <!DOCTYPE HTML> ，而不需要引入 DTD？
- HTML5 不基於 SGML，因此不需要對 DTD 進行引用，但是需要 DOCTYPE 來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運 行）。
- 而 HTML4.01 基於 SGML ，所以需要對 DTD 進行引用，才能告知瀏覽器文檔所使用的文檔類型。
4. SGML 、 HTML 、XML 和 XHTML 的區別？
- SGML 是標准通用標記語言，是一種定義電子文檔結構和描述其內容的國際標准語言，是所有電子文檔標記語言的起源。
- HTML 是超文本標記語言，主要是用於規定怎么顯示網頁。
- XML 是可擴展標記語言是未來網頁語言的發展方向，XML 和 HTML 的最大區別就在於 XML 的標簽是可以自己創建的，數量無限多， 而 HTML 的標簽都是固定的而且數量有限。
- XHTML 也是現在基本上所有網頁都在用的標記語言，他其實和 HTML 沒什么本質的區別，標簽都一樣，用法也都一樣，就是比 HTML 更嚴格，比如標簽必須都用小寫，標簽都必須有閉合標簽等。
5. DTD 介紹
- DTD（ Document Type Definition 文檔類型定義）是一組機器可讀的規則，它們定義 XML 或 HTML 的特定版本中所有允許元 素及它們的屬性和層次關系的定義。在解析網頁時，瀏覽器將使用這些規則檢查頁面的有效性並且采取相應的措施。
- DTD 是對 HTML 文檔的聲明，還會影響瀏覽器的渲染模式（工作模式）。
7. 空元素定義
- 標簽內沒有內容的 HTML 標簽被稱為空元素。空元素是在開始標簽中關閉的。
- 常見的空元素有：br hr img input link meta
8. 你是如何理解語義化的？
- 語義化，顧名思義，就是你寫的HTML結構，是用相對應的有一定語義的英文字母（標簽）表示的，標記的，因為HTML本身就是標記語言。不僅對自己來說，容易閱讀，書寫。別人看你的代碼和結構也容易理解，甚至對一些不是做網頁開發的人來說，也容易閱讀。那么，我們以后再開發的過程中，一定要注意了，盡量使用官方的有語義的標簽，不要再使用一堆無意義的標簽去堆你的結構。
- 語義化，也無非就是自己在使用標簽的時候多使用有英文語義的標簽，比如h標簽，在HTML中就是就是用來定義標題，還有p標簽，英文是paragraph段落，table表格標簽,等等。
9. meta viewport 是做什么的？怎么寫?
- 移動端瀏覽器通常都在一個比屏幕更寬的虛擬窗口中渲染頁面，這個虛擬窗口就是viewport，目的是正常展示沒有做移動端適配的網頁，可以讓他們完整的展現給用戶。我們有時用移動設備訪問桌面版網頁就會看到一個橫向滾動條，這里可顯示區域的寬度就是viewport的寬度。
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
該meta標簽的作用是讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。當然maximum-scale=1.0, user-scalable=0不是必需的，是否允許用戶手動播放根據網站的需求來定，但把width設為width-device基本是必須的，這樣能保證不會出現橫向滾動條。
- meta viewport 的6個屬性：
width 設置layout viewport 的寬度，為一個正整數，或字符串”width-device” initial-scale 設置頁面的初始縮放值，為一個數字，可以帶小數 minimum-scale 允許用戶的最小縮放值，為一個數字，可以帶小數 maximum-scale 允許用戶的最大縮放值，為一個數字，可以帶小數 height 設置layout viewport 的高度，這個屬性並不重要，很少使用 user-scalable 是否允許用戶進行縮放，值為”no”或”yes”, no 代表不允許，yes代表允許
10. 你用過哪些 HTML 5 標簽？
<article> 定義獨立的內容 <aside> 定義頁面內容之外的內容 <audio> 定義聲音內容 <bdi> 定義文本的文本方向，使其脫離其周圍文本的方向設置 <canvas> 定義圖形 <command> 定義命令按鈕 <datalist> 定義下拉列表 <details> 定義元素的細節 <embed> 定義外部交互內容或插件 <figcaption> 定義figure元素的標題 <figure> 定義媒介內容的分組，以及他們的標題 <footer> 定義section或page的頁腳 <header> 定義section或page的頁眉 <hgroup> 定義有關文檔中的section信息 <keygen> 定義生成密鑰 <mark> 定義有記號的文本 <meter> 定義預定義范圍內的度量 <nav> 定義導航鏈接 <output> 定義輸出的一些類型 <progress> 定義任何類型的任務的進度 <rp> 定義若瀏覽器不支持ruby元素顯示的內容 <rt> 定義ruby注釋的解釋 <ruby> 定義ruby注釋 <section> 定義section <source> 定義媒介源 <summary> 定義details元素的標題 <time> 定義日期/時間 <track> 定義用在媒體播放器中的文本軌道 <video> 定義視頻
11. H5 是什么？
H5是HTML5的簡稱，就是“HTML”的第5個版本，也就是第5個版本的超文本標記語言。
12. 頁面導入樣式時，使用 link 和 @import 有什么區別？
- 從屬關系區別。@import是CSS提供的語法規則，只有導入樣式表的作用；link是HTML提供的標簽，不僅可以加載CSS文件，還可以定義RSS、rel連接屬性、引入網站圖標等。
- 加載順序區別。加載頁面時，link標簽引入的CSS文件被同時加載；而@import引入的CSS文件將在頁面加載完畢后被加載。
- 兼容性區別。@import時CSS 2.1才有的語法，故只可在IE5+才能識別；link標簽作為HTML標簽，不存在兼容性問題。
- DOM可控性區別。可以通過JS操作DOM，插入link標簽來改變樣式；由於DOM方法是基於文檔的，無法使用@import的方法插入樣式。
13. Label 的作用是什么？是怎么用的？
label 標簽來定義表單控制間的關系，當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
<label for="Name">Number:</label> <input type=“text“ name="Name" id="Name"/>