XHTML[转]
XHTML 介绍
w3pop.com / 2006-09-22
XHTML是更严密代码更整洁的HTML版本 .
What Is XHTML?
什么是XHTML?
- XHTML stands for EXtensible HyperText Markup Language
XHTML是具有延伸性的超文本标记语言 - XHTML is aimed to replace HTML
出现XHTML目的就是要替代HTML - XHTML is almost identical to HTML 4.01
XHTML和HTML4.01几乎相同 - XHTML is a stricter and cleaner version of HTML
XHTML是更严密代码更整洁的HTML版本 - XHTML is HTML defined as an XML application
XHTML的定义形同将HTML视为XML(从代码的结构上) - XHTML is a W3C Recommendation
XHTML是W3C的推荐标准
What You Should Already Know
学前应具备知识
Before you continue you should have a basic understanding of the following:
学习XHTML前应具备的知识
- HTML and the basics of building web pages
HTML以及制作WEB页面的基础
If you want to study HTML first, please read our HTML tutorial.
如想要先学习下HTML,可以阅读我们的HTML教程
XHTML is a W3C Recommendation
XHTML是W3C的推荐标准
XHTML 1.0 became a W3C Recommendation January 26, 2000.
2000年1月26日XHTML1.0成为W3C的推荐标准之一
A W3C Recommendation means that the specification is stable, that it has been reviewed by the W3C membership, and that the specification is now a Web standard.
成为W3C的推荐标准意味着其规格已经稳定,W3C成员组也已经认可,已正式成为WEB标准
W3C defines XHTML as the latest version of HTML. XHTML will gradually replace HTML.
W3C表态XHTML作为最新版本的HTML会逐渐取代HTML
All New Browsers Support XHTML
新的浏览器都支持XHTML
XHTML is compatible with HTML 4.01.
XHTML与HTML4.01是相互兼容的
All new browsers have support for XHTML.
所有较新的浏览器都支持XHTML
W3pop使用的是XHTML
A click on this symbol: validates the XHTML part of this page.
点击该标记: 检验此页面是否符合XHTML标准
A click on this symbol: validates the CSS part of this page.
点击该标记: 检验此页的CSS部分
About This Tutorial
有关此教程
The next chapters of this tutorial will explain:
下个章节将介绍以下内容:
- Why you should use XHTML
使用XHTML的原因 - The syntax of XHTML
XHTML语法 - How to converted to XHTML
如何转换为XHTML - XHTML validation
XHTML校验 - XHTML modularization
XHTML模块
为什么使用 XHTML
w3pop.com / 2006-09-22
XHTML is a combination of HTML and XML (EXtensible Markup Language).
XHTML是HTML和XML(可扩展标记语言)的组合
XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML.
XHTML将XML的语法和所有HTML4.01的元素结合起来
Why XHTML?
为什么使用XHTML?
We have reached a point where many pages on the WWW contain "bad" HTML.
可以注意到网上有许多"糟糕(代码乱糟糟)"的HTML页面
The following HTML code will work fine if you view it in a browser, even if it does not follow the HTML rules:
以下并未遵循语法规则的代码在浏览器中依然能够正确的显示:
<html> |
XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents.
XML是一种合理使用标记的语言(对标记的规范性十分的严格)
XML was designed to describe data and HTML was designed to display data.
XML被用来描述数据而HTML则被用来显示数据(一个内容一个外表)
Today's market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a "bad" markup language.
目前市场上有多种浏览器技术,有运行在普通PC机上的,手机或其他一些移动设备上的等等,要说明的是请别让任何一款浏览器花费更多的资源来解释"糟糕"的标记语言
Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future - XHTML.
因此,通过HTML和XML的结合,发挥它们各自的长处,就获得了现在并且在将来都实用的标记语言-XHTML
XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers and that are backward browser compatible !!!
等到其它浏览器都升级至支持XML的时候,XHTML能够被所有支持XML的设备读取,现在XHTML给你一个“加工”HTML文档的机会,让这些文档能够在所有的浏览器中查看,并且有良好的向后兼容性。
XHTML 对比 HTML
w3pop.com / 2006-09-22
You can prepare yourself for XHTML by starting to write strict HTML.
你可以开始通过书写严密的HTML代码来为你的XHML之旅做好准备
How To Get Ready For XHTML
怎样为XHTML做好准备
XHTML is not very different from HTML 4.01, so bringing your code up to the 4.01 standard is a good start. Our complete HTML 4.01 reference can help you with that.
XHTML与HTML的区别并不是很大,因此熟悉HTML4.01标准代码对学习XHTML来讲非常有意义。W3S提供的HTML 4.01 参考可以帮助你熟悉它们
In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER make the bad habit of skipping end tags like the </p>.
补充一下,你现在就应该开始习惯使用小写标签书写HTML代码,还有千万别漏掉结束标签。
The Most Important Differences:
最主要的区别:
- XHTML elements must be properly nested
XHTML元素必须合理嵌套 - XHTML documents must be well-formed
XHTML文档形式上必须符合规范 - Tag names must be in lowercase
标签必须使用小写 - All XHTML elements must be closed
所有的XHTML元素都必须有始有终
Elements Must Be Properly Nested
元素必须合理嵌套
In HTML some elements can be improperly nested within each other like this:
在HTML中一些元素可以不使用正确的相互嵌套:
<b><i>This text is bold and italic</b></i> |
In XHTML all elements must be properly nested within each other like this:
在XHTML中所有元素必须合理的相互嵌套:
<b><i>This text is bold and italic</i></b> |
Note: A common mistake in nested lists, is to forget that the inside list must be within a li element, like this:
注:在列表嵌套的时候经常会犯一个错误,就是忘记了在列表中插入一新列表必须嵌在<li>标记中:
<ul> |
This is correct:
这才是正确的:
<ul> |
Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.
在这段正确的代码示例中,</ul>后面加入了</li>标签
Documents Must Be Well-formed
文档形式上必须符合规范
All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:
所有的XHTML元素必须被嵌在<html> 根元素之中。所有其它的元素可以有自己的子元素。位于父元素之内的子元素必须成对出现且使用正确的嵌套。文档的基本构架为:
<html> |
Tag Names Must Be In Lower Case
标签必须使用小写
This is because XHTML documents are XML applications. XML is case-sensitive. Tags like <br>
and <BR>
are interpreted as different tags.
因为XHTML文档是XML应用产物,XML是区分大小写的,所以<br>和<BR>会被认为是两种不同的标签。
This is wrong:
这就是错误的:
<BODY> |
This is correct:
这才是正确的:
<body> |
All XHTML Elements Must Be Closed
所有的XHTML元素都必须有始有终
Non-empty elements must have an end tag.
非空元素必须得有结束标签
This is wrong:
这是错误的写法:
<p>This is a paragraph |
This is correct:
这是正确的:
<p>This is a paragraph</p> |
Empty Elements Must Also Be Closed
空标签也得关闭
Empty elements must either have an end tag or the start tag must end with />
.
空标签同样也得关闭,可以是在开始标签后加上/>
This is wrong:
这是错误的写法:
This is a break<br> |
This is correct:
正确的是这样:
This is a break<br /> Here's an image <img src="happy.gif" alt="Happy face" /> |
IMPORTANT Compatibility Note:
重要的兼容性注意点:
To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol like this: <br />, and this: <hr />.
要让你的XHTML和目前的浏览器兼容,你就应该为类似<br />和<hr /> 这样的标签在"/"前加上额外的空格
XHTML 语法
w3pop.com / 2006-09-22
Writing XHTML demands a clean HTML syntax.
XHTML要求书写整洁的HTML语法
Some More XHTML Syntax Rules:
更多XHTML语法规则:
- Attribute names must be in lower case
属性名称必须小写 - Attribute values must be quoted
属性值使用双引号 - Attribute minimization is forbidden
不允许简写属性 - The id attribute replaces the name attribute
用id属性来替换name属性 - The XHTML DTD defines mandatory elements
XHTML DTD 用来定义必要的元素
Attribute Names Must Be In Lower Case
属性名称必须小写
This is wrong:
这是错误的:
<table WIDTH="100%"> |
This is correct:
正确的应该是这样:
<table width="100%"> |
Attribute Values Must Be Quoted
属性值使用双引号
This is wrong:
这是错误的:
<table width=100%> |
This is correct:
正确的应该是这样:
<table width="100%"> |
Attribute Minimization Is Forbidden
不允许简写属性
This is wrong:
这是错误的:
<input checked> |
This is correct:
正确的应该是这样:
<input checked="checked" /> |
Here is a list of the minimized attributes in HTML and how they should be written in XHTML:
这是在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" |
The id Attribute Replaces The name Attribute
id属性替换name属性
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.
对于a, applet, frame, iframe, img和map元素,HTML 4.01中定义了name属性,而在XHTML中是不能这样做的,应该用id来代替。
This is wrong:
这是错误的:
<img src="picture.gif" name="picture1" /> |
This is correct:
这是正确的:
<img src="picture.gif" id="picture1" /> |
Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:
注: 针对版本比较低的浏览器,应该同时使用name和id属性,并使它们两个的值相同,像这样:
<img src="picture.gif" id="picture1" name="picture1" /> |
IMPORTANT Compatibility Note:
兼容提示:
To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol.
要让XHTML兼容当前的浏览器应该在/标记前添加空格
The Lang Attribute
Lang 属性
The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element.
lang属性可以应用于几乎所有的XHTML元素。它能指定元素中内容的使用语言
If you use the lang attribute in an element, you must add the xml:lang attribute, like this:
如果要在元素中使用lang属性,就必须加上xml:lang属性,像这样:
<div lang="no" xml:lang="no">Heia Norge!</div> |
Mandatory XHTML Elements
必要的XHTML元素
All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element.
所有XHTML文档都必须有 DOCTYPE(文档类型) 声明. 文档内必须含有html,head,body元素,而且title元素必须出现在head元素内.
This is a minimum XHTML document template:
微型 XHTML 文档样本:
<!DOCTYPE Doctype goes here> <body> </html> |
Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag.
注: DOCTYPE声明并不是XHTML文档自身的一部分。它也不属于XHTML元素,不需要有关闭标签。
Note: The xmlns attribute inside the <html> tag is required in XHTML. However, the validator on w3.org does not complain when this attribute is missing in an XHTML document. This is because "xmlns=http://www.w3.org/1999/xhtml" is a fixed value and will be added to the <html> tag even if you do not include it.
注: XHTML文档要求xmlns属性出现在html标签中。然而,w3.org的校验器不会由于这个属性没有出现在你的XHTML文档中而报告错误。这是因为"xmlns=http://www.w3.org/1999/xhtml"是一个固定的值,即使你的文档里没有包含它,它也会自动加上的。
XHTML DTD
w3pop.com / 2006-09-22
The XHTML standard defines three Document Type Definitions.
XHTML标准制订了三种文档类型定义
The most common is the XHTML Transitional.
使用最普遍的是XHTML过渡型类型
<!DOCTYPE> Is Mandatory
必须得有<!DOCTYPE>
An XHTML document consists of three main parts:
XHTML文档主要由下面三个方面构成
- the DOCTYPE
- the Head
- the Body
The basic document structure is:
基本的文档结构为:
<!DOCTYPE ...> |
The DOCTYPE declaration should always be the first line in an XHTML document.
文档声明必须出现在XHTML文档的首行。
An XHTML Example
XHTML实例
This is a simple (minimal) XHTML document:
这是一个简单的(迷你型的)XHTML文档:
<!DOCTYPE html |
The DOCTYPE declaration defines the document type:
DOCTYPE声明定义文档类型:
<!DOCTYPE html |
The rest of the document looks like HTML:
余下部分看上去就像HTML:
<html> |
The 3 Document Type Definitions
三类文档类型定义
- DTD specifies the syntax of a web page in SGML.
DTD具体指定了页面中的语法 - DTD is used by SGML applications, such as HTML, to specify rules that apply to the markup of documents of a particular type, including a set of element and entity declarations.
DTD被用作指定文档中使用的标签以及元素集的规则,例如HTML - XHTML is specified in an SGML document type definition or 'DTD'.
XHTML被指定在SGML中的文档类型或'DTD' - An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.
XHTML DTD所描述的XHTML标签是精确的,计算机易读性好的,语法和文理都合适的
There are currently 3 XHTML document types:
当前的三类 XHTML 文档类型:
- STRICT
严密型 - TRANSITIONAL
过渡型 - FRAMESET
框架型
XHTML 1.0 specifies three XML document types that correspond to three DTDs: Strict, Transitional, and Frameset.
XHTML1.0指定三类XML文档与之对应的是三类DTD:严密类,过渡类和框架类
XHTML 1.0 Strict
XHTML 1.0 严密型
<!DOCTYPE html |
Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.
当你想要从以前那种混乱的观念中解脱出来,并想要真正整洁的代码的话,就使用这个DTD。并将它和样式表一起使用
XHTML 1.0 Transitional
XHTML 1.0 过渡型
<!DOCTYPE html |
Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.
使用这个DTD可以发挥一些HTML的优势或者当你想要支持一些不支持样式表的浏览器时也可以使用这个。
XHTML 1.0 Frameset
XHTML 1.0 框架型
<!DOCTYPE html |
Use this when you want to use HTML Frames to partition the browser window into two or more frames.
当你想要使用HTML的框架就用这个DTD
怎样转换成 XHTML
w3pop.com / 2006-09-22
怎样转换成XHTML
To convert a Web site from HTML to XHTML, you should be familiar with the XHTML syntax rules of the previous chapters. The following steps were executed (in the order listed below):
要将一个HTML网站转换成XHTML,你应该熟悉前几章节所提到的XHTML语法。然后依照下面的步骤来做:
A DOCTYPE Definition Was Added
添加DOCTYPE定义
The following DOCTYPE declaration was added as the first line of every page:
在每个页的首行添加如下DOCTYPE声明:
<!DOCTYPE html PUBLIC |
Note that we used the transitional DTD. We could have chosen the strict DTD, but found it a little too "strict", and a little too hard to conform to.
注意我们使用的是过渡型的DTD。我们可以选择严密型的 DTD,但它的要求有点过于严格,想完全地去遵循它有些困难。
A Note About The DOCTYPE
有关DOCTYPE所要注意的
Your pages must have a DOCTYPE declaration if you want them to validate as correct XHTML.
想要让你的页都成为有效的XHTML就必须有DOCTYPE声明。
Be aware however, that newer browsers (like Internet Explorer 6) might treat your document differently depending on the <!DOCTYPE> declaration. If the browser reads a document with a DOCTYPE, it might treat the document as "correct". Malformed XHTML might fall over and display differently than without a DOCTYPE.
然而需要明白的是,比较新的浏览器(像IE6)会对你文档里的DOCTYPE有不同的处理。如果浏览器读到一个含有DOCTYPE声明的文档,它或许能 “正确”处理文档。然而不使用DOCTYPE的XHTML就有可能会导致显示内容的下滑或看上去的效果和设想中的不同
Lower Case Tag And Attribute Names
小写标签和属性名称
Since XHTML is case sensitive, and since XHTML only accepts lower case HTML tags and attribute names, a general search and replace function was executed to replace all upper case tags with lowercase tags. The same was done for attribute names. We have always tried to use lower case names in our Web, so the replace function did not produce many real substitutions.
自从XHTML区分大小写并只接受小写HTML标签和属性后,查找所有大写标签并替换成小写标签的工作开始了。对那些属性名称也是这样。如在代码书写中已经习惯使用小写属性名称那这类工作实际上量度并不大。
All Attributes Were Quoted
所有属性值加上引号
Since the W3C XHTML 1.0 Recommendation states that all attribute values must be quoted, every page in the web was checked to see that attributes values were properly quoted. This was a time-consuming job, and we will surely never again forget to put quotes around our attribute values.
W3C 表示XHTML1.0中所有属性值都必须被引号括起来,所以每个页都需要检查,这是项消耗时间的工作,以后应该避免出现这类问题。
Empty Tags: <hr> , <br> and <img>
空标签: <hr> , <br> 和 <img>
Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br />.
在XHTML中不允许有空标签.像<hr>和<br>应该用<hr />和<br />来替换
This produced a problem with Netscape that misinterpreted the <br/> tag. We don't know why, but changing it to <br /> worked fine. After that discovery, a general search and replace function was executed to swap the tags.
用<br/>标签的话会在网景浏览器中出现错误。我们不需要知道为什么会出现错误,使用<br />来解决这个问题(br后多加个空格)。
A few other tags (like the <img> tag) were suffering from the same problem as above. We decided not to close the <img> tags with </img>, but with /> at the end of the tag. This was done manually.
一些其它的标签(像<img>标签)会出现像上面一样的问题.不要用</img>来关闭<img>标签,可以通过标签的末尾使用 /> 来解决。
The Web Site Was Validated
校验网站
After that, all pages were validated against the official W3C DTD with this link: XHTML Validator. A few more errors were found and edited manually. The most common error was missing </li> tags in lists.
以上任务完成后,所有的页需经过这条连接来通过W3C官方的校验: XHTML Validator
XHTML 校验
w3pop.com / 2006-09-22
An XHTML document is validated against a Document Type Definition.
依靠文档类型定义来校验XHTML文档。
Validate XHTML With A DTD
通过DTD校验XHTML
An XHTML document is validated against a Document Type Definition (DTD). Before an XHTML file can be properly validated, a correct DTD must be added as the first line of the file.
要正确校验XHTML文件就必须在首行加入恰当的DTD。
The Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets:
严密型DTD包括非框架或非不赞成的元素和属性(只包含完全符合标准规范的元素和属性):
!DOCTYPE html PUBLIC |
The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes:
过渡型可包含所有严密型DTD所不赞成使用的元素和属性:
!DOCTYPE html PUBLIC |
The Frameset DTD includes everything in the transitional DTD plus frames as well:
框架型可包含过渡型所有的元素和属性同时能够使用框架:
!DOCTYPE html PUBLIC |
This is a simple XHTML document:
简单的XHTML文档实例:
<!DOCTYPE html |