先瞭解一下XHTML

來源:互聯網
上載者:User

標籤:java   嵌套   可見   out   事件   簽名   進度   重設   識別   

XHTML 是更嚴格更純淨的 HTML 程式碼。

XHTML 是什嗎?
  • XHTML 指可擴充超文字標籤語言(EXtensible HyperText Markup Language)。
  • XHTML 的目標是取代 HTML。
  • XHTML 與 HTML 4.01 幾乎是相同的。
  • XHTML 是更嚴格更純淨的 HTML 版本。
  • XHTML 是作為一種 XML 應用被重新定義的 HTML。
  • XHTML 是一個 W3C 標準。
之前應該掌握的知識

在繼續學習本教程之前,你應該對下列知識有一個基本的理解:

  • HTML
  • 基本的網站建設知識。
XHTML 是一個 W3C 標準

XHTML 於2000年的1月26日成為 W3C 標準。

W3C 將 XHTML 定義為最新的HTML版本。XHTML 將逐漸取代 HTML。

所有新的瀏覽器都支援 XHTML

XHTML 與 HTML 4.01 相容。

所有新的瀏覽器都支援 XHTML。

XHTML 是 HTML 與 XML(擴充標記語言)的結合物。

XHTML 包含了所有與 XML 文法結合的 HTML 4.01 元素。

為什麼要使用XHTML?

我們認為全球資訊網上的許多頁面都包含著糟糕的 HTML 程式碼。

下面的 HTML 程式碼仍然可以工作得很好,即使它沒有遵守 HTML 規則:

<html><head><title>This is bad HTML</title><body><h1>Bad HTML</body>

XML 是一種標記化語言,其中所有的東西都要被正確的標記,以產生形式良好的文檔。

XML 用來描述資料,而 HTML 則用來顯示資料。

今天的市場中存在著不同的瀏覽器技術,某些瀏覽器運行在電腦中,某些瀏覽器則運行在行動電話和手持功能上。而後者沒有能力和手段來解釋糟糕的標記語言。 因此,通過把 HTML 和 XML 各自的長處加以結合,我們得到了在現在和未來都能派上用場的標記語言 - XHTML。
XHTML 可以被所有的支援 XML 的裝置讀取,同時在其餘的瀏覽器升級至支援 XML 之前,XHTML 使我們有能力編寫出擁有良好結構的文檔,這些文檔可以很好地工作於所有的瀏覽器,並且可以向後相容。如何為 XHTML 做好準備

XHTML 與 HTML 4.01 標準沒有太多的不同。

所以將你的代碼升級至 4.01 是個不錯的開始。我們的完整的《HTML 4.01 參考手冊》會協助你做到這一點。

另外,你應該馬上使用小寫字母編寫HTML代碼,同時絕不要養成忽略類似 </p> 標籤的壞習慣。

祝您可以愉快地編碼!

最主要的不同:
  • XHTML 元素必須被正確地嵌套。
  • XHTML 元素必須被關閉。
  • 標籤名必須用小寫字母。
  • XHTML 文檔必須擁有根項目。
元素必須被正確地嵌套

在 HTML 中,某些元素可以像這樣彼此不正確地嵌套:

<b><i>This text is bold and italic</b></i>

在 XHTML 中,所有的元素必須像這樣彼此正確地嵌套:

<b><i>This text is bold and italic</i></b>

提示:在嵌套列表中一個容易犯的錯誤,是忘記內部列表必須位於 li 元素中,就像下面這樣:

這是錯誤的:

<ul>  <li>Coffee</li>  <li>Tea    <ul>      <li>Black tea</li>      <li>Green tea</li>    </ul>  <li>Milk</li></ul>

這是正確的:

<ul>  <li>Coffee</li>  <li>Tea    <ul>      <li>Black tea</li>      <li>Green tea</li>    </ul>  </li>  <li>Milk</li></ul>

注意:在正確代碼的例子中,我們在 </ul> 之後插入了一個 </li> 標籤。

 

XHTML 元素必須被關閉

非空標籤必須使用結束標籤。

這是錯誤的:

<p>This is a paragraph<p>This is another paragraph

這是正確的:

<p>This is a paragraph</p><p>This is another paragraph</p>
空標籤也必須被關閉

空標籤也必須使用結束標籤,或者其開始標籤必須使用/>結尾。

這是錯誤的:

A break: <br>A horizontal rule: <hr>An image: <img src="happy.gif" alt="Happy face">

這是正確的:

A break: <br />A horizontal rule: <hr />An image: <img src="happy.gif" alt="Happy face" />
XHTML 元素必須小寫

XHTML 規範定義:標籤名和屬性對大小寫敏感。

這是錯誤的:

<BODY><P>This is a paragraph</P></BODY>

這是正確的:

<body><p>This is a paragraph</p></body>
XHTML 文檔必須擁有一個根項目

