1. HTML、XML、XHTML 有什么區別：
- HTML（Hypertext Markup Language）：超文本標記語言，語法較為松散、不嚴格的web語言，大小寫混寫且編碼不規范；設計HTML語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯系在一起，形成有機的整體，人們不用考慮具體信息是在當前電腦上還是在網絡的其它電腦上。我們只需使用鼠標在某一文檔中點取一個圖標，Internet就會馬上轉到與此圖標相關的內容上去，而這些信息可能存放在網絡的另一臺電腦中。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。
- XHTML（EXtensible HyperText Markup Language）：升級版的HTML，對HTML進行了規范，編碼更加嚴謹純潔，也是一種過渡語言，由HTML向XML過渡的語言；基本語言都還是沿用的HTML的標簽，只不過廢除了部分表現層的標簽，同時在標準上要求高了點，比如標簽的嚴格嵌套、標簽結束等等。
- XML（Extentsible Markup Language）：可擴展標記語言，是一種跨平臺語言，主要用于存儲數據和結構，編碼更自由，可以自由創建標簽；它沒有標簽集(tag set)，也沒有語法規則(grammatical rule)，但 是它有句法規則(syntax rule)。
三者區別：
(1) XML和HTML的區別：
- XML是被設計用來描述數據的，重點是什么是數據，如何存放數據；HTML是被設計用來顯示數據的；
- 兩者實際上沒有非常必然的關系，XML可以視為對HTML的補充；
- 與HTML相似，XML不進行任何操作。雖然XML標記可用于描述訂單之類的項的結構，但它不包含可用于發送或處理該訂單以及確保按該訂單交貨的任何代碼，其他人必須編寫代碼來實際對XML格式的數據執行這些操作。與 HTML 不同，XML 標記由架構或文檔的作者定義，并且是無限制的。HTML 標記則是預定義的;HTML 作者只能使用當前 HTML 標準所支持的標記；
- 與 HTML 不同，XML 標記由架構或文檔的作者定義，并且是無限制的。HTML 標記則是預定義的;HTML 作者只能使用當前 HTML 標準所支持的標記；
(2) HTML和XHTML的區別：XHTML是HTML的升級版，更嚴謹有更多規范：
- 所有的標記都必須要有一個相應的結束標記。以前在HTML中，你可以打開許多標簽。但在XHTML中這是不合法的。XHTML要求有嚴謹的結構，所有標簽必須關閉。如果是單獨不成對的標簽，在標簽最后加一個"/"來關閉它；
- 所有標簽的元素和屬性的名字都必須使用小寫。與HTML不一樣，XHTML對大小寫是敏感的；
- 所有的XML標記都必須合理嵌套。同樣因為XHTML要求有嚴謹的結構，因此所有的嵌套都必須按順序；
- 所有的屬性必須用引號""括起來。在HTML中，你可以不需要給屬性值加引號，但是在XHTML中，它們必須被加引號；
- 把所有<和&特殊符號用編碼表示。任何小于號（<），不是標簽的一部分，都必須被編碼為& l t ；任何大于號（>），不是標簽的一部分，都必須被編碼為& g t ；任何與號（&），不是實體的一部分的，都必須被編碼為& a m p；注：以上字符之間無空格；
- 給所有屬性賦一個值。XHTML規定所有屬性都必須有一個值，沒有值的就重復本身；
- 不要在注釋內容中使“--”。“--”只能發生在XHTML注釋的開頭和結束，也就是說，在內容中它們不再有效。例如下面的代碼是無效的：：用等號或者空格替換內部的虛線；
- 圖片必須有說明文字。每個圖片標簽都必須有ALT說明文字；
2. 怎樣理解 HTML 語義化：
定義：
語義化是指根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化），便于開發者閱讀和寫出更優雅的代碼的同時，讓瀏覽器的爬蟲和機器很好的解析。HTML標簽語義化是Web網頁標準化的重要一環，也是標準制定時重要的設計原則。HTML5中新增加的很多標簽（如：<article>、<nav>、<header>和<footer>等）就是基于這樣的設計原則。
檢驗標準：
瀏覽器會對語義化的標簽設計默認的樣式，所以驗證頁面是否語義規范的一個簡單方式就是去掉CSS樣式后頁面是否還能正常閱讀。
為什么要語義化：
- 有利于SEO，有助于爬蟲抓取更多的有效信息，爬蟲是依賴于標簽來確定上下文和各個關鍵字的權重；
- 語義化的HTML在沒有CSS的情況下也能呈現較好的內容結構與代碼結構；
- 方便其他設備的解析；
- 便于團隊開發和維護；
語義化應當注意什么：
- 盡可能少的使用無語義的標簽div和span；
- 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
- 不要使用純樣式標簽，如：b、font、u等，改用css設置；
- 需要強調的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
- 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
- 表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；
- 每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來；
3. 怎樣理解內容與樣式分離的原則：
定義：
寫HTML的時候先不管樣式，重點放在HTML的結構和語義化上，讓HTML能提現頁面結構或者內容,，然后進行 css 樣式設置，減少 HTML 與 CSS 契合度（即內容與樣式分離） ，寫JS的時候，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化（即行為分離）。
- 初級的開發人員思路及制作方法：div 層層嵌套；
- 中級的開發人員思路及制造方法：去掉多余的 div ,進行簡化；
- 高級的開發人員思路及制造方法：最大化的簡化 html 的結構，然后用 css 進行設置，減少 html 與 css 的契合度；
分離原則的優點：
- 瀏覽器加載網頁頁面速度變快。分離原則下，大部分頁面代碼寫在了CSS當中，頁面體積容量變得更小；
- 網頁修改設計時，效率、省時：典型的應用就是網頁換膚，使用相同的 html 結構，不同的 css 樣式；
- 更好地被搜索引擎收錄；
- css樣式的分離，它可以根據不同的瀏覽器，達到顯示效果的統一。保證網頁架構不變形的前提下，放心在不同瀏覽器渲染顯示樣式；
4. 有哪些常見的meta標簽：
- <meta charset="utf-8"> 指明頁面保存的編碼方式；
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 指明瀏覽器渲染方式；
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 適應移動端展示；
- <meta name="keywords" content="前端 饑人谷"> SEO搜索優化；
- <meta name="description" content="最有愛的前端學習社區"> 是對一個網頁概況的介紹；
- <meta http-equiv="Refresh" content="n;url=http://yourlink"> 定時讓網頁在指定的時間n內，跳轉到你的頁面；
- <meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT"> 可以用于設定網頁的到期時間，一旦過期則必須到服務器上重新調用。需要注意的是必須使用GMT時間格式；
- <meta http-equiv="Pragma" content="no-cache"> 是用于設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定后一旦離開網頁就無法從Cache中再調出；
- <meta http-equiv="windows-Target" content="_top"> 強制頁面在當前窗口中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁調用；
5. 文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?
文檔聲明的作用：
DOCTYPE是docunment type（文檔定義）的簡寫，用來說明web設計中所用的html或xhtml的類型，指出瀏覽器或者其他閱讀程序按照什么樣的規則去解釋文檔中的標記；
嚴格模式和混雜模式：
- 嚴格模式：又稱標準模式，是指瀏覽器按照 W3C 標準解析代碼；
- 混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼；
<!DOCTYPE>聲明作用：
為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應該用哪個規范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行，這并不是一個 HTML 標簽；
6. 瀏覽器亂碼的原因是什么？如何解決?
瀏覽器亂碼原因：
- 文件保存的編碼格式和瀏覽器解析時的解碼格式不匹配；
- 亂碼一般是英文以外的字符才會出現；
如何解決：
在文件保存的時候要清楚是用哪種編碼方式保存的（sublime默認保存方式是utf-8，如果安裝了插件也可另存為gbk，其它IDE可以做設置保存格式）。如果文件是保存為utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">
7. 常見的瀏覽器有哪些，什么內核?
- Trident內核代表產品Internet Explorer，又稱其為IE內核：IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等；
- Gecko內核代表作品Mozilla：Firefox、Netscape6至9；
- WebKit內核代表作品Safari、Chromewebkit：Safari、Chrome；
- Presto內核代表作品OperaPresto：Opera 7.0及以上；
8. 列出常見的標簽，并簡單介紹這些標簽用在什么場景：
- h1-h6：標題，h1代表頁面最大最大的標題，以此類推；
- p：段落，大段文字；標題里不能有段落，段落里不能有標題；
- a：鏈接，到一個地址，href屬性是必備屬性，還有target，title（鼠標放上去后顯示的文字，在不去點擊的情況下知道要進入的網頁）；href=#（錨點，頁面不會跳轉）；href=#about（跳轉到id=about的內容上）；
- img：展示圖片，src是必備屬性，還有alt屬性（如果地址有問題，則顯示該內容）；對于SEO有用，搜索引擎根據alt知道圖片是什么，可以被搜索出來；自閉合標簽；
- div：給頁面劃分區域，讓結構更清晰；header、content、footer，常見的標記：id（唯一）、class（類），既可以有id，也可以有class；
- ul li：ul（unsort list）無序列表，用于表示并列的內容，ul的直接子元素是li，可以嵌套；
- ol li：ol（order list）有序列表，用于展示帶步驟或編號的并列內容，ol的直接子元素是li ，可以嵌套 ；
- dl dt dd：用于展示一系列“標題：內容……”的場景；
- button：按鈕；
- iframe：用于嵌入一個頁面，注意跨域操作問題；name屬性；加入iframe地址和當前域名不同，只能去展示它，而無法用js操縱；
- table：用于展示表格，不要用來做布局；thead（tr行、th表頭、td內容）、tbody、tfoot
