一、 SGML 、 HTML 、XML 和 XHTML 的區別？
- SGML 是標準通用標記語言，是一種定義電子文件結構和描述其內容的國際標準語言，是所有電子文件標記語言的起源。
- HTML 是超文字標記語言，主要是用於規定怎麼顯示網頁。
- XML 是可擴充套件標記語言是未來網頁語言的發展方向，XML 和 HTML 的最大區別就在於 XML 的標籤是可以自己建立的，數量無限多， 而 HTML 的標籤都是固定的而且數量有限。
- XHTML 也是現在基本上所有網頁都在用的標記語言，他其實和 HTML 沒什麼本質的區別，標籤都一樣，用法也都一樣，就是比 HTML 更嚴格，比如標籤必須都用小寫，標籤都必須有閉合標籤等。
二、DTD 介紹
- DTD（ Document Type Definition 文件型別定義）是一組機器可讀的規則，它們定義 XML 或 HTML 的特定版本中所有允許元 素及它們的屬性和層次關係的定義。在解析網頁時，瀏覽器將使用這些規則檢查頁面的有效性並且採取相應的措施。
- DTD 是對 HTML 文件的宣告，還會影響瀏覽器的渲染模式（工作模式）。
三. 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代表允許 |
四. 你用過哪些 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> |
定義視訊 |
五、 H5 是什麼？
H5是HTML5的簡稱，就是“HTML”的第5個版本，也就是第5個版本的超文字標記語言。
六、 頁面匯入樣式時，使用 link 和 @import 有什麼區別？
- html頁引用css的三種，一是頁內的style標籤，二是link外鏈；三是@import匯入
- @import是CSS提供的語法規則，只有匯入樣式表的作用；link是HTML的標籤，不僅可以載入CSS檔案，還可以定義RSS、rel連線屬性、引入網站圖示等。
- 載入順序區別。載入頁面時，link外鏈的檔案會與文件同步載入，而@import則是等待文件載入完成後才載入。
- 相容性區別。@import是CSS 2.1才有的語法，低版本瀏覽器不支援；link標籤沒有相容問題。
- DOM可控性區別。可以通過JS操作DOM，插入link標籤來改變樣式；由於DOM方法是基於文件的，無法使用@import的方法插入樣式。
七、 Label 的作用是什麼？是怎麼用的？
label 標籤來定義表單控制間的關係，當使用者選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。
<label for="Name">Number:</label>
<input type=“text“ name="Name" id="Name"/>
八、div模擬textarea
contenteditable屬性，值為布林值，為true時可以編輯。
<div contenteditable="true">可以編輯裡面的1內容</div>
九、web標準及w3c的理解和認識
標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外鏈 css 和 js 指令碼、結構行為表現的分離，
檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，
容易維護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性。
十、離線快取與傳統瀏覽器快取區別
①離線快取是針對整個應用，瀏覽器快取是單個檔案
②離線快取斷網了仍可以開啟快取的頁面，瀏覽器快取不行
③離線快取有網也會優先使用快取資源，但可以主動通知瀏覽器更新資源