所有的 XHTML 元素必須被嵌套於 <html> 根項目中。其餘所有的元素均可有子項目。子項目必須是成對的且被嵌套在其父元素之中。基本的文檔結構如下:

<html><head> ... </head><body> ... </body></html>

編寫 XHTML 程式碼需要純淨的 HTML 文法。

更多的 XHTML 文法規則:
  • 屬性名稱必須小寫
  • 屬性值必須加引號
  • 屬性不能簡寫
  • 用 Id 屬性代替 name 屬性
  • XHTML DTD 定義了強制使用的 HTML 元素
屬性名稱必須小寫

這是錯誤的:

<table WIDTH="100%">

這是正確的:

<table width="100%">
屬性值必須加引號

這是錯誤的:

<table width=100%>

這是正確的:

<table width="100%">
屬性不能簡寫

這是錯誤的:

<input checked><input readonly><input disabled><option selected><frame noresize>

這是正確的:

<input checked="checked" /><input readonly="readonly" /><input disabled="disabled" /><option selected="selected" /><frame noresize="noresize" />

下面是一個 HTML 的簡寫屬性列表,以及在 XHTML 中的改寫:

HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
用 id 屬性代替 name 屬性

HTML 4.01 針對下列元素定義 name 屬性:a, applet, frame, iframe, img, 和map。

在 XHTML 中不鼓勵使用 name 屬性,應該使用 id 取而代之。

這是錯誤的:

<img src="picture.gif" name="picture1" />

這是正確的:

<img src="picture.gif" id="picture1" />
重要的相容性提示:

你應該在 "/" 符號前添加一個額外的空格,以使你的 XHTML 與當今的瀏覽器相相容。

語言屬性(lang)

lang 屬性應用於幾乎所有的 XHTML 元素。它定義元素內部的內容的所用語言的類型。

如果在某元素中使用 lang 屬性,就必須添加額外的 xml:lang,像這樣:

<div lang="no" xml:lang="no">Heia Norge!</div>
強制使用的 XHTML 元素

所有 XHTML 文檔必須進行檔案類型聲明(DOCTYPE declaration)。在 XHTML 文檔中必須存在html、head、body元素,而 title 元素必須位於在 head 元素中。

下面是一個最小化的 XHTML 檔案模板:

<!DOCTYPE Doctype goes here><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Title goes here</title></head><body></body></html>

提示:檔案類型聲明並非 XHTML 文檔自身的組成部分。它並不是 XHTML 元素,也沒有關閉標籤。

提示:在 XHTML 中,<html> 標籤內的 xmlns 屬性是必需的。然而,即使當 XHTML 文檔中沒有這個屬性時,w3.org 的驗證工具也不會提示錯誤。這是因為,"xmlns=http://www.w3.org/1999/xhtml" 是一個固定的值,即使你沒有把它包含在代碼中,這個值也會被添加到 <html> 標籤中。

 

 XHTML 定義了三種檔案類型聲明。使用最普遍的是 XHTML Transitional。<!DOCTYPE> 是強制使用的。

一個 XHTML 文檔有三個主要的部分:

  • DOCTYPE
  • Head
  • Body

基本的文檔結構是這樣的:

<!DOCTYPE ...><html><head><title>... </title></head><body> ... </body></html>

在 XHTML 文檔中,文件類型聲明總是位於首行。

一個 XHTML 的執行個體

這個一個簡單的(最小化的) XHTML 文檔:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>simple document</title></head><body><p>a simple paragraph</p></body></html>

文件類型聲明定義文檔的類型:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

文檔的其餘部分類似 HTML:

<html><head><title>simple document</title></head><body><p>a simple paragraph</p></body></html>
3種文件類型聲明
  • DTD 規定了使用通用標記語言(SGML)的網頁的文法。
  • 諸如 HTML 這樣的通用標記語言應該使用 DTD 來規定應用於某種特定文檔中的標籤的規則,這些規則包括一系列的元素和實體的聲明。
  • 在通用標記語言(SGML)的文件類型聲明或 DTD 中,XHTML 被詳細地進行了描述。
  • XHTML DTD 使用精確的可被電腦讀取的語言來描述合法的 XHTML 標籤的文法和句法。
存在三種XHTML文件類型:
  • STRICT(嚴格類型)
  • TRANSITIONAL(過渡類型)
  • FRAMESET(架構類型)
XHTML 1.0 的三種 XML 文件類型

XHTML 1.0 規定了三種 XML 文件類型,以對應上述三種 DTD。

XHTML 1.0 Strict
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在此情況下使用:需要乾淨的標記,避免表現上的混亂。請與層疊樣式表配合使用。

XHTML 1.0 Transitional
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在此情況下使用:當需要利用 HTML 在表現上的特性時,並且當需要為那些不支援層疊樣式表的瀏覽器編寫 XHTML 時。

