XHTML 与 HTML 的区别

XHTML 和 HTML 在语法规则上的主要差异

问题

XHTML 和 HTML 有什么区别?

解答

XHTML(可扩展超文本标记语言)是 HTML 的 XML 化版本,语法更严格。HTML5 出现后,XHTML 已逐渐被淘汰,但了解它们的区别有助于理解 HTML 的发展历程。

1. 文档声明不同

<!-- HTML5 -->
<!DOCTYPE html>

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

2. 标签必须闭合

<!-- HTML 允许 -->
<p>段落一
<p>段落二
<br>
<input type="text">

<!-- XHTML 必须闭合 -->
<p>段落一</p>
<p>段落二</p>
<br />
<input type="text" />

3. 标签和属性必须小写

<!-- HTML 允许 -->
<DIV Class="box">内容</DIV>

<!-- XHTML 必须小写 -->
<div class="box">内容</div>

4. 属性值必须加引号

<!-- HTML 允许 -->
<div class=box id=main>

<!-- XHTML 必须加引号 -->
<div class="box" id="main">

5. 属性不能简写

<!-- HTML 允许简写 -->
<input type="checkbox" checked disabled>
<select>
  <option selected>选项</option>
</select>

<!-- XHTML 必须写完整 -->
<input type="checkbox" checked="checked" disabled="disabled" />
<select>
  <option selected="selected">选项</option>
</select>

6. 元素必须正确嵌套

<!-- HTML 浏览器会容错处理 -->
<p><strong>加粗文字</p></strong>

<!-- XHTML 必须正确嵌套 -->
<p><strong>加粗文字</strong></p>

7. 特殊字符必须转义

<!-- XHTML 中 & 必须转义 -->
<a href="page?a=1&amp;b=2">链接</a>

<!-- 或使用 CDATA -->
<script type="text/javascript">
//<![CDATA[
  if (a < b && c > d) { }
//]]>
</script>

关键点

  • 语法严格性:XHTML 基于 XML,语法严格;HTML 宽松,浏览器会容错
  • 标签闭合:XHTML 所有标签必须闭合,空标签用 /> 结尾
  • 大小写敏感:XHTML 标签和属性必须小写,HTML 不区分
  • 属性规范:XHTML 属性值必须加引号,布尔属性不能简写
  • 现状:HTML5 已成为主流标准,XHTML 基本被淘汰,但其严格规范影响了现代开发习惯