1. 程式人生 > >HTML和XHTML區別

HTML和XHTML區別

itl 註釋 代碼塊 nts 通過 替換 js代碼 決定 pro

HTML和XHTML

XHTML(eXtensible HyperText Markup Language,可擴展超文本標記語言)是將HTML(HyperText Markup Language,超文本標記語言)作為XML應用而重新定義的標準。
在HTML5標準中定義了兩種語法(HTML 4.01XHTML 1)。在標準中可以通過定義一個特殊的DOCTYPE標簽來XHTML,但是沒有瀏覽器去實現這一標準。所以最後HTML5標準推翻了這個決定。
可以通過使用MIME類型(包含在HTTP請求中的Content-Type)來指示語法的選擇:如果需要使用XHTML,MIME類型應該為application/xhtml+xml

,如果為text/ html則不使用XHTML。
適當的MIME類型必須存在於HTTP請求中的Content-Type中。如果你只把MIME類型寫在HTML標簽中,如<meta http-equiv=…>,依然會被當作text/html執行。

HTML文檔規範

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html lang=en>
  <head>
    <meta charset=utf-8>
    <title>HTML</title>
  </head>
<body> <p>I am a HTML document</p> </body> </html>

XHTML文檔規範

HTTP/1.1 200 OK
Content-Type: application/xhtml+xml

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML</title>
  </head>
  <body>
    <p>
I am a XHTML document</p> </body> </html>

XHTML兼容性

目前大多數瀏覽器都支持XHTML,其中包括Firefox、Chrome、Safari、Opera和IE瀏覽器(IE 9)。(Internet Explorer 8和舊瀏覽器在看到正確配置的XHTML MIME類型的XHTML文檔時,會顯示未知文件類型的下載對話框)。
需要註意的是,有許多流行的JavaScript庫和開發工具對XHTML不支持。

XHTML和HTML的區別

XHTML是XML應用,所以XHTNL的代碼規範要求要比HTML更嚴格。但對於習慣HTML的程序員有時可能會帶來一些不便,如比較語句a<b中的<會被解析為一個標簽,造成代碼運行與預期不符。為了應對這些問題,慢慢有了以下的規範:

1.JavaScript中<&應包含在CDATA代碼塊中

在XHTML中JavaScript的閉合符不能在CDATA代碼塊以外的地方存在。如以下錯誤示例:

<script type="text/javascript">
  var i = 0;
  
  while (++i < 10)
  {
    // ...
  }
</script>

可以通過CDATA代碼塊的方式解決,如下例:

<script type="text/javascript">
<![CDATA[
  var i = 0;
  
  while (++i < 10)
  {
    // ...
  }
]]>
</script>

也有其他方法解決該問題,如將<替換為&lt;。但這樣減低了代碼可讀性,所以不推薦使用。

2.註釋<!—— ... ——> 中註釋內容不能再包含雙破折號——

在XHTML中,以<!—— ... ——>形式註釋的內容不應包含雙破折號——,如以下錯誤示例:

<script type="text/javascript">
<!--
  var i;
  var sum = 0;

  for (i = 10; i > 0; --i)
  {
    sum += i;
  }
// -->
</script>

示例中以<!—— ... ——>形式註釋的內容依然會被解析。在舊瀏覽器版本中,有經驗的開發者在使用內聯樣式和內聯腳本時通常會將其內容包含在註釋中。如下例:

<style type="text/css">
 <!--
  body {background-color: blue; color: yellow;}
 -->
</style>
<script type="text/javascript">
 <!--
  var i = 0;
  var sum = 0;
 
  for (i = 0; i < 10; ++i)
  {
    sum += i;
  }
  alert(‘sum = ‘ + sum);
 // -->
</script>

這是因為在舊瀏覽器版本中,內聯樣式和內聯腳本還未普及,使用style和script標簽不會被正常解析,而是直接把標簽的內容輸出。如下例:

<script>
  var i = 0;
  alert(i);
</script>

這段JS代碼在舊瀏覽器版本中,不會執行,而是直接輸出以下內容:

var i = 0;
alert(i);

不過,目前現代瀏覽器都已經開始支持內聯樣式和內聯腳本,所以一般不采用這種寫法。

參考文獻

MDN —— Glossary XHTML

MDN —— Properly Using CSS and JavaScript in XHTML Documents

HTML和XHTML區別