XHTML 1.0 Frameset
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

在此的情況下使用:需要使用HTML架構將瀏覽器視窗分割為兩部分或更多架構時。

如何將你的網站升級至 XHTML ?

為了將網站從 HTML 轉換為 XHTML,你首先應該熟悉前幾章講解的 XHTML 文法規則。

下面講解具體的步驟。

添加檔案類型聲明

將下面的檔案類型聲明添加至每頁的首行:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

注意:本站 (w3school) 使用的是嚴格的 DTD。不過使用過渡的 DTD 也是個不錯的選擇,因為對於大多數入門的開發人員來說,嚴格的 DTD 可能顯得“太嚴格了”。

關於檔案類型聲明的一點提示

如果你希望將頁面驗證為正確的 XHTML,那麼頁面中必須含有檔案類型聲明。

需要注意的是,根據不同的檔案類型聲明,新式的瀏覽器對文檔的處理方式也是不同的。如果瀏覽器讀到一個檔案類型聲明,那麼它會按照“恰當”的方式來處理文檔。如果沒有 DOCTYPE,文檔也許會以截然不同的方式顯示出來。

小寫標籤和屬性名稱

由於 XHTML 對大小寫敏感,同時也由於 XHTML 僅接受小寫 HTML 標籤和屬性名稱,因此你可以執行一個簡單的搜尋和替換命令將所有的大寫標籤改為小寫。對屬性名稱也要做同樣的處理。我們一直在自己的網站使用小寫字母,因此基本上,替換功能沒有太多地派上用場。

給所有屬性加上引號

由於 W3C XHTML 1.0 標準中要求所有的屬性值都必須加引號,所以,如果以前沒有注意到這個細節,你需要逐頁地對網站進行檢查。這是一項費時的工作,所以絕不要再忘記為屬性值加引號了。

空標籤:<hr> , <br> 和 <img>

在 XHTML 中是不允許使用空標籤(Empty tags)的。<hr> 和 <br> 標籤應該被替換為 <hr /> 和 <br />。

這樣做又產生了一個新問題,Netscape 會誤讀 <br/> 標籤。我們不清楚原因所在,不過將之改為 <br />後就沒有問題了。認識到這一點後,你需要再一次通過搜尋和替換功能對標籤變更。

其他一些標籤(比如 <img> 標籤)也會碰到上述同樣的問題。不要使用閉合標籤來關閉 <img>,而是要在標籤的末端添加 / >。

驗證網站

做完所有這一切以後,使用下面的連結根據官方的 W3C DTD 對所有修改過的頁面進行驗證: XHTML Validator。接下來,可能還會有少數的錯誤被發現,逐一對這些錯誤進行(手工地)修正。我們的經驗是,最容易犯的錯誤是在列表中漏掉了 </li> 標籤。

我們應該使用轉換工具嗎(比方說 TIDY)?對,我們本可以使用 TIDY。

Dave Raggett 的 HTML TIDY是用來清理HTML代碼的免費工具。在處理那些由專門的 HTML 程式碼編輯器和轉換工具產生的難以閱讀的HTML代碼方面,TIDY 還是做得很棒的。同時,它可以協助你發現網站中哪些地方需要投入更多精力,使得對於殘疾人士,網頁具有更強的易用性。

我們沒有使用 Tidy 是出於什麼原因呢?當我們開始建立這個網站時,我們已經對 XHTML 非常地熟悉。當時我們已經知道使用小寫標籤以及為屬性加引號。所以在網站測試的過程中,我們只是簡單地通過 W3C 的 XHTML 驗證器進行了測試,並修正了少許的錯誤。更重要的是,我們已經學到了很多關於編寫 Tidy 式 HTML 程式碼的知識。

XHTML 文檔是根據文件類型聲明進行驗證的。

通過 DTD 驗證 XHTML

XHTML 文檔是根據文件類型聲明(DTD)進行驗證的。只有將正確的 DTD 添加到檔案的首行,XHTML 檔案才會被正確地驗證。

嚴格 DTD 包含沒有被反對使用的或不出現在架構結構中的元素和屬性:

!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

過渡 DTD 包含嚴格 DTD 中的一切,外加那些不贊成使用的元素和屬性。

!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

架構 DTD 包含過渡 DTD 中的一切,外加架構。

!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

這個一個簡單的 XHTML 文檔:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>simple document</title></head><body><p>a simple paragraph</p></body></html>
使用 W3C 驗證器來測試你的 XHTML因為效果原因,想瞭解更多請訪問原網站:w3c school網址:http://www.w3school.com.cn/tags/index.asp關於使用者地理定位:http://www.haorooms.com/post/html5_GPS_getCurrentPosition

然後我想說:不會的太特麼多了!!!

先瞭解一下XHTML

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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