課程任務
1.HTML,XML,XHTML有什么區別
HTML,超文本標記語言，語法較為松散不是嚴格的標記語言。XML,可擴展標記語言，主要用于存儲數據和結構。XHTML,可擴展超文本標記語言，基于XML,作用與HTML類似，但語法更為嚴格。
2.怎么理解HTML語義化
語義化是前端開發里面的一個專用術語，其優點在于標簽語義化有助于構架良好html結構，有利于搜索引擎的建立索引、抓取；另外，亦有利于頁面在不同設備上顯示盡可能相同；此外，亦有利于構建清晰的結構，有利于團隊的開發、維護。
3.怎樣理解內容與樣式分離的原則
- 寫頁面的時候先不管樣式，重點放在HTML的結構和語義上，讓HTML能體現頁面結構或者內容。之后再去寫樣式
- HTML內最好不要寫屬性樣式，最好不要用行內樣式。
內容與樣式分離的基本目標是機器可讀性，也就是要使得機器可以探測含義或者意圖，而機器可讀性則是之后將要提到的各種目標的實現方式。例如，人類能夠區分斜體在某處是強調，而在另一處是書名的情況；然而機器人和網絡爬蟲要做到這點就難得多。
機器可讀性使得實惠地以人類或機器用戶們各自可以接受的格式提供信息成為可能。這樣做能夠將抽象快速經濟地套用到新的實例中，實現自動化操作而非人類手工。 在同介質中傳遞信息，例如，打印展示、在線顯示、在線音頻、盲文、API輸入等。
參考
樣式表是一種將網頁的內容和表現分離的網頁設計形式，在網頁設計中網頁標記（HTML或XHTML）包含頁面的語義內容和結構，但沒有定義其可視化布局（風格）。相反，風格的定義是在一個外部的樣式表文件中，使用如CSS樣式表語言。
形式和內容分離的優點
速度
總的來說，利用樣式表的網站的用戶體驗通常會更快，相比不使用該技術的網站。“整體”來講第一頁可能加載得更慢，因為需要傳輸樣式表和內容。后續頁面加載速度會變快，因為沒有樣式信息需要下載——CSS文件已經在瀏覽器緩存中了。
可維護性
將所有樣式保存在一個文件中可以減少維護時間，減少錯誤的機會，從而提高表達的一致性。例如，網頁上某個級別的標題可能用一種特定的顏色表示，當修改這些標題的顏色的時候，只需要改變CSS文件中一個短短的字符即可。
可訪問性
使用CSS的HTML或XHTML網站更容易調整，以適應不同的瀏覽器。
定制
如果一個頁面的布局信息存儲在外部，用戶可以決定是否完全禁止布局信息，使網站的內容仍保持一種可讀的形式。網站的作者也可以提供多個樣式表，可以在沒有改變它任何內容的情況下，徹底改變網站的外觀。
一致性
因為語義只包含作者想要傳達的含義，文檔內容中各種元素的樣式是非常一致的。例如，標題、強調文本、列表和數學表達式都使用樣式表中定義的樣式。
可移植性
表現的細節可以延遲到展示的時候才考慮，這意味著文檔可以很容易的被重新編排，在一個完全不同的媒介上展示，只需要為新的表達媒介準備一個新的樣式表，同時符合語義文檔中元素或結構的詞匯。
缺點
沒有解析和生成工具導致應用范圍縮小（？未完全理解）
4.有哪些常見的meta標簽
<head>
<meta charset="UTF-8">
</head>
通過聲明字符編碼，能夠確保瀏覽器快速并容易判斷頁面的渲染方式。這樣做的好處是，可以避免在HTML中使用字符實體標記(character entity),從而全部與文檔編碼一致(一般采用UTF-8編碼)。
<meta http-equiv="X-UA-Compatitle" content="IE-Edge,chrome=1">
對于雙核瀏覽器，或者一些IE瀏覽器里裝了插件，若果是IE就用最新的標準去渲染，如果有chrome內核，就用chrome模式去渲染。
<head>
<meta name="keywords" content="width=device-width,initial-scale=1">
</head>
為了使頁面在移動端展示得更加合理。
<head>
<meta name="keywords" content="前端 饑人谷">
<meta name="description" content="最有愛的前端社區">
</head>
對搜索引擎優化會偶好處
5.文檔聲明的作用？嚴格模式和混雜模式指什么？<!doctype html>
DOCTYPE是用來聲明文檔類型和文檔類型定義規范的，一個用途便是文件的合法性驗證。如果文件代碼不合法，那么瀏覽器解析時便會出差錯。HTML編輯器通常也會在語法高亮的同時提供合法性驗證。
DOCTYPE聲明包括標準版本和一個文檔類型定義（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">
瀏覽器模式
為了能夠很好的顯示滿足標準的頁面，又能最大程度兼容不合法的HTML。瀏覽器廠商一般會提供兩種瀏覽器模式：
- 標準模式（standards mode）：劉拿起根據標準規則來渲染頁面。
- 混雜模式（quirks mode）：瀏覽器采用更加寬松的、向后兼容的方式來渲染頁面。
混雜模式下，瀏覽器會模仿舊瀏覽器的行為，比如IE6，在此基礎上兼容新的標準特性。
DOCTYPE切換
瀏覽器根據不同的DOCTYPE選擇不同的渲染方法。
一下情況會采用標準模式渲染：
- 給出了完整的DOCTYPE聲明
- DOCTYPE聲明了Strict DTD
- DOCTYPE聲明了Transitional DTD和URI
一下情況瀏覽器會采用混雜模式渲染 - DOCTYPE聲明了Transitonal DTD和URI
- DOCTYPE聲明不合法
- 未給出DOCTYPE聲明
6.瀏覽器亂碼的原因是什么？如何解決
編碼和解碼不匹配導致亂碼的產生。解決方法是在HTML文件中說明編碼方式。
7.常見的瀏覽器有哪些，什么內核
KED的開放源代碼KHTML引擎用于KDE的Konqueror頁面瀏覽器，后來成為WebKit的基礎，是Apple的Safari的早期和Google的chrome網頁瀏覽器的渲染引擎，根據StateCounter的統計是最被廣泛使用的瀏覽器引擎。而現今Chromium/Chrome(IOS版除外)與Opera的版本則是基于Blink,是WebKit的一個分支。
Gecko，是Mozilla開放源代碼項目的網頁瀏覽器引擎，被各種來自基于Mozilla代碼的派生產品所使用，包括Firefox網頁瀏覽器、Thunderbird電子郵件客戶端以及SeaMonkey網絡包。
Trident，Internet Explorer的網頁瀏覽器引擎，使用于Microsoft Windows平臺的許多應用程序，如netSmart、Outlook Express、Microsoft Outlook的一些版本和Winamp、RealPlayer中的迷你瀏覽器。
Opera軟件公司的專有引擎Presto已經授權給許多軟件供應商，以及Opera自家的網頁瀏覽器所使用，直到2013年它被Blink引擎替換。
8.列出常見的標簽，并簡單介紹這些標簽用在什么場景
h1~h6
頁面標題
p 段落
表示大段文字
a 鏈接
鏈接到一個地址
<a target="_blank" title="饑人谷">饑人谷</a>
<a href="#">饑人谷</a> //點擊沒有變化
<a href="#about">饑人谷</a> //跳轉到錨點
img
插入圖片
//加載出錯的時候，會顯示alt內容。只閉合標簽，最后不需加/，為自閉和標簽
div
語義為“塊”，用于給頁面劃分區塊，讓頁面結構更清晰
<div id= "header">...</div>
<div id= "content">...</div>
<div id= "footer">...</div>
ul li
用于表示并列的內容，ul的直接子元素是li,它們可以互相嵌套
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
ol li
有序列表
<ol>
<li>把大象變小</li>
<li>打開冰箱</li>
<li>把大象塞進去</li>
</ol>
dl dt dd 自定義列表：designed list，designed title,designed discribe
用于展示“標題：內容”的場景
<dl>
<dt>商品名稱：</dt>
<dd>青花瓷</dd>
</dl>
button
按鈕
strong em
em需要強調一下
strong著重強調
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;用于邊框合并
