HTML 和 XHTML 区别

本文详细对比了HTML和XHTML的主要区别,包括元素嵌套、元素关闭、大小写敏感性、属性值引用、特殊字符处理等方面,并探讨了浏览器对XHTML的处理方式。

这篇文章主要阐述 HTML 和 XHTML 的区别。简单来说,XHTML 可以认为是 XML 版本的 HTML,为符合 XML 要求,XHTML 语法上要求更严谨些。

以下是 XHTML 相对 HTML 的几大区别:

  • XHTML 要求正确嵌套
  • XHTML 所有元素必须关闭
  • XHTML 区分大小写
  • XHTML 属性值要用双引号
  • XHTML 用 id 属性代替 name 属性
  • XHTML 特殊字符的处理

XHTML 要求正确嵌套

以下是正确的嵌套:

<p>布啦布啦<strong>独树一帜</strong>。</p>

以下是错误的嵌套:

<p>布啦布啦<strong>独树一帜</p></strong>。

XHTML 所有元素必须关闭

在 HTML 中,比如 <p>,<li> 这些标记,你可以不写 </p>,</li>,但是在 XHTML 里,必须要求写关闭标记 (Closing Tag)。

比如:

<p>布啦布啦很认真。

应该写成:

<p>布啦布啦很认真。</p>

处理空元素

有些空元素,在 XHTML 里的写法是在">"之前加空格和斜杠。比如<br>,应该写成<br />。

以下是空元素的例子:

<br />

<hr />

<img src = "/images/adpics/1/b027.jpg" alt = "blabla" />

<link rel="stylesheet" href="/styles/blabla.css" type="text/css" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

XHTML 区分大小写

HTML 不区分大小写,但是 XHTML 是区分大小写的。

XHTML 的所有标记属性都要写。

比如:

<IMG SRC = "/images/adpics/1/b027.jpg" Alt = "blabla" />

应该写成:

<img src = "/images/adpics/1/b027.jpg" alt = "blabla" />

XHTML 属性值要用双引号

HTML 并不强制要求属性值加双引号。比如你可以写:

<table cellspacing = 0>

<input checked>

但在 XHTML 里,应该写成:

<table cellspacing = "0">

<input checked = "checked" />

XHTML 用 id 属性代替 name 属性

HTML 很多元素,比如 a,applet,frame,iframe,img 和 map,有 name 属性。在 XHTML 里是要废除的,而用 id 属性取而代之。

比如:

<img src="blabla.gif" name="blabla logo" />

应该写成:

<img src="blabla.gif" id="blabla logo" />

XHTML 特殊字符的处理

& 应该在 XHTML 里应该写成 &amp;。

比如:

You & Me

应该写成:

You &amp; Me

还有如果内嵌 Javascript 代码,在 XHTML 里则应该写成:

<script type="text/javascript">//<![CDATA[

...

//]]></script>

浏览器的角度

以上是从协议标准的角度来看待这个问题的。如果从浏览器的角度来看待这个问题,情况就有所不同。

考虑一下,如果把 XHTML 写得很不严格,浏览器会怎么做?是不是会弹出一个对话框,写着“这个网站的开发人员技术不过关,写的不是正宗的 XHTML 文件,咱不显示”?显然,如果浏览器做成这个样子,倒贴钱也是不会有人用的。

从浏览器的角度看待上面几个不同,大致是下面的测试结果(IE和Firefox我都测试过):

  • XHTML 要求正确嵌套:如果你没有嵌套,浏览器会试图帮你嵌套。
  • XHTML 所有元素必须关闭:如果你没有关闭,浏览器会试图帮你关闭。
  • XHTML 区分大小写:你非要写成大写,浏览器帮你转换成为小写。
  • 属性值要用双引号:你非要不肯加,浏览器帮你加。
  • 特殊字符的处理:You & Me 也好,You &amp; Me 也好,浏览器都能读入。
  • 用 id 属性代替 name 属性:你非要用 name 也可以。

如果你在文档开始用 DocType 指定为 XHTML 了,有一点需要注意。在给 Tag 用 class 指定CSS 的时候,是区分大小写的。例如,你定义了一个CSS如下,

<style>
.hello { ...... }
</style>

而你使用的时候写成,

<p class="Hello"> ......

那这个CSS是不会被使用的。要积极的看待这个问题,这让你可以用更多的名字来命名 Style,是一个好事。

XHTML 标准的前途

从标准制定者的初衷看,制定 XHTML 标准是试图把 HTML 规范成为严格的 XML 格式,这样无可避免的会导致一个结果,就是从 HTML 到 XHTML 的升级导致标准的容错能力降低了。把自己的网页源文件写得严格一点当然是好事,但是一个标准不可能去要求浏览器降低自己的容错能力。

