web学习之xhtml基础教程

2018-05-22 本文已影响45人 AR7_

一、XHTML简介

XHTML 是更严格更纯净的 HTML 代码。

XHTML 是什么？

XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是作为一种 XML 应用被重新定义的 HTML。
XHTML 是一个 W3C 标准。

之前应该掌握的知识

HTML
基本的网站建设知识。

XHTML 是一个 W3C 标准

XHTML 于2000年的1月26日成为 W3C 标准。
W3C 将 XHTML 定义为最新的HTML版本。XHTML 将逐渐取代 HTML。

所有新的浏览器都支持 XHTML

XHTML 与 HTML 4.01 兼容。
所有新的浏览器都支持 XHTML。

二、为什么要使用XHTML？

XHTML 是 HTML 与 XML（扩展标记语言）的结合物。
XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。

为什么要使用XHTML？

我们认为万维网上的许多页面都包含着糟糕的 HTML 代码。
下面的 HTML 代码仍然可以工作得很好，即使它没有遵守 HTML 规则：

<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>

XML 是一种标记化语言，其中所有的东西都要被正确的标记，以产生形式良好的文档。
XML 用来描述数据，而 HTML 则用来显示数据。
今天的市场中存在着不同的浏览器技术，某些浏览器运行在计算机中，某些浏览器则运行在移动电话和手持设备上。而后者没有能力和手段来解释糟糕的标记语言。
因此，通过把 HTML 和 XML 各自的长处加以结合，我们得到了在现在和未来都能派上用场的标记语言 - XHTML。
XHTML 可以被所有的支持 XML 的设备读取，同时在其余的浏览器升级至支持 XML 之前，XHTML 使我们有能力编写出拥有良好结构的文档，这些文档可以很好地工作于所有的浏览器，并且可以向后兼容。

三、XHTML 与 HTML 之间的差异

通过开始编写严格的 HTML，你可以为 XHTML 做好准备。

如何为 XHTML 做好准备

XHTML 与 HTML 4.01 标准没有太多的不同。所以将你的代码升级至 4.01 是个不错的开始。我们的完整的《HTML 4.01 参考手册》会帮助你做到这一点。另外，你应该马上使用小写字母编写HTML代码，同时绝不要养成忽略类似 </p> 标签的坏习惯。

最主要的不同：

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>

四、XHTML 语法

编写 XHTML 代码需要纯净的 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 中的改写：

用 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> 标签中。

五、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框架将浏览器窗口分割为两部分或更多框架时。

六、如何升级至 XHTML？

如何将你的网站升级至 XHTML ？

为了将站点从 HTML 转换为 XHTML，你首先应该熟悉前几章讲解的 XHTML 语法规则。下面讲解具体的步骤。

添加文件类型声明

将下面的文件类型声明添加至每页的首行：

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

本站 (w3school) 使用的是严格的 DTD。不过使用过渡的 DTD 也是个不错的选择，因为对于大多数入门的开发人员来说，严格的 DTD 可能显得“太严格了”。

关于文件类型声明的一点提示

如果你希望将页面验证为正确的 XHTML，那么页面中必须含有文件类型声明。
需要注意的是，根据不同的文件类型声明，新式的浏览器对文档的处理方式也是不同的。如果浏览器读到一个文件类型声明，那么它会按照“恰当”的方式来处理文档。如果没有 DOCTYPE，文档也许会以截然不同的方式显示出来。

小写的标签和属性名

由于 XHTML 对大小写敏感，同时也由于 XHTML 仅接受小写 HTML 标签和属性名，因此你可以执行一个简单的搜索和替换命令将所有的大写标签改为小写。对属性名也要做同样的处理。我们一直在自己的网站使用小写字母，因此基本上，替换功能没有太多地派上用场。

给所有属性加上引号

由于 W3C XHTML 1.0 标准中要求所有的属性值都必须加引号，所以，如果以前没有注意到这个细节，你需要逐页地对网站进行检查。这是一项费时的工作，所以绝不要再忘记为属性值加引号了。

