首頁 > 開發者 > 網站開發

1.1 HTML與XHTML

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   class   blog   http   ext   color   

網頁學習網《CSS教程布局執行個體》教程假設讀者已經對HTML有所掌握，如果讀者瞭解以下HTML標記中大多數標記的含義，就可以開始學習本教程。

<html>、<head>、<title>、<body>、<p>、<img>、<a>、<div>、

<ul>、<ol>、<li>、<style>、<table>、<tr>、<td>、<form>、<input>、<br>、<hr>。

如果讀者還不清楚上面這些標記的含義，請先跟隨網頁學習網《HTML教程入門經典》，學習一下最基礎的知識，然後再開始學習本教程。

此外，本教程將不再佔用篇幅抽象地講解使用css布局所具有的優勢，相信大部分讀者對此已經有所瞭解。如果對這個問題感興趣。可訪問http://www.lodidance.com/html/jc/552.html，清晰地闡速了從傳統布局方式到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是形成標準以後的第一個正式規範。lodidance.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建立一個網頁文檔的時候，預設情況下產生的基本網頁代碼是這樣的：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <title>無標題文檔</title> 
  7. </head> 
  8.  
  9. <body> 
  10. </body> 
  11. </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中是正確的。

  1. <BODY> 
  2.     <P>網頁學習網(lodidance.com)</P> 
  3. </BODY> 

但是在XHTML中，則必須寫為：

  1. <body> 
  2.      <p>網頁學習網(lodidance.com)</p>   
  3. </body>  

2.在XHTML中屬性名稱必須小寫

HTML 屬性的名稱也必須是小寫。例如，在XHTML中下面的代碼的寫法是錯誤的。

  1. <IMG SRC="image.gif" WIDTH="200" HEIGHT="100" BORDER="0"> 

正確的寫法應該是：

  1. <img src="image.gif" width="200" height="100" border="0">  

3.在XHTML中標記必須嚴格嵌套

HTML中對標記的嵌套沒有嚴格的規定。例如，下面的代碼在HTML中是正確的。

  1. <b><i>這行文字以粗體傾斜顯示</b></i> 

然而在XHTML中，必須改為：

  1. <b><i>這行文字以粗體傾斜顯示</i></b>  

此外，經常被忽略的是對列表標記的嵌套寫法。例如，下面的寫法在XHTML中是錯誤的。

  1. <ul> 
  2.     <li>咖啡</li> 
  3.     <li>茶  
  4.         <ul> 
  5.                <li>紅茶</li> 
  6.              <li>綠茶</li> 
  7.         </ul> 
  8.     <li>牛奶</li>      
  9. </ul> 

正確的寫法是：

  1. <ul> 
  2.      <li>咖啡</li> 
  3.      <li>茶  
  4.           <ul> 
  5.                 <li>紅茶</li> 
  6.                 <li>綠茶</li> 
  7.         </ul> 
  8.      </li> 
  9.      <li>牛奶</li>        
  10. </ul> 

4.在XHTML中標記必須封閉

在HTML規範中，下列代碼是正確的。

  1. <p>網頁學習網  
  2. <p>lodidance.com 

上述代碼中，第2個<p>標記就意味著前一個<p>標記的結束，但是在XHTML中，這是不允許的，二必須嚴格地使標記已封閉，正確寫法如下所示。

  1. <p>網頁學習網</p> 
  2. <p>lodidance.com</p> 

5.在XHTML中，即使是空元素的標記也必須封閉

這裡說的空元素的標記，就是指那些<img>，<br>等不成對的標記，它們也必須封閉，例如下面的寫法是錯誤的。

  1. 換行<br> 
  2. 水平線<hr> 
  3. 映像<img src="happy.gif" alt="歡迎笑臉"> 

正確的寫法應該是：

  1. 換行<br /> 
  2. 水平線<hr />   
  3. 映像<img src="happy.gif" alt="歡迎笑臉" />  

6.在XHTML中屬性值用雙引號括起來

在HTML中，屬性可以不必使用雙引號，例如：

  1. <p class=subTitle> 

而在XHTML中，必須嚴格寫作：

  1. <p class="subTitle"> 

7.在XHTML中屬性值必須使用完整形式

在HTML中，一些屬性經常使用簡寫方式設定屬性值，例如：lodidance.com

  1. <input disabled> 

而在XHTML中，必須完整地寫作：

  1. <input disabled = "true">  

8.在XHTML中，應該區分“內容標記”與¨結構標記”

例如<p>標記是一個內容標記，而<table>標記是結構標記，因此不允許將<tabIe>標記置於<p>內部。而如果將<p>標記置於<td></td>之間，則是完全正確的。

有時這種錯誤不容易被注意到，在Dreamweaver中也得不到提示。但是在微軟公司新推出的網頁製作軟體Expression Web中。則會給出明確的提示，2所示。


圖2 在Expression Web中提示錯誤

在<table>標記的下方出現紅色波浪線，表示存在錯誤。將滑鼠指標移動到<table>標記上，則會出現提示文字“在XHTML 1.0 Transitional中，標記<p>不能包含標記<table>”。有興趣的讀者可以嘗試一下這個新的網頁設計軟體。

點擊下載第1~7章CSS教程資源 返回《CSS教程布局之道》教程列表
編輯：網頁學習網
本文地址:http://www.lodidance.com/css/jc/652.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More