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)在某一文檔中點取一個圖標(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)上要求高了點曲伊，比如標(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ù)的硅堆，重點是什么是數(shù)據(jù)屿储，如何存放數(shù)據(jù)；HTML是被設(shè)計用來顯示數(shù)據(jù)的渐逃；
• 兩者實際上沒有非常必然的關(guān)系够掠，XML可以視為對HTML的補充；
• 與HTML相似朴乖，XML不進(jìn)行任何操作祖屏。雖然XML標(biāo)記可用于描述訂單之類的項的結(jié)構(gòu)，但它不包含可用于發(fā)送或處理該訂單以及確保按該訂單交貨的任何代碼买羞，其他人必須編寫代碼來實際對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)閉脖岛。如果是單獨不成對的標(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 雾家；任何與號（&），不是實體的一部分的绍豁，都必須被編碼為& 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的時候先不管樣式委可，重點放在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)點：

• 瀏覽器加載網(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)前窗口中以獨立頁面顯示褐着，可以防止自己的網(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)放上去后顯示的文字咆疗，在不去點擊的情況下知道要進(jìn)入的網(wǎng)頁）午磁；href=#（錨點，頁面不會跳轉(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