资源描述
XHTML 教程.docx
《XHTML 教程.docx》由会员分享,可在线阅读,更多相关《XHTML 教程.docx(31页珍藏版)》请在冰豆网上搜索。
XHTML教程
XHTML是HTML与XML(扩展标记语言)的结合物。
XHTML包含了所有与XML语法结合的HTML4.01元素。
为什么要使用XHTML?
我们认为万维网上的许多页面都包含着糟糕的HTML代码。
下面的HTML代码仍然可以工作得很好,即使它没有遵守HTML规则:
ThisisbadHTMLBadHTML
XML是一种标记化语言,其中所有的东西都要被正确的标记,以产生形式良好的文档。
XML用来描述数据,而HTML则用来显示数据。
今天的市场中存在着不同的浏览器技术,某些浏览器运行在计算机中,某些浏览器则运行在移动电话和手持设备上。
而后者没有能力和手段来解释糟糕的标记语言。
因此,通过把HTML和XML各自的长处加以结合,我们得到了在现在和未来都能派上用场的标记语言-XHTML。
XHTML可以被所有的支持XML的设备读取,同时在其余的浏览器升级至支持XML之前,XHTML使我们有能力编写出拥有良好结构的文档,这些文档可以很好地工作于所有的浏览器,并且可以向后兼容。
通过开始编写严格的HTML,你可以为XHTML做好准备。
如何为XHTML做好准备
XHTML与HTML4.01标准没有太多的不同。
所以将你的代码升级至4.01是个不错的开始。
我们的完整的《HTML4.01参考手册》会帮助你做到这一点。
另外,你应该马上使用小写字母编写HTML代码,同时绝不要养成忽略类似
标签的坏习惯。
祝您可以愉快地编码!
最主要的不同:
∙XHTML元素必须被正确地嵌套。
∙XHTML元素必须被关闭。
∙标签名必须用小写字母。
∙XHTML文档必须拥有根元素。
元素必须被正确地嵌套
在HTML中,某些元素可以像这样彼此不正确地嵌套:
Thistextisboldanditalic
在XHTML中,所有的元素必须像这样彼此正确地嵌套:
Thistextisboldanditalic
提示:
在嵌套列表中一个容易犯的错误,是忘记内部列表必须位于li元素中,就像下面这样:
这是错误的:
这是正确的:
注意:
在正确代码的例子中,我们在之后插入了一个标签。
XHTML元素必须被关闭
非空标签必须使用结束标签。
这是错误的:
Thisisaparagraph
Thisisanotherparagraph
这是正确的:
Thisisaparagraph
Thisisanotherparagraph
空标签也必须被关闭
空标签也必须使用结束标签,或者其开始标签必须使用/>结尾。
这是错误的:
Abreak:
Ahorizontalrule:
Animage:
这是正确的:
Abreak:
Ahorizontalrule:
Animage:
XHTML元素必须小写
XHTML规范定义:
标签名和属性对大小写敏感。
这是错误的:
Thisisaparagraph
这是正确的:
Thisisaparagraph
XHTML文档必须拥有一个根元素
所有的XHTML元素必须被嵌套于根元素中。
其余所有的元素均可有子元素。
子元素必须是成对的且被嵌套在其父元素之中。
基本的文档结构如下:
...
...
编写XHTML代码需要纯净的HTML语法。
更多的XHTML语法规则:
∙属性名称必须小写
∙属性值必须加引号
∙属性不能简写
∙用Id属性代替name属性
∙XHTMLDTD定义了强制使用的HTML元素
属性名称必须小写
这是错误的:
这是正确的:
属性值必须加引号
这是错误的:
这是正确的:
属性不能简写
这是错误的:
这是正确的:
下面是一个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="nohref"
noshade
noshade="noshade"
nowrap
nowrap="nowrap"
multiple
multiple="multiple"
noresize
noresize="noresize"
用id属性代替name属性
HTML4.01针对下列元素定义name属性:
a,applet,frame,iframe,img,和map。
在XHTML中不鼓励使用name属性,应该使用id取而代之。
这是错误的:
这是正确的:
重要的兼容性提示:
你应该在"/"符号前添加一个额外的空格,以使你的XHTML与当今的浏览器相兼容。
语言属性(lang)
lang属性应用于几乎所有的XHTML元素。
它定义元素内部的内容的所用语言的类型。
如果在某元素中使用lang属性,就必须添加额外的xml:
lang,像这样:
lang="no">HeiaNorge!
强制使用的XHTML元素
所有XHTML文档必须进行文件类型声明(DOCTYPEdeclaration)。
在XHTML文档中必须存在html、head、body元素,而title元素必须位于在head元素中。
下面是一个最小化的XHTML文件模板:
DOCTYPEDoctypegoeshere>
//www.w3.org/1999/xhtml">
Titlegoeshere提示:
文件类型声明并非XHTML文档自身的组成部分。
它并不是XHTML元素,也没有关闭标签。
提示:
在XHTML中,标签内的xmlns属性是必需的。
然而,即使当XHTML文档中没有这个属性时,w3.org的验证工具也不会提示错误。
这是因为,"xmlns=http:
//www.w3.org/1999/xhtml"是一个固定的值,即使你没有把它包含在代码中,这个值也会被添加到标签中。
你会在下一章学习更多关于XHTML文档类型声明的知识。
XHTML定义了三种文件类型声明。
使用最普遍的是XHTMLTransitional。
DOCTYPE>是强制使用的。
一个XHTML文档有三个主要的部分:
∙DOCTYPE
∙Head
∙Body
基本的文档结构是这样的:
DOCTYPE...>
......
在XHTML文档中,文档类型声明总是位于首行。
一个XHTML的实例
这个一个简单的(最小化的)XHTML文档:
DOCTYPEhtml
PUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
simpledocumentasimpleparagraph
文档类型声明定义文档的类型:
DOCTYPEhtml
PUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
文档的其余部分类似HTML:
simpledocumentasimpleparagraph
3种文档类型声明
∙DTD规定了使用通用标记语言(SGML)的网页的语法。
∙诸如HTML这样的通用标记语言应该使用DTD来规定应用于某种特定文档中的标签的规则,这些规则包括一系列的元素和实体的声明。
∙在通用标记语言(SGML)的文档类型声明或DTD中,XHTML被详细地进行了描述。
∙XHTMLDTD使用精确的可被计算机读取的语言来描述合法的XHTML标记的语法和句法。
存在三种XHTML文档类型:
∙STRICT(严格类型)
∙TRANSITIONAL(过渡类型)
∙FRAMESET(框架类型)
XHTML1.0的三种XML文档类型
XHTML1.0规定了三种XML文档类型,以对应上述三种DTD。
XHTML1.0Strict
DOCTYPEhtml
PUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在此情况下使用:
需要干净的标记,避免表现上的混乱。
请与层叠样式表配合使用。
XHTML1.0Transitional
DOCTYPEhtml
PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在此情况下使用:
当需要利用HTML在表现上的特性时,并且当需要为那些不支持层叠样式表的浏览器编写XHTML时。
XHTML1.0Frameset
DOCTYPEhtml
PUBLIC"-//W3C//DTDXHTML1.0Frameset//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
在此的情况下使用:
需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。
如何将你的网站升级至XHTML?
为了将站点从HTML转换为XHTML,你首先应该熟悉前几章讲解的XHTML语法规则。
下面讲解具体的步骤。
添加文件类型声明
将下面的文件类型声明添加至每页的首行:
DOCTYPEhtmlPUBLIC
"-//W3C//DTDXHTML1.0Transitional//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
注意:
本站(w3school)使用的是严格的DTD。
不过使用过渡的DTD也是个不错的选择,因为对于大多数入门的开发人员来说,严格的DTD可能显得“太严格了”。
关于文件类型声明的一点提示
如果你希望将页面验证为正确的XHTML,那么页面中必须含有文件类型声明。
需要注意的是,根据不同的文件类型声明,新式的浏览器(比如InternetExplorer6)对文档的处理方式也是不同的。
如果浏览器读到一个文件类型声明,那么它会按照“恰当”的方式来处理文档。
如果没有DOCTYPE,文档也许会以截然不同的方式显示出来。
小写的标签和属性名
由于XHTML对大小写敏感,同时也由于XHTML仅接受小写HTML标签和属性名,因此你可以执行一个简单的搜索和替换命令将所有的大写标签改为小写。
对属性名也要做同样的处理。
我们一直在自己的网站使用小写字母,因此基本上,替换功能没有太多地派上用场。
给所有属性加上引号
由于W3CXHTML1.0标准中要求所有的属性值都必须加引号,所以,如果以前没有注意到这个细节,你需要逐页地对网站进行检查。
这是一项费时的工作,所以绝不要再忘记为属性值加引号了。
空标签:
,
和
在XHTML中是不允许使用空标签(Emptytags)的。
和
标签应该被替换为
和
。
这样做又产生了一个新问题,Netscape会误读
标签。
我们不清楚原因所在,不过将之改为
后就没有问题了。
认识到这一点后,你需要再一次通过搜索和替换功能对标签进行更改。
其他一些标签(比如标签)也会碰到上述同样的问题。
不要使用闭合标签来关闭,而是要在标签的末端添加/>。
验证站点
做完所有这一切以后,使用下面的链接根据官方的W3CDTD对所有修改过的页面进行验证:
XHTMLValidator。
接下来,可能还会有少数的错误被发现,逐一对这些错误进行(手工地)修正。
我们的经验是,最容易犯的错误是在列表中漏掉了标签。
我们应该使用转换工具吗(比方说TIDY)?
对,我们本可以使用TIDY。
DaveRaggett的HTMLTIDY是用来清理HTML代码的免费工具。
在处理那些由专门的HTML代码编辑器和转换工具生成的难以阅读的HTML代码方面,TIDY还是做得很棒的。
同时,它可以帮助你发现站点中哪些地方需要投入更多精力,使得对于残疾人士,网页具有更强的易用性。
我们没有使用Tidy是出于什么原因呢?
当我们开始创建这个网站时,我们已经对XHTML非常地熟悉。
当时我们已经知道使用小写标签以及为属性加引号。
所以在网站测试的过程中,我们只是简单地通过W3C的XHTML验证器进行了测试,并修正了少许的错误。
更重要的是,我们已经学到了很多关于编写Tidy式HTML代码的知识。
XHTML文档是根据文档类型声明进行验证的。
通过DTD验证XHTML
XHTML文档是根据文档类型声明(DTD)进行验证的。
只有将正确的DTD添加到文件的首行,XHTML文件才会被正确地验证。
严格DTD包含没有被反对使用的或不出现在框架结构中的元素和属性:
!
DOCTYPEhtmlPUBLIC
"-//W3C//DTDXHTML1.0Strict//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
过渡DTD包含严格DTD中的一切,外加那些不赞成使用的元素和属性。
!
DOCTYPEhtmlPUBLIC
"-//W3C//DTDXHTML1.0Transitional//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
框架DTD包含过渡DTD中的一切,外加框架。
!
DOCTYPEhtmlPUBLIC
"-//W3C//DTDXHTML1.0Frameset//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
这个一个简单的XHTML文档:
DOCTYPEhtml
PUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
simpledocumentasimpleparagraph
XHTML模块化模型定义了XHTML的模块。
XHTML模块化的原因
XHTML是简单而庞大的语言。
XHTML包含了网站开发者需要的大多数功能。
对于某些特殊的用途,XHTML太大且太复杂,而对于其他的用途,它又太简单了。
通过将XHTML分为若干模块,W3C已经创造出数套小巧且定义良好的XHTML元素,这些元素既可被独立应用于简易设备,又可以与其他XML标准并入大型且更复杂的应用程序。
通过使用模块化的XHTML,产品和软件设计者可以:
∙选择被某种设备所支持的元素。
∙在不打破XHTML标准的情况下,使用XML对XHTML进行扩展。
∙针对小型设备,对XHTML进行简化。
∙通过添加新的XML功能(比如MathML,SVG,语音和多媒体),针对复杂的应用对XHTML进行扩展。
∙定义XHTML框架,比如XHTMLBASIC(针对移动设备的XHTML子集)。
XHTML模块
W3C已将XHTML的定义分为28种模型:
模块名称
描述
AppletModule(Applet模块)
定义已被废弃的applet元素。
BaseModule(基础模块)
定义基本元素。
BasicFormsModule(基础表单模块)
定义基本的表单元素(forms)。
BasicTablesModule(基础表格模块)
定义基本的表格元素(table)。
Bi-directionalTextModule(双向文本模块)
定义bdo元素。
ClientImageMapModule(客户端图像映射模块)
定义浏览器端图像映射元素(imagemapelements)。
EditModule(编辑模块)
定义编辑元素删除和插入。
FormsModule(表单模块)
定义所有在表单中使用的元素。
FramesModule(框架模块)
定义frameset元素。
HypertextModule(超文本模块)
定义a元素。
IframeModule(内联框架模块)
定义iframe元素。
ImageModule(图像模块)
定义图像元素(img)。
IntrinsicEventsModule()
定义事件属性(event),比如onblur和onchange。
LegacyModule(遗留模块)
定义被废弃的元素和属性。
LinkModule(链接模块)
定义链接(link)元素。
ListModule(列表模块)
定义列表元素ol,li,ul,dd,dt,和dl。
MetainformationModule(元信息模块)
定义meta元素。
NameIdentificationModule(名称识别模块)
定义已被废弃的name属性。
ObjectModule(对象模块)
定义对象元素(object)和param元素。
PresentationModule(表现模块)
定义表现元素比如b和i。
ScriptingModule(脚本模块)
定义脚本(script)和无脚本(noscript)元素。
ServerImageMapModule(服务器端图像映射模块)
定义服务器端图像映射(serversideimagemap)元素
StructureModule(结构模块)
定义以下元素:
html,head,titleandbody。
StyleAttributeModule(样式属性模块)
定义样式属性。
StyleSheetModule(样式表模块)
定义样式元素。
TablesModule(表格模块)
定义用于表格中的元素。
TargetModule(Target模块)
定义target属性。
TextModule(文本模块)
定义文本容器元素(textcontainer),比如p和h1。
*注:
已被废弃的元素不应被用于XHTML之中。
HTML标签拥有属性。
每个标签的特殊属性均被列于每个标签描述之下。
这里列出的属性是通用于每个标签的核心属性和语言属性(有个别例外)。
核心属性(CoreAttributes)
以下标签不提供下面的属性:
base,head,html,meta,param,script,style,以及title元素。
属性
值
描述
class
class_rule或style_rule
元素的类(class)
id
id_name
元素的某个