1. HTML、XML、XHTML 有什么區(qū)別：

• HTML（Hypertext Markup Language）：超文本標(biāo)記語言，語法較為松散、不嚴(yán)格的web語言，大小寫混寫且編碼不規(guī)范；設(shè)計HTML語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯(lián)系在一起，形成有機(jī)的整體，人們不用考慮具體信息是在當(dāng)前電腦上還是在網(wǎng)絡(luò)的其它電腦上。我們只需使用鼠標(biāo)在某一文檔中點(diǎn)取一個圖標(biāo)，Internet就會馬上轉(zhuǎn)到與此圖標(biāo)相關(guān)的內(nèi)容上去，而這些信息可能存放在網(wǎng)絡(luò)的另一臺電腦中。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。
• XHTML（EXtensible HyperText Markup Language）：升級版的HTML，對HTML進(jìn)行了規(guī)范，編碼更加嚴(yán)謹(jǐn)純潔，也是一種過渡語言，由HTML向XML過渡的語言；基本語言都還是沿用的HTML的標(biāo)簽，只不過廢除了部分表現(xiàn)層的標(biāo)簽，同時在標(biāo)準(zhǔn)上要求高了點(diǎn)，比如標(biāo)簽的嚴(yán)格嵌套、標(biāo)簽結(jié)束等等。
• XML（Extentsible Markup Language）：可擴(kuò)展標(biāo)記語言，是一種跨平臺語言，主要用于存儲數(shù)據(jù)和結(jié)構(gòu)，編碼更自由，可以自由創(chuàng)建標(biāo)簽；它沒有標(biāo)簽集(tag set)，也沒有語法規(guī)則(grammatical rule)，但 是它有句法規(guī)則(syntax rule)。

三者區(qū)別：

(1) XML和HTML的區(qū)別：

• XML是被設(shè)計用來描述數(shù)據(jù)的，重點(diǎn)是什么是數(shù)據(jù)，如何存放數(shù)據(jù)；HTML是被設(shè)計用來顯示數(shù)據(jù)的；
• 兩者實(shí)際上沒有非常必然的關(guān)系，XML可以視為對HTML的補(bǔ)充；
• 與HTML相似，XML不進(jìn)行任何操作。雖然XML標(biāo)記可用于描述訂單之類的項的結(jié)構(gòu)，但它不包含可用于發(fā)送或處理該訂單以及確保按該訂單交貨的任何代碼，其他人必須編寫代碼來實(shí)際對XML格式的數(shù)據(jù)執(zhí)行這些操作。與 HTML 不同，XML 標(biāo)記由架構(gòu)或文檔的作者定義，并且是無限制的。HTML 標(biāo)記則是預(yù)定義的;HTML 作者只能使用當(dāng)前 HTML 標(biāo)準(zhǔn)所支持的標(biāo)記；
• 與 HTML 不同，XML 標(biāo)記由架構(gòu)或文檔的作者定義，并且是無限制的。HTML 標(biāo)記則是預(yù)定義的;HTML 作者只能使用當(dāng)前 HTML 標(biāo)準(zhǔn)所支持的標(biāo)記；

(2) HTML和XHTML的區(qū)別：XHTML是HTML的升級版，更嚴(yán)謹(jǐn)有更多規(guī)范：

• 所有的標(biāo)記都必須要有一個相應(yīng)的結(jié)束標(biāo)記。以前在HTML中，你可以打開許多標(biāo)簽。但在XHTML中這是不合法的。XHTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，所有標(biāo)簽必須關(guān)閉。如果是單獨(dú)不成對的標(biāo)簽，在標(biāo)簽最后加一個"/"來關(guān)閉它；
• 所有標(biāo)簽的元素和屬性的名字都必須使用小寫。與HTML不一樣，XHTML對大小寫是敏感的；
• 所有的XML標(biāo)記都必須合理嵌套。同樣因為XHTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，因此所有的嵌套都必須按順序；
• 所有的屬性必須用引號""括起來。在HTML中，你可以不需要給屬性值加引號，但是在XHTML中，它們必須被加引號；
• 把所有<和&特殊符號用編碼表示。任何小于號（<），不是標(biāo)簽的一部分，都必須被編碼為& l t ；任何大于號（>），不是標(biāo)簽的一部分，都必須被編碼為& g t ；任何與號（&），不是實(shí)體的一部分的，都必須被編碼為& a m p；注：以上字符之間無空格；
• 給所有屬性賦一個值。XHTML規(guī)定所有屬性都必須有一個值，沒有值的就重復(fù)本身；
• 不要在注釋內(nèi)容中使“--”?！?-”只能發(fā)生在XHTML注釋的開頭和結(jié)束，也就是說，在內(nèi)容中它們不再有效。例如下面的代碼是無效的：：用等號或者空格替換內(nèi)部的虛線；
• 圖片必須有說明文字。每個圖片標(biāo)簽都必須有ALT說明文字；