空标签：<hr > , <br > 和 <img>

在 XHTML 中是不允许使用空标签（Empty tags）的。<hr > 和 <br > 标签应该被替换为 <hr /> 和 <br />。
这样做又产生了一个新问题，Netscape 会误读 <br />(/之前本没有空格)标签。我们不清楚原因所在，不过将之改为 <br />后就没有问题了。认识到这一点后，你需要再一次通过搜索和替换功能对标签进行更改。
其他一些标签（比如 <img> 标签）也会碰到上述同样的问题。不要使用闭合标签来关闭 <img>，而是要在标签的末端添加 / >。

验证站点

做完所有这一切以后，使用下面的链接根据官方的 W3C DTD 对所有修改过的页面进行验证： XHTML Validator。接下来，可能还会有少数的错误被发现，逐一对这些错误进行（手工地）修正。我们的经验是，最容易犯的错误是在列表中漏掉了 </li> 标签。
我们应该使用转换工具吗（比方说 TIDY）？对，我们本可以使用 TIDY。
Dave Raggett 的 HTML TIDY是用来清理HTML代码的免费工具。在处理那些由专门的 HTML 代码编辑器和转换工具生成的难以阅读的HTML代码方面，TIDY 还是做得很棒的。同时，它可以帮助你发现站点中哪些地方需要投入更多精力，使得对于残疾人士，网页具有更强的易用性。
我们没有使用 Tidy 是出于什么原因呢？当我们开始创建这个网站时，我们已经对 XHTML 非常地熟悉。当时我们已经知道使用小写标签以及为属性加引号。所以在网站测试的过程中，我们只是简单地通过 W3C 的 XHTML 验证器进行了测试，并修正了少许的错误。更重要的是，我们已经学到了很多关于编写 Tidy 式 HTML 代码的知识。

七、XHTML 验证

XHTML 文档是根据文档类型声明进行验证的。

通过 DTD 验证 XHTML

XHTML 文档是根据文档类型声明（DTD）进行验证的。只有将正确的 DTD 添加到文件的首行，XHTML 文件才会被正确地验证。
严格 DTD 包含没有被反对使用的或不出现在框架结构中的元素和属性：

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

过渡 DTD 包含严格 DTD 中的一切，外加那些不赞成使用的元素和属性。

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

框架 DTD 包含过渡 DTD 中的一切，外加框架。

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

这个一个简单的 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>

八、XHTML 模块

HTML 模块化模型定义了 XHTML 的模块。

XHTML 模块化的原因

XHTML 是简单而庞大的语言。XHTML 包含了网站开发者需要的大多数功能。
对于某些特殊的用途，XHTML 太大且太复杂，而对于其他的用途，它又太简单了。
通过将 XHTML 分为若干模块，W3C 已经创造出数套小巧且定义良好的 XHTML 元素，这些元素既可被独立应用于简易设备，又可以与其他 XML 标准并入大型且更复杂的应用程序。
通过使用模块化的 XHTML，产品和软件设计者可以：
- 选择被某种设备所支持的元素。
- 在不打破 XHTML 标准的情况下，使用 XML 对 XHTML 进行扩展。
- 针对小型设备，对 XHTML 进行简化。
- 通过添加新的 XML 功能（比如 MathML, SVG, 语音和多媒体），针对复杂的应用对 XHTML 进行扩展。
- 定义 XHTML 框架，比如 XHTML BASIC （针对移动设备的 XHTML 子集）。

XHTML 模块

W3C 已将 XHTML 的定义分为28种模型：

九、XHTML 标准属性

HTML 标签拥有属性。每个标签的特殊属性均被列于每个标签描述之下。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。

核心属性 (Core Attributes)

以下标签不提供下面的属性：base, head, html, meta, param, script, style, 以及 title 元素。

语言属性 (Language Attributes)

以下标签不提供下面的属性：base, br, frame, frameset, hr, iframe, param, 以及 script 元素。

键盘属性 (Keyboard Attributes)

十、XHTML 事件属性

