課程任務(wù)
1.HTML,XML,XHTML有什么區(qū)別
HTML,超文本標(biāo)記語言发魄，語法較為松散不是嚴(yán)格的標(biāo)記語言赃额。XML,可擴(kuò)展標(biāo)記語言谐算，主要用于存儲數(shù)據(jù)和結(jié)構(gòu)又沾。XHTML,可擴(kuò)展超文本標(biāo)記語言弊仪，基于XML,作用與HTML類似，但語法更為嚴(yán)格杖刷。
2.怎么理解HTML語義化
語義化是前端開發(fā)里面的一個專用術(shù)語励饵，其優(yōu)點(diǎn)在于標(biāo)簽語義化有助于構(gòu)架良好html結(jié)構(gòu)，有利于搜索引擎的建立索引挺勿、抓惹帷；另外不瓶，亦有利于頁面在不同設(shè)備上顯示盡可能相同禾嫉；此外，亦有利于構(gòu)建清晰的結(jié)構(gòu)蚊丐，有利于團(tuán)隊(duì)的開發(fā)熙参、維護(hù)。
3.怎樣理解內(nèi)容與樣式分離的原則
- 寫頁面的時候先不管樣式麦备，重點(diǎn)放在HTML的結(jié)構(gòu)和語義上孽椰，讓HTML能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容。之后再去寫樣式
- HTML內(nèi)最好不要寫屬性樣式凛篙，最好不要用行內(nèi)樣式黍匾。
內(nèi)容與樣式分離的基本目標(biāo)是機(jī)器可讀性，也就是要使得機(jī)器可以探測含義或者意圖呛梆，而機(jī)器可讀性則是之后將要提到的各種目標(biāo)的實(shí)現(xiàn)方式锐涯。例如，人類能夠區(qū)分斜體在某處是強(qiáng)調(diào)填物，而在另一處是書名的情況纹腌；然而機(jī)器人和網(wǎng)絡(luò)爬蟲要做到這點(diǎn)就難得多。
機(jī)器可讀性使得實(shí)惠地以人類或機(jī)器用戶們各自可以接受的格式提供信息成為可能滞磺。這樣做能夠?qū)⒊橄罂焖俳?jīng)濟(jì)地套用到新的實(shí)例中升薯，實(shí)現(xiàn)自動化操作而非人類手工。 在同介質(zhì)中傳遞信息击困，例如涎劈，打印展示、在線顯示、在線音頻责语、盲文炮障、API輸入等目派。
參考
樣式表是一種將網(wǎng)頁的內(nèi)容和表現(xiàn)分離的網(wǎng)頁設(shè)計(jì)形式坤候，在網(wǎng)頁設(shè)計(jì)中網(wǎng)頁標(biāo)記（HTML或XHTML）包含頁面的語義內(nèi)容和結(jié)構(gòu)，但沒有定義其可視化布局（風(fēng)格）企蹭。相反白筹，風(fēng)格的定義是在一個外部的樣式表文件中，使用如CSS樣式表語言谅摄。
形式和內(nèi)容分離的優(yōu)點(diǎn)
速度
總的來說徒河，利用樣式表的網(wǎng)站的用戶體驗(yàn)通常會更快，相比不使用該技術(shù)的網(wǎng)站送漠⊥缯眨“整體”來講第一頁可能加載得更慢，因?yàn)樾枰獋鬏敇邮奖砗蛢?nèi)容闽寡。后續(xù)頁面加載速度會變快代兵，因?yàn)闆]有樣式信息需要下載——CSS文件已經(jīng)在瀏覽器緩存中了。
可維護(hù)性
將所有樣式保存在一個文件中可以減少維護(hù)時間爷狈，減少錯誤的機(jī)會植影，從而提高表達(dá)的一致性。例如涎永，網(wǎng)頁上某個級別的標(biāo)題可能用一種特定的顏色表示思币，當(dāng)修改這些標(biāo)題的顏色的時候，只需要改變CSS文件中一個短短的字符即可羡微。
可訪問性
使用CSS的HTML或XHTML網(wǎng)站更容易調(diào)整谷饿，以適應(yīng)不同的瀏覽器。
定制
如果一個頁面的布局信息存儲在外部妈倔，用戶可以決定是否完全禁止布局信息博投，使網(wǎng)站的內(nèi)容仍保持一種可讀的形式。網(wǎng)站的作者也可以提供多個樣式表启涯，可以在沒有改變它任何內(nèi)容的情況下贬堵，徹底改變網(wǎng)站的外觀。
一致性
因?yàn)檎Z義只包含作者想要傳達(dá)的含義结洼，文檔內(nèi)容中各種元素的樣式是非常一致的黎做。例如，標(biāo)題松忍、強(qiáng)調(diào)文本蒸殿、列表和數(shù)學(xué)表達(dá)式都使用樣式表中定義的樣式。
可移植性
表現(xiàn)的細(xì)節(jié)可以延遲到展示的時候才考慮，這意味著文檔可以很容易的被重新編排宏所，在一個完全不同的媒介上展示酥艳，只需要為新的表達(dá)媒介準(zhǔn)備一個新的樣式表，同時符合語義文檔中元素或結(jié)構(gòu)的詞匯爬骤。
缺點(diǎn)
沒有解析和生成工具導(dǎo)致應(yīng)用范圍縮谐涫（？未完全理解）
4.有哪些常見的meta標(biāo)簽
<head>
<meta charset="UTF-8">
</head>
通過聲明字符編碼霞玄，能夠確保瀏覽器快速并容易判斷頁面的渲染方式骤铃。這樣做的好處是，可以避免在HTML中使用字符實(shí)體標(biāo)記(character entity),從而全部與文檔編碼一致(一般采用UTF-8編碼)坷剧。
<meta http-equiv="X-UA-Compatitle" content="IE-Edge,chrome=1">
對于雙核瀏覽器惰爬，或者一些IE瀏覽器里裝了插件，若果是IE就用最新的標(biāo)準(zhǔn)去渲染惫企，如果有chrome內(nèi)核撕瞧，就用chrome模式去渲染。
<head>
<meta name="keywords" content="width=device-width,initial-scale=1">
</head>
為了使頁面在移動端展示得更加合理狞尔。
<head>
<meta name="keywords" content="前端 饑人谷">
<meta name="description" content="最有愛的前端社區(qū)">
</head>
對搜索引擎優(yōu)化會偶好處
5.文檔聲明的作用丛版？嚴(yán)格模式和混雜模式指什么？<!doctype html>
DOCTYPE是用來聲明文檔類型和文檔類型定義規(guī)范的沪么，一個用途便是文件的合法性驗(yàn)證硼婿。如果文件代碼不合法，那么瀏覽器解析時便會出差錯禽车。HTML編輯器通常也會在語法高亮的同時提供合法性驗(yàn)證寇漫。
DOCTYPE聲明包括標(biāo)準(zhǔn)版本和一個文檔類型定義（document type definition）文件的URI.通常DOCTYPE聲明有以下幾種：
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
該文檔類型定義包含所有的HTML元素和屬性，但不包括展示性和棄用的元素(比如font)殉摔。不允許框架集(Framesets)州胳。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
該文檔類型定義包含所有HTML元素和屬性，包括展示性和棄用性的元素(比如font).不允許框架集(Framesets)逸月。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
瀏覽器模式
為了能夠很好的顯示滿足標(biāo)準(zhǔn)的頁面栓撞，又能最大程度兼容不合法的HTML。瀏覽器廠商一般會提供兩種瀏覽器模式：
- 標(biāo)準(zhǔn)模式（standards mode）：劉拿起根據(jù)標(biāo)準(zhǔn)規(guī)則來渲染頁面碗硬。
- 混雜模式（quirks mode）：瀏覽器采用更加寬松的瓤湘、向后兼容的方式來渲染頁面。
混雜模式下恩尾，瀏覽器會模仿舊瀏覽器的行為弛说，比如IE6，在此基礎(chǔ)上兼容新的標(biāo)準(zhǔn)特性翰意。
DOCTYPE切換
瀏覽器根據(jù)不同的DOCTYPE選擇不同的渲染方法木人。
一下情況會采用標(biāo)準(zhǔn)模式渲染：
- 給出了完整的DOCTYPE聲明
- DOCTYPE聲明了Strict DTD
- DOCTYPE聲明了Transitional DTD和URI
一下情況瀏覽器會采用混雜模式渲染 - DOCTYPE聲明了Transitonal DTD和URI
- DOCTYPE聲明不合法
- 未給出DOCTYPE聲明
6.瀏覽器亂碼的原因是什么信柿？如何解決
編碼和解碼不匹配導(dǎo)致亂碼的產(chǎn)生。解決方法是在HTML文件中說明編碼方式醒第。
7.常見的瀏覽器有哪些渔嚷，什么內(nèi)核
KED的開放源代碼KHTML引擎用于KDE的Konqueror頁面瀏覽器，后來成為WebKit的基礎(chǔ)稠曼，是Apple的Safari的早期和Google的chrome網(wǎng)頁瀏覽器的渲染引擎形病，根據(jù)StateCounter的統(tǒng)計(jì)是最被廣泛使用的瀏覽器引擎。而現(xiàn)今Chromium/Chrome(IOS版除外)與Opera的版本則是基于Blink,是WebKit的一個分支蒲列。
Gecko窒朋，是Mozilla開放源代碼項(xiàng)目的網(wǎng)頁瀏覽器引擎搀罢，被各種來自基于Mozilla代碼的派生產(chǎn)品所使用蝗岖，包括Firefox網(wǎng)頁瀏覽器、Thunderbird電子郵件客戶端以及SeaMonkey網(wǎng)絡(luò)包榔至。
Trident抵赢，Internet Explorer的網(wǎng)頁瀏覽器引擎，使用于Microsoft Windows平臺的許多應(yīng)用程序唧取，如netSmart铅鲤、Outlook Express、Microsoft Outlook的一些版本和Winamp枫弟、RealPlayer中的迷你瀏覽器邢享。
Opera軟件公司的專有引擎Presto已經(jīng)授權(quán)給許多軟件供應(yīng)商，以及Opera自家的網(wǎng)頁瀏覽器所使用淡诗，直到2013年它被Blink引擎替換骇塘。
8.列出常見的標(biāo)簽，并簡單介紹這些標(biāo)簽用在什么場景
h1~h6
頁面標(biāo)題
p 段落
表示大段文字
a 鏈接
鏈接到一個地址
<a target="_blank" title="饑人谷">饑人谷</a>
<a href="#">饑人谷</a> //點(diǎn)擊沒有變化
<a href="#about">饑人谷</a> //跳轉(zhuǎn)到錨點(diǎn)
img
插入圖片
//加載出錯的時候韩容，會顯示alt內(nèi)容款违。只閉合標(biāo)簽，最后不需加/群凶，為自閉和標(biāo)簽
div
語義為“塊”插爹，用于給頁面劃分區(qū)塊，讓頁面結(jié)構(gòu)更清晰
<div id= "header">...</div>
<div id= "content">...</div>
<div id= "footer">...</div>
ul li
用于表示并列的內(nèi)容请梢，ul的直接子元素是li,它們可以互相嵌套
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
ol li
有序列表
<ol>
<li>把大象變小</li>
<li>打開冰箱</li>
<li>把大象塞進(jìn)去</li>
</ol>
dl dt dd 自定義列表：designed list赠尾，designed title,designed discribe
用于展示“標(biāo)題：內(nèi)容”的場景
<dl>
<dt>商品名稱：</dt>
<dd>青花瓷</dd>
</dl>
button
按鈕
strong em
em需要強(qiáng)調(diào)一下
strong著重強(qiáng)調(diào)
iframe
用于嵌入一個頁面 注意跨域操作問題
<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc target="myPage"></a><\p>
table
用于展示表格，不要用來布毅弧；thead,tbody,tfoot可以省略气嫁，瀏覽器會自動添加border-collapse: collapse;用于邊框合并
