认识XHTML1.0

 一  XHTML1.0中允许使用的所有HTML元素   
<!--...--> Defines a comment
<!DOCTYPE>  Defines the document type
<a> Defines an anchor
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<applet> Deprecated. Defines an applet
<area> Defines an area inside an image map
<b> Defines bold text
<base> Defines a base URL for all the links in a page
<basefont> Deprecated. Defines a base font
<bdo> Defines the direction of text display
<big> Defines big text
<blockquote> Defines a long quotation
<body> Defines the body element
<br> Inserts a single line break
<button> Defines a push button
<caption> Defines a table caption
<center> Deprecated. Defines centered text
<cite> Defines a citation
<code> Defines computer code text
<col> Defines attributes for table columns
<colgroup> Defines groups of table columns
<dd> Defines a definition description
<del> Defines deleted text
<dir> Deprecated. Defines a directory list
<div> Defines a section in a document
<dfn> Defines a definition term
<dl> Defines a definition list
<dt> Defines a definition term
<em> Defines emphasized text
<fieldset> Defines a fieldset
<font> Deprecated. Defines text font, size, and color
<form> Defines a form
<frame> Defines a sub window (a frame)
<frameset> Defines a set of frames
<h1> to <h6> Defines header 1 to header
<head> Defines information about the document
<hr> Defines a horizontal rule
<html> Defines an html document
<i> Defines italic text
<iframe> Defines an inline sub window (frame)
<img> Defines an image
<input> Defines an input field
<ins> Defines inserted text
<isindex> Deprecated. Defines a single-line input field
<kbd> Defines keyboard text
<label> Defines a label for a form control
<legend> Defines a title in a fieldset
<li> Defines a list item
<link> Defines a resource reference
<map> Defines an image map
<menu> Deprecated. Defines a menu list
<meta> Defines meta information
<noframes> Defines a noframe section
<noscript> Defines a noscript section
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines an option group
<option> Defines an option in a drop-down list
<p> Defines a paragraph
<param> Defines a parameter for an object
<pre> Defines preformatted text
<q> Defines a short quotation
<s> Deprecate 

二 XHTML1.0的几种DocType类型的区别

DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择:
* 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>,完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
我们选择什么样的DOCTYPE
理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。
注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。
打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。
补充:DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。

三 html4.0与xhtml1.0的区别

果换成vs2005开发的话DOCTYPE就变成了。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这样一些样式就会有问题。查找了下,发现html4.0和xhtml1.0的区别在以下几个地方。

  不正确:层叠元素。
  <p>here is an emphasized <em>paragraph.</p></em>

  元素和属性名必须小写
  对所有HTML元素和属性名,XHTML 文档必须使用小写。 因为XML是大小写敏感的,所以这个差别是必须的。如 <li> 和 <LI> 是不同的标签。

  对非空元素,必须使用结束标签
  在基于 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.

  属性值必须在引号中
  所有的属性必须用引号,即使是数字。

  正确:在引号中的属性值
  <table rows="3">

  不正确:不在引号中的属性值。
  <table rows=3>

  属性最小化
  XML 不支持属性最小化. 属性值对必须写全。象compact,checked这样的属性名不能不指定属性值而在元素中出现。

  正确:没有最小化的属性
  <dl compact="compact">

  不正确:最小化属性
  <dl compact>

  空元素
  空元素要么必须有结束标签,要么起始标签以/>结束. 例如,<br/>或<hr></hr>. 请参看HTML兼容性指导 HTML Compatibility Guidelines 中的信息,以保证向后兼容HTML 4用户代理程序

  正确:结束的空元素
  <br/><hr/>
  错误:未结束的空标签
  <br><hr>

  属性值中的空白字符处理
  对属性值,用户代理程序将删去引导和后序空白符,将一个或多个空白符(包括换行)转换成单个字符间空间(在西方书写体中是一个ASCII空格) See Section 3.3.3 of [XML]。

  Script and Style 元素
  在XHTML中,script和style元素声明为#PCDATA内容形式,因此,< 和 & 被看作是标识的开始,<和& 这样的实体被XML处理程序看作为实体引用而分别被认为是< 和 & . 将script和style元素的内容包裹在CDATA记号部分中避免了这些实体的扩张。
 Example Source Code [www.52css.com]
