XHTML教程(1)

声明:本套教程为本人学习记录用,教程来自W3school站,原文请点击:http://www.w3school.com.cn/xhtml/xhtml_html.asp

【1】XHTML 与HTML的不同

最主要的不同:

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

元素必须被正确地嵌套

在 HTML 中,某些元素可以像这样彼此不正确地嵌套:

<b><i>This text is bold and italic</b></i>

在 XHTML 中,所有的元素必须像这样彼此正确地嵌套:

<b><i>This text is bold and italic</i></b>

提示:在嵌套列表中一个容易犯的错误,是忘记内部列表必须位于 li 元素中,就像下面这样:

这是错误的:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>
</ul>

这是正确的:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

注意:在正确代码的例子中,我们在 </ul> 之后插入了一个 </li> 标签。

XHTML 元素必须被关闭

非空标签必须使用结束标签。

这是错误的:

<p>This is a paragraph
<p>This is another paragraph

这是正确的:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

空标签也必须被关闭

空标签也必须使用结束标签,或者其开始标签必须使用/>结尾。

这是错误的:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

这是正确的:

A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML 元素必须小写

XHTML 规范定义:标签名和属性对大小写敏感。

这是错误的:

<BODY>
<P>This is a paragraph</P>
</BODY>

这是正确的:

<body>
<p>This is a paragraph</p>
</body>

XHTML 文档必须拥有一个根元素

所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下:

<html>
<head> ... </head>
<body> ... </body>
</html>

【2】XHTML 的语法

编写 XHTML 代码需要纯净的 HTML 语法。

更多的 XHTML 语法规则:
  • 属性名称必须小写
  • 属性值必须加引号
  • 属性不能简写
  • 用 Id 属性代替 name 属性
  • XHTML DTD 定义了强制使用的 HTML 元素

属性名称必须小写

这是错误的:

<table WIDTH="100%">

这是正确的:

<table width="100%">

属性值必须加引号

这是错误的:

<table width=100%>

这是正确的:

<table width="100%">

属性不能简写

这是错误的:

<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>

这是正确的:

<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />

下面是一个 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”

用 id 属性代替 name 属性

HTML 4.01 针对下列元素定义 name 属性:a, applet, frame, iframe, img, 和map。

在 XHTML 中不鼓励使用 name 属性,应该使用 id 取而代之。

这是错误的:

<img src="picture.gif" name="picture1" />

这是正确的:

<img src="picture.gif" id="picture1" />

重要的兼容性提示:

你应该在 “/” 符号前添加一个额外的空格,以使你的 XHTML 与当今的浏览器相兼容。

语言属性(Lang)

Lang 属性应用于几乎所有的 XHTML 元素。它定义元素内部的内容的所用语言的类型。

如果在某元素中使用 lang 属性,就必须添加额外的 xml:lang,像这样:

<div lang="no" xml:lang="no">Heia Norge!</div>

强制使用的 XHTML 元素

所有 XHTML 文档必须进行文件类型声明(DOCTYPE declaration)。在 XHTML 文档中必须存在html、head、body元素,而 title 元素必须位于在 head 元素中。

下面是一个最小化的 XHTML 文件模板:

<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>

<body>
</body>

</html>

提示:文件类型声明并非 XHTML 文档自身的组成部分。它并不是 XHTML 元素,也没有关闭标签。

提示:在 XHTML 中,<html> 标签内的 xmlns 属性是必需的。然而,即使当 XHTML 文档中没有这个属性时,w3.org 的验证工具也不会提示错误。这是因为,”xmlns=http://www.w3.org/1999/xhtml” 是一个固定的值,即使你没有把它包含在代码中,这个值也会被添加到 <html> 标签中。

【3】XHTML DTD

XHTML 定义了三种文件类型声明。

使用最普遍的是 XHTML Transitional。

<!DOCTYPE> 是强制使用的。

一个 XHTML 文档有三个主要的部分:

  • DOCTYPE
  • Head
  • Body

基本的文档结构是这样的:

<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>

在 XHTML 文档中,文档类型声明总是位于首行。

一个 XHTML 的实例

这个一个简单的(最小化的) XHTML 文档:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

文档类型声明定义文档的类型:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

文档的其余部分类似 HTML:

<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

3种文档类型声明

  • DTD 规定了使用通用标记语言(SGML)的网页的语法。
  • 诸如 HTML 这样的通用标记语言应用使用 DTD 来规定应用于某种特定文档中的标签的规则,这些规则包括一系列的元素和实体的声明。
  • 在通用标记语言(SGML)的文档类型声明或 DTD 中,XHTML 被详细地进行了描述。
  • XHTML DTD 使用精确的可被计算机读取的语言来描述合法的 XHTML 标记的语法和句法。

存在三种XHTML文档类型:

  • STRICT(严格类型)
  • TRANSITIONAL(过渡类型)
  • FRAMESET(框架类型)

XHTML 1.0 的三种 XML 文档类型

XHTML 1.0 规定了三种 XML 文档类型,以对应上述三种 DTD。

XHTML 1.0 Strict

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在此情况下使用:需要干净的标记,避免表现上的混乱。请与层叠样式表配合使用。

XHTML 1.0 Transitional

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在此情况下使用:当需要利用 HTML 在表现上的特性时,并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。

XHTML 1.0 Frameset

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

在此的情况下使用:需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。