2. 怎樣理解 HTML 語義化：

定義：

語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化），便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時，讓瀏覽器的爬蟲和機(jī)器很好的解析。HTML標(biāo)簽語義化是Web網(wǎng)頁標(biāo)準(zhǔn)化的重要一環(huán)，也是標(biāo)準(zhǔn)制定時重要的設(shè)計原則。HTML5中新增加的很多標(biāo)簽（如：<article>、<nav>、<header>和<footer>等）就是基于這樣的設(shè)計原則。

檢驗標(biāo)準(zhǔn)：

瀏覽器會對語義化的標(biāo)簽設(shè)計默認(rèn)的樣式，所以驗證頁面是否語義規(guī)范的一個簡單方式就是去掉CSS樣式后頁面是否還能正常閱讀。

為什么要語義化：

• 有利于SEO，有助于爬蟲抓取更多的有效信息，爬蟲是依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；
• 語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)；
• 方便其他設(shè)備的解析；
• 便于團(tuán)隊開發(fā)和維護(hù)；

語義化應(yīng)當(dāng)注意什么：

• 盡可能少的使用無語義的標(biāo)簽div和span；
• 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認(rèn)情況下有上下間距，對兼容特殊終端有利；
• 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置；
• 需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
• 使用表格時，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
• 表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；
• 每個input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來；

3. 怎樣理解內(nèi)容與樣式分離的原則：

定義：

寫HTML的時候先不管樣式，重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上，讓HTML能提現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容,，然后進(jìn)行 css 樣式設(shè)置，減少 HTML 與 CSS 契合度（即內(nèi)容與樣式分離） ，寫JS的時候，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化（即行為分離）。

• 初級的開發(fā)人員思路及制作方法：div 層層嵌套；
• 中級的開發(fā)人員思路及制造方法：去掉多余的 div ,進(jìn)行簡化；
• 高級的開發(fā)人員思路及制造方法：最大化的簡化 html 的結(jié)構(gòu)，然后用 css 進(jìn)行設(shè)置，減少 html 與 css 的契合度；

分離原則的優(yōu)點(diǎn)：

• 瀏覽器加載網(wǎng)頁頁面速度變快。分離原則下，大部分頁面代碼寫在了CSS當(dāng)中，頁面體積容量變得更??；
• 網(wǎng)頁修改設(shè)計時，效率、省時：典型的應(yīng)用就是網(wǎng)頁換膚，使用相同的 html 結(jié)構(gòu)，不同的 css 樣式；
• 更好地被搜索引擎收錄；
• css樣式的分離，它可以根據(jù)不同的瀏覽器，達(dá)到顯示效果的統(tǒng)一。保證網(wǎng)頁架構(gòu)不變形的前提下，放心在不同瀏覽器渲染顯示樣式；

4. 有哪些常見的meta標(biāo)簽：