<script>
<![CDATA[
... unescaped script content ...
]]>
</script>

  CDATA 部分被 XML 处理程序识别,是文档对象模型中一个结点。请参看1.3节Section 1.3的DOM LEVEL 1推荐标准[DOM]。

  替代的方式是使用外部script和style文档。

  SGML 禁止

  SGML 给作者的DTD可以指定在一个元素内部禁止出现的元素。这样的禁止在XML中是不可能的。

  例如,严格的 HTML 4 DTD 禁止任何深度的’a’元素对另一’a’元素的嵌套。在XML中无法写出这样的禁止。尽管这些禁止不能在DTD中定义,一些元素不应该被嵌套。在标准化的附录B Appendix B中是这些元素的汇总。

  具有 '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版本中将被删除。

四 网站进行W3C XHTML1.0验证的经验

进行W3C XHTML1.0验证的时候的一些经验。总结出通过W3C XHTML1.0标准需要注意的九个问题: 
一、在 <div class=tzh>I am TZH!</div> 这段语句中有什么错误?
  标点符号问题。这其实也是大家最容易忽视的问题,其实就是小小的两个引号,就造成了这个错误。虽然很多浏览器在不加引号的情况下仍然能正确识别渲染。但是这样想要通过严格的W3C XHTML国际标准是不可能的,请大家记住等号后面一定要接引号。正确写法:<div class="tzh">I am TZH!</div>
二、在 <SPAN class="tzh">TZH is me!</SPAN> 这段语句中有什么错误?
  大小写注意。这和第一个问题一样,都是特别容易忽视的细节问题。在W3C标准中是绝对不允许大写的,其中我仍记得我在检测一段javascript代码的时候,由于为了让自己一目了然写出的onLoad也被判断成了错误,原因就是L不能大写。正确写法:<span class="tzh">TZH is me!</span>
三、在 <p>I am TZH!</p><br><p>TZH is me!</p> 这段语句中有什么错误?
  <br />标签问题。对于强制换行标签<br />来说,很多新手都分不清它和<br>的区别,甚至在FCKeditor编辑器中有时都会时不时冒出个<br>来充当<br />。虽然同样很多浏览器都能自动纠错,将<br>作为<br />识别。但最好的编辑方法还是推荐大家使用Dreamweaver进行编辑,当你按下Ctrl Enter,就会自动写上一个<br />。正确写法: <p>I am TZH!</p><br /><p>TZH is me!</p>
四、 <h1>~tangzhehao~hey~</h1> 这段语句中有什么错误?
  注意标签结束后面接的标点符号,很多标签结束后都不能接特殊标点符号,比如这里的"~"波浪号,但你要问,那叫我怎么用呢?那就使用ISO Latin-1字符集(ISO Latin-1 Character Set),在这里,查找到“~”波浪号相对应的字符集十进制编码是~,然后就用这个十进制编码代替~波浪号,记住最后的分号不能丢。在ISO Latin-1字符集中以已命名实体(Named entity)最优先,十进制编码(Decimal code)其次,也就是说,一个符号在同时有十进制编码和已命名实体的时候,优先选用已命名实体而不使用十进制编码。
五、在 <form id="54tzh"></form> 这段语句中有什么错误?
  注意id和class特殊情况。W3C XHTML1.0 标准中规定,在id或class中,第一个字符是不能是数字的,必须是字母。正确写法:<form id="tzh45"></form>
六、在 <img src="logo.gif"> 这段语句中有什么错误?
  <img>标签注意。W3C XHTML1.0 标准中规定,在<img>标签中,必须包括alt元素。正确写法:<img alt="Logo" src="logo.gif">
七、在<script language="JavaScript"> 这段语句中有什么错误?
  <script>标签注意。W3C XHTML1.0 标准中规定,在<img>标签中,必须包括type元素。正确写法:<script language="JavaScript" type=text/javascript>
八、在<div><h1>I am TZH!</div></h1> 这段语句中有什么错误?
  注意标签开始结束顺序对应。正确写法:<div><h1>I am TZH!</h1></div>
