Xhtml 简明教程
XHTML - Syntax
XHTML 语法与 HTML 语法非常相似,几乎所有有效的 HTML 元素在 XHTML 中也都是有效的。但是当你编写 XHTML 文档时,你需要多加留意一点,以使你的 HTML 文档符合 XHTML。
XHTML syntax is very similar to HTML syntax and almost all the valid HTML elements are valid in XHTML as well. But when you write an XHTML document, you need to pay a bit extra attention to make your HTML document compliant to XHTML.
以下是在编写新 XHTML 文档或将现有 HTML 文档转换为 XHTML 文档时要记住的重要事项 −
Here are the important points to remember while writing a new XHTML document or converting existing HTML document into XHTML document −
-
Write a DOCTYPE declaration at the start of the XHTML document.
-
Write all XHTML tags and attributes in lower case only.
-
Close all XHTML tags properly.
-
Nest all the tags properly.
-
Quote all the attribute values.
-
Forbid Attribute minimization.
-
Replace the name attribute with the id attribute.
-
Deprecate the language attribute of the script tag.
以下是上述 XHTML 规则的详细说明 −
Here is the detail explanation of the above XHTML rules −
DOCTYPE Declaration
所有 XHTML 文档都必须在开头有一个 DOCTYPE 声明。有三种类型的 DOCTYPE 声明,将在 XHTML 文档类型一章中详细讨论。以下是如何使用 DOCTYPE 的示例 −
All XHTML documents must have a DOCTYPE declaration at the start. There are three types of DOCTYPE declarations, which are discussed in detail in XHTML Doctypes chapter. Here is an example of using DOCTYPE −
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Case Sensitivity
XHTML 是一种区分大小写的标记语言。所有 XHTML 标签和属性都必须仅以小写书写。
XHTML is case sensitive markup language. All the XHTML tags and attributes need to be written in lower case only.
<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>
示例中, Href 和锚标签 A 不是小写,因此不正确。
In the example, Href and anchor tag A are not in lower case, so it is incorrect.
Closing the Tags
每个 XHTML 标签都应有一个等效的结束标签,即使为空元素也应有结束标签。以下示例显示了使用标签的有效和无效方式 −
Each and every XHTML tag should have an equivalent closing tag, even empty elements should also have closing tags. Here is an example showing valid and invalid ways of using tags −
<!-- This is invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.
<!-- This is also invalid in XHTML -->
<img src="/images/xhtml.gif" >
以下语法显示了用 XHTML 正确编写上面标签的方法。不同之处在于,我们在这里正确地关闭了这两个标签。
The following syntax shows the correct way of writing above tags in XHTML. Difference is that, here we have closed both the tags properly.
<!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>
<!-- This is also valid now -->
<img src="/images/xhtml.gif" />
Attribute Quotes
所有 XHTML 属性值都必须加引号。否则,你的 XHTML 文档将被视为无效文档。以下示例显示了语法 −
All the values of XHTML attributes must be quoted. Otherwise, your XHTML document is assumed as an invalid document. Here is the example showing syntax −
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50" />
Attribute Minimization
XHTML 不允许属性最小化。这意味着你需要明确指定属性及其值。以下示例显示了区别 −
XHTML does not allow attribute minimization. It means you need to explicitly state the attribute and its value. The following example shows the difference −
<!-- This is invalid in XHTML -->
<option selected>
<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">
以下是 HTML 中的最小化属性以及你必须在 XHTML 中编写它们的列表 −
Here is a list of the minimized attributes in HTML and the way you need to write them in XHTML −
HTML Style |
XHTML Style |
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
id 属性替换了 name 属性。XHTML 倾向于使用 id = "id",而不是使用 name = "name"。以下示例显示了如何 −
The id attribute replaces the name attribute. Instead of using name = "name", XHTML prefers to use id = "id". The following example shows how −
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" id="xhtml_logo" />
The language Attribute
script 标签的 language 属性已弃用。以下示例显示了此差异 −
The language attribute of the script tag is deprecated. The following example shows this difference −
<!-- This is invalid in XHTML -->
<script language="JavaScript" type="text/JavaScript">
document.write("Hello XHTML!");
</script>
<!-- Correct XHTML way of writing this is as follows -->
<script type="text/JavaScript">
document.write("Hello XHTML!");
</script>
Nested Tags
您必须正确嵌套所有 XHTML 标签。否则,您的文档将被假设为不正确的 XHTML 文档。以下示例显示了语法 −
You must nest all the XHTML tags properly. Otherwise your document is assumed as an incorrect XHTML document. The following example shows the syntax −
<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>
<!-- Correct XHTML way of writing this is as follows -->
<b><i> This text is bold and italic</i></b>
Element Prohibitions
以下元素不允许在其内部有任何其他元素。此禁止适用于所有嵌套深度。这意味着,它包括所有后代元素。
The following elements are not allowed to have any other element inside them. This prohibition applies to all depths of nesting. Means, it includes all the descending elements.
Element |
Prohibition |
<a> |
Must not contain other <a> elements. |
<pre> |
Must not contain the <img>, <object>, <big>, <small>, <sub>, or <sup> elements. |
<button> |
Must not contain the <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> or <isindex> elements. |
<label> |
Must not contain other <label> elements. |
<form> |
Must not contain other <form> elements. |
A Minimal XHTML Document
以下示例向您展示了 XHTML 1.0 文档的最小内容 −
The following example shows you a minimum content of an XHTML 1.0 document −
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
<head>
<title>Every document must have a title</title>
</head>
<body>
...your content goes here...
</body>
</html>