XHTML 1.0 标准是兼容 HTML 4.01,是个不错的协议,可以让开发者在编写代码的同时通过一些工具来检查代码的合法性,虽然对于用户而言,制作出来的网页和 HTML 4.01 相比实在没有什么不同。对于你写新的网页来说,使用 XHTML 1.0 还是一个不错的选择。

XHTML 1.1 标准要求浏览器不再支持原先的容错能力,这是一个标准制定者走火入魔的典型例子,这个标准从学术上说非常纯净,但是对于浏览器而言,则是个呆板、笨拙、不可理喻的标准。所以目前所有由人类开发的浏览器都没有遵照所谓纯净的 XHTML 1.1的标准,你的代码只要浏览器能读懂,他都会很好的显示出来,而不跳出弹框报错。

从发展的趋势来看,一个标准没有浏览器服从,等于是没有意义的标准。从浏览器的实现角度来看,新的协议只能在原来 HTML 的基础上扩大能力增加容错,而不能缩小了能力减少容错。所以新的协议中,只有扩大能力增加容错的部分会被采纳,而其他部分都仅仅是纸上谈兵而已。

转自:http://www.blabla.cn/html_tutorials/kb_html_vs_xhtml.html

<think>好的,我需要回答用户关于XHTMLHTML5主要区别的问题。首先,我需要回顾用户提供的引用内容,找出相关的信息点。引用3提到XHTMLHTML在语法严格性、文档结构、标签语法、错误处理应用场景上的区别。引用45则讨论了HTML5的特性,比如新标签、多媒体支持、本地存储、WebSocket等。 首先,用户想了解XHTMLHTML5的主要区别。我需要从两者的设计目标、语法规则、功能特性等方面进行比较。根据引用4,HTML5是下一代标准,不仅包括更丰富的标签,还集成了多种技术如Canvas、WebGL、本地存储等,而XHTML则是基于XML的严格版HTML,强调结构规范。 接下来,要注意用户提供的引用内容中关于XHTML严格语法HTML5灵活性的对比。例如,XHTML要求标签必须小写、正确闭合,属性值用引号,而HTML5在这方面更宽松。此外,HTML5引入了许多新元素API,如<video>、<canvas>,这些在XHTML中是没有的。 然后,我需要组织这些信息,确保结构清晰。可能需要分点对比,比如语法差异、文档结构、新功能、错误处理应用场景。同时,要引用正确的来源,比如引用3、4、5中的内容,并在适当的位置添加引用标识。 还要检查是否有遗漏的重要区别,比如文档类型声明、对XML的支持等。例如,XHTML需要遵循XML的解析规则,而HTML5有自己的解析器,并且向后兼容HTML4。 最后,生成相关问题时要围绕XHTMLHTML5的关系、HTML5的新特性、如何选择两者以及迁移注意事项等方面提问,确保问题相关且有帮助。</think>### XHTMLHTML5的主要区别对比 #### 一、设计目标差异 1. **XHTML** - 以XML规范为基础,是HTML4.01的严格重构版本,强调代码规范性[^3]。 - 目标是通过XML语法实现跨平台兼容性数据交换能力[^3][^5]。 - 要求文档必须符合XML格式,例如标签闭合、属性引号等[^3]。 2. **HTML5** - 是新一代Web标准,不仅包含标签规范,还整合了多媒体、图形处理、本地存储等技术[^4][^5]。 - 目标是提升语义化、支持富媒体应用,并简化开发流程(如省略闭合标签)[^4]。 #### 二、语法规则对比 1. **标签与属性** - XHTML: - 标签属性必须小写(如`<div id="content">`)。 - 所有标签必须闭合(如`<br />`)。 - HTML5: - 不区分大小写,允许省略闭合标签(如`<br>`或`<img src="...">`)[^4]。 2. **文档声明** - XHTML:需声明XML命名空间: ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ``` - HTML5:简化声明: ```html <!DOCTYPE html> ``` #### 三、功能特性 1. **HTML5新增特性** - **语义化标签**:如`<header>`、`<article>`、`<nav>`,便于机器解析[^4]。 - **多媒体支持**:`<video>`、`<audio>`标签原生支持音视频播放[^4]。 - **图形处理**:通过`<canvas>`WebGL实现动态绘图[^4]。 - **本地存储**:`localStorage``sessionStorage`替代Cookie[^4]。 - **通信协议**:WebSocket实现双向实时通信[^4]。 2. **XHTML的局限性** - 无内置API支持,依赖外部插件实现复杂功能[^3]。 - 严格语法导致开发效率较低,容错性差[^3]。 #### 四、错误处理机制 - **XHTML**:解析器遇到错误会停止渲染(遵循XML规则)[^3]。 - **HTML5**:采用“宽容解析”,自动修复错误(如未闭合标签)。 #### 五、应用场景 - **XHTML**:适用于需要严格数据交换的场景(如与XML系统集成)[^3]。 - **HTML5**:适合现代Web应用开发(如游戏、实时聊天、离线应用)[^5]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值