替代HTML的下一代WEB标记语言XHTML

最近开始逐渐在开发Web项目中使用更加规范的XHTML来替换html,收集整理了一些XHTML的资料和大家分享。
通过使用XHTML开发的web项目,您可以通过访问 http://validator.w3.org/ 来对您的页面进行验证,看是否满足W3C对XHTML规范的要求。我的这个BLOG使用了国外的WordPress,它就是基于XHTML标准来编写的,不过由于我后来增加了不少别人或者自己写的插件,这些插件在部分地方没有严格满足XHTML规范,所以在w3.org的验证上不能完全通过:(
本文是针对W3C相关规范文章资料的翻译。

XHTML 介绍

XHTML is a stricter and cleaner version of HTML.
XHTML是更严密代码更整洁的HTML版本

What Is XHTML?
XHTML是什么?
XHTML是具有延伸性的超文本标记语言
出现XHTML目的就是要替代HTML
XHTML和HTML4.01几乎相同
XHTML是更严密代码更整洁的HTML版本
XHTML的定义形同将HTML视为XML(从代码的结构上)
XHTML是W3C的推荐标准

What You Should Already Know
学习前你应该知道些什么
Before you continue you should have a basic understanding of the following:
在继续你的学习前你应该有下列知识的基础:

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的最新版本。XHTML将逐渐替代HTML

Stay updated with the latest web standards with our W3C tutorial.
WEB标准的最新和更新信息尽在我们的 W3C 教程

All New Browsers Support XHTML
所有新型的浏览器都支持XHTML
XHTML is compatible with HTML 4.01.
XHTML与HTML4.01是兼容的

All new browsers have support for XHTML.
所有新型的浏览器都支持XHTML

W3Schools Has Converted To XHTML
W3S网站已经转换成XHTML
XHTML is a reformulation of HTML 4.01 in XML, and can be put to immediate use with existing browsers by following a few simple guidelines.
XHTML是XML形式的HTML4.01,可以通过一些指示直接用于现有的浏览器中。

W3Schools was completely rewritten to XHTML 1.0 in 1999.
W3S在1999年完整的重构成XHTML1.0

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部分

为什么使用XHTML

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代码在浏览器中运作依然正常,即使它没有遵循HTML规则

[coolcode lang=”html”]


This is bad HTML

Bad HTML

[/coolcode]
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.
今日市场包括不同的浏览器技术,一些浏览器运作在网上的电脑,一些运作在可上网的手机和手提电脑上,最后要说明的是它们都没有足够的资源或能去解释一种“糟糕的”标记语言

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给你一个写出“合格”文档的机会,使这些文档能够在所有的浏览器中查看,并且有良好的向后兼容性。

XHTML 与 HTML之间的区别

You can prepare yourself for XHTML by starting to write strict HTML.
你可以开始通过书写严格的HTML代码来为你的XHML之行做好准备

How To Get Ready For XHTML
如何为XHTML做准备呢?
XHTML is the next generation of HTML, but it will of course take some time before browsers and other software products are ready for it.
XHTML是HTML的下一代语言,但它将理所当然的在新的浏览器和其他的相关软件产品出现之前延迟一段时间才能普及。

In the meantime there are some important things you can do to prepare yourself for it. As you will learn from this tutorial, XHTML is not very different from HTML 4.01, so bringing your code up to 4.01 standards is a very good start. Our complete HTML 4.01 reference can help you with that.
其间,去做一些重要的事情来为它做准备。就像你可以从这教程学到东西一样,XHTML与HTML4.01相差不多,所以把你的代码改写成符合HTML4.01标准是一种非常好的开始,我们完整的HTML4.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代码,并且永远不要再像以前那样有跳过像

这样的结尾标签的坏习惯。

Happy coding!
快乐的编码!

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中一些元素可以不使用正确的相互嵌套像这样:

[coolcode]This text is bold and italic[/coolcode]
In XHTML all elements must be properly nested within each other like this:
在XHTML所有元素必须合理的相互嵌套像这样:

[coolcode]This text is bold and italic[/coolcode]
Note: A common mistake in nested lists, is to forget that the inside list must be within a li element, like this:
注意:在列表嵌套的时候经常会犯一个错误,就是忘记了在列表中插入的新列表必须在一个< li >标记中,像这样:

[coolcode]

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

This is correct:
这才是正确的:

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

Notice that we have inserted a

tag after the

tag in the “correct” code example.
在这段正确的代码示例中,要注意在

之后加了一个

标签
[/coolcode]

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 > 根标签之中。所有其他的标签可以有自己的子标签。位于父标签之内的子标签也必须成对且正确的嵌套使用。一个网页的基本结构是:

[coolcode]




[/coolcode]

Tag Names Must Be In Lower Case
标签名称必须是小写
This is because XHTML documents are XML applications. XML is case-sensitive. Tags like < br > and
are interpreted as different tags.
这是因为XHTML文档是XML应用程序,XML是区分大小写的,像

会被认为是两种不同的标签。

This is wrong:
这是错误的:

[coolcode]

This is a paragraph



[/coolcode]
This is correct:
这是正确的:
[coolcode]

This is a paragraph


[/coolcode]

