萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS教程:1.1 HTML與XHTML
CSS教程:1.1 HTML與XHTML
網頁《CSS教程布局實例》教程假設讀者已經對HTML有所掌握，如果讀者了解以下HTML標記中大多數標記的含義，就可以開始學習本教程。
<html>、<head>、<title>、<body>、<p>、<img>、<a>、<div>、
<ul>、<ol>、<li>、<style>、<table>、<tr>、<td>、<form>、<input>、<br>、<hr>。
如果讀者還不清楚上面這些標記的含義，請先跟隨網頁《HTML教程入門經典》，學習一下最基礎的知識，然後再開始學習本教程。
此外，本教程將不再占用篇幅抽象地講解使用css布局所具有的優勢，相信大部分讀者對此已經有所了解。如果對這個問題感興趣。，清晰地闡速了從傳統布局方式到css布局的采龍去脈，並給出比較深入的分析。
本章將就一些在工作中，會遇到的實際問題進行講解，作為學習css設計的必備基礎。
HTML與XHTML是一種語言還是兩種語言？基本上可以認為，它們是一種語言的不同階段，有點類似於文言文和白話文之間的關系。因此它們也經常被寫作(X)HTML。下面首先從它們的淵源和區別開始本教程的講解：
一、追根溯源
(X)HTML是所有上網的人每天都離不開的基礎，所有網頁都是使用(X)HTML編寫的。隨著網絡技術日新月異的發展．HTML也經歷了不斷的改進。可以認為XHTML是HTML的“嚴謹版”。
HTML在初期，為了它更廣泛地被接受，大幅度放寬了標准的嚴格性，例如標記可以不封閉，屬性可以加引號，也可以不加引號，等等，導致出現了很多混亂和不規范的代碼。這
顯然不符合標准化的發展趨勢，影響了互聯網的進一步發展。
為此，相關規范的制訂者——W3C組織．一直在不斷地努力，逐步推出新的版本規范。從HTML到XHTML．大致經歷了以下幾個版本。
◆ HTML 2.0: 於1995年l 1月發布。
◆ HTML 3.2: 於1996年1月14日發布．
◆ HTML 4.0: 於1997年12月18日發布。
◆ HTML 4.01（微小改進）: 於1999年12月24日發布，
◆ XHTML 1.0: 於2000年1月發布，後叉經迂修訂於2002年8月1日重新發布。
◆ XHTML 1.1: 於2001年5月31日發布。
◆ XHTML 2.0: 正在制定中。
在正式的標准序列中，沒有HTML1.0版，這是因為在最初階段．各個機構都推出了目己的方案，沒有形成統一的標准。因此．W3C組織發布的HTML 2.O是形成標准以後的第一個正式規范。WANGYEXX.COM
這些規范實際上主要是為浏覽器的開發者閱讀的，因為他們必須了解這些規范的所有細節。而對於網頁設計師來說，並不需要了解規范之間的細微差別，這與實際工作並不十分相關。因此，網頁設計師通常只要知道一些大的原則就可以了。而且這些規范的文字也都比較晦澀，並不易閱讀。當然．如果設計師真的能夠花一些時間把HTML和css的規范仔細通讀一遍，將會有巨大的收獲。因為這些規范是所有設計師的“聖經”。
知識：W3C組織就是World Wide Web Consortium（全秋萬維網聯盟）的簡稱。W3C組織創建於l994年．研究Web規范和指導方針，致力於推動Web發展，保證各種Web技術能很好地協同工作。W3C的主要職責是確定來來萬維網的發展方向，並且制定相關的建議（Recommendation．由W3C是一個民間組織，沒有約束性，因此只提供建議）。
HTML 4.01規范建議（HTML 4.01 Specification Recommendation）就是由W3CF制定的。它還負制CSS、XML、XHTML和MathML等其他網絡語言規范。
二、DOCTYPE（文檔類型）的含義與選擇
從Dreamweaver MX 2004版開始，在使用Dreamweaver新建一個網頁文檔的時候，默認情況下生成的基本網頁代碼是這樣的：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>無標題文檔</title>
- </head>
- <body>
- </body>
- </html>
可以看到最上面有兩行關於“DOCTYPE”（文檔類型）的聲明，它就是告訴浏覽器，使用哪種規范來解釋這個文檔中的代碼。
設計師可以在新建文檔的時候選擇使用哪種文檔類型。在Dreamweaver的新建文檔對話框中，在右下方有—個文檔類型下拉框，如圖1所示。
圖1 在Dreamweaver中選擇文檔類型
對於HTML 4.01和XHTML 1.0分別對應於一種嚴格（Strict）類型和一種過渡（Transitional）類型。過渡類型兼容以前版本定義的，而在新版本已經廢棄的標記和屬性。嚴格類型則不兼容已經廢棄的標記和屬性。
注意：目前，建議讀者使用XHTML 1.O transitional（XHTML 1.0過渡類型），這樣設計師可以按照XHTML的標准書寫符合Web標准的網頁代碼。司時在一些特蛛情況下還可以使用傳統的做法。
三、XHTML與HTML的重要區別
盡管目前浏覽器都兼容HTML．但是為了使網頁能夠符合標准，設計師應該盡量使用XHTML規范來編寫代碼，需要注意以下事項。
1.在XHTML中標記名稱必須小寫
在HTML中，標記名稱可以大寫或者小寫。例如，下面的代碼在HTML中是正確的。
- <BODY>
- <P>網頁(WANGYEXX.COM)</P>
- </BODY>
但是在XHTML中，則必須寫為：
- <body>
- <p>網頁(WANGYEXX.COM)</p>
- </body>
2.在XHTML中屬性名稱必須小寫
HTML屬性的名稱也必須是小寫的。例如，在XHTML中下面的代碼的寫法是錯誤的。
- <IMG SRC="image.gif" WIDTH="200" HEIGHT="100" BORDER="0">
正確的寫法應該是：
- <img src="image.gif" width="200" height="100" border="0">
3.在XHTML中標記必須嚴格嵌套
HTML中對標記的嵌套沒有嚴格的規定。例如，下面的代碼在HTML中是正確的。
- <b><i>這行文字以粗體傾斜顯示</b></i>
然而在XHTML中，必須改為：
- <b><i>這行文字以粗體傾斜顯示</i></b>
此外，經常被忽略的是對列表標記的嵌套寫法。例如，下面的寫法在XHTML中是錯誤的。
- <ul>
- <li>咖啡</li>
- <li>茶
- <ul>
- <li>紅茶</li>
- <li>綠茶</li>
- </ul>
- <li>牛奶</li>
- </ul>
正確的寫法是：
- <ul>
- <li>咖啡</li>
- <li>茶
- <ul>
- <li>紅茶</li>
- <li>綠茶</li>
- </ul>
- </li>
- <li>牛奶</li>
- </ul>
4.在XHTML中標記必須封閉
在HTML規范中，下列代碼是正確的。
- <p>網頁
- <p>WANGYEXX.COM
上述代碼中，第2個<p>標記就意味著前一個<p>標記的結束，但是在XHTML中，這是不允許的，二必須嚴格地使標記已封閉，正確寫法如下所示。
- <p>網頁</p>
- <p>WANGYEXX.COM</p>
5.在XHTML中，即使是空元素的標記也必須封閉
這裡說的空元素的標記，就是指那些<img>，<br>等不成對的標記，它們也必須封閉，例如下面的寫法是錯誤的。
- 換行<br>
- 水平線<hr>
- 圖像<img src="happy.gif" alt="歡迎笑臉">
正確的寫法應該是：
- 換行<br />
- 水平線<hr />
- 圖像<img src="happy.gif" alt="歡迎笑臉" />
6.在XHTML中屬性值用雙引號括起來
在HTML中，屬性可以不必使用雙引號，例如：
- <p class=subTitle>
而在XHTML中，必須嚴格寫作：
- <p class="subTitle">
- 上一頁:CSS教程:1.2 (X)HTML與CSS
- 下一頁:CSS入門初學者必看