HTML 4.0 的新特性之一是使 HTML 事件触发浏览器中的行为，比方说当用户点击一个 HTML 元素时启动一段 JavaScript 。以下就是可被插入 HTML 标签以定义事件行为的一系列属性。
假如你希望学习如何使用这些事件进行编程，那么你应该学习我们的 JavaScript 教程和 DHTML 教程。

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。

表单元素事件 (Form Element Events)

仅在表单元素中有效。

键盘事件 (Keyboard Events)

在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。

鼠标事件 (Mouse Events)

在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。

十一、你已经学习了XHTML，现在还需要学习什么呢？

XHTML 概要

本教程已经向你教授了如何创建更严谨纯净的 HTML 页面。
你已经知道所有的 XHTML 元素都必须被正确地嵌套，XHTML 必须拥有良好的结构，所有的标签必须小写，并且所有的 XHTML 元素必须被关闭。
你也学到了所有的 XHTML 文档必须拥有 DOCTYPE 声明，并且 html、head、title 和 body 元素必须存在。
如果需要关于 XHTML 的更多信息，请查看我们的 XHTML 参考手册。

课外阅读

如果希望继续深入学习 XHTML，请务必阅读 w3school 提供的 XHTML 课外书：

现在你已经学会了 XHTML，下一步学习什么呢？

下一步你需要学习 CSS 和 JavaScript 。

CSS

CSS 被用于在同时控制多重页面的样式和布局。
通过使用 CSS，所有的格式化任务均可被移出 HTML 文档，并存储于一个独立的文件中。
在不把文档内容搞乱的情况下，CSS 允许你对布局进行完全地控制。
请访问我们的《CSS 教程》，来学习如何创建样式表。

JavaScript

JavaScript 可使网站的动态性更强。
当你仅仅想展示固定不变的内容时，静态站点是不错的。然而动态站点可以对事件作出响应，并允许用户进行交互。
JavaScript 是因特网上最流行的脚本语言，并且它可以运行于所有的主流浏览器。
请访问我们的《JavaScript 教程》，来学习更多关于 JavaScript 的知识。

web学习之xhtml基础教程

一、XHTML简介

XHTML 是什么？

之前应该掌握的知识

XHTML 是一个 W3C 标准

所有新的浏览器都支持 XHTML

二、为什么要使用XHTML？

为什么要使用XHTML？

三、XHTML 与 HTML 之间的差异

如何为 XHTML 做好准备

最主要的不同：

元素必须被正确地嵌套

XHTML 元素必须被关闭

空标签也必须被关闭

XHTML 元素必须小写

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

四、XHTML 语法

更多的 XHTML 语法规则：

属性名称必须小写

属性值必须加引号

属性不能简写

用 id 属性代替 name 属性

重要的兼容性提示：

语言属性（lang）

强制使用的 XHTML 元素

五、XHTML DTD

<!DOCTYPE> 是强制使用的。

一个 XHTML 的实例

3种文档类型声明

存在三种XHTML文档类型：

XHTML 1.0 的三种 XML 文档类型

XHTML 1.0 Strict

XHTML 1.0 Transitional

XHTML 1.0 Frameset

六、如何升级至 XHTML？

如何将你的网站升级至 XHTML ？

添加文件类型声明

关于文件类型声明的一点提示

小写的标签和属性名

给所有属性加上引号

空标签：<hr > , <br > 和 <img>

验证站点

七、XHTML 验证

通过 DTD 验证 XHTML

八、XHTML 模块

XHTML 模块化的原因

XHTML 模块

九、XHTML 标准属性

核心属性 (Core Attributes)

语言属性 (Language Attributes)

键盘属性 (Keyboard Attributes)

十、XHTML 事件属性

窗口事件 (Window Events)

表单元素事件 (Form Element Events)

键盘事件 (Keyboard Events)

鼠标事件 (Mouse Events)

十一、你已经学习了XHTML，现在还需要学习什么呢？

XHTML 概要

课外阅读

现在你已经学会了 XHTML，下一步学习什么呢？

CSS

JavaScript

猜你喜欢

热点阅读