? HTML、XML屋群、XHTML 有什么區(qū)別
HTML闸婴，超文本標(biāo)記語(yǔ)言，是語(yǔ)法較為松散的芍躏、不嚴(yán)格的web語(yǔ)言邪乍；
XML，可擴(kuò)展標(biāo)記語(yǔ)言对竣，主要用于存儲(chǔ)數(shù)據(jù)和結(jié)構(gòu)參考庇楞；
XHTML，可擴(kuò)展超文本標(biāo)記語(yǔ)言否纬，基于XML吕晌，作用與HTML類似，但語(yǔ)法更嚴(yán)格參考临燃。
? 怎樣理解 HTML 語(yǔ)義化
語(yǔ)義化的含義
語(yǔ)義化HTML是一種編寫HTML的方式睛驳。
“語(yǔ)義化”指的是機(jī)器在需要更少的人類干預(yù)的情況下能夠研究和收集信息，讓網(wǎng)頁(yè)能夠被機(jī)器理解膜廊，最終讓人類受益乏沸。
HTML 標(biāo)簽語(yǔ)義化是讓大家直觀的認(rèn)識(shí)標(biāo)簽(markup)和屬性(attribute)的用途和作用。很明顯<h1></h1>系列看起來(lái)很像標(biāo)題,因?yàn)閾碛写煮w和a較大的字爪瓜，<strong>,<em>用來(lái)區(qū)別于其他文字蹬跃，起到了強(qiáng)調(diào)的作用。
怎樣語(yǔ)義化
寫語(yǔ)義化的 HTML 結(jié)構(gòu)其實(shí)很簡(jiǎn)單钥勋，首先掌握 HTML 中各個(gè)標(biāo)簽的語(yǔ)義炬转，在看到內(nèi)容的時(shí)候想想用什么標(biāo)簽?zāi)芨玫拿枋鏊鞘裁淳陀檬裁礃?biāo)簽算灸。例如：
-
<h1>~<h6>扼劈，作為標(biāo)題使用，并且依據(jù)重要性遞減菲驴，<h1>是最高的等級(jí)荐吵； - 盡可能少的使用無(wú)語(yǔ)義的標(biāo)簽
div和span； -
<em>赊瞬、<strong>先煎，<em>是用作強(qiáng)調(diào)，<strong>是用作重點(diǎn)強(qiáng)調(diào)巧涧； - 使用表格時(shí)薯蝎，標(biāo)題要用
caption，表頭用thead谤绳，主體部分用tbody包圍占锯，尾部用tfoot包圍袒哥。表頭和一般單元格要區(qū)分開(kāi)，表頭用th消略，單元格用td堡称。
語(yǔ)義化的好處
- 為了在沒(méi)有CSS的情況下，頁(yè)面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)艺演、代碼結(jié)構(gòu):增強(qiáng)可讀性却紧；
- 用戶體驗(yàn)：例如title、alt用于解釋名詞或解釋圖片信息胎撤、label標(biāo)簽的活用晓殊；
有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的有效信息：爬蟲(chóng)依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重哩照； - 方便其他設(shè)備解析（如屏幕閱讀器挺物、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來(lái)渲染網(wǎng)頁(yè)飘弧；
- 便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性砚著，是下一步吧網(wǎng)頁(yè)的重要?jiǎng)酉虼瘟妫裱璚3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化稽穆。
? 怎樣理解內(nèi)容與樣式分離的原則
內(nèi)容與樣式分離的原則
一個(gè)網(wǎng)頁(yè)包含內(nèi)容（HTML）樣式（CSS）冠王，在 Web 開(kāi)發(fā)中，所謂內(nèi)容與樣式分離舌镶，就是讓內(nèi)容的歸 HTML, 樣式歸 CSS, 不要混著用柱彻。
- 寫HTML的時(shí)候先不管樣式，重點(diǎn)放在HTML的結(jié)構(gòu)和語(yǔ)義化上餐胀，讓HTML能體現(xiàn)頁(yè)面結(jié)構(gòu)或者內(nèi)容哟楷。之后再去寫CSS樣式。
- 寫JS的時(shí)候否灾，盡量不要用JS去直接操作樣式卖擅，而是通過(guò)給元素添加刪除class來(lái)控制樣式變化。
- HTML內(nèi)不允許出現(xiàn)屬性樣式墨技，盡量不要出現(xiàn)行內(nèi)樣式惩阶。
好處
- 由于大部分代碼寫在CSS中,瀏覽器加載速度變快。
- 代碼會(huì)得到精簡(jiǎn)和重用扣汪，后期的維護(hù)會(huì)變得非常簡(jiǎn)單断楷，樣式的變換只需要在CSS中修改即可。
- 整套文檔就變得清晰易讀崭别、易維護(hù)冬筒。
? 有哪些常見(jiàn)的meta標(biāo)簽
meta標(biāo)簽主要有兩個(gè)屬性统刮，分別是name屬性和http-equiv屬性。其中content主要用來(lái)定義與name屬性和http-equiv屬性相關(guān)的信息账千。
| 屬性 | 值 | 描述 |
|---|---|---|
| name | author/keywords/description/viewport | 把content屬性關(guān)聯(lián)到一個(gè)名稱 |
| http-equiv | content-type/refresh/expire/set-cookie | 把content屬性關(guān)聯(lián)到HTTP頭部 |
一侥蒙、name屬性
<meta name="author" content="溯彬">標(biāo)注網(wǎng)頁(yè)作者
<meta name="keyword" content="Web學(xué)習(xí)">頁(yè)面關(guān)鍵詞，每個(gè)網(wǎng)頁(yè)應(yīng)具有描述該網(wǎng)頁(yè)內(nèi)容的一組唯一的關(guān)鍵字匀奏。
<meta name="description" content="150 words">頁(yè)面描述鞭衩，每個(gè)網(wǎng)頁(yè)都應(yīng)有一個(gè)不超過(guò) 150 個(gè)字符且能準(zhǔn)確反映網(wǎng)頁(yè)內(nèi)容的描述標(biāo)簽
<meta name="viewport" content=""width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"">viewport：能優(yōu)化移動(dòng)瀏覽器的顯示。如果不是響應(yīng)式網(wǎng)站娃善，不要使用initial-scale或者禁用縮放论衍。
- width：寬度（數(shù)值 / device-width）（范圍從200 到10,000，默認(rèn)為980 像素）
- height：高度（數(shù)值 / device-height）（范圍從223 到10,000）
- initial-scale：初始的縮放比例 （范圍從>0 到10）
- minimum-scale：允許用戶縮放到的最小比例
- maximum-scale：允許用戶縮放到的最大比例
- user-scalable：用戶是否可以手動(dòng)縮 (no,yes)
- minimal-ui：可以在頁(yè)面加載時(shí)最小化上下?tīng)顟B(tài)欄聚磺。（已棄用）
二坯台、 http-equiv屬性
<meta http-equiv="content-Type" content="text/html;>content-type:設(shè)定頁(yè)面使用的字符集.
其中，
<meta charset='utf-8' />申明編碼
- UTF-8時(shí)瘫寝，代表世界通用的語(yǔ)言編碼蜒蕾；
- GB2312時(shí)，代表說(shuō)明網(wǎng)站是采用的編碼是簡(jiǎn)體中文焕阿；
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">refresh:自動(dòng)刷新并指向新頁(yè)面,這里指在當(dāng)前頁(yè)面停留2秒后咪啡，跳到百度。
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">expires:設(shè)定網(wǎng)頁(yè)的過(guò)期時(shí)間,必須使用GMT的時(shí)間格式暮屡。
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT撤摸；path=/">set-cookie:如果網(wǎng)頁(yè)過(guò)期，那么自動(dòng)刪除本地cookie
X-UA-Compatible:IE8的專用標(biāo)記褒纲，用來(lái)指定IE8瀏覽器去模擬某個(gè)特定版本的IE瀏覽器的渲染方式准夷，以此來(lái)解決部分兼容問(wèn)題.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />優(yōu)先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=8" >使用IE8
<meta http-equiv="X-UA-Compatible" content="IE=10" >使用IE10
? 文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
文檔聲明的作用
文檔聲明是為了告訴瀏覽器，你的 HTML 文檔是用的什么版本的 HTML 來(lái)寫的莺掠，這樣瀏覽器才能按照你聲明的版本來(lái)正確的解析你的 HTML 文檔衫嵌。
嚴(yán)格模式和混雜模式
- 嚴(yán)格模式（推薦）現(xiàn)在也稱為標(biāo)準(zhǔn)模式，在該模式下汁蝶，瀏覽器會(huì)嚴(yán)格按照 HTML 和 CSS 標(biāo)準(zhǔn)來(lái)解析渐扮、渲染你的文檔。
- 混雜模式（不推薦）,又稱怪異模式或兼容模式掖棉，是指瀏覽器用自己的方式解析代碼.它的由來(lái)是一個(gè)歷史問(wèn)題墓律。在互聯(lián)網(wǎng)早期，網(wǎng)頁(yè)一般寫成兩個(gè)版本：一個(gè)寫給網(wǎng)景公司的 Navigator瀏覽器幔亥，一個(gè)寫給微軟公司的IE瀏覽器耻讽。當(dāng)W3C制定了 Web 標(biāo)準(zhǔn)后，這兩個(gè)瀏覽器不能馬上開(kāi)始按標(biāo)準(zhǔn)來(lái)解析渲染頁(yè)面帕棉，因?yàn)檫@樣會(huì)破壞當(dāng)時(shí)大部分頁(yè)面的顯示效果针肥。所以各瀏覽器就引入了混雜模式饼记，在該模式下，瀏覽器會(huì)模擬Navigator 4和IE5的非標(biāo)準(zhǔn)行為來(lái)解析渲染頁(yè)面慰枕，這樣做就是為了兼容在W3C標(biāo)準(zhǔn)出現(xiàn)之前就存在的那些“不標(biāo)準(zhǔn)”的頁(yè)面具则。
<!doctype html> 的作用
<!doctype html> 的作用就是讓瀏覽器進(jìn)入標(biāo)準(zhǔn)模式，使用最新的 HTML5標(biāo)準(zhǔn)來(lái)解析渲染頁(yè)面具帮；如果不寫博肋，瀏覽器就會(huì)進(jìn)入混雜模式，而這是我們要避免的
? 瀏覽器亂碼的原因是什么蜂厅？如何解決
- 亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時(shí)的解碼格式不匹配導(dǎo)致的,例如：你的編輯器默認(rèn)的保存格式是
gbk2312匪凡，然后瀏覽器在打開(kāi)文件時(shí)按照它默認(rèn)的utf-8的格式打開(kāi)，編碼和解碼的格式不一致掘猿，才會(huì)導(dǎo)致亂碼 - 解決辦法：清楚編輯器的默認(rèn)編碼方式病游。如果你的文件是保存為
utf-8格式，那么一定要在html 的<head>里添加<meta charset="utf-8">稠通。
? 常見(jiàn)的瀏覽器有哪些衬衬，什么內(nèi)核
| 瀏覽器 | 內(nèi)核 |
|---|---|
| IE、Maxthon采记、TT佣耐、The World等 | Trident |
| Netcape6及以上版本、FireFox唧龄、MozillaSuite/SeaMonkey | Gecko |
| Opera7及以上版本 | Presto |
| Safari、Chrome | Webkit |
? 列出常見(jiàn)的標(biāo)簽奸远，并簡(jiǎn)單介紹這些標(biāo)簽用在什么場(chǎng)景
- h1-h6 定義標(biāo)題
- p 定義一段文字
- ul li 無(wú)序列表
- ol li 有序列表
- div 塊級(jí)元素 盒子模型既棺，用于頁(yè)面分塊
- span 行內(nèi)元素
- dl dd dt 用于展示一系列“標(biāo)題：內(nèi)容”的場(chǎng)景
- img 用于插入圖片
- a 超鏈接
- strong 加粗 語(yǔ)義強(qiáng)
- em 斜體
- del 刪除線
