HTML、XML、XHTML的區別
- HTML是一種超文本標記語言，語法較為松散，不規范。
- XML是一種可擴展標記語言，主要用來存儲數據和結構，標簽可以自定義。
- XHTML是一種可擴展超文本標記語言，作用與HTML類似，語法更加嚴格。
怎樣理解HTML語義化
語義化 HTML 就是選擇合適的標簽、使用合理的代碼結構來編寫HTML的方式，使代碼更具可讀性，也使得瀏覽器的爬蟲和機器能對代碼更好地解析。
要實現HTML的語義化，就要求開發者掌握常用的HTML標簽，理解各種標簽所代表的含義，在不同的場景能使用合適的標簽，盡量不使用沒有語義信息的標簽。
語義化帶來的是更清晰的頁面結構，使頁面可讀性更強；更清晰的代碼結構，更利于開發團隊的開發和維護；更好的適應性，可以支持更多的設備的不同表現形式；與機器更良好的溝通，使瀏覽器更容易渲染表現，也使搜索引擎更容易獲取有效信息。
語義化的優點：
1.清晰的頁面結構：去掉或樣式丟失的時候，也能讓頁面呈現清晰的結構，增強頁面的可讀性。
2.支持更多的設備：屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁。如果你使用的含予以的標記，屏幕閱讀器會根據你的標簽來判斷網頁的內容，而不是一個字母一個字母的拼寫出來。
3.有利于SEO（搜索引擎優化）：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息，搜索引擎的爬蟲也依賴于標記來確定上下文和各個關鍵字的權重。
- 便于團隊開發和維護：在團隊中大家都遵循同一個標準，可以減少很多差異化的東西，方便開發和維護，提高開發效率，甚至實現模塊化開發。
怎樣理解內容與樣式分離的原則
- 寫 HTML 僅處理內容，不管樣式，重點放在 HTML 的結構和語義化，避免出現屬性樣式，盡量不要出現行內樣式。
- 寫 JS 的時候，盡量不使用 JS直接操作樣式，而是通過給元素添加刪除class來控制樣式變化。
- 頁面展現的所有樣式，都由CSS來負責實現。
有哪些常見的meta標簽
META標簽是HTML標記HEAD區的一個關鍵標簽，它位于HTML文檔的<head>和<title>之間（有些也不是在<head>和<title>之間）。它提供的信息雖然用戶不可見，但卻是文檔的最基本的元信息。<meta>除了提供文檔字符集、使用語言、作者等基本信息外，還涉及對關鍵詞和網頁等級的設定。
meta標簽共有兩個屬性，分別是http-equiv屬性和name屬性。
| 標簽 | 含義 |
|---|---|
<meta name="keywords" content="關鍵字1，關鍵字2，....."> |
定義針對搜索引擎的關鍵詞 |
<meta name="description“” content="頁面描述”> |
頁面描述，告訴搜索引擎你的站點的主要內容 |
<meta name="viewport" content=""> |
移動端窗口 |
<meta name="author" content="姓名"> |
定義網頁作者 |
<meta name="robots" content="none"> |
定義搜索引擎爬蟲的索引方式 |
<meta name="generator" content="webstorm"> |
標明網頁是什么軟件制作 |
<meta name="copyright" content="某某"> |
用于標注版權信息 |
<meta name="renderer" content="ie-comp"> |
用于指定雙核瀏覽器默認以何種方式渲染頁面 |
<meta name="revised-after" content="7 days"> |
搜索引擎爬蟲重訪時間 |
<meta charset="utf-8"> |
聲明文檔使用的字符編碼（屬于http-equiv屬性） |
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> |
告知瀏覽器以何種版本來渲染頁面。（一般都設置為最新模式） |
<meta http-equiv="cache-control" content="no-cache"> |
指導瀏覽器如何緩存某個響應以及緩存多長時間 |
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT"> |
網頁到期時間，過期后網頁必須到服務器上重新傳輸 |
<meta http-equiv="refresh" content="2;URL=http://www.github.com/"> |
自動刷新并指向某頁面 |
<meta http-equiv="Set-Cookie" content="name, date"> |
cookie設定 |
文檔聲明的作用？嚴格模式和混雜模式指什么？<doctype html>的作用？
DOCTYPE,簡稱為DTDs，是英文Document type的縮寫，中文“文檔類型”，在web設計中用來說明你用的XHTML或者HTML是什么版本。要建立符合標準的XHTML網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE,否則你的標識和CSS都不會生效。
<!DOCTYPE>聲明位于HTML文檔中的第一行，處于<html>標簽之前。在HTML中doctype有兩個主要目的：
- 對文檔進行有效性驗證。
它告訴用戶代理和校驗器這個文檔是按照什么DTD寫的。 - 決定瀏覽器的呈現模式。
對于實際操作，通知瀏覽器讀取文檔是用哪種解析算法。如果沒有寫，則瀏覽器根據自身的規則對代碼解析，可能會嚴重影響html排版布局。
瀏覽器解析代碼方式分為嚴格模式和混雜模式。
- 嚴格模式：又稱標準模式或非怪異模式，是指瀏覽器按照W3C標準解析代碼。
- 混雜模式：又稱兼容模式或怪異模式，是指瀏覽器用自己的方式解析代碼。不同瀏覽器有不同的解析方式。頁面以一種比較寬松的向后兼容的方式顯示。
- 觸發：瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。
- 如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標準模式呈現。
- 對于HTML 4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標準模式呈現，但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現。
- DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。
HTML 4.01和HTML5 差異
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因為 HTML 4.01 基于 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
HTML5 不基于 SGML，所以不需要引用 DTD。
在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：<!DOCTYPE html>.
瀏覽器亂碼的原因？如何解決？
參考
瀏覽器亂碼根本原因是保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的。
編碼方式分為：
- ASCII 美國人發明，為美國人服務，由128個字符組成，每個字符占7位。
- ISOLatin-1 歐洲人發明，為歐洲人服務，由256個字符組成，
- UNICODE:UTF-8 萬國碼，用1到6個字節（1個字節8位）編碼UNICODE字符。
GBK中國人發明，為中國人服務，用2個字節表示一個漢字，比UTF-8省空間。
解決亂碼的方法：
保存的文件中聲明是用哪種編碼方式保存。告訴瀏覽器打開這個頁面時用什么方式解碼。
常見的瀏覽器及使用的內核
瀏覽器內核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。JS 引擎則是解析 Javascript 語言，執行 javascript 語言來實現網頁的動態效果。
最開始渲染引擎和 JS 引擎并沒有區分的很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。內核的種類很多，如加上沒什么人使用的非商業的免費內核，可能會有 10 多種，但是常見的瀏覽器內核可以分這四種：Trident、Gecko、Blink、Webkit。
發展歷史參考
| 瀏覽器內核 | 常見瀏覽器 |
|---|---|
| Trident | E6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；獵豹安全瀏覽器：1.0-4.2版本為Trident+Webkit，4.3版本為Trident+Blink；360安全瀏覽器 ：1.0-5.0為Trident，6.0為Trident+Webkit，7.0為Trident+Blink；360極速瀏覽器：7.5之前為Trident+Webkit,7.5為Trident+Blink；傲游瀏覽器 ：傲游1.x、2.x為IE內核，3.x為IE與Webkit雙核；搜狗高速瀏覽器：1.x為Trident，2.0及以后版本為Trident+Webkit； |
| Gecko | Firefox ；Netscape6至9 |
| Blink | Google Chrome ； Opera |
| Webkit | Apple Safari (Win/Mac/iPhone/iPad)；Android 默認瀏覽器；Google Chrome |
| EdgeHTML內核 | Edge |
| Presto | Opera 12.17之前版本 |
HTML常見標簽及使用場景
Basic HTML
| Tag | Description |
|---|---|
<!DOCTYPE> |
Defines the document type |
<html> |
Defines an HTML document |
<title> |
Defines a title for the documenr |
<body> |
defines the document's body |
<h1> to<h6> |
defines HTML headings |
<p> |
defines a paragraph |
<br> |
insets a single line break |
<hr> |
defines a thematic change in the content 表現為水平線 |
<!--......--> |
defines a comment |
Forms and Input
| Tag | Description |
|---|---|
<form> |
defines an HTML form for user input |
<input> |
defines an input control |
<textarea> |
defines a multiline input control(text area) |
<button> |
defines a clickable button |
<select> |
defines a drop-down list |
<optgroup> |
<select>下的小分類example
|
<option> |
defines an option in a drop-down list <select>下最小選項 |
<label> |
defines a label for an <input> element example
|
