小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
您的位置:首页 > 前端开发 > Htm l+ Css > html4 + hss2

HTML和XHTML的区别详解

分类: html4 + hss2148个赞

很多初学者对HTML和XHTML的概念不是太理解,看了下面的示例相信你会有所收获


区别1:元素必须被正确地嵌套


HTML写法:

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


XHTML写法:

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


区别2:XHTML 元素必须被关闭


HTML写法:可以正常解析

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


XHTML规范写法:

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


区别3:XHTML空标签也必须被关闭

如:<br /> <hr />  在XHTML里<br><hr>的写法是不正确的


区别4:XHTML 元素必须小写

很多朋友写着写着就大小写混用了,这样的写法是不正常的

错误写法:

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

正确写法:

<body>
<p>This is a paragraph</p>
</body>


区别5:XHTML 文档必须拥有一个根元素

所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。

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


区别6:XHTML属性值必须加双引号


错误写法:

<table width=100%>

正确写法:

<table width="100%">


区别7:XHTML属性不能简写


错误写法

<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 中的改写:



HTMLXHTML
compactcompact="compact"
checkedchecked="checked"
declaredeclare="declare"
readonlyreadonly="readonly"
disableddisabled="disabled"
selectedselected="selected"
deferdefer="defer"
ismapismap="ismap"
nohrefnohref="nohref"
noshadenoshade="noshade"
nowrapnowrap="nowrap"
multiplemultiple="multiple"
noresizenoresize="noresize"



区别8:用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" />


区别9:重要的兼容性提示


应该在 "/" 符号前添加一个额外的空格,以使你的 XHTML 与当今的浏览器相兼容。


错误写法

<br/>

正确写法

<br />


区别10:强制使用XHTML的写法

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

<body>
</body>

</html>

注意:

(1)<!DOCTYPE Doctype goes here>文件类型声明并非 XHTML 文档自身的组成部分。它并不是 XHTML 元素,也没有关闭标签。

(2)在 XHTML 中,<html> 标签内的 xmlns 属性是必需的,然而,即使当 XHTML 文档中没有这个属性时,w3.org 的验证工具也不会提示错误。这是因为,"xmlns=http://www.w3.org/1999/xhtml" 是一个固定的值,即使你没有把它包含在代码中,这个值也会被添加到 <html> 标签中。





拓展:


如何将你的网站升级至 XHTML ?


1、首先要理解以上XHTML的10个特性


2、添加文件类型声明,添加至每页的首行

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

需要注意的是,根据不同的文件类型声明,新式的浏览器对文档的处理方式也是不同的。如果浏览器读到一个文件类型声明,那么它会按照“恰当”的方式来处理文档。如果没有 DOCTYPE,文档也许会以截然不同的方式显示出来。


3、小写的标签和属性名

由于 XHTML 对大小写敏感,同时也由于 XHTML 仅接受小写 HTML 标签和属性名,因此你可以执行一个简单的搜索和替换命令将所有的大写标签改为小写。对属性名也要做同样的处理。


4、给所有属性加上引号


由于 W3C XHTML 1.0 标准中要求所有的属性值都必须加引号,所以,如果以前没有注意到这个细节,你需要逐页地对网站进行检查。这是一项费时的工作,所以绝不要再忘记为属性值加引号了。


5、空标签加上空格 /


如:

<hr> , <br> 和 <img>换为<hr /> , <br /> 和 <img />

这里你需要再一次通过搜索和替换功能对标签进行更改。


6、验证站点


做完所有这一切以后,使用下面的链接根据官方的 W3C DTD 对所有修改过的页面进行验证: XHTML Validator



小米技术社区

本站内容均为小米原创,转载请注明出处:小米技术社区>> HTML和XHTML的区别详解