九、除了上面的之外,还需要注意哪些问题?
  注意特殊套装。比如:<dl><dd><ul><li>等一些特殊标签,套装顺序中缺一不可。必须按照顺序将<dl><dd><ul><li>四个标签写完全。类似的还有许多。
  注意未打开标签。所谓未打开来自于W3C检测,这类错误显示的错误是 is not open,翻译过来也就是未打开的意思。如果按照中文的意思来理解就是有首无尾或者有尾无首。通常这种错误出现的原因都是因为有一段代码在修改的时候被删除,而没有顾及到相对较远的结束或者开始标签。
总结出关于W3C CSS标准的一些经验:
  一、少用偏门。类似break-word断行,z-index手动分层,还有像垂直对齐等等这些偏门CSS最好少用,因为不一定所有浏览器都支持,而且极难通过W3C检测。
  二、center不是float的值。很多新手都会把center误认为是float的值,而偏偏不是如此。center只是text-align的值。
  三、对齐不能包括两个值。很多新手会在float或者text-align中填写两个值,比如:float:left top。这是不允许的,浏览器也无法识别。
  四、滚动条颜色最好不要自定义。很多浏览器不能正常识别自定义颜色的滚动条,况且很多自定义颜色都不能通过W3C。
  五、单独滚动条设置。现在经常使用overflow-x(横向滚动条)或者overflow-y(纵向滚动条),在设置这个的时候经常会发现并不是所有的客户端上都有效果,大家在设置的时候最好在body和html同时进行设置。然而这个CSS也不是CSS2.1支持的(CSS2.1支持overflow,同时定义横纵滚动条),直到CSS3才支持这种定义方式。尽量少用。
  六、background和color颜色相同会受到警告

五 网站如何通过W3C验证?

前言  W3C除了订出各标签规定外, 还提供了验证功能,让网页的制作者检查是否真正都有依照W3C规定

如何达成W3C XHTML1.0标准网页
目前较常用的以XHTML1.0及HTML4.01为主
由于XHTML1.0是由HTML4.01演变而来, 几乎算是HTML4.01的修正版
若以严格角度来看的话, XHTML1.0算是较严格的了
虽然XHTML1.0和HTML4.01的规则十分相似, 但由于XHTML1.0是后者的修正版
前者的规定当然会较HTML4.01来得严格

较容易发生之错误
1.所有标签都必需使用小写
错误:<HTML> <Title> <BODY> <FonT>
正确:<html> <title> <body> <font>
2.所有卷标内之属性都要有值且不可省略双引号或单引号
错误:<a href=index.htm>连结</a>
正确:<a href="index.htm">连结</a>
若没有属性值就必需重复属性作为值, 如:
错误:<frame noresize>
正确:<frame noresize="noresize">
3.所有标签必须成对, 若非成对需加上/在最后
错误:<li>米奇<li>米妮<li>布鲁托
正确:<li>米奇</li><li>米妮</li><li>布鲁托</li>
错误:<br>
正确:<br />
4.一个网页最少要包含的标签
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>标题</title>
</head>
<body>
内容
</body>
</html>
说明:通常中文网页以big5编码, 需加上以下这行于<head>与</head>之间:
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
5.若要显示【<】【>】【&】的话, 需以其它值输入
例如要显示< >于网页中的话, 需填入:
&lt; &gt;
若要显示&于网页中的话
错误:&
正确:&amp;
6.卷标顺序不可错乱
错误:<b><p>文字</b></p>
正确:<b><p>文字</p></b>
7.批注文字中不可包含----
错误:<!--米奇实在是---太可爱了-->
正确:<!--米奇实在是太可爱了-->
8.图片卷标中都必需包含批注文字
批注文字就是当你把鼠标指针移至图片上时会出现的文字:
错误:<img src="mickey.jpg">
正确:<img src="mickey.jpg" alt="这张图是米奇" />
8.XHTML1.0文件标头加于第一行
一般网页:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
框架页:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

验证
W3C提供网页或上传验证, 进入后填入网址
若不成功则会出现红色警示, 并会告知哪里有错误, 再依错误慢慢修改
W3C标准验证网页:http://validator.w3.org/

后记
讲到这里, 你有没有试着把其它的人网址贴上去验证看看呢?因为大部份网页是制作给IE使用者, 所以几乎都不会完全通过W3C, 只要IE可以正常显示即可,若你已经试着把我的网页的任何一页都贴上去的话, 应该都会通过验证
举老师的教学网页当作例子, 除了首页之外, 大部份都不通过