• <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"> 適應(yīng)移動端展示；
• <meta name="keywords" content="前端 饑人谷"> SEO搜索優(yōu)化；
• <meta name="description" content="最有愛的前端學(xué)習(xí)社區(qū)"> 是對一個網(wǎng)頁概況的介紹；
• <meta http-equiv="Refresh" content="n;url=http://yourlink"> 定時讓網(wǎng)頁在指定的時間n內(nèi)，跳轉(zhuǎn)到你的頁面；
• <meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT"> 可以用于設(shè)定網(wǎng)頁的到期時間，一旦過期則必須到服務(wù)器上重新調(diào)用。需要注意的是必須使用GMT時間格式；
• <meta http-equiv="Pragma" content="no-cache"> 是用于設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容，設(shè)定后一旦離開網(wǎng)頁就無法從Cache中再調(diào)出；
• <meta http-equiv="windows-Target" content="_top"> 強(qiáng)制頁面在當(dāng)前窗口中以獨(dú)立頁面顯示，可以防止自己的網(wǎng)頁被別人當(dāng)作一個frame頁調(diào)用；

5. 文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?

文檔聲明的作用：

DOCTYPE是docunment type（文檔定義）的簡寫，用來說明web設(shè)計中所用的html或xhtml的類型，指出瀏覽器或者其他閱讀程序按照什么樣的規(guī)則去解釋文檔中的標(biāo)記；

嚴(yán)格模式和混雜模式：

• 嚴(yán)格模式：又稱標(biāo)準(zhǔn)模式，是指瀏覽器按照 W3C 標(biāo)準(zhǔn)解析代碼；
• 混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼；

<!DOCTYPE>聲明作用：

為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應(yīng)該用哪個規(guī)范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行，這并不是一個 HTML 標(biāo)簽；

6. 瀏覽器亂碼的原因是什么？如何解決?

瀏覽器亂碼原因：

• 文件保存的編碼格式和瀏覽器解析時的解碼格式不匹配；
• 亂碼一般是英文以外的字符才會出現(xiàn)；

如何解決：

在文件保存的時候要清楚是用哪種編碼方式保存的（sublime默認(rèn)保存方式是utf-8，如果安裝了插件也可另存為gbk，其它IDE可以做設(shè)置保存格式）。如果文件是保存為utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">

7. 常見的瀏覽器有哪些，什么內(nèi)核?

• Trident內(nèi)核代表產(chǎn)品Internet Explorer，又稱其為IE內(nèi)核：IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等；
• Gecko內(nèi)核代表作品Mozilla：Firefox、Netscape6至9；
• WebKit內(nèi)核代表作品Safari、Chromewebkit：Safari、Chrome；
• Presto內(nèi)核代表作品OperaPresto：Opera 7.0及以上；

8. 列出常見的標(biāo)簽，并簡單介紹這些標(biāo)簽用在什么場景：

• h1-h6：標(biāo)題，h1代表頁面最大最大的標(biāo)題，以此類推；
• p：段落，大段文字；標(biāo)題里不能有段落，段落里不能有標(biāo)題；
• a：鏈接，到一個地址，href屬性是必備屬性，還有target，title（鼠標(biāo)放上去后顯示的文字，在不去點(diǎn)擊的情況下知道要進(jìn)入的網(wǎng)頁）；href=#（錨點(diǎn)，頁面不會跳轉(zhuǎn)）；href=#about（跳轉(zhuǎn)到id=about的內(nèi)容上）；
• img：展示圖片，src是必備屬性，還有alt屬性（如果地址有問題，則顯示該內(nèi)容）；對于SEO有用，搜索引擎根據(jù)alt知道圖片是什么，可以被搜索出來；自閉合標(biāo)簽；
• div：給頁面劃分區(qū)域，讓結(jié)構(gòu)更清晰；header、content、footer，常見的標(biāo)記：id（唯一）、class（類），既可以有id，也可以有class；
• ul li：ul（unsort list）無序列表，用于表示并列的內(nèi)容，ul的直接子元素是li，可以嵌套；
• ol li：ol（order list）有序列表，用于展示帶步驟或編號的并列內(nèi)容，ol的直接子元素是li ，可以嵌套 ；
• dl dt dd：用于展示一系列“標(biāo)題：內(nèi)容……”的場景；
• button：按鈕；
• iframe：用于嵌入一個頁面，注意跨域操作問題；name屬性；加入iframe地址和當(dāng)前域名不同，只能去展示它，而無法用js操縱；
• table：用于展示表格，不要用來做布局；thead（tr行、th表頭、td內(nèi)容）、tbody、tfoot