<h1>提問</h1>
<ol>
<li>HTML驹溃、XML咙咽、XHTML 有什么區(qū)別</li>
<li>怎樣理解 HTML 語義化</li>
<li>怎樣理解內(nèi)容與樣式分離的原則</li>
<li>有哪些常見的meta標(biāo)簽</li>
<li>文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?</li>
<li>瀏覽器亂碼的原因是什么杜漠？如何解決</li>
<li>常見的瀏覽器有哪些蟹瘾，什么內(nèi)核</li>
<li>列出常見的標(biāo)簽粉怕，并簡單介紹這些標(biāo)簽用在什么場景</li>
</ol>
<h1>回答</h1>
<ol>
<li>
HTML抵卫，超文本標(biāo)記語言狮荔，是語法較為松散的胎撇、不嚴(yán)格的Web語言；
XML殖氏，可擴(kuò)展標(biāo)記語言晚树，主要用于存儲數(shù)據(jù)和結(jié)構(gòu)；
XHTML雅采，可擴(kuò)展超文本標(biāo)記語言爵憎，基于XML，作用與HTML類似婚瓜，但語法更嚴(yán)格宝鼓。
</li>
<li>
<p>語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）巴刻，便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時愚铡，讓瀏覽器的爬蟲（我就是從自學(xué)python爬網(wǎng)頁的過程中感覺自己不咋了解網(wǎng)頁是怎么回事，因此學(xué)習(xí)了前端）和機(jī)器很好的解析胡陪。</p>
<p>有利于SEO沥寥，有助于爬蟲抓取更多的有效信息，爬蟲是依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重柠座。
語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)
方便其他設(shè)備的解析
便于團(tuán)隊開發(fā)和維護(hù)</p>
</li>
<li> 一個符合理想狀態(tài)下的網(wǎng)頁代碼邑雅，應(yīng)該分成三部分：.html文件，.css文件妈经，.js文件淮野。html標(biāo)簽只負(fù)責(zé)承擔(dān)內(nèi)容，樣式交給css狂塘，javascript負(fù)責(zé)行為录煤。將樣式與內(nèi)容分離這樣的好處是在修改樣式的基礎(chǔ)上不修改其內(nèi)容，可以提高搜索引擎抓取關(guān)鍵字的效率</li>
<li><meta charset=”utf-8”>：使用utf-8的格式解析
<meta name=”viewport” content=”width=device-width,initial-scale=1”>：在不同的設(shè)別荞胡、不同分辨率上呈現(xiàn)1:1的顯示效果妈踊。
<meta name="keywords" content="關(guān)鍵字" >：告訴搜索引擎當(dāng)前網(wǎng)頁的關(guān)鍵詞
<meta name="description" content="關(guān)鍵內(nèi)容">：告訴搜索引擎這個頁面的關(guān)鍵內(nèi)容
<meta name="Robots" content="all">:告訴搜索機(jī)器人那些頁面需要索引。Content的參數(shù)有all,none,index,noindex,follow,nofollow泪漂。默認(rèn)是all。
<meta name="Author" content="張召忠萝勤，zzz@weibo.com">:標(biāo)注網(wǎng)頁的作者或制作組</li>
<li><!DOCTYPE html>用于告訴瀏覽器用什么方式對該文件進(jìn)行渲染與加載敌卓，若是在文件開頭不添加，瀏覽器則以標(biāo)準(zhǔn)模式進(jìn)行加載癣防，可能會產(chǎn)生預(yù)想不到的頁面效果掌眠。因此一個標(biāo)準(zhǔn)的HTML文檔必須包含相應(yīng)的文檔類型聲明蓝丙，它位于文檔的最開始處渺尘。
嚴(yán)格模式和混雜模式指什么?
這篇內(nèi)容是在了解了<!DOCTYPE>之后,需要知道的鸥跟。
Doctype可聲明三種DTD類型锌雀，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔婿牍。
當(dāng)瀏覽器廠商開始創(chuàng)建與標(biāo)準(zhǔn)兼容的瀏覽器時惩歉，他們希望確保向后兼容性。為了實現(xiàn)這一點(diǎn)上遥，他們創(chuàng)建了兩種呈現(xiàn)模式：標(biāo)準(zhǔn)模式和混雜模式
在標(biāo)準(zhǔn)模式中争涌，瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁面亮垫，；
在混雜模式中燃异，頁面以一種比較寬松的向后兼容的方式顯示回俐〗銎模混雜模式通常模擬老式瀏覽器的行為以防止老站點(diǎn)無法工作灵莲。
模式觸發(fā)
瀏覽器根據(jù)DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現(xiàn)方法政冻。
如果XHTML明场、HTML 4.01文檔包含形式完整的DOCTYPE李丰，那么它一般以標(biāo)準(zhǔn)模式呈現(xiàn)趴泌。
包含過渡DTD和URI的DOCTYPE也導(dǎo)致頁面以標(biāo)準(zhǔn)模式呈現(xiàn)舟舒，但是有過渡DTD而沒有URI會導(dǎo)致頁面以混雜模式呈現(xiàn)。
DOCTYPE不存在或形式不正確會導(dǎo)致HTML和XHTML文檔以混雜模式呈現(xiàn)嗜憔。
html5既然沒有DTD，也就沒有嚴(yán)格模式與寬松模式的區(qū)別吉捶，html5有相對寬松的語法，實現(xiàn)時呐舔，已經(jīng)盡可能大的實現(xiàn)了向后兼容。
面試時問道兩種模式的定義以及區(qū)分時珊拼？
簡化上面第一部分的內(nèi)容食呻。當(dāng)然問道觸發(fā)時，就答第二部分澎现。
說明
<!DOCTYPE> 聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令昔头。
在 HTML 4.01 中揭斧，<!DOCTYPE> 聲明引用 DTD，因為 HTML 4.01 基于 SGML。DTD 規(guī)定了標(biāo)記語言的規(guī)則闹击，這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
HTML5 不基于 SGML贺归，所以不需要引用 DTD断箫。
SGML（標(biāo)準(zhǔn)通用標(biāo)記語言）
是一種定義電子文檔結(jié)構(gòu)和描述其內(nèi)容的國際標(biāo)準(zhǔn)語言拂酣。
XML（可擴(kuò)展標(biāo)記語言）
是 SGML 的一個子集，XML 于 1998 年 2 月 10 日成為 W3C 的推薦標(biāo)準(zhǔn)仲义。 XML 是各種應(yīng)用程序之間進(jìn)行數(shù)據(jù)傳輸?shù)淖畛Ｓ玫墓ぞ摺?br>
html 超文本標(biāo)記語言
標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用婶熬，HTML 最初也試圖成為 SGML 的一個子集，但 HTML 4 以前并不嚴(yán)格符合 SGML 的標(biāo)準(zhǔn)埃撵。后來出現(xiàn)了 HTML4赵颅，XHTML （符合 XML 標(biāo)準(zhǔn)的 HTML），這兩者都符合 SGML 的要求暂刘。
html5
“<!DOCTYPE>聲明位于文檔中的最前面性含，處于 <html> 標(biāo)簽之前。告知瀏覽器的解析器鸳惯， 用什么 文檔類型規(guī)范來解析這個文檔”</li>
<li>瀏覽器亂碼產(chǎn)生的原因是html文檔的編碼和瀏覽器編碼方式不同商蕴，導(dǎo)致瀏覽器解析出來的是亂碼。
解決方法:首先要知道html文件的編碼方式芝发，然后在html文件中header部位中的設(shè)置<meta charset=“”>,讓瀏覽器用一致的編碼方式打開文件绪商。</li>
<li>
一、Trident內(nèi)核代表產(chǎn)品Internet Explorer辅鲸，又稱其為IE內(nèi)核格郁。
Trident（又稱為MSHTML），是微軟開發(fā)的一種排版引擎独悴。使用Trident渲染引擎的瀏覽器包括：IE例书、傲游、世界之窗瀏覽器刻炒、Avant决采、騰訊TT、Netscape 8坟奥、NetCaptor树瞭、Sleipnir拇厢、GOSURF、GreenBrowser和KKman等晒喷。
二孝偎、Gecko內(nèi)核代表作品Mozilla
FirefoxGecko是一套開放源代碼的、以C++編寫的網(wǎng)頁排版引擎凉敲。Gecko是最流行的排版引擎之一衣盾，僅次于Trident。使用它的最著名瀏覽器有Firefox爷抓、Netscape6至9势决。
三、WebKit內(nèi)核代表作品Safari废赞、Chromewebkit
是一個開源項目，包含了來自KDE項目和蘋果公司的一些組件叮姑，主要用于Mac OS系統(tǒng)唉地，它的特點(diǎn)在于源碼結(jié)構(gòu)清晰、渲染速度極快传透。缺點(diǎn)是對網(wǎng)頁代碼的兼容性不高耘沼，導(dǎo)致一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome朱盐。
四群嗤、Presto內(nèi)核代表作品OperaPresto
是由Opera Software開發(fā)的瀏覽器排版引擎，供Opera 7.0及以上使用兵琳。它取代了舊版Opera 4至6版本使用的Elektra排版引擎狂秘，包括加入動態(tài)功能，例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版躯肌。
</li>
<li>
(1)dl dt dd ...：用于展示一系列標(biāo)題內(nèi)容的場景
(2)ul li和ol li： ul li 是無序列表, ol li是有序列表
(3)button：按鈕標(biāo)簽
(4)strong,em,span
em：強(qiáng)調(diào)
strong：很重要者春，強(qiáng)調(diào)性更強(qiáng)（比em）
span：修飾一段文字，可以對一個元素內(nèi)的文字的一部分加上 不同的顏色等css樣式
(5)h1,h2...h6：不同級別的標(biāo)簽
(6)p：段落清女，表示一段文字
(7)a：表示鏈接钱烟，鏈接到一個地址
跳轉(zhuǎn)到一個網(wǎng)頁地址：href是地址，target打開方式嫡丙，title是光標(biāo)移動到a標(biāo)簽上后的提示文字
<a href="http://www.jirengu.com/app/watch/1340/1?vsum=12"
target="_blank" title="It's title!">饑人谷視頻</a>
焦點(diǎn)跳到指定id的標(biāo)簽：'#' 后面就是id
<a href="#id">點(diǎn)這里焦點(diǎn)將跳轉(zhuǎn)到指定Id的標(biāo)簽</a>
(8)img：展示一張圖片
src：圖片地址
alt：圖片加載失敗后提示的文字
(9)div：用于給頁面劃分區(qū)塊拴袭，讓結(jié)構(gòu)更清晰
(10)iframe：用于嵌入一個頁面</li>
</ol>
你媽的
