|
现在都讲究标准建站,而标准建站使用的技术主要是XHTML+CSS,而现在我们普遍使用的是HTML代码,那么我该如何转换呢?以及HTML 和XHTML有什么不同呢?在这个教程里,你将学到HTML和XHTML之间的不同,以及如何将HTML转换为XHTML。毕竟XHTML是发展的方向,所以我觉得该教程有必要在本站上发布。我感觉要是你想使用标准还是最好先学HTML,因为比较简单,然后再来看该教程。
XHTML介绍:
XHTML是 EXtensible HyperText Markup Language(可扩展超文本标记语言) 的英文缩写,而HTML则是 HyperText Markup Language(超文本标记语言) ,这是名字的不同。其实我们说得标准应该是XML,那为什么要学习XHTML呢?因为现在的HTML代码烦琐,危机四伏,但是XML使用环境还不成熟,所以推出了一个过度的产品就是XHTML,它起着呈上起下的作用。也有人认为XHTML是HTML的一个升级版本,其实也是正确的,我的理解是XHTML把 HTML做得更加规范的一个标记语言,使HTML变得功能强大,减少了代码的烦琐尤其是表格。
XHTML是在2000年1月26日被国际标准组织机构W3C(World Wide web Consortium)定为一个标准的,认为是HTML的一个最新版本,并且将逐渐替换HTML。现在所有的浏览器都支持XHTML,XHTML兼容 HTML 4.0。也有人认为XHTML就是HTML4.01。如果你在学习过程中自己编写了一个符合标准的站,你可以通过W3C的验证,验证通过后你将会得到一个标志,通常是XHTML1.0认证和CSS验证。我也不清楚目前国内有多少个网站同时通过了这两个验证。大家可以去http://www.w3.org/ 这个站点去验证你的站,如果符合那两个规则则会分别给我们两段代码加到你的网页上向别人展示说明你采用了标准建站啊,牛啊!
为什么我们使用XHTML
XHTML是HTML升级为XML的过度产品,被定为一个标准,XHTML完全兼容HTML4.01,并且具有XML的语法。下面我们来看一个含有错误代码的HTML,如下:
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>
虽然含有错误代码,但是当我们在浏览器中浏览时还能正常显示。XML是一个标记语言,但是它要求在网页中出现的任何元素都应该被标记出来, XML是用来描述网页中的数据的,而HTML用来显示网页中的元素的。目前我们上网使用的各种浏览器技术,包括手提电脑、手机上网浏览等等,都要求浏览的一些内容都要被正确标记,如果有错误的标记可能会使显示特别混乱、甚至不能正常显示。
因此联合 HTML 和XML , 还有其他的一些技术,我们得到了一种现在有用的而且在将来也有用的语言 - XHTML。
当在将来都规范的时候我们就要用的 XHTML 正确格式的标记了,使所有的浏览器都能正确的执行,所以我们现在有必要开始学习XHTML了。
XHTML和HTML之间的区别:
XHTML是一项新技术,在浏览器和一些其他的软件都支持它之前,我们应该有必要熟悉一下这项技术。为了我们更好的学习XHTML之前我们应该熟悉一下HTML4.0,我们可以去下载一个参考手册来熟悉一下。以便于我们学起XHTML来更简单,换句话说我们现在使用HTML编写代码时应该尽力少写错误代码,如:都要使用小写的字符来编写HTML,每个标记之后都要加上标记的结束如:<p>网页教学网欢迎您的光临</p> 结束一定要有,我们要保持这种规则。
它们之间最大的区别在于:
1.XHTML 元素一定要被正确的嵌套使用。
在HTML里一些元素可以不正确嵌套也能正常显示,如:
<b><i>This text is bold and italic</b></i>
而在XHTML必须要正确嵌套之后才能正常使用,如:
<b><i>This text is bold and italic</i></b>
注意:这个错误通常发生在当嵌套多层之后的标签里面。如:
<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 文件一定要有正确的组织格式。
所有的XHTML应该正确的被嵌套在以<html>开始以</html>结束的元素里面,其他的元素可以有子元素,并且子元素也要被正确的嵌套在他们的父元素内。如:
<html>
<head> ... </head>
<body> ... </body>
</html>
标签名字一定要用小写字母。
因为 XHTML文档是XML应用程序, XML 对大小写是敏感的。象 <br> 和 <BR> 是两个不同的标记。如错误代码:
<BODY>
<P>This is a paragraph</P>
</BODY>
正确格式为:
<body>
<p>This is a paragraph</p>
</body>
所有的 XHTML 元素一定要关闭
不能有没有关闭的空的元素存在我们的代码中,其实对于这点我们是比较好结束的,有开始就应该有结束吗?例如错误代码:
<p>This is a paragraph
<p>This is another paragraph
正确的为:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
独立的一个标签我们也要结束用 />来结束。
例如:错误代码
This is a break<br>
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">
正确代码:
This is a break<br />
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face" />
通过上面的几个例子我们基本上看出了HTML和XHTML之间的不同,那么我们应该从现在起应该试着改变我们现在的HTML,例如都使用小写的标记、在标记之后加上结束标记的符号 />。
XHTML 的语法
简单的说写 XHTML 要用干净的 HTML 语法。
XHTML的一些其他语法要求:
属性名字必须小写。如:
错误代码:
<table WIDTH="100%">
正确的代码:
<table width="100%">
属性值必须要被引用。如:
错误的代码:
<table width=100%>
正确的代码:
<table width="100%">
属性的缩写被禁止。如:
错误的代码:
<dl compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
正确的代码:
<dl compact="compact">
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
列出一个表让大家知道:
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属性。如:
HTML 4.01 中为a,applet, frame, iframe, img 和 map定义了一个name属性.在 XHTML 里name属性是不能被使用的,应该用id 来替换它。如:
错误代码:
<img src="picture.gif" name="picture1" />
正确的代码:
<img src="picture.gif" id="picture1" />
注意:我们为了使旧浏览器也能正常的执行该内容我们也可以在标签中同时使用id和name属性。如:
<img src="picture.gif" id="picture1" name="picture1" />
为了适应新的浏览器浏览我们在上述代码中的最后我加了/来结束标签。
1,什么是XHTML?XHTML有什么优点? XHTML系列文档基于XML,最终被设计用来与基于XML的用户代理程序一同工作。它是由HTML4再生和发展而来。 XHTML1.0是xhtml家族的第一个成员,它是将HTML4的三种文档应用到XML1.0发展而来。作为一种语法,它的内容既符合XML,又能被HTML4的用户代理程序所识别。开发这将其文档转换为XHTML有如下益处: 1,XHTML文档遵从XML,这样用标准的XML工具很容易查看,编辑,检验它们。 2,XHTML可以在HTML4用户代理程序中使用,也能在新的XHTML用户代理程序中使用,而且 可以在后者中达到与前者相同或更好的显示效果。 3,XHTML中的程序可以是HTML的DOM,也可以是XML的DOM。 4,随着XML的发展,XHTML1.0文档更有可能运用到各种XHTML环境中。
2,XHTML的标准定义: 1,它必须经过W3C关于XHTML1.0的三种DTD之一(如下所示)的验证。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd" >
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd" >
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd" >
2,文档的根元素必须是<html>. 3,文档的根元素必须用xmlns属性指明其名字空间(namespace),XHTML的名字 空间在http://www.w3.org/1999/xhtml中定义。 4,根元素之前必须有一个DOCTYPE声明,DOCTYPE中声明的标识符必须引用以上三种DTD中的一种。
3,与HTML4的区别:
1,文档编排良好,元素必须适当的嵌套。 正确:嵌套元素。
<p>here is an emphasized <em>paragraph</em>.</p>
不正确:层叠元素。
<p>here is an emphasized <em>paragraph.</p></em>
2,元素和属性名称必须小写。 对所有HTML元素和属性名,XHTML 文档必须使用小写。 因为XML是大小写敏感的,所以这个差别是必须的。如 <li> 和 <LI> 是不同的标签。
3,对于非空元素,必须使用结束标签。 在基于 SGML的 HTML 4 中,一些隐含结束意义的元素允许忽略结束标签。而在基于XML的XHTML中,这种忽略不被允许。除了在DTD中被声明为空的元素,所有元素必须有结束标签。
正确:结束了的元素。
<p>here is a paragraph.</p><p>here is another paragraph.</p>
不正确:未结束元素。
<p>here is a paragraph.<p>here is another paragraph.
4,属性值必须在引号中。 所有的属性必须用引号,即使是数字。
正确:在引号中的属性值
<table rows="3">
不正确:不在引号中的属性值。
<table rows=3>
5,每个属性必须包含一个属性值。 XML 不支持属性最小化. 属性值对必须写全。象compact,checked这样的属性名不能不指定属性值而在元素中出现。
正确:没有最小化的属性
<dl compact="compact">
不正确:最小化属性
<dl compact>
6,空元素起始标签必须以“/>”结束。 空元素要么必须有结束标签,要么起始标签以/>结束. 例如,<br/>或<hr></hr>. 请参看HTML兼容性指导 HTML Compatibility Guidelines 中的信息,以保证向后兼容HTML 4用户代理程序
7,Style和Script元素内容应该用“<![CDATA[”和“]]>”记号包含或使用外部文件。 在XHTML中,script和style元素声明为#PCDATA内容形式,因此,< 和 & 被看作是标识的开始,<和& 这样的实体被XML处理程序看作为实体引用而分别被认为是< 和 & . 将script和style元素的内容包裹在CDATA记号部分中避免了这些实体的扩张。
<script>
<![CDATA[
... unescaped script content ...
]]>
</script>
CDATA
部分被 XML 处理程序识别,是文档对象模型中一个结点。请参看1.3节Section 1.3的DOM LEVEL 1推荐标准[DOM]。
替代的方式是使用外部script和style文档。
8,具有 'id' 和 'name' 属性的元素。 HTML 4 定义了name属性的元素有 a,applet,form,frame,iframe,img,and map. HTML 4还引入了 id 属性. 这两个属性都是被设计作为片段标识符。
在XML中,片段标识符是ID类型,每个元素只能有一个ID类型的属性。因此,在XHTML1.0中,id属性被定义为ID类型。为保证XHTML1.0文档是结构良好的XML文档,在定义一个片段标识符时,XHTML文档必须使用id属性,即使是对那些以前用name属性的元素。请参看 HTML Compatibility Guidelines 的信息,确保XHTML文档以text/html媒体类型使用时,这些”锚”能向后兼容。
注意,在XHTML 1.0中,name 属性不被正式支持,在以后的XHTML版本中将被删除。
4,HTML兼容性指导(原文摘录) ================================ C.1 处理说明
一些用户代理程序会显示处理说明。但是,注意当文档中没有XML声明时,文档只能用缺省的字符编码UTF-8 或 UTF-16。
C.2 空元素
在空元素结束符
/ 和 > 前加一个空格,如 <br />,<hr /> 和 <img src="karen.jpg" alt="Karen" />. 还有,使用最小化的标签语法,如<br />,因为另一种XML允许的语法 <br></br> 在很多现有用户代理程序会导致不可靠的结果。
C.3 元素最小化和空元素内容
内容模型不是空的元素,在为空的场合(如空title或空段落),不要用最小化形式(如 用 <p> </p>,不用 <p />).
C.4 嵌入的样式表和Script
如果你的样式表使用
< 或 & 或 ]]> 或 --,用外部样式表。如果你的script用 < 或 & 或 ]]> 或 --,用外部script。 注意XML分析程序会在不告知的情况下除去注释的内容。因此,以前用注释的方法”隐藏”script和样式表的习惯使文档可以向后兼容,但是可能在基于XML的执行时不能按预期工作。
C.5 在属性值内部分行
在属性值中避免使用分行和多个空格符。用户代理程序处理这些情况时不一致。
C.6 Isindex
在文档的head部分不要使用超过一个
isindex 元素. isindex 元素不被赞成使用,赞成使用input元素。
C.7
lang 和 xml:lang 属性
在指定元素的语言时同时使用
lang 和 xml:lang 属性。xml:lang 属性在前。
C.8 片段标识符
在 XML中,以
"#foo"形式结束片段标识符URI [RFC2396] 不是指元素有一个属性name="foo",而是指元素有一个被定义为ID类型的属性,如,HTML 4中的id属性。很多HTML客户程序不以这种方式支持ID类型属性,所以,可以将相同的值同时附给这两个属性,以保证最大程度的向后和向前兼容。(如 <a id="foo" name="foo">...</a>).
此外,因为ID类型属性的合法值集比CDATA类型属性的值集小得多,name属性被改为NMTOKEN。这个属性被限制为只有和ID类型或XML1.0 2.5节中的Name产品同样的值。不幸的是,XHTML的DTD不能表示出这个限制。因为这个改变,在转换现有的HTML文档时要加以注意。 如果在转换时值可能会改变,这些属性的值在文档中必须是唯一的,有效的,任何对这些
片段标识符的引用(不管是内部还是外部)必须更新。
最后,注意不赞成在
a,applet,form,frame,iframe,img,和 map 元素中使用name属性,在以后的XHTML版本中,它将被去除。
C.9 字符编码
要指定文档中的字符编码,同时在xml声明中使用编码属性指定 (如. <?xml version="1.0" encoding="EUC-JP"?>) 和在meta中用 http-equiv 语句 (如 <meta http-equiv="Content-type" content='text/html; charset="EUC-JP"' />).xml处理指令的编码属性值在前。
C.10 布尔属性
一些HTML用户代理程序在布尔属性以完全(非最小化)形式出现时不能解释它们,而这是XML1.0必须的。注意这个问题不会影响用户代理程序对HTML 4的兼容。包括以下一些属性:
compact,nowrap,ismap,declare,noshade,checked,disabled,readonly,multiple,selected,noresize,defer.
C.11 文档对象模型和 XHTML
文档对象模型 level 1 推荐标准 [
DOM] 定义XML和HTML 4的文档对象模型。 HTML 4 文档对象模型规定HTML元素名和属性名以大写形式返回。XML文档对象模型规定元素名和属性名以它们被指定的形式返回。在 XHTML 1.0中,元素和属性指定为小写形式。对这个显著的差别可以用两种方式处理:
- 通过DOM访问text/html internet媒体类型XHTML文档的应用程序可以使用HTML DOM,还可以依赖这些界面返回的大写的元素名和属性名。
- 通过DOM访问text/xml或application/xml internet媒体类型XHTML文档的应用程序也可以使用XML DOM. 元素名和属性名将以小写形式返回。 并且,一些 XHTML 元素可以也可以不出现在对象树中,因为在内容模型中它们是可选的(如table中的
tbody 元素). 在HTML 4中,一些元素可以允许被最小化以至于它们的开始标签和结束标签都被忽略(SGML特性),所以可以发生。但是在XML中不行。XHTML使元素成为可选的,而不是要由文档作者来插入外来元素。相应地,应用程序需要适应这一点。
C.12 在属性值中使用 &
在属性值中含有&符号时,它必须用字符实体引用来表示 (即 "
&"). 例如,当一个元素的 href 属性指向一个接收参数的 CGI脚本时,它必须表示为http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user,而不是 http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user.
C.13 层叠样式表和XHTML
层叠样式表 level 2推荐标准 [
CSS2] 定义style的属性,用于分析HTML和XML文档的树形结构。分析时的不通将导致不同的视觉或听觉效果,这依赖于使用的选择器。下面的技术可以减少对文档的这种影响,而用不修改这两中媒体类型:
- XHTML的CSS样式表应该用小写的元素和属性名。
- 在table中,tbody 元素会被HTML用户代理程序的分析器推断出,但是XML用户代理程序的分析器不会这么做。所以如果在CSS选择器中要被引用到,你应该总是明晰地加上tbody元素。
- 在XHTML 名址空间,用户代理程序将把”id”属性认作为一个ID类型的属性。因此,即使用户代理程序不能认出DTD,样式表也应该能够继续使用”#”简化选择器语法。
- 在XHTML 名址空间,用户代理程序将识别class属性,因此,样式表应该能构继续使用”.”简化选择器语法。
- CSS 定义HTML和XML文档的不同一致性标准; 在XHTML文档以HTML表达时,用HTML规则,在XHTML文档以XML表达时,用XML规则。
W3C将XHTML 1.0分为三种规范:XHTML-1.0-Strict(严格)、XHTML-1.0-Transitional(过渡)和XHTML-1.0-Frameset(框架)。
一般建议用XHTML-1.0-Transitional(过渡)进行现有站点的转换,因为在我们写html的时候可能过多的在HTML中包含很多控制外观的标记,否则要改成css控制的话工作量相对增大.还有一个就是浏览器问题,就是有些用户可能用的是不支持新版css2(建议用XHTML & CSS2)的旧式浏览器,所以用XHTML-1.0-Transitional(过渡)来分担部分控制外观是理想的.
使页符合XHTML 当您创建新页时,您可以使该页符合 XHTML。您还可以使现有的 HTML 文档符合 XHTML。
若要新建符合 XHTML 的文档,请执行以下操作: 选择“文件” >“新建”。 即出现“新建文档”对话框。
选择一种文档类型。 选择“使文档符合 XHTML”选项。 注意:不是所有的文档类型都可以使之符合 XHTML。
单击“确定”。 若要以默认方式创建符合 XHTML 的文档,请执行以下操作: 选择“编辑”>“首选参数”或 Dreamweaver >“首选参数”(Mac OS X),然后选择“新建文档”类别。 在“新建文档”类别中,选择一种文档类型并选择“使文档符合 XHTML”选项。 单击“确定”。 若要使现有 HTML 文档符合 XHTML,请执行以下操作: 打开文档,然后执行下列操作之一: 对于不含框架的文档,选择“文件”>“转换”>“XHTML”。 对于包含框架的文档,选择一个框架并选择“文件”>“转换”>“XHTML”。若要转换整个文档,请对每个框架以及框架页文档重复此步骤。
注意:您不能转换模板的实例,因为模板的实例必须与它所基于的模板使用相同的语言。例如,基于 XHTML 模板的文档将始终是 XHTML,基于不符合 XHTML 的 HTML 模板的文档将始终是 HTML,并且不能把它转换为 XHTML 或其它语言。
|