认识XHTML1.0

来源：互联网发布：自媒体写作软件编辑：程序博客网时间：2024/06/03 19:32

一 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.若要显示【<】【>】【&】的话, 需以其它值输入
例如要显示< >于网页中的话, 需填入：
< >
若要显示&于网页中的话
错误：&
正确：&
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.使用&替代属性值中的&符号，如：
http://www.w3cgroup.com/default.asp?CateID=2&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注意特殊字符'（省略号，U+0027）在XML1.0中有介绍，但却没有出现在HTML中，使用'替换'则可在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中的一种。