All XHTML Elements Must Be Closed
所有的XHTML元素必须关闭
Non-empty elements must have an end tag.
非空元素必须有关闭标签。

This is wrong:
这是错误的:
[coolcode]

This is a paragraph

This is another paragraph
[/coolcode]
This is correct:
正确是这样:
[coolcode]

This is a paragraph

This is another paragraph

[/coolcode]

Empty Elements Must Also Be Closed
空的元素也必须关闭
Empty elements must either have an end tag or the start tag must end with />.
空的元素也必须有一个结束标签或者开始标签用/>结束。

This is wrong:
这是错误的:
[coolcode]
This is a break
Here comes a horizontal rule:


Here’s an image Happy face
[/coolcode]
This is correct:
这是正确的:
[coolcode]
This is a break

Here comes a horizontal rule:


Here’s an image Happy face
[/coolcode]

IMPORTANT Compatibility Note:
注意兼容性的关键:
[coolcode]
To make your XHTML compatible with today’s browsers, you should add an extra space before the “/” symbol like this:
, and this:


.
为了使你的XHTML能够兼容现在的浏览器,你必须在/符号之前加一个特殊的空格,就像这样:
和这样:


[/coolcode]

XHTML 语法

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:
这是错误的:

[coolcode]

[/coolcode]
This is correct:
这是正确的:
[coolcode]

[/coolcode]

Attribute Values Must Be Quoted
属性值必须带上双引号
This is wrong:
这是错误的:
[coolcode]

[/coolcode]
This is correct:
这是正确的:
[coolcode]

[/coolcode]

Attribute Minimization Is Forbidden
不允许属性简写
This is wrong:
这是错误的:
[coolcode]


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:
这是错误的:
[coolcode]

[/coolcode]
This is correct:
这是正确的:
[coolcode]

[/coolcode]
Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:
注意:为了版本比较低的浏览器,你应该同时使用name和id属性,并使它们两个的值相同的,像这样:
[coolcode]

[/coolcode]
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属性,像这样:
[coolcode]

Heia Norge!

[/coolcode]

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文档模板
[coolcode]



Title goes here

Body text goes here

[/coolcode]
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”是一个固定的值,即使你的文档里没有包含它,它也会自动加上的。

You will learn more about the XHTML document type definition in the next chapter.
在下章节你将学习到更多有关XHTML文档类型定义

XHTML DTD

The XHTML standard defines three Document Type Definitions.
XHTML标准定义了三种文档类型定义

The most common is the XHTML Transitional.
最普遍的是XHTML过渡型类型定义

The < !DOCTYPE> Is Mandatory
< !DOCTYPE>是强制性的
An XHTML document consists of three main parts:
一个XHTML文档由下面三个主要方面构成

the DOCTYPE
文档类型
the Head
头部信息
the Body
主干部分
The basic document structure is:
文档基本构架:

[coolcode]







[/coolcode]
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文档:
[coolcode]



simple document

a simple paragraph



[/coolcode]
The DOCTYPE declaration defines the document type:
文档类型声明定义了文档的类型:
[coolcode]

[/coolcode]
The rest of the document looks like HTML:
剩下的文档内容看起来就像HTML:
[coolcode]


simple document

a simple paragraph



[/coolcode]

The 3 Document Type Definitions
三种文档类型定义
DTD specifies the syntax of a web page in SGML.
DTD指明了在SGML(通用标记语言标准)中网页的语法
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是通过SGML应用程序来使用的,就像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:
当前有3类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
XHTML1.0严格型
[coolcode]

[/coolcode]
Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.
当你想要真正整洁干净的标签,并要避免表现层混乱的时候,就让它和CSS一起使用。

XHTML 1.0 Transitional
XHTML1.0 过渡型
[coolcode]

[/coolcode]
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.
当你需要利用HTML的表现层优势或当你想支持那些不支持CSS的浏览器的时候可以使用这个类型。

XHTML 1.0 Frameset
XHTML 1.0框架集型
[coolcode]

[/coolcode]
Use this when you want to use HTML Frames to partition the browser window into two or more frames.
当你使用HTML框架把一个浏览器窗口分割成两个或多个的时候使用这个类型

怎样转换成XHTML?

How W3Schools Was Converted To XHTML
W3S是怎么转换成XHTML的?
W3Schools was converted from HTML to XHTML the weekend of 18. and 19. December 1999, by Hege Refsnes and S. Refsnes.
W3S是在1999年12月周末的18和19号由Hege Refsnes and S.Refsnes.完成HTML到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声明:

[coolcode]

[/coolcode]
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可能会掉下来并看起来和设想的不同(总之就是不加DOCTYPE就有可能显示不太正常的意思)。

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标签和属性后一个查找所有大写标签并替换成小写标签的工作开始了。对那些属性名称也是这样。在WEB中我们就已经习惯使用小写属性名称所以这类的工作量实际上并不大。

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

tags in lists.
这些结束后,所有的页需经过这条连接来通过W3C官方的校验器:XHTML 校验器

Should we have used a converting tool? Well, we could have used TIDY.
我们是否应该使用一个转换工具呢?可以啊,使用 TIDY.
有关TIDY可以去w3c.org上下载。

版权 © 2020 李俊麟 — Lyrical WordPress theme by GoDaddy