其实真的要符合W3C规定吗?符合W3C规定可以让你的网页用任何浏览器浏览都是一样的,像有人如果针对IE在做网页的, 用Firefox浏览时可能就会出现不少与原来不同的设计,所以, 尽量符合W3C规定吧! 

六  XHTML与HTML兼容的16条指引!

1.避免将页面声明为XML类型,页面使用UTF-8或者UTF-16字符集。

2.在空元素标签(不能用来包含内容的标签)结束符>前加上斜杠 /,如:<br />,<hr />等等。

3.当一个非空元素(此标签是用来包含内容的,如标题,段落)内容为空时,给它一个空白字符,而不要使用像空元素那样的结束方法,如:当一个没有内容的P标签请书写:<p> </p>而不要写成<p />。

4.当你的style和scripts内容中出现 <, &, ]]>或者两个连续的横杠 --时,请使用外部文件进行引入。

5.避免在元素属性值中出现断行或者多个空格。

6.不要在文档的head部分包含一个以上的isindex元素(最好不使用),此元素不推荐使用。

isindex:使浏览器显示一个对话框,提示用户输入单行文本。

在 HTML 4 中,此元素是不推荐使用的,而推荐使用 INPUT 元素。isIndex 的 tagName 属性将返回 input。

此元素是一个块元素,此元素需要关闭标签。

下面的例子使用 ISINDEX 元素提换了默认的提示:
    <isindex prompt="输入要搜索的索引关键字" />
7.当要给一个元素指定language时,请使用lang和xml:lang属性,xml:lang的值优先级更高。

8.请使用id属性当做元素标识符,避免使用name属性,尤其在这些元素上更不赞成使用name属性当做它们的标识符:a, applet, form, frame, iframe, img, map。

9.给页面定义文档字符集,给xml文档定义字符集使用
<?xml version="1.0" encoding="UTF-8"?>
给XHTML定义字符集使用
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

10.Boolean类型元素属性值请使用该属性名,如:checked="checked",Boolean类型元素有:compact, nowrap, ismap, declare, noshade, checked, disabled, readonly, multiple, selected, noresize, defer

11.HTML4和XML文档对象模型指定HTML元素和属性名返回大写格式。XHTML中元素和属性名返回小写格式。

12.使用&amp;替代属性值中的&符号,如:
http://www.w3cgroup.com/default.asp?CateID=2&amp;page=2
要比下面的好:
http://www.w3cgroup.com/default.asp?CateID=2&page=2

13.在XHTML中CSS样式标签style及属性名必须使用小写;

在HTML的table中,tbody将会在解析时自动补齐,而在XML中却不行,所以,需要自己添加上tbody元素,如果在CSS选择符中使用到了它;

CSS对某个具有id属性的元素进行选择时,使用#选择符;

CSS对某个具有class属性的元素进行选择时,使用.选择符;

14.如何在解析XML文档时使用Style元素?在HTML4和XHTML中,style元素可以用在文档中定义样式规则,在XML中,XML stylesheet用来定义样式规则,为了兼容这个规则,在解析XML文档时如果需要使用style元素,style元素需要使用id属性作为标示符,并且,要有一个XML stylesheet引用它,如:

<?xml-stylesheet href="http://www.w3.org/StyleSheets/TR/W3C-REC.css" type="text/css"?>
<?xml-stylesheet href="#internalStyle" type="text/css"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An internal stylesheet example</title>
<style type="text/css" id="internalStyle">
  code {
    color: green;
    font-family: monospace;
    font-weight: bold;
  }
</style>
</head>
<body>
<p>
  W3CGroup为大家介绍16条兼容XHTML与HTML的指引!
<code>http://www.w3cgroup.com/article.asp?id=252</code>.
</p>
</body>
</html>

15.需要注意HTML和XML中的空白字符。有些在HTML文档中合法的字符,到了XML里可能就不合法了,如,在HTML中,换页符(Formfeed character U+000C)被解析为空格,而在XHTML中,由于XML的字符定义,它变得不合法。

16注意特殊字符&apos;(省略号,U+0027)在XML1.0中有介绍,但却没有出现在HTML中,使用&#39;替换&apos;则可在HTML4中使用。

七 什么是XHTML?XHTML有什么优点?
 1.    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中的一种。

阅读更多
个人分类: 网海拾贝
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