首页 > 代码库 > 先了解一下XHTML
先了解一下XHTML
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="http://www.mamicode.com/happy.gif" alt="Happy face">
这是正确的:
A break: <br/>
A horizontal rule: <hr/>
An image: <img src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/picture.gif" name
="picture1" />
这是正确的:
<img src="http://www.mamicode.com/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 html PUBLIC "-//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 html PUBLIC "-//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 html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
在此情况下使用:需要干净的标记,避免表现上的混乱。请与层叠样式表配合使用。
XHTML 1.0 Transitional
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
在此情况下使用:当需要利用 HTML 在表现上的特性时,并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。
XHTML 1.0 Frameset
<!DOCTYPE html
PUBLIC "-//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 html PUBLIC "-//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