一. HTML、XML、XHTML 有什么區(qū)別
1. 三者基本特征
- HTML，超文本標記語言（Hyper Text Markup Language），是語法較為松散的、不嚴格的Web語言；
- XML，可擴展標記語言（Extensible Markup Language），主要用于存儲數(shù)據(jù)和結(jié)構(gòu)，可擴展；
- XHTML，可擴展超文本標記語言（Extensible Hyper Text Markup Language），基于XML，作用與HTML類似，但語法更嚴格。
2. HTML與XHTML區(qū)別
(1). xhtml對比與html，xhtml文檔具有良好完整的排版，體現(xiàn)在兩方面：a、元素必須要有結(jié)束標簽；b、元素必須嵌套；
(2). 對于html的元素和屬性，xhtml必須小寫，因為xml是嚴格區(qū)分大小寫的，< li >和< LI >是不同的標簽；
(3). xhtml的屬性值必須在引號之中；
(4). xhtml不支持屬性最小化;
正確:非最小化屬性(unminimized attributes)
<input checked="checked">
不正確:最小化屬性(minimized attributes)
<input checked>
(5). 在xhtml中，name屬性是不贊成使用的，在以后的版本中將被刪除。
3. HTML與XML區(qū)別
(1). XML不是HTML的替代；
(2). XML和HTML為不同的目的而設(shè)置：XML被設(shè)計為傳輸和存儲數(shù)據(jù)，其焦點是數(shù)據(jù)的內(nèi)容；HTML被設(shè)計用來顯示數(shù)據(jù)，其焦點是數(shù)據(jù)的外觀；
(3). HTML旨在顯示信息，而XML旨在傳輸信息。
二. 怎樣理解HTML語義化
語義化是一種編寫HTML的方式，就是讓標簽和其所包裹的內(nèi)容的意思相吻合。編寫代碼時明顯區(qū)分，標題是標題，段落是段落。方便做能帶來三點好處：
(1). 機器理解代碼,利于SEO；
(2). 代碼更簡潔，復(fù)用性更高；
(3). 訪問性更好，對讀屏器或者其他一些對CSS理解不好的瀏覽器很友好，語義化的HTML可以做到脫離CSS還能看。
三. 怎樣理解內(nèi)容與樣式分離的原則
先看個簡單的例子，QQ都用過，QQ面板的變更皮膚就是內(nèi)容不變，外觀表現(xiàn)樣式在變化，這就是利用內(nèi)容與樣式分離的原則實現(xiàn)的。web頁面要做到內(nèi)容與樣式分離，需注意以下兩點：
- 寫 HTML 的時候先不管樣式, 重點放在HTML的結(jié)構(gòu)和語義化上，讓 HTML 能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容。之后再去寫樣式。
- HTML 內(nèi)不允許出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式。
這樣做的好處有：
1.數(shù)據(jù)的多樣顯示。通過不同的樣式表適應(yīng)不同的設(shè)備，做到內(nèi)容與設(shè)備無關(guān)
2.保持整個站點的視覺一致性變得非常簡單，修改樣式表就可以輕松改版;
3.由于結(jié)構(gòu)清晰，數(shù)據(jù)的集成、更新和處理更加方便靈活；
4.更有意義的搜索。
四. 有哪些常見的meta標簽
meta元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
- 基本語法。keywords標簽作用是告訴搜索引擎網(wǎng)站的內(nèi)容的是關(guān)于那些方面的內(nèi)容,方便搜索引擎對網(wǎng)站的定義和索引.關(guān)鍵字和關(guān)鍵字之間使用英文輸入法下的逗號隔開,關(guān)鍵字的長度一般不超過100個字符.
<meta name="keywords" content="關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3...."> - meta標簽設(shè)定描述。網(wǎng)頁的描述很重要,直接能夠在搜索引擎中得到體現(xiàn).
<meta name=“discription” content=“描述的內(nèi)容”> - meta標簽設(shè)定字符集。常見的編碼格式有中文編碼(gbk2312)和國際編碼(UTF-8) ,gbk2312是中文編碼,如果你的網(wǎng)站內(nèi)容都是中文的就使用gbk2312 UTF-8是國際編碼左右的文字通用(包括中文和英文). 它們的主要區(qū)別是gbk2312是專門為中文打造的,一個漢字占2個字符. UTF-8是通用的一個漢字占3個字節(jié)。
我們在瀏覽網(wǎng)頁的時候,大多數(shù)人都碰到過亂碼的頁面把. 編碼格式是讓瀏覽器以設(shè)定的編輯格式進行解析,如果編碼格式不正確就會用出現(xiàn)亂碼. 所以我建議使用通用的UTF-8編碼,這樣全球所有的瀏覽器訪問我們的網(wǎng)頁都能正常顯示。
<meta http-equiv =“content-type” content=“text/html; charset="編碼格式”> - meta標簽設(shè)定自動刷新時間。刷新時間以秒為單位,例如論壇的頁面只有刷新后才能看到新發(fā)布帖子，更新速度很快的頁面可以加入自動刷新的代碼,保證可以看到最新的頁面。
<meta http-equiv=“refresh” content=“刷新間隔的時間”> - meta標簽設(shè)定自動跳轉(zhuǎn)新頁面。
<meta http-equiv=“refresh” content=“跳轉(zhuǎn)間隔的秒數(shù)； Url="新網(wǎng)頁地址”> - meta標簽設(shè)定禁用緩存。我們知道瀏覽器都有個緩存機制,就是打開一個網(wǎng)頁會自動保存在本地，這樣做的目的在一定的時間內(nèi)再次訪問會直接調(diào)用緩存中的文件提高訪問速度。 但是像論壇這種時時變化的頁面我們不希望瀏覽器保存緩存文件可以加上這句代碼。 在程序開發(fā)中還有一個用途，程序調(diào)試要時時查看代碼修改后的效果可以使用此代碼禁用瀏覽器緩存。
<meta http-equiv="cache-control" content="no-cache" >
五. DOCTYPE聲明
DOCTYPE聲明的作用
DOCTYPE是document type(文檔類型)的簡寫，用來說明你用的XHTML或者HTML是什么版本。DOCTYPE聲明的作用是指出閱讀程序應(yīng)該用什么規(guī)則集來解釋文檔中的標記。不正確的doctype聲明經(jīng)常導(dǎo)致網(wǎng)頁不正確顯示，或者導(dǎo)致它們根本不能顯示。Doctype可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。嚴格模式和混雜模式
當瀏覽器廠商開始創(chuàng)建與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現(xiàn)這一點，他們創(chuàng)建了兩種呈現(xiàn)模式：標準模式和混雜模式
(1). 在標準模式中，瀏覽器以其支持的最高標準呈現(xiàn)頁面；
(2). 在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示?；祀s模式通常模擬老式瀏覽器的行為以防止老站點無法工作。觸發(fā)機制
(1). 瀏覽器根據(jù)DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現(xiàn)方法。如果XHTML、HTML 4.01文檔包含形式完整的DOCTYPE，那么它一般以標準模式呈現(xiàn)。包含過渡DTD和URI的DOCTYPE也導(dǎo)致頁面以標準模式呈現(xiàn)，但是有過渡DTD而沒有URI會導(dǎo)致頁面以混雜模式呈現(xiàn)。DOCTYPE不存在或形式不正確會導(dǎo)致HTML和XHTML文檔以混雜模式呈現(xiàn)。
(2). html5既然沒有DTD，也就沒有嚴格模式與寬松模式的區(qū)別，html5有相對寬松的語法，實現(xiàn)時，已經(jīng)盡可能大的實現(xiàn)了向后兼容。<!doctype html> 的作用
<!doctype html> 是用來聲明當前文檔為html5的方法.
六. 瀏覽器亂碼的原因及解決方法
頁面編碼方式與瀏覽器解碼方式不匹配會導(dǎo)致瀏覽器亂碼。在meta標簽中指定charset為頁面編碼的方式，這樣瀏覽器就能自動讀取，從而采用正確的解碼方式。
七. 常見的瀏覽器及其內(nèi)核
- 常見的瀏覽器：
IE、Chrome、Opera、Firefox、Safari、The World、360（安全、急速）、獵豹、百度 - 常見的內(nèi)核有四種：
(1). Trident（對應(yīng)瀏覽器IE、The World）
大部分人都簡稱為IE內(nèi)核。是微軟開發(fā)的一種排版引擎。
(2). Geckos（對應(yīng)瀏覽器Firefox）
Gecko是套開放源代碼的、以C++編寫的網(wǎng)頁排版引擎。這軟件原本是由網(wǎng)景通訊公司開發(fā)的，Netcape6開始采用該內(nèi)核。后來的 Mozilla FireFox也采用了該內(nèi)核，Geckos的特點是代碼完全公開，因此，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。Geckos 現(xiàn)在由Mozilla基金會維護。
(3). Presto（對應(yīng)瀏覽器Opera）
Presto是一個由Opera Software開發(fā)的瀏覽器排版引擎，該內(nèi)核在2003年的Opera7中首次被使用。
(4). Webkit（對應(yīng)瀏覽器Safari、Chrome）
蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。
(5). 國內(nèi)的雙核瀏覽器Trident & WebKit(對應(yīng)瀏覽器360、獵豹、搜狗、百度、遨游、QQ)
由于IE瀏覽器在國內(nèi)的普及率非常高，所以造成了很多網(wǎng)上銀行和支付系統(tǒng)只支持IE的Trident內(nèi)核，其他瀏覽器訪問根本無法進行正常支付和轉(zhuǎn)賬等業(yè)務(wù)。而WebKit內(nèi)核的非IE瀏覽器以更高的性能和更好的用戶體驗擁有了越來越多的用戶。于是雙核瀏覽器應(yīng)運而生。
八. 常見標簽及使用場景
- head標簽
下面在寫標簽可以用在head部分
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>標簽：在<title>和</title>標簽之間的文字內(nèi)容是網(wǎng)頁的標題信息，它會出現(xiàn)在瀏覽器的標題欄中。網(wǎng)頁的title標簽用于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁標題，迅速的判斷出網(wǎng)頁的主題。每個網(wǎng)頁的內(nèi)容都是不同的，每個網(wǎng)頁都應(yīng)該有一個獨一無二的title。 - body標簽
<body>標簽，網(wǎng)頁上顯示的內(nèi)容放在這里.里面可以嵌入標題標簽（h1~h6）、段落標簽（p）、列表標簽（ul/ol）等等。 - h1~h6 標題標簽
hx標簽用來制作網(wǎng)站上各欄目的標題。標題標簽的樣式都會加粗，h1標簽字號最大，h2標簽字號相對h1要小，以此類推h6標簽的字號最小。 - strong和em標簽，加入強調(diào)語氣
如果想在一段話中特別強調(diào)某幾個文字，這時候就可以用到em或strong標簽。em 表示強調(diào)，strong表示更強烈的強調(diào)。并且在瀏覽器中em默認用斜體表示，strong 用粗體表示。 -
img標簽
img標簽為網(wǎng)頁插入圖片，其語法如下：
其中，
src：標識圖像的位置；
alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)。 - a標簽
使用a標簽可實現(xiàn)超鏈接，鏈接到另一個頁面。語法如下：
<a href="目標網(wǎng)址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
例如：
<a title="點擊進入慕課網(wǎng)">click here!</a>
上面例子作用是單擊鏈接顯示的文本，網(wǎng)頁鏈接到目標網(wǎng)址。title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內(nèi)容。這個屬性在實際網(wǎng)頁開發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內(nèi)容（語義化更友好）。
a標簽在默認情況下，鏈接的網(wǎng)頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開，則加上target=“-blank”，代碼如下：
<a href="目標網(wǎng)址" target="_blank">click here!</a> - ul/ol標簽
網(wǎng)頁上的列表可以用這兩個標簽來完成，ul-li標簽表示沒有前后順序的列表，ol-li表示有序列表。 - div標簽
用于給頁面分層，把一些獨立的邏輯部分劃分出來，放在一個div標簽中，可以結(jié)構(gòu)化頁面。為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設(shè)置一個名稱，用id屬性來為div提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。 - table標簽
用于在網(wǎng)頁上制作表格。語法如下：
<table>
<tbody>
<tr>
<th>班級</th>
<th>學(xué)生數(shù)</th>
<th>平均成績</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
上列代碼在網(wǎng)頁中表形式如下;
| 班級 | 學(xué)生數(shù) | 平均成績 |
|---|---|---|
| 一班 | 30 | 89 |
| 二班 | 35 | 85 |
（注：table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的）
創(chuàng)建表格的四個元素：table、tbody、tr、th、td
(1). <table>…</table>：整個表格以<table>標記開始、</table>標記結(jié)束。
(2). <tbody>…</tbody>：當表格內(nèi)容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內(nèi)容全部下載完才會顯示。如右側(cè)代碼編輯器中的代碼。
(3). <tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
(4). <td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
(5). <th>…</th>：表格的頭部的一個單元格，表格表頭。
(6). 表格中列的個數(shù)，取決于一行中數(shù)據(jù)單元格的個數(shù)。
