HTML、XML蹦玫、XHTML 有什么區(qū)別赎婚？
- HTML：超文本標(biāo)記語言，是語法較為松散的樱溉、不嚴(yán)格的Web語言挣输；
- XML：可擴展的標(biāo)記語言，主要用于存儲數(shù)據(jù)和結(jié)構(gòu)福贞，可擴展撩嚼；
- XHTML：可擴展的超文本標(biāo)記語言，基于XML挖帘，作用與HTML類似完丽，但語法更嚴(yán)格。
怎樣理解 HTML 語義化拇舀？
HTML語義化是什么
語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化）逻族，選擇合適的標(biāo)簽（代碼語義化），便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時骄崩，讓瀏覽器的爬蟲和機器很好的解析聘鳞。
語義化的HTML怎么寫
HTML是一種對文本內(nèi)容進行結(jié)構(gòu)和意義（或者說“語義”）進行補充的方法薄辅。它會告訴我們說：“這行是一個標(biāo)題，這幾行組成了一個段落搁痛。這些文字是項目列表长搀，這些文字是鏈接到互聯(lián)網(wǎng)上另一個文件的超鏈接〖Φ洌”值得注意的是源请，不應(yīng)該讓HTML來告訴我們：“這些文字是藍色的，這些文字又是紅色的彻况。這部分內(nèi)容是最最靠右的一欄谁尸，這行內(nèi)容是斜體字∨Ω剩”這些和表現(xiàn)相關(guān)的信息是CSS的工作良蛮。在做前端開發(fā)的時候要記住：HTML告訴我們一塊內(nèi)容是什么（或其意義）悍赢，而不是它長的什么樣子决瞳。當(dāng)我們提到“語義標(biāo)記”的時候，我們所說的HTML應(yīng)該是完全脫離表現(xiàn)信息的左权，其中的標(biāo)簽應(yīng)該都是語義化地定義了文檔的結(jié)構(gòu)皮胡。
寫語義化的HTML結(jié)構(gòu)其實很簡單，首先掌握html中各個標(biāo)簽的語義赏迟，div是一個容器屡贺；strong表示強調(diào)；ul li是一個無序列表等等…在看到內(nèi)容的時候想想用什么標(biāo)簽?zāi)芨玫拿枋鏊可保鞘裁淳陀檬裁礃?biāo)簽甩栈。
HTML語義化的好處
我們知道HTML5新增的標(biāo)簽，比如<header>糕再、<aritile>量没、<aside>、<footer>等突想，html正在朝著更加健壯的語義化的HTML結(jié)構(gòu)發(fā)展殴蹄，xhtml2在這點上沒html5先進，這也是xhtml2死亡的一個原因蒿柳，這一點也說明了語義化的HTML結(jié)構(gòu)是html的發(fā)展趨勢饶套。
- 去掉或樣式丟失的時候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)
- 屏幕閱讀器（如果訪客有視障）會完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁
- PDA漩蟆、手機等設(shè)備可能無法像普通電腦的瀏覽器一樣來渲染網(wǎng)頁（通常是因為這些設(shè)備對CSS的支持較弱）.使用語義標(biāo)記可以確保這些設(shè)備以一種有意義的方式來渲染網(wǎng)頁.理想情況下,觀看設(shè)備的任務(wù)是符合設(shè)備本身的條件來渲染網(wǎng)頁.
- 搜索引擎的爬蟲也依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重.
- 你的頁面是否對爬蟲容易理解非常重要,因為爬蟲很大程度上會忽略用于表現(xiàn)的標(biāo)記,而只注重語義標(biāo)記.
- 便于團隊開發(fā)和維護
怎樣理解內(nèi)容與樣式分離的原則
網(wǎng)頁分離
一個網(wǎng)頁分為三個部分：Html——結(jié)構(gòu)垒探，css——表現(xiàn)，javascrip——行為怠李。內(nèi)容也就是html圾叼，樣式也就是css蛤克。所以內(nèi)容和樣式的分離，就是指在網(wǎng)頁編碼的過程中夷蚊，要將html和css兩大部分分開构挤。
如何做到分離
內(nèi)容與樣式分離的原則的實現(xiàn)，一個是要依靠意識惕鼓，另一個是依靠經(jīng)驗筋现。
舉例而言，面對一個分塊明顯的網(wǎng)頁設(shè)計圖時：
- 初級的開發(fā)人員思路及制作方法：div 層層嵌套箱歧；
- 中級的開發(fā)人員思路及制造方法：去掉多余的 div ,進行簡化矾飞；
- 高級的開發(fā)人員思路及制造方法：最大化的簡化 html 的結(jié)構(gòu)，然后用 css 進行設(shè)置呀邢，減少 html 與 css 的契合度洒沦。
正確做法是寫HTML的時候先不管樣式，重點放在HTML的結(jié)構(gòu)和語義化上价淌，讓HTML能提現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容,申眼，然后進行 css 樣式設(shè)置，減少 HTML 與 CSS 契合度（即內(nèi)容與樣式分離） 蝉衣，寫JS的時候括尸，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化（即行為分離）买乃。
分離的優(yōu)點
- 瀏覽器加載網(wǎng)頁頁面速度變快姻氨。分離原則下，大部分頁面代碼寫在了CSS當(dāng)中剪验，頁面體積容量變得更小肴焊。
- 網(wǎng)頁修改設(shè)計時，效率功戚、省時娶眷。根據(jù)html標(biāo)簽內(nèi)ID或class的標(biāo)記，到CSS里找到相應(yīng)的ID或class啸臀，可以快速替換指定位置的樣式届宠，不會破壞頁面架構(gòu)和其他部分的樣式。典型的應(yīng)用就是網(wǎng)頁換膚乘粒，使用相同的 html 結(jié)構(gòu)豌注，不同的 css 樣式。
- 更好地被搜索引擎收錄灯萍≡基于內(nèi)容與樣式分離的原則，html的語義化就是首要考慮的,網(wǎng)頁中語義化的標(biāo)簽代碼就會更加適合搜索引擎旦棉。
- css樣式的分離齿风，它可以根據(jù)不同的瀏覽器药薯，達到顯示效果的統(tǒng)一。保證網(wǎng)頁架構(gòu)不變形的前提下救斑，放心在不同瀏覽器渲染顯示樣式童本。
有哪些常見的meta標(biāo)簽？
meta標(biāo)簽共有兩個屬性脸候，分別是http-equiv屬性和name屬性穷娱。
- name屬性
name屬性主要用于描述網(wǎng)頁，比如網(wǎng)頁的關(guān)鍵詞运沦，敘述等鄙煤。與之對應(yīng)的屬性值為content，content中的內(nèi)容是對name填入類型的具體描述茶袒，便于搜索引擎抓取梯刚。meta標(biāo)簽中name屬性語法格式是：
<meta name="參數(shù)" content="具體的描述">。
- keywords(關(guān)鍵字)
說明：用于告訴搜索引擎薪寓，你網(wǎng)頁的關(guān)鍵字亡资。舉例：
<meta name="keywords" content="軟件，開發(fā)">
- description(網(wǎng)站內(nèi)容的描述)
說明：用于告訴搜索引擎向叉，你網(wǎng)站的主要內(nèi)容锥腻。舉例：
<meta name="description" content="財務(wù)軟件，外貿(mào)軟件">
- viewport(移動端的窗口)
說明：這個屬性常用于設(shè)計移動端網(wǎng)頁母谎。在用bootstrap,AmazeUI等框架時候都有用過viewport瘦黑。
舉例（常用范例）：
<meta name="viewport" content="width=device-width, initial-scale=1">
- http-equiv屬性
http-equiv顧名思義，相當(dāng)于http的文件頭作用奇唤。
meta標(biāo)簽中http-equiv屬性語法格式是：
<meta http-equiv="參數(shù)" content="具體的描述">
- content-Type(設(shè)定網(wǎng)頁字符集)(推薦使用HTML5的方式)
說明：用于設(shè)定網(wǎng)頁字符集幸斥，便于瀏覽器解析與渲染頁面舉例：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML，不推薦
<meta charset="utf-8"> //HTML5設(shè)定網(wǎng)頁字符集的方式咬扇，推薦使用UTF-8
- X-UA-Compatible(瀏覽器采取何種版本渲染當(dāng)前頁面)
說明：用于告知瀏覽器以何種版本來渲染頁面甲葬。（一般都設(shè)置為最新模式，在各大框架中這個設(shè)置也很常見懈贺。）舉例：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新
版本渲染當(dāng)前頁面
文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
文檔聲明的作用
文檔聲明是為了告訴瀏覽器经窖，你的 HTML 文檔是用的什么版本的 HTML 來寫的，這樣瀏覽器才能按照你聲明的版本來正確的解析你的 HTML 文檔梭灿。
嚴(yán)格模式和混雜模式
- 嚴(yán)格模式（推薦）現(xiàn)在也稱為標(biāo)準(zhǔn)模式画侣，在該模式下，瀏覽器會嚴(yán)格按照 HTML 和 CSS 標(biāo)準(zhǔn)來解析堡妒、渲染你的文檔配乱。
- 混雜模式（不推薦）的由來是一個歷史問題。在互聯(lián)網(wǎng)早期，網(wǎng)頁一般寫成兩個版本：一個寫給網(wǎng)景公司的 Navigator瀏覽器宪卿，一個寫給微軟公司的IE瀏覽器。當(dāng)W3C制定了 Web 標(biāo)準(zhǔn)后万栅，這兩個瀏覽器不能馬上開始按標(biāo)準(zhǔn)來解析渲染頁面佑钾，因為這樣會破壞當(dāng)時大部分頁面的顯示效果。所以各瀏覽器就引入了混雜模式烦粒，在該模式下休溶，瀏覽器會模擬Navigator 4和IE5的非標(biāo)準(zhǔn)行為來解析渲染頁面，這樣做就是為了兼容在W3C標(biāo)準(zhǔn)出現(xiàn)之前就存在的那些“不標(biāo)準(zhǔn)”的頁面扰她。
<!doctype html> 的作用
<!doctype html> 的作用就是讓瀏覽器進入標(biāo)準(zhǔn)模式兽掰，使用最新的 HTML5標(biāo)準(zhǔn)來解析渲染頁面；如果不寫徒役，瀏覽器就會進入混雜模式孽尽，而這是我們要避免的。
瀏覽器亂碼的原因是什么忧勿？如何解決
產(chǎn)生亂碼的原因是：
1杉女、比如網(wǎng)頁源代碼是gbk的編碼，而內(nèi)容中的中文字是utf-8編碼的鸳吸，這樣瀏覽器打開即會出現(xiàn)html亂碼熏挎。反之網(wǎng)頁是編碼utf-8，內(nèi)容是gbk也會出現(xiàn)亂碼晌砾。
2坎拐、html網(wǎng)頁編碼是gbk，而程序從數(shù)據(jù)庫中調(diào)出呈現(xiàn)是utf-8編碼的內(nèi)容也會造成編碼亂碼养匈。
3哼勇、瀏覽器不能自動檢測網(wǎng)頁編碼，造成網(wǎng)頁亂碼呕乎。
解決方法：
1猴蹂、使用軟件進行編輯HTML網(wǎng)頁內(nèi)容
2、如果網(wǎng)頁設(shè)置編碼是gbk的楣嘁，而數(shù)據(jù)庫儲存數(shù)據(jù)編碼格式是UTF-8的磅轻，這個時候程序查詢數(shù)據(jù)庫數(shù)據(jù)顯示數(shù)據(jù)前進程序轉(zhuǎn)碼即可。
3逐虚、如果瀏覽器瀏覽時候出現(xiàn)網(wǎng)頁亂碼聋溜，在瀏覽器中找到轉(zhuǎn)換編碼的菜單進行轉(zhuǎn)換。
常見的瀏覽器有哪些叭爱，什么內(nèi)核撮躁？
1、Trident內(nèi)核代表產(chǎn)品Internet Explorer买雾，又稱其為IE內(nèi)核把曼。Trident（又稱為MSHTML）杨帽，是微軟開發(fā)的一種排版引擎。使用Trident渲染引擎的瀏覽器包括：IE嗤军、傲游注盈、世界之窗瀏覽器、Avant叙赚、騰訊TT老客、Netscape 8、NetCaptor震叮、Sleipnir胧砰、GOSURF、GreenBrowser和KKman等苇瓣。
2尉间、Gecko內(nèi)核代表作品Mozilla FirefoxGecko是一套開放源代碼的、以C++編寫的網(wǎng)頁排版引擎击罪。Gecko是最流行的排版引擎之一乌妒，僅次于Trident。使用它的最著名瀏覽器有Firefox外邓、Netscape6至9撤蚊。
3、WebKit內(nèi)核代表作品Safari损话、Chromewebkit 是一個開源項目侦啸，包含了來自KDE項目和蘋果公司的一些組件，主要用于Mac OS系統(tǒng)丧枪，它的特點在于源碼結(jié)構(gòu)清晰光涂、渲染速度極快。缺點是對網(wǎng)頁代碼的兼容性不高拧烦，導(dǎo)致一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正常顯示忘闻。主要代表作品有Safari和Google的瀏覽器Chrome。
4恋博、Presto內(nèi)核代表作品OperaPresto是由Opera Software開發(fā)的瀏覽器排版引擎齐佳，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎债沮，包括加入動態(tài)功能炼吴，例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版。
列出常見的標(biāo)簽疫衩，并簡單介紹這些標(biāo)簽用在什么場景硅蹦？
- div 塊級元素
- h1-h6 定義標(biāo)題
- p 定義一段文字
- ul li 無序列表
- ol li 有序列表
- dl dd dt 用于展示一系列“標(biāo)題：內(nèi)容”的場景
- img 用于插入圖片
- a 超鏈接
- strong 加粗 語義強
- em 斜體
- del 刪除線
