HTML 4.0规范参考

超文本标记语言HTML（HyperText Markup Language）是Web的信息出版语言，是设计制作Web页面的基础。HTML文档通过标记和属性对超文本的语义进行描述。

HTML经过数年的发展，其版本不断升级，获得广泛应用的是HTML 3.2。1997年7月8日，WWW联盟（W3C）发布了HTML 4.0。经过5个月的评估，W3C最近正式批准HTML 4.0作为Internet标准。

HTML 4.0可能是HTML 2以来取得的最富实质性进展的一次版本升级。除了增强HTML以前版本所支持的文本、多媒体和超链接等特性外，HTML 4.0支持更多的多媒体选项、更多的脚本语言、更强的打印机制，同时它还支持样式表（style sheets），并使HTML文档更便于身体有残疾的用户访问。为了使Web真正实现面向全球（World Wide），HTML 4.0还在文档国际化方面迈出了较大步伐，多语言支持能力大大增强。利用HTML4.0，不仅能够制作更加丰富、更加复杂的页面，提高了页面设计者对页面的控制能力，而且确保了不同浏览器浏览页面时显示效果的一致性。

目前，Microsoft Internet Explorer 4.0和Netscape Navigator 4.0已经能够支持HTML 4.0的某些特性。相信W3C正式批准HTML 4.0以后，它一定能够获得广泛的应用。

本文根据W3C发布的HTML 4.0规范（Specification）编写。全文较长，共分四个部分：1. HTML 4.0概述；2. HTML4.0文档结构；3. HTML 4.0文档表述；4. HTML 4.0交互文档。

1 HTML 4.0概述

本节对HTML 4.0进行一般性概述，包括HTML 4.0设计原则、文档设计原则、文档字符集及数据结构等内容，并简单介绍HTML 4.0中的几个基本概念。

1.1 HTML 4.0设计原则

W3C在设计HTML 4.0时，制定了如下设计原则。

1.  互操作性

大概所有的人都会同意，HTML文档在不同的浏览器和平台下都应该能够正常工作，以达到高度互操作性。如果互操作性不能达成，内容提供者就必须开发不同版本的文档，势必造成较高开发成本，Web就会蜕变成格式互不兼容的专有世界，从而极大地降低Web的商业潜能。

HTML的每一版本都努力使业界保持高度一致，以保护内容提供者的投资，并使他们的文档不会在短期内变得不可访问。HTML 4.0更是如此。

HTML的另一个设计思想是使所有类型的设备都能使用Web上的信息。这些设备包括带图形显示的PC（其显示分辩率和颜色深度可以各不相同）、细胞电话、手持设备、输入和输出语音设备、高或低带宽的计算机等等。

2.  国际化

HTML 4.0非常注重文档的国际化。W3C甚至专门邀请国际化领域的专家前来帮助进行国际化工作。目的是要使HTML文档可以每一种语言书写，并易于传输到全世界的每一个角落。HTML 4.0已将处理HTML国际化问题的RFC2070完全融入。

HTML采用ISO/IEC:10646标准作为HTML文档字符集，这是HTML 4.0国际化处理的重要一步。ISO 10646是世界上包容最广泛的国际语言标准，可处理国际化字符集、文本方向、标点符号及其他世界语言问题。

现在HTML能够在文档中更好地支持不同的人类语言。这样，搜索引擎可进行效率更高的检索，也能实现高质量的文档印刷、文本到语音的转换及正确断字等。

3.  可访问性

Web社会逐渐形成，其成员在能力和技巧上存在很大不同，因此在底层技术上适应他们的特定需要是非常重要的。HMTL应尽量使Web页面更适于那些身体受限的人访问。HTML 4.0在页面的可访问性方面作了以下改进：

• 鼓励使用样式表（style sheets）而不是表格（tables）来达到布局效果。
• 更易于为图象设置文本或听觉方式的说明，以利非可视化浏览器使用。
• 为表单字段提供主动式标志（active label）和标志化的层次性分组。
• 提供将较长的文本描述与HTML元素关联的能力。

注重文档可访问性的页面作者将不仅享受到可访问性方面的好处，而且也会带来其他便利：区分文档结构和文档表述的良好HTML文档将更易于适应新技术。

4.  表格功能

HTML新的表格模型是根据RFC1942设计的。页面作者现对表格结构和布局（例如列分组）有较强的控制能力。设计者推荐列宽的功能可使用户程序（浏览器等）逐步显示表格数据，而不是象目前这样需要下载整个表格才能处理。

5.  合成式文档

HTML 4.0提供将通用媒体对象和应用程序嵌入到HTML文档的标准机制。OBJECT元素可将图象、视频、声音、数学公式、特殊应用及其他对象插入到文档中。它还允许文档作者为不支持特定功能的用户程序指定变通处理方法。

6.  支持样式表

样式表可简化HTML标记，极大地减轻HTML表述的负担。样式表使作者和用户都能控制文档的表述，例如字体信息、对齐方式和颜色等。

样式信息可以：

• 附加到特定元素上，以影响其内容的颜色或字体等。
• 放置在文档标题中，以一序列样式构成样式表。
• 从外部样式表链接到HTML中。

建立样式表与文档的关联时，其机制与样式表语言无关。

7.  脚本功能

通过脚本程序，文档作者可创建对用户填写进行积极反应的“智能表单（smart form）”。脚本允许设计者创建动态Web页面，并可将HTML作为建构网络应用程序的手段。将HTML与脚本进行关联的机制不依赖于特定脚本语言。

8.  智能打印

HTML功能使用户程序能够以一种智能方式打印若干文档。这种智能方式可根据文档中描述的关系进行。

9.  易于使用

HTML 4.0仍然保持易于学习、适于许多公共页面出版需求的特点。它提供的较复杂结构（例如表单、脚本等）可用来完成困难任务，但即使是这些机制也将变得非常易于使用，因为功能强大的HTML写作工具正在获得空前发展。

1.2  HTML 4.0文档设计原则

采用HTML 4.0后，要设计和实现一个好的HMLT文档，应遵循几个基本原则：

1.  将文档结构和文档表述分开

HTML起源于SGML，而SGML是指定结构化标记的一种语言。对HTML自身， 越来越多的表述元素和属性被其他机制（例如样式表）取代。经验表明，将文档结构与文档表述分开可降低适应不同平台、媒体等的开销，并使文档修改变得容易。

2.  考虑面向Web的通用可访问性

为了使Web能够使每个人都能访问，特别是为了使残疾人也能访问，页面作者应该考虑尽可能让文档适于语音浏览器、盲人读者这样一类平台。HTML 4.0并不因此限制人们的创造性，只是说在页面设计中应该充分考虑替换方法。HTML为此目的提供一许多机制（例如ALT属性、ACCESSKEY属性等）。

另外，文档作者还应该记住，Web页面可能被遥远的读者使用不同配置的机器调阅，为此文档得以正确解释，在文档中应该包括语言和文本方向信息、文档编码方式以及相关的国际化信息。

3.  帮助用户程序实现逐步显示

HTML 4.0提供了表格等设计的新功能，文档设计者应该帮助应用程序实现逐步显示，以便快速有效地利用Web。

1.3 HTML 4.0的几个基本概念

1.  块级元素与行内元素

HTML 4.0在使用SGML（它可理解为定义标记语言的语言）进行自己的文档类型定义（DTD, Document Type Definition）时，将元素分为块级元素（Block-level element）和行内元素（Inline element）两大类，绝大部分元素属于这两类中的一类。行内元素也称文本级元素（Text level element）。

块级元素与行内元素的基本区别表现在：

• 内容模型不同。一般来说，块级元素可包含行内元素和其他块级元素，而行内元素通常只能包含数据和其他行内元素。或者通俗地说，块级元素定义较大的文档结构，而行内元素通常涉及较小的文档片断。
• 格式化方式不同。默认情况下，块级元素与行内元素的格式化方式不同。块级元素通常会开始一个新行，而行内元素通常不会。块级元素有能力中断一个未结束的段落元素，因而在很多情况下可删除段落结束标记。简单地讲，块级元素是段落级别的元素，而行内元素的管辖范围不超过自己所在的行。
• 方向性不同。HTML 4.0支持从左至右和从右至左两种文字方向。由于技术原因（UNICODE的双向算法），块级元素和行内元素在继承文字方向性信息时方式不同。

2.  几个定义

以下是HTML 4.0规范中经常使用的几个通用术语。

• 用户程序（User agent）。用户程序是解释HTML文档的任何设备。它是一个总称，包括可视化浏览器（ASCII方式或图形方式）、非可视化浏览器（声音或盲文）、搜索机器人（search robot）以及代理程序（proxy）等。对于普通使用场合，用户程序实际上通常是指浏览器或搜索引擎。
• 不建议使用的（Deprecated）。不建议使用的元素或属性是指在HTML 4.0的体系结构中已过时的元素或属性。它们仍有存在的必要，但通常可用新的方法取代。在将来的HTML版本中它们可能会被废除。
• 废除的（Obsolete）。HTML 4.0规范废除了一些元素或属性，它们在以后的用户程序中不会得到支持。

1.4 HTML 4.0文档字符集

人类的语言丰富多彩。人们使用了大量的文本字符，并发明了种类繁多的计算机字符表示法。为了使World Wide Web真正World Wide，HTML必须能够表达所有人类语言。HTML使用复杂的字符表示方法来保证这一点。

1.  文档字符集

为了保证互操作性，SGML要求其每种应用（包括HTML）都要定义文档字符集（document character set），作为其定义的一部分。文档字符集包括一套抽象字符集（能够表达诸如俄文字母或中文汉字这样的字符）和与之对应的一套整数集。SGML认为，一份文档是一个文档字符集的序列。

HTML的文档字符集是ISO 10646规定的通用字符集UCS（Universal Character Set）。这套字符集字符与字符一一对应于Unicode 2.0。随着新字符的不断出现，这两个标准也在不断改进和更新。

为了使用HTML用户程序（浏览器等）能够正确接收或输出文档，必须使用字符编码（character encoding）。字符编码是文档字符集的子集。常用的字符编码包括：ISO-8859-1（通常称为Latin-1），它可对大部分欧洲语言进行编码；ISO-8859-5，它支持西里尔字母（用于俄、保等国文字）；SHIFT-JIS和euc-jp是两种日文编码方案；gb_2312或gb_2312-80是中文编码方案。这几套编码只使用了文档字符集的一部分，因而可以节省带宽。

由于有了字符编码，HTML文档作者就可以用文档字符的子集进行工作，例如可用中文写作HTML文档。文档作者不必知晓底层的文档字符编码。中国人使用UTF-8（支持多国文字）编辑器和使用纯正的中文编辑器同样简单。

为了实现这一点，用户程序（浏览器）必须正确地将UNICODE字符与所用的字符编码进行对应。实现这一点的基础是：Web服务器根据HTTP协议发送HTML文档时，会使用HTTP头标Content-Type字段中的charset参数指明所用的字符编码方式。例如，下面的HTTP头标指定字符编码方式为“gb_2312-80”。

Content-Type: text/html; charset=gb_2312-80

其中charset参数必须是RFC 2045中规定的字符集之一。

但是，并不是所有Web服务器都会发送字符编码信息。因此HTML规定了一种方法，使HTML文档作者有可能自行告知用户程序（浏览器）所用的字符编码。这就是HTML的META元素。例如，如果要将当前文档的字符编码方式指定为gb_2312-80，就可以在HTML文档中包括以下META声明：

<META http-equiv="Content-Type" Content="text/html; charset=gb_2312-80">

当然这种方法也有局限。如果浏览器不知道所指定的编码方式，就不能正确解释META元素，也就无法确定编码方式。

2.  字符实体

计算机的软硬件配置可能让人无法通过简单方法输入Unicode字符。因此，SGML提供了一种与字符编码无关的机制，可以用来指定文档字符集中的任何字符。这种机制就是字符实体（Character entities）。

字符实体分为数字字符引用（Numeric character reference，可为十进制或十六进制形式）和命名字符引用（Named character reference）两种。

数字字符引用用整数来指明Unicode字符。数字字符引用的用法格式为 &#D，其中D指Unicode十进制字符数；或者&#xH，其中H为Unicode十六进制字符数。十六进制字符表示是一种新的SGML规定，因为字符标准用十六进制表示，所以特别有用。

以下是一些数字字符引用的示例：

• 实体“å”指字符å (小写字母a上加一小圈，用于挪威语等)；
• 实体“å”指十六进制表示的同名字符；
• 实体“И”指西里尔字母Ι；
• 实体“水”指中文字符“水”。

为了更便于表示文档字符中的字符实体，HTML提供了一套命名字符实体（named character entities），可用符号名称代替整数引用。例如，命名实体“å”与Unicode字符“å”相同，但西里尔字母Ι没有命名实体。

由于HTML占用了一些字符作为标记等语法规则的保留字符，这些字符也需要用命名字符实体来表示。例如，引号（”）用“&quot;”表示，& 号用“&amp;”表示，小于号（<）用“&lt;”表示，大于号（>）用“&gt;”表示。

命名字符实体的名称是区分大小写的，这与HTML元素和属性不同。因此，实体“&Aring;”指字符Å，而实体“&aring;”则是字符å。

SGML中，在某些情况下（例如行结束处或标记之前）可以删去数字或命名字符引用中的分号（;）。但建议在任何情况下都保留此分号，以免引起问题。

1.5 HTML 4.0数据类型

HTML中包含以下基本数据类型。

1.  URL

数据类型url指绝对或相对通用资源定位符（Universal Resource Locator）。

2.  字符数据

HTML的合法字符数据以SGML的NAME和CDATA概念来定义。

• NAME。SGML命名标记必须以字母开始（A~Z，a~z），其后可接任何数量的字母、数字、连字符和句点。
• CDATA。对于属性值，它指文档字符集中的字符序列，其中可包括字符实体。用户程序（浏览器等）在进一步处理属性值前必须解析CDATA。

3.  颜色

HTML中使用的颜色可用颜色十六进制的RGB值（其前加 # 号）表示，也可用颜色名表示。因此，颜色值“#800080”和颜色名“Purple”都表示紫色。

HTML使用的颜色及其对应的RGB值如表1。

虽然颜色能够增加文档的信息量和可读性，但在文档中使用颜色也需要注意一些问题，其中包括：

• 在HTML 4.0中，将指定颜色的元素和属性标明为“不建议使用的”。HTML 4.0中加强了STYLE元素，可在其中设置包括颜色在内的许多属性。
• 某些颜色组合会给色盲的人造成困难。
• 如果使用背景图象或设置背景颜色，则要注意小心设置文本颜色。
• 指定的颜色在不同的平台（如工作站、Macintosh、Windows平台）和不同的显示设备（LCD或CRT）上显示效果不尽相同，因此不可能准确指定一种效果。将来的HTML颜色模型会改进这一问题。
• 使用颜色时，应尽可能采用常用的颜色组合，以免使用户混淆。除非所希望的效果正好使用户分辩不清。

颜色	颜色名和RGB值	备注	颜色	颜色名和RGB值	备注
	Black = “#000000”	黑色		Green = “#008000”	绿色
	Silver = “#C0C0C0”	银灰色		Lime = “#00FF00”	草绿色
	Gray = “#808080”	灰色		Olive = “#808000”	橄榄色
	White = “#FFFFFF”	白色		Yellow = “#FFFF00”	黄色
	Maroon = “#800000”	紫酱色		Navy = “#000080”	藏蓝色
	Red = “#FF0000”	红色		Blue = “#0000FF”	蓝色
	Purple = “#800080”	紫色		Teal = “#008080”	黑绿色
	Fuchsia = “#FF00FF”	紫红色		Aqua = “#00FFFF”	海蓝色

4. 长度和象素

“length”这种数据类型的值可以按两种方式指定，一种是表示画面（屏幕或纸张）象素点数的整数，另一种是可用水平或垂直空间的百分比。HTML DTD中通常用%Length来表示允许百分比值，而用%Pixels表示只允许象素值。

因此，值“50”表示是50个象素点。对于宽度，值“50%”表示可用水平空间（页边距间的距离，表格单元格宽度等）的一半。对于高度，值“50%”表示可用垂直空间（当前窗口或当前表格单元格等）高度的一半。

2 HTML 4.0文档结构

2.1 文档总体结构

同以前的版本的HTML一样，HTML 4.0文档的总体结构由版本信息行、HTML标题（header）和文档主体（body）三部分组成。

一、HTML版本信息

HTML中用SGML DOCTYPE结构来指定所用的HTML版本。对于HTML 4.0，文档作者应该在每个文档的第一行插入以下形式的版本信息。

对于HTML 4.0规范草案：

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">

对于HTML 4.0正式规范：

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">

或

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

对于严格限制遵守HTML 4.0规范的情况：

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

对于在W3C Web站点上验证DTD（文档类型定义）的情况：

   <!DOCTYPE HTML SYSTEM "http://www.w3.org/MarkUp/Cougar/relaxed.dtd">

对于在W3C Web站点上严格验证DTD的情况：

   <!DOCTYPE HTML SYSTEM "http://www.w3.org/MarkUp/Cougar/strict.dtd">

二、HTML元素

HTML 4.0仍然是规定每个文档可以用<HTML>开始、</HTML>结束（可以不写），且文档主体内可包括HEAD、BODY（或FRAMESET）等主要元素。

HTML 4.0的HTML元素支持以下属性：

• version = url：指定当前文档所遵从的HTML版本DTD的URL位置。由于在文档版本信息中已规定同一信息，所以这一属性的作用尚不确定。
• lang：指定语言信息。
• dir：指定文本方向。

三、HEAD元素

HEAD元素的基本作用与以前版本的HTML相同，它主要用来指定文档的标题信息和文档信息。HEAD元素的起始标记和结束标记也仍然是可选的。

HEAD元素支持以下属性：

• profile = url：指定元数据（meta data）概况文件（profile）所在的位置。它可以指定多个，其间以空格分开。概况文件稍候将作较详细的讨论。
• lang：指定语言信息。
• dir：指定文本方向。

HEAD元素包含当前文档的有关信息，例如文档标题、供搜索引擎使用的关键词以及不适于作为文档内容的其他信息等。

1.  文档标题

TITLE元素的基本作用仍与从前一样，指定文档的标题。浏览器通常将其内容显示在窗口标题栏中。

每个文档只能有一个TITLE元素。TITLE标记中可包含字符实体，但不能包含其他标记。

TITLE元素也支持lang属性（语言信息）和dir属性（文本方向）。

与TITLE元素相关的是title属性。title属性提供相关元素的附加信息。TITLE元素提供整个文档的标题信息，在文档中只能出现一次；而title属性则可使用于许多元素。用户程序（浏览器）对title属性的值可采取不同的处理方式。例如，可视化浏览器通常将其显示为“工具提示”，而声音浏览器则可能将其朗读出来。

作为示例，对链接使用title属性可让浏览器告知用户链接资源的实质内容：

Here's a photo of <A href="http://someplace.com/neatstuff.gif" title="Me scuba diving"> me scuba diving last summer </A>

title属性对于通过LINK元素指定外部样式表有特殊的作用，详见 §19.1。

2.  元信息

HTML 4.0允许文档作者通过下列方式指定文档的元数据：

• 引用外部概况文件（external profile）。概况文件中可定义一些文档特性（例如文档作者、版权、关键字等），帮助搜索引擎对文档进行检索。概况文件可用HEAD元素的profile属性指定。
• 直接设置文档特性的值。这可以通过两种方式进行：在文档内部，使用META元素；在文档外部，通过LINK元素链接元数据。

META元素的基本规则与HTML 3.2相同，可用来描述文档特性（property），例如文档作者、过期日期和关键字等，并给这些特性赋值。META元素需要使用起始标记，禁止使用结束标记。它支持以下属性：

• name = cdata：指定特性（property）名。（cdata为字符数据类型，详见 §11.2.4。）
• content = cdata：指定特性值。
• scheme = cdata：命名一个用来解释特性值的方案（scheme）。
• http-equiv = cdata：HTTP服务器用此属性收集HTTP响应头标。
• lang：指定语言信息。
• dir：指定文本方向。

name、content和lang属性配合使用的示例：

   <META name="Author" content="John">
   <META name="Author" lang="zh" content="约翰">
   <META name="refresh" content="3,http://www.bh.com/index.html">

http-equiv可用来代替name属性，并且对于通过HTTP获取文档具有重要意义。HTTP服务器可使用http-equiv属性指定的特性名来创建HTTP响应头标。例如下例

   <META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

将产生如下HTTP头标：

   Expires: Tue, 20 Aug 1996 14:25:27 GMT

META元素另一个非常有用的方面是可以为搜索引擎提供关键词，以便改进搜索结果的质量。几个META标记可联合提供与语言有关的文档信息，搜索引擎可过滤其lang属性，以便按用户希望的语言显示搜索结果。例如：

   <META name="keywords" lang="en" content="vacation,Greece,sunshine">
   <META name="keywords" lang="fr" content="vacances,Gr&egrave;ce,soleil">

使用LINK元素还可进一步改进搜索引擎的效力。可用LINK元素链接到文档其他语言的译本、其他媒体（如PDF格式）的文档版本，当文档由多个部分组成时，还可用LINK元素链接到适当的起点。

META元素中可包含PICS标志（label）。PICS是Platform for Internet Content Selection（Internet内容选择平台）的缩写，它可建立标志（元信息）与Internet内容的联系。PICS的初衷是帮助父母和教师控制儿童对Internet的访问，但也可用于其他用途，例如代码签字、隐私以及知识产权管理等。

下例说明了META元素中PICS 1.1标志的使用：

   <HEAD>
    <META http-equiv="PICS-Label" content='
    (PICS-1.1 "http://www.gcf.org/v2.5"
       labels on "1994.11.05T08:15-0500"
         until "1995.12.31T23:59-0000"
         for "http://w3.org/PICS/Overview.html"
       ratings (suds 0.5 density 0 color/hue 1))'>
   <TITLE>..title goes here..</TITLE>
   </HEAD>

META元素还可用于指定文档的默认信息，例如默认脚本语言、默认样式表语言、文档字符编码等。下例将文档的字符编码指定为ISO-8859-5：

   <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">

与元信息有关的还有元数据概况文件（meta data profile）。元数据概况文件在HEAD元素的profile属性中指定，其属性值是一个URL。用户程序（浏览器等）可按两种方式来使用这个URL：

• 作为全局唯一名。用户程序可以识别此名（而不必真正读取概况文件），并根据概况文件的已知惯例执行某一操作。例如，如果全部文档使用同一个表示目录项的概况文件，则搜索引擎可以通过文档目录提供搜索接口。
• 作为链接。用户程序解析URL，根据概况文件中的实际定义（例如在当前文档内验证概况文件的使用）执行某一操作。HTML 4.0没有定义这种概况文件的格式。

下面的示例引用了一个假设的概况文件，此文件定义用于文档检索的有用特性，包括author、copyright、keywords和date等，它们的值在META中声明：

   <HEAD profile="http://www.bh.com/profiles/core">
     <TITLE>怎样进行科技论文的写作</TITLE>
     <META name="author" lang="zh" content="张三">
     <META name="copyright" content="&copy; 1997 Bliss-Heart Corp.">
     <META name="keywords" lang="zh" content="科技论文,写作,指导">
     <META name="date" content="23 Jan 1997 16:05:31 GMT">
   </HEAD>

META元素的scheme属性用来标识content属性值的期望格式，适于一个特性支持多种格式的场合。scheme的可用属性值与特性名和概况文件有关。

下例的第一个META语句将scheme属性指定为杜威十进制系统（DDS, Dewey Decimal System），第二个META语句则指定了ISBN方案：

<META scheme="dds" name="description" content="04.251 Supercomputers systems design">
<META scheme="ISBN" name="identifier" content="0-8230-2355-9">

四、BODY元素

同以前一样，BODY元素指定文档的主体。文档主体是文档内容的所在，不同的用户程序对它可以有不同的处理方法。例如，可视化浏览器将文档主体显示在窗口内，包括文本、图象、颜色等无一例外；声音用户程序则将内容朗读出来。

在HTML 4.0中，样式表（style sheets）是推荐的文档表述方式，因此BODY元素原有的一些表述属性已不推荐使用。但如果希望在不支持样式表的用户程序中文档表述也能正确，则只好使用这些属性。

BODY元素的起始标记和结束标记都是可选的，在文档中可以不出现。

BODY元素现在支持很多属性。以前的HTML版本原有的属性background、text、link、vlink和alink等仍然支持，意义也没有变化但已不建议使用（deprecated）。其他属性包括（其中大部分属性的详细说明见相关内容）：

• id, class：文档内的标识符（identifier）。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：内联样式信息。
• bgcolor：背景色。
• onload, onunload：本征事件（intrinsic events）。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下例是不建议使用BODY属性的使用示例：

<HTML>
<HEAD>
  <TITLE>文档标题</TITLE>
</HEAD>
<BODY bgcolor="white" text="black" link="red" alink="fuschia" vlink="maroon">
  文档主体
</BODY>
</HTML>

使用样式表后，同样效果的使用示例为：

<HTML>
<HEAD>
  <TITLE>文档标题</TITLE>
  <STYLE type="text/css">
    BODY { background: white; color: black}
    A:link { color: red }
    A:visited { color: maroon }
    A:active { color: fuschia }
  </STYLE>
</HEAD>
<BODY>
  文档主体
</BODY>
</HTML>

链接样式表可在不修改文档的情况下改变文档的表述效果，其使用示例如下：

<HTML>
<HEAD>
  <TITLE>文档标题</TITLE>
  <LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
  文档主体
</BODY>
</HTML>

1.  元素标识：id和class属性

这两个属性的格式分别为：

  id = name
  class = cdata-list

id属性指定元素实例的标识，其值应该在文档范围内为唯一。另外，id属性应与name属性共享同一名字空间（name space）。

class属性给元素的特定实例赋予一个或数个类别。任意个元素可归于同一个或同一些类别。使用多个类名时，彼此以空白字符隔开。

id和class属性共同标识元素实例。id指定的标识符必须在文档内唯一，class指定的类别名可由数个元素实例共享。选择类别名时必须区分于此类别相关的元素的作用（如注解、示例或警告等）。

这两个属性可按以下方式使用：

• id属性可用作超链接的目的。
• 脚本可使用id属性来引用特定元素。
• 样式表可使用id属性对特定元素施加样式。
• id属性可用于标识OBJECT元素声明。
• 样式表可使用class属性对与此类别相关的一组元素施加样式，或对这些元素的子元素施加样式。
• id属性和class属性都可用于进一步处理目的，例如从HTML页面中抽取数据至数据库时用于标识字段，或将HTML文档翻译为其他格式时用于标识字段。

几乎所有的HTML元素都可以使用id属性和class属性来指定标识和类别名。

下面的示例假设需要编制一个关于编程语言的文档，其中包括大量预格式化的程序。示例中使用PRE元素来指定程序格式，并将属于example类别的PRE元素实例指定的背景色指定为绿色。

<HEAD>
  <STYLE
  PRE.example { background : green }
  </STYLE>
</HEAD>
<BODY>
  <PRE class="example" id="example-1">
  … example code here…
  </PRE>
</BODY>

2.  分组元素：DIV和SPAN元素

DIV和SPAN可以跟id属性和class属性一起，提供添加文档结构的一般机制。这是唯一的两个不给其内容添加表述HTML元素。因此，通过创建元素的实例和类别并且施加适当的样式，文档作者就可以根据自己的需要和口味设计有特色的HTML文档。

这两个元素都要求起始标记和结束标记。它们支持以下属性：

• id, class：文档内的元素标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：内联样式信息。
• align：对齐方式。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下例假设需要从客户信息数据库中生成一个文档，由于HTML中并没有任何元素能够标识client、telephone number和email address等对象，因此可以使用DIV和SPAN元素来定制HTML，使其适合需要。

<DIV id="client-petty" class="client">
<SPAN class="client-last-name">Last name:</SPAN> Petty,
<SPAN class="client-first-name">First name:</SPAN> Faith
<SPAN class="client-tel">Telephone:</SPAN> (86) 10-68765432
<SPAN class="client-email">Email:</SPAN> [email protected]
</DIV>
<DIV id="client-gates" class="client">
<SPAN class="client-last-name">Last name:</SPAN> Gates,
<SPAN class="client-first-name">First name:</SPAN> Bill
<SPAN class="client-tel">Telephone:</SPAN> (617) 555-1212
<SPAN class="client-email">Email:</SPAN> [email protected]. com
</DIV>

在此基础上，就可以很容易地给文档添加样式信息，以便更好地调整这些数据库项的表述。

HTML 4.0中将元素分为行内元素（inline element）和块级元素（block-level element）两大类。SPAN属于行内元素，指定若干词的类别或语言信息时，它可用于段落、列表项等元素之内。SPAN元素不能用于分组块级元素，而且在通过style属性或链接样式表等方法施加样式之前，它没有任何固有实现效果。

DIV则属于块级元素。它可以于分组其他块级元素，但不能用于段落元素内。如果将DIV元素放在没有结束标记的P元素后，此段落就会结束。

用户程序通常会在DIV元素的前后各加一个换行符。例如

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

的典型实现效果将是：

   aaaaaaaaa
   bbbbbbbbb
   ccccc
   ccccc

3.  标题：H1, H2, H3, H4, H5和H6元素

标题元素H1至H6的用法与原来基本相同，仍然要求使用起始标记和结束标记。但支持的属性有所增加：

• id, class：文档内的元素标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：内联样式信息。
• align：对齐方式。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下面的示例说明了DIV元素与文档章节标题的联合使用。可以使用样式表为章切定义样式（设置颜色、字体等）。

   <DIV class="section" id="forest-elephants" >
     <H1>Forest elephants</H1>
     In this section, we discuss the lesser-known forest elephants.
     ...this section continues...
     <DIV class="subsection" id="forest-habitat" >
       <H2>Habitat</H2>
       Forest elephants do not live in trees but among them.
       ...this subsection continues...
     </DIV>
   </DIV>

此文档结构可用样式信息进行修饰：

   <HEAD>
   <STYLE>
     DIV.section { text-align: justify; font-size: 12pt}
     DIV.subsection { text-indent: 2em }
     H1 { font-style: italic; color: green }
     H2 { color: green }
   </STYLE>
   </HEAD>

4.  ADDRESS元素

ADDRESS元素仍是用来给文档添加作者姓名和联系地址等信息。只是可以支持若干属性：

• id, class：文档内的元素标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

2.2  语言信息和文本方向

对语言信息和文本方向的有力支持是HTML 4.0的重要改进，是文档国际化的基本考虑。在HTML 4.0中，几乎每个元素都能支持lang属性和dir属性，这充分体现了W3C对国际化的高度重视。

一、lang属性：指定内容的语言

正如前面已多次提到的，HTML 4.0中指定文本内容语言的主要方法是使用lang属性。该属性的格式为：

lang = language-code

其中language-code为RFC 1766中所定义的语言代码。language-code不区分大小写，其中不允许出现空格，默认值是unknown。有关语言代码的详细内容请参考RFC 1766。

语言信息可以用多种方式控制标记文档的实现效果。语言信息的有效用途包括：

• 协助搜索引擎正确工作
• 帮助进行语音合成
• 为高质量印刷选择适当电子版式
• 正确解释不同语言的断字、连字和空格
• 帮助进行拼写检查和语法检查

lang属性的值是标识人们使用的自然语言语言代码，计算机语言不包括在内。根据RFC 1766，语言代码一般由基本码和子码组成，二者以连字符隔开，其中子码可以为空。例如：

• en：英语。
• en-US：美国英语。
• en-cockney：伦敦英语（伦敦话的英文词为Cockney）。

基本码为两个字母，使用ISO 639规定的语言缩写。常用的基本码有：FR (法语), DE (德语), IT (意大利语), NL (荷兰语), EL (希腊语), ES (西班牙语), PT (葡萄牙语), AR (阿拉伯语), HE (希伯来语), RU (俄语), ZH (汉语), JA (日语), HI (北印度语), UR (乌尔都语), SA (梵语)。

多数子码也是两个字符，实际就是ISO 3166规定的国家代码。

1.  语言代码的继承方法

HTML元素按下列顺序来继承语言代码信息（优先级由高到低）：

• 元素本身的lang属性设置。
• 全局性元素的lang属性设置（例如，嵌套元素继承其外部元素的lang属性）。
• HTTP的Content-Language头标，它可能对整个站点使用同一设置。例如：
     Content-Language: en-cockney
• HTML外部来源（例如用户程序默认值、用户偏好或HTTP头标）。

在下面的示例中，文档的基本语言被设置为法语（”fr”），其中一个段落则声明为西班牙语，此后基本语言又返回到法语（”es”），但又嵌入日文短语（”ja”）。

<HTML lang="fr">
<BODY>
……此处按法语解释……
<P lang="es">……此段按西班牙语解释……
<P>……现在又按法语解释……
<P>……法语文本<EM lang="ja">日文短语</EM>又是法语……
</BODY>
</HTML>

2.  语言代码的解释

用户程序应该将HTML文档中的语言代码解释为层次式记号（token）而不只是一个记号。当用户程序根据语言信息调整解释结果时（例如将样式表语言代码与lang属性值进行比较），它应该达到最佳匹配，但又应该考虑与基本代码的匹配。举例来说，如果在HTML元素中将lang属性值设置为en-US，则用户程序应该首先考虑与en-US相符的样式信息，然后再考虑值US。

对于某些人工自然语言（例如Elfish和Klingon），RFC 1766没有规定其语言代码。在RFC 1766的后续定义出台前，可使用x- 前缀（表示试验中），例如x-elfish。

二、dir属性：指定文本的方向

除指定文档的基本语言外，文档作者还需要指定整个文档的文本或部分文本的方向。因为世界上的文字有从左至右的，也有从右至左的。

UNICODE规范给Unicode字符赋予了方向性，并定义了确定文本适当方向的算法。如果文档中没有包含从右至左的字符，用户程序就不采用UNICODE双向算法；如果包含从右至左字符，而且用户程序选择显示这些字符，则用户程序就必须使用双向算法。

尽管Unicode已通过指定特殊字符的方法来处理文本方向，HTML则提供了较高层次的标记结构来处理同一问题：dir属性（注意不要与DIR元素搞混）和BDO元素。

dir属性的用法为：

   dir = LTR｜RTL

其中LTR指定从左至右（Left-To-Right）的文本，RTL指定从右至左（Right-To-Left）的文本。默认值为LTR。

采用HTML的标记表示文本方向显然比UNICODE方式更为直观。例如，如要表达希伯来引文，HTML表示为：

<Q lang="he" dir="rtl">...希伯来引文...</Q>

而Unicode引用方式则难于记忆和理解：

&#x202B;&#x05F4;…希伯来引文…&#x05F4;&#x202C;

1.  关于双向算法

下面通过示例说明双向算法（bidirectional algorithm）的基本思想。考虑以下示例文本：

  english1 HEBREW2 english3 HEBREW4 english5 HEBREW6

这里，字符计算机中的存贮方式与它们的显示方式相同：第一个字符为e，第二个为n，最后一个为6。

假设文档的主要语言设置为英语（从左至右），那么这行文本的正确表述应该是：

  english1 2WERBEH english3 4WERBEH english5 6WERBEH

也就是说，文本的结构为：英语为主体，嵌入希伯来语。达到这样的表述结果不需要HTML标记，因为希伯来片语已由用户程序通过双向算法修改为从右至左。

如果文档的主要语言为希伯来语（从右至左），则正确的表述为：

6WERBEH english5 4WERBEH english3 2WERBEH english1

此时整句表述为从右至左，而嵌入的英语由双向算法反向。

2.  文本方向信息的继承方法

Unicode双向算法要求设置文本的初始方向。HTML中通过dir属性实现。

指定块级元素（block-level element）的基准方向只需设置其dir属性即可。一旦设置dir属性，此元素及其嵌套块级元素内的全部文本都遵从此设置。但如果对嵌套元素单独设置dir属性，则属性值会被改写。

如果要设置整个文档的文本方向，可设置HTML元素的dir属性。例如：

<HTML dir="RTL">
...从右至左的文本...
<P dir="ltr">...从左至右的文本...</P>
<P>...恢复从右至左的文本...</P>
</HTML>

行内元素（inline element）不继承dir属性。也就是说，不带dir属性的行内元素不继承嵌入内容的附加方向属性。

3.  设置嵌入文本的方向

UNICODE双向算法可根据其固有方向将嵌入字符自动进行反向。但这只能实现一层嵌入。如果要实现多层嵌入方向变化，则必须使用行内元素的dir属性。

对于前述示例：

  english1 HEBREW2 english3 HEBREW4 english5 HEBREW6

如果文档的主要语言设置为英语，则可理解为在英语中插入HEBREW2到HEBREW4的希伯来语，而在希伯来语中又引用英语（english3）。期望的文本表述为：

  english1 4WERBEH english3 2WERBEH english5 6WERBEH

为了达到嵌入文本方向的两重变化，必须使用附加信息，实现的方法是为第二层嵌入划定界限。在本例中，可使用SPAN元素和dir属性来标识文本：

english1 <SPAN dir=”RTL”>HEBREW2 english3 HEBREW4</SPAN> english5 HEBREW6

另外也可以使用Unicode特殊字符来实现嵌入文本方向的多重变化。如果要实现从左至右的嵌入，可在嵌入文本前后插入字符LEFT-TO-RIGHT EMBEDDING（LRE，十六进制为202A）和POP DIRECTIONAL FORMATTING（PDF，十六进制为202C）。如果要实现从右至左的嵌入，可在嵌入文本前后插入字符RIGHT-TO-LEFT EMBEDDING（RTE，十六进制为202B）和PDF。

注意：同时使用行内元素的dir属性和对应的UNICODE格式字符时，有可能造成冲突和歧义，因此最好使用其中一种。如果两种方法同时使用，需要特别小心标记和字符的嵌套。

HTML的标记方法不能保证不产生这种问题。使用纯文本编辑器编辑双向HTML文档时这类问题会有所减轻。

4.  忽略双向算法：BDO元素

双向算法和dir属性可便于管理嵌入文本的方向变化。但是，某些情况下双向算法会产生错误表述。此时可使用BDO元素对选定文本关闭双向算法。

BDO元素是行内元素，它支持lang和dir属性，其中dir属性是必须使用的。

考虑前述示例：

english1 HEBREW2 english3 HEBREW4 english5 HEBREW6

假设这一字符顺序被一个从左至右的用户程序读取（字节流从e开始、以6结束）。使用UNICODE双向算法时，它工作正常，因为双向算法可将希伯来嵌入文本进行反向。但在某些情况下则行不通。例如，MIME标准（RFC 2045）中规定，若要使最终字节流从右至左，则Email中必须保持从右至左的字符顺序。

因此，如果上例中的HEBREW4是希伯来文Email中的一个片断，那么它的结构实际是4WERBEH，使用双向算法的用户程序会将其处理为错误的顺序。为了使用户程序处理正确，可使BDO元素（其dir属性为LTR）关闭双向算法：

english1 HEBREW2 english3 <BDO dir=”LTR”>4WERBEH</BDO> english5 HEBREW6

这就等于告知双向算法“让我从左至右！”，从而产生期望的表述：

english1 2WERBEH english3 4WERBEH english5 6WERBEH

在文档中也可以使用忽略双向算法的Unicode字符LEFT-TO-RIGHT OVERRIDE (202D) 或RIGHT-TO-LEFT OVERRIDE (202E) 以及POP DIRECTIONAL FORMATTING (202C)。

5.  样式表与文本方向

由于样式表的使用，可直接将块级元素内的元素改变为行内元素，反之亦然。但由于对双向算法来说块级元素和行内元素的区别非常明显，使用时必须引起注意。

行内元素不带dir属性时，样式表会将其转换为块级元素，它继承全局元素的dir属性，以定义块的基准文本方向。

当块级元素不带dir属性时，样式表会将其转换为行内元素，从双向格式化的角度来看，所得到的表述结果与明确添加dir属性是等效的。

2.3  文本：段落、行与字词

本节讨论文本结构的有关问题。有关文本格式化的元素，例如对齐元素、字体元素及样式表等，将在下一章中予以全面介绍。

一、白空格（White space）

SGML规范中对记录开始字符（换行符）和记录结束字符（回车符）作了区分。在Internet上，有的平台使用回车-换行字符对作为换行标记，有的只使用换行符，还有的使用回车符。因此，HTML应该考虑到这种情况，应其作统一的处理。

在HTML中，起始标记后的换行符会被忽略，而结束标记后的换行符则产生实际换行。这对于所有HTML元素无一例外。同时，除PRE元素外，HTML元素内的白空格（white space）字符，例如空格、水平制表符、进纸符、换行符等，都会被一个普通空格字符代替。

关于白空格的规则使得HTML代码中可以用白空格来布置其标记，以便使HTML源代码看起来更清晰。例如，下面是一段HTML代码：

<P>
  This example shows a paragraph and a list.
</P>
<UL>
  <LI>
    This is the <EM>first</EM> item
  </LI>
  <LI>
    This is the <EM>second</EM> item
  </LI>
</UL>

删除不需要的结束标记和多余白空格，可以使它更简洁：

<P>This example shows a paragraph and a list.
<UL>
  <LI>This is the <EM>first</EM> item
  <LI>This is the <EM>second</EM> item
</UL>

二、结构化文本

1.  字词元素：EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE及ACRONYM

字词元素给文本片断添加结构化信息。这些元素的意义分别为：

• EM: 表示强调。
• STRONG: 表示特别强调。
• CITE: 引用参考文献或其他来源。
• DFN: 表示这是一个定义。
• CODE: 指明一段计算机程序代码。
• SAMP: 指明程序或脚本等的输出示例。
• KBD: 表示应该由用户输入的文本。
• VAR: 表示这是一个变量或程序参数。
• ACRONYM: 表示这是一个缩写词（如WWW、HTTP、URL等）。

这些元素可支持以下属性：

• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

EM和STRONG元素通用于表示强调，其他字词元素在支持文档中特别有用。下面两个示例说明了文本标记元素的使用：

"More information can be found in <CITE>[ISO-0000]</CITE>."

"Please refer to the following reference number in future correspondence: <STRONG>1-234-55</STRONG>"

ACRONYM元素是HTML 4.0新定义的。它使文档作者可以清楚地将字符组合指明为一个缩写词。这种指定缩写词的功能可用于拼写检查、语音合成及其他用户程序和工具等。

ACRONYM元素的内容指定缩写词本身。可使用title属性来指定缩写词所代表的意义。例如：

<ACRONYM title="World Wide Web">WWW</ACRONYM>
<ACRONYM
   lang="fr"
   title="Soci&eacute;t&eacute; Nationale de Chemins de Fer">
   SNCF
</ACRONYM>

字词元素的表述效果取决于用户程序。通常，可视化用户程序将EM文本显示为斜体、将STONG文本显示为粗体。语音合成程序则可能改变语音参数，例如音量、音高等，而缩写词则可逐个字母读出。

2.  引用: BLOCKQUOTE和Q元素

这两个元素用来指定引用文本。BLOCKQUOTE用于较长的引用，Q用于较短的引用（不分段）。也就是说，BLOCKQUOTE是块级元素，而Q是行内元素。

它们支持以下属性：

• cite = url。此属性用来指明源文档或源信息的URL。也就是给出引用文本的来源信息。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下面的示例引用一段J.R.R. Tolkien的《The Two Towers》（双城记）：

<BLOCKQUOTE cite="http://www.mycom.com/tolkien/twotowers.html">
They went in single file, running like hounds on a strong scent,
and an eager light was in their eyes. Nearly due west the broad
swath of the marching Orcs tramped its ugly slot; the sweet grass
of Rohan had been bruised and blackened as they passed.
</BLOCKQUOTE>

BLOCKQUTE的在可视化用户程序中的实现效果通常是带缩进的文本块，但不加引号。而Q元素是行内元素，所以没有这个特点。

Q元素是HTML 4.0新定义的。

3.  上下标：SUB和SUP元素

这两个元素与原来基本相同，分别用来指定文本中的上标文字或下标文字。它们支持以下常用属性：

• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下例使用SUP元素实现法文M^lle Dupont：

M<sup>lle</sup> Dupont

三、分行和段落

人们通常将思想和观点划分为若干个段落。段落组织不受段落表述的影响，因为两端对齐的段落与左对齐的段落表达的意思相同。

HTML采用直接定义段落的方式。它使用P元素定义段落。

1.  段落: P 元素

P元素用来分段。它不能包含块级元素（包括P本身）。可以删除结束标记，此时下一个块级元素起始标记即表示上一段落的结束。当然也可以使用P结束标记来明确表示段落结束。

P元素现在支持以下属性：

• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• align：对齐方式。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下面的示例定义两个段落：

<P>This is the first paragraph.</P>
<P>This is the second paragraph.</P>
...另一个块级元素...

它也可以表示为：

<P>This is the first paragraph.
<P>This is the second paragraph.
...另一个块级元素...

段落也可包容于块级元素之内，块级元素结束也能指明P元素的结束。例如：

<DIV>
<P>这是一个段落。
</DIV>

HTML 4.0认为空的P元素是一种不良形式，用户程序应该忽略它。

2.  控制分行：BR元素

HTML的分行也是需要明确指定的。BR元素用来强制结束文本的当前行。

BR元素禁止使用结束标记。它现在支持以下属性：

• id, class：文档内的标识。
• title：元素标题。
• style：行内样式信息。
• clear：对齐和浮动对象。它的意义与原来相同，用来控制文本与图象等对象的对齐。

有时需要禁止在两个词之间出现分换，此时可在其间插入字符实体&nbsp;（&#160;或&#xA0;）。用户程序会将其解释为不分行。

与分行有关的一个问题是断字。在HTML中，有两种连字符：普通连字符（plain hyphen）和软连字符（soft hyphen）。普通连字符是一个普通字符，而软连字符则解释为一个分行。因此，如果一行以软连字符结束，用户程序会在上一行显示一个连字符，而在搜索和分类等场合，它又必须删除此连字符。

在HTML中，普通连字符表示为“-”（&#45;或&#x2D;），而软连字符则表示为命名字符实体&shy;（&#173;或&#xAD;）。

3.  预格式化文本：PRE元素

PRE元素告知可视化用户程序，它所包含的文本为预先格式化的。用户程序应该：

• 保留白空格不动。
• 将文本显示为等宽字体。
• 关闭长行的自动换行功能。
• 关闭双向处理功能。

PRE元素支持以下属性：

• width = integer：此属性告知用户程序所希望的预格式化文本块的宽度。用户程序将据此选择合适的字体大小或适当的缩进量。width以字符数表示。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下面的示例显示了一首预格式化的雪莱（Shelley）诗To a Skylark：

<PRE>
       Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</PRE>

HTML 4.0废除了PRE以外的其他预格式化元素。

水平制表字符（TAB，在UNICODE、ASCII和ISO 88591中编码为十进制9）在不同的用户程序中解释有所不同，通常显示为8个字符宽的空格。HTML 4.0强烈建议不要在PRE预格式化文本中使用水平制表字符。

四、 标记文档的变化：INS和DEL元素

INS和DEL是HTML 4.0新增的元素。

它们用来标记文档的变化。也就是说，文档在上一个版本到下一个版本的修改过程中，可以用这两个元素来标明哪些地方是插入或删除的。例如，法律草案修订中需要查看其变化过程。

这两个元素在HTML 4.0中非常特殊，它们既不是行内元素也不是块级元素。它们可以包含一个或数个字词，也可以包含段落、列表和表格等块级元素。

用户程序可以用明显可见的方式显示插入和删除文本。例如，插入文本作特殊字体显示，删除文本根据不显示或显示为带删除线或特殊标记的字样。

INS和DEL元素支持以下属性：

• cite = url：此属性用来指明源文档或源信息的URL。它可用来指向解释文档修改原因的信息。
• datetime = cdata：它用来指定文档修改的日期和时间。时间和时间格式应按规定（稍后详述）指定。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

使用INS和DEL元素时，经常同时指定文档的修改日期。HTML 4.0采用ISO 8601日期和时间格式，但ISO 8601允许使用多种日期和时间格式，而HTML 4.0中只采用ISO 8601格式中的一种，即：

  YYYY-MM-DDThh:mm:ssTZD

其中YYYY为四位数字的年份，MM为两位数字的天份（01~12），DD为两位数字的月份（01~31），hh为两位数字的小时（00~23，不允许am/pm格式），mm为两位数字的分钟（00~59），ss为两位数字的秒钟（00~59），TZD为时区符号（Time Zone Designator）。TZD为下面三者形式之一：① Z：表示全球通用时间UTC（Coordinated Universal Time）。② +hh:mm：表示当地时间在UTC之前的小时和分钟数；③ -hh:mm：表示当地时间在UTC时间之后的小时和分钟数。

HTML 4.0要求日期和时间格式必须严格遵守上述规定。日期和时间之间的T表示时间部分开始，这是根据ISO 8601规定的。

如果日期和时间由程序自动生成，而生成程序不能测定秒数，它可能将其置为00。

下面两个时间都是美国东部标准时间的1994年11月5日上午8点15分30秒：

  1994-11-05T13:15:30Z
  1994-11-05T08:15:30-05:00

如果与INS元素同时使用，用法如下：

  <INS datetime="1994-11-05T08:15:30-05:00">
  John Smith added this on November 5th  </INS>

2.4  列表：无序、有序和定义列表

HTML 4.0中的列表元素与HTML 3.2基本相同，主要是支持一些新的属性。

一、无序和和序列表：UL、OL和LI元素

无序列表和有序列表实际上是相同的，只是在可视化用户程序中有序列表显示为数字序号，无序列表显示为项目符号。

无序列表用UL元素定义，有序列表用OL元素定义。列表项均用LI定义（不需要结束标记）。

UL、OL和LI元素支持以下属性：

• type = style-information：定义列表项的的类型。目前仅在可视化用户程序中能够使用。其属性值对于UL元素可以是disc、square和circle，分别对应圆形、方形或圆圈形项目符号；对于OL元素可以是1、a、A、i和I，分别对应相应的序数形式。
• start = integer：仅用于OL元素。它指定有序列表的开始项序号。默认值为1。
• value = integer：仅用于LI元素。它将有序列表的当前序号设置为新的整数值。
• compact：不建议使用。其值为布尔值，使可视化用户程序以更紧缩的方式显示列表。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

无序列表和有序列表可以嵌套。

在有序列表中，不能从前一个列表中自动继续列表编号，也不能隐藏列表编号。不过，可以通过设置value属性来重设编号。例如：

<ol>
<li value="30"> 此处编号为30。
<li value="40"> 此处编号为40。
<li> 此处编号为41。
</ol>

二、定义列表：DL、DT和DD元素

定义列表与前两种列表主要的不同之处在于，它的列表项由两列表标志和列表描述两部分组成。定义列表由DL元素指定，列表标志由DT元素指定，列表描述由DD元素指定。

这几个元素支持以下属性：

• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

在DD元素中可包含块级元素。例如：

<DL>
    <DT> <em>Daniel</em>
    <DD> Born in France, Daniel's favorite food is foie gras.
         <P> In this paragraph, we'll discuss Daniel's
         harem: Pascale, Audrey, Laurie, and Alice.
    <DT> <em>Tim</em>
    <DD> Born in New York, Tim's favorite food is ice cream.
  </DL>

三、DIR和MENU元素

DIR元素用于创建多列目录列表，MENU元素用于创建单列菜单列表。这两个元素的结构与UL相同，只是实现效果上稍有不同。但实际上，用户程序可能将DIR或MENU显示得与UL完全一样。

这两个元素支持以下常用属性：

• compact：与UL元素的此属性意义相同。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

HTML 4.0中将DIR和MENU元素定为不建议使用元素，并强烈建议用UL元素代替它们。

2.5  表格

HTML 4.0的表格功能使用户能够按复杂的表格结构来组织数据。表格中可包括列表、段落、表单、图形、预定义文本和其他表格。

HTML 4.0的表格可按行和按行进行分组。分组的目的是实现更复杂的表格结构。

HTML 4.0的表格功能实际上是接受了Microsoft Internet Explore对HTML的扩充。

一、表格结构

HTML 4.0吸收了Internet Explorer的结构化表格的思想。它认为，一个HTML表格由以下结构组成：

• 表格标题（caption）。标题可选。
• 一个或多个行组（group of row）。每个行组由头部（head, 可选）、尾部（foot, 可选）及若干行组成。
• 一个或多个列组（group of column）。
• 每行由一个或多个表元（cell）组成。
• 每个表元可包含头部信息（用来描述列或行的数据）或数据。表元可跨越多行或多列。

1.  TABLE元素

TABLE元素用来定义一个HTML表格。它应该包括其他其他所有与表格有关的元素，包括指定表格标题、行列、内容和格式的元素。

表格元素支持以下属性：

• align = left｜center｜right：指定表格相对于文档的位置。其属性值分别表示相对文档居左、居中或居右。
• width = length：指定整个表格的宽度。如果TABLE元素中不包含此属性，则表格宽度由用户程序决定。
• cols = integer：指定表格的列数。指定此属性可帮助浏览器快速显示表格，而不必等到整个表格都接收才开始显示。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。
• bgcolor：背景颜色。
• frame, rules, border：边框和边线。
• cellspacing, cellpadding：表格边距。

表格的行数等于它所包含的TR元素的个数。

可以在TABLE元素中设置dir属性，以指定表格的方向性。

2.  标题：CAPTION元素

CAPTION元素用来指定表格的标题。它是可选的。如果使用，它应该紧接着TABLE元素的起始标记，其内容应该体现表格的本质。

CAPTION元素支持以下属性：

• align = top｜bottom｜left｜right：指定表格标题相对于表格的位置。top将标题置于表格上面，为默认值。其余值分别将标题置于表格下面、左侧或右侧。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

3.  行组：THEAD、TFOOT和TBODY元素

一个表格至少应包含一个行组（row group）。每个行组均由头部、主体和尾部三部分组成，其中头部和尾部是可选的。THEAD元素定义头部，TFOOT元素定义尾部，TBODY元素定义主体。这三个元素都必须包含一行或多行（由TR元素定义）。

它们支持的属性包括：

• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。
• align, char, charoff, valign：表元对齐方式。

下面的示例说明了表格头部、尾部和主体的结构和顺序：

<TABLE>
<THEAD>
     <TR> ……头部信息……
</THEAD>
<TFOOT>
     <TR> ……尾部信息……
</TFOOT>
<TBODY>
     <TR> ……数据块一的第一行……
     <TR> ……数据块一的第二行……
</TBODY>
<TBODY>
     <TR> ……数据块二的第一行……
     <TR> ……数据块二的第二行……
     <TR> ……数据块二的第三行……
</TBODY>
</TABLE>

根据上例，在TABLE定义内，TFOOT必须出现在TBODY之前。这样做的目的是为了使用户程序在接收全部表格数据之前可处理表格尾部。

以下是行组元素省略的规则：

• 当表格仅有一个主体，不包含头部和尾部时，TBODY元素的起始和结束标记都可以省略。
• 当表格包含头部时，THEAD元素的起始标记是必须的。如果TFOOT或TBODY起始标记紧随其后，则THEAD的结束标记可以省略。
• 当表格包含尾部时，TFOOT元素的起始标记是必须的。如果THEAD或TBODY起始标记紧随其后，则TFOOT的结束标记可以省略。

这样，上述示例可简化为：

<TABLE>
<THEAD>
     <TR> ……头部信息……
<TFOOT>
     <TR> ……尾部信息……
<TBODY>
     <TR> ……数据块一的第一行……
     <TR> ……数据块一的第二行……
<TBODY>
     <TR> ……数据块二的第一行……
     <TR> ……数据块二的第二行……
     <TR> ……数据块二的第三行……
</TABLE>

4.  列组：COLGROUP和COL元素

表格至少要包含一个列组（column group）。如果表格定义中不包含列组定义，则表格被视为仅有一个列组，其中包含表格的所有列。列组由COLGROUP元素定义。

COLGROUP元素支持以下属性：

• span = integer：指定当前列组的默认列数。如果当前列组包含一个或多个COL元素，则此属性被忽略。默认属性值为1。
• width = length：指定当前列组每一列的默认宽度。属性值可以是标准的象素数和百分比数，还可以是特殊形式“0*”，此值表示列组内每列的宽度应是使得列内容包容在内的最小宽度。此值可被COL元素改写。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。
• align, char, charoff, valign：表元对齐方式。

下面的示例包含两个列组，第一个列组包含10列，每列的默认宽度为50个象素；第二个列组包含5列，每列默认宽度为最小列宽。

<TABLE>
<COLGROUP span="10" width="50">
<COLGROUP span="5" width="0*">
<THEAD>
<TR> ……
</TABLE>

COLGROUP元素定义的每个列组可包含零个或多个COL元素。COL元素定义每列，它可共享列组元素定义的属性值，但也可自行定义属性值。它支持的属性包括：

• width = length：指定当前列组每一列的默认宽度。属性值可以是标准的象素数和百分比数，还可以是特殊形式“0*”，此值表示列组内每列的宽度应是使得列内容包容在内的最小宽度。属性值还可以使用“i*”的形式，其中i为整数，此时为所谓相对宽度。用户程序在分配行列空间时，首先分配绝对宽度，然后将剩余的可用空间在相对宽度中分配，每个相对宽度行或列得到指定整数份的空间。值“*”等效于“1*”。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。
• align, char, charoff, valign：表元对齐方式。

span属性对于COL元素具有下述意义：

• 如果没有span声明，每个COL元素代表一列。
• 如果span属性设置为N > 0，则当前COL元素在表格中跨越N列。
• 如果span属性设置为0，则当前COL元素跨越表格中的剩余各列，包括当前列和最后一列。

COL的宽度属性影响此元素相关各列的宽度，并改写COLGROUP的宽度属性。当COL元素跨越数列时，其宽度属性指定的是每一列的宽度，而不是整个跨越宽度。

下面的示例包含两个列组，第一个列组包含三列，第二个列组包含两列。可用的水平宽度这样分配：用户程序将30个象素分配给第一列，第二列享受最小列宽，剩余的水平宽度分为六份，第三列占据其中的两份，第四列占一份，第五列占三份。

<TABLE>
<COLGROUP>
   <COL width="30">
   <COL width="0*">
   <COL width="2*">
<COLGROUP align="center">
   <COL width="1*">
   <COL width="3*" align="char" char=":">
<THEAD>
<TR> ...
</TABLE>

在此例中，第二个列组的对齐方式设为center，此列组内的所有表元都将继承此值，但可以由COL元素改写。此例的最后一列将对齐方式设置为按字符 : 对齐。

5.  表行：TR元素

TR元素包含一行表元。其基本用法与以前无异，但支持以下属性：

• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。
• align, char, charoff, valign：表元对齐方式。

6.  表元：TH和TD元素

TH和TD元素用来贮存表格内的数据，TH贮存表头（header），TD贮存一般数据。这一区分的目的是使用户程序能够分别处理表头表元和数据表元。

表元内可以是空的，即表元内可以没有数据。

TH和TD元素支持以下属性：

• axis = cdata：指定表头表元的缩写名。表元的默认名是其内容。
• axes = cdata-list：指定与当前表元相关的行列表头缩写名，它是一系列axis名，其间以逗号隔开。如果没有给定此属性，用户程序则需要查找与表元相关的表头表元。
• rowspan = integer：指定当前表元跨越的行数。其默认值为1。如果设置为0，就意味着表元跨越当前行到最后一行。
• colspan = integer：指定当前表元跨越的列数。其默认值为1。如果设置为0，就意味着表元跨越当前列到最后一列。
• nowrap：使当前表元文字不进行自动换行。HTML 4.0不建议使用此属性，而建议用样式表来实现同一功能。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。
• align, char, charoff, valign：表元对齐方式。

axis属性和axes属性提供了一种标识表元的方法。语音合成程序可用表元标志（label）来辩识其内容和表元的位置。将表格转换成数据库时，处理软件可将表元标志用作数据库字段名。

下面的示例使用axis和axes属性进行表元标识：

<TABLE border="border">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR> <TH>Name <TH>Cups <TH>Type of Coffee <TH>Sugar?
<TR> <TD axis="Sexton" axes="Name">T. Sexton <TD>10
<TD>Espresso <TD>No
<TR> <TD axis="Dinnen" axes="Name">J. Dinnen <TD>5 <TD>Decaf <TD>Yes
</TABLE>

表元跨越行列由rowspan和colspan属性定义。下面的示例表格使第四行第二列的表元跨越三列：

<TABLE border="border">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR> <TH>Name <TH>Cups <TH>Type of Coffee <TH>Sugar?
<TR> <TD>T. Sexton <TD>10 <TD>Espresso <TD>No
<TR> <TD>J. Dinnen <TD>5 <TD>Decaf <TD>Yes
<TR> <TD>A. Soria <TD colspan="3"><em>Not available</em>
</TABLE>

此例在用户程序中的实现效果应该为：

下面的示例说明，跨行列表元会影响后续表元的定义。下例中的表元6并没有定义在第三列，但由于2跨越两列，它就必须留出一个表元的空间。

<TABLE border="border">
<TR><TD>1 <TD rowspan="2">2 <TD>3
<TR><TD>4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>

其用户程序中的显示效果应该是：

下例是表元跨越两行的情况：

<TABLE border="border">
<TR><TD>1 <TD>2 <TD>3
<TR><TD colspan="2">4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>

表元有可能重叠。下例中，表元5跨两行，表元7跨两列，因此表元7与9之间存在重叠。表元重叠在HTML 4.0中没有明确定义，其实现取决于用户程序。

<TABLE border="border">
<TR><TD>1 <TD>2 <TD>3
<TR><TD>4 <TD rowspan="2">5 <TD>6
<TR><TD colspan="2">7 <TD>9
</TABLE>

二、表格格式化

表格格式化包括对齐方式、边框样式和表元边距等内容。虽然HTML 4.0中仍然支持这些格式化控制方法，但样式表能够提供更好的方式，因此更建议使用样式表。

1.  水平和垂直对齐

以下属性可用来控制表格的水平和垂直对齐方式，它们可用于不同的表格元素：

• align = left｜center｜right｜justify｜char：指定表格中文本和数据的对齐方式。其可能的属性值为：left，向左对齐文本或数据（默认值）；center，居中对齐文本或数据；right，向右对齐文本或数据；justify，两端对齐文本；char，按特定字符对齐文本。
• valign = top｜middle｜bottom｜baseline：指定表元内数据的垂直位置。其可能的属性值为：top，表元数据顶端对齐；middle，表元内数据垂直居中（默认值）；bottom，表元内数据底端对齐；baseline：当某表元具有这种valign属性值时，同一行中的所有表元的文本数据都以第一个文本行为基准对齐。
• char = cdata：指定文本片断中的一个字符，将其作为对齐基准轴。其默认值为当前语言（由lang属性指定）的十进制小数点（通常为“.”，但在法语和俄语等语言中为“,”）。此属性值是区分大小写的。
• charoff = length：指定每行对齐字符第一次出现的偏移量（offset）。如果一行中不包含对齐字符，就水平平移到对齐位置的末尾。使用charoff设置对齐字符的偏移量时，偏移方向由当前文本方向（由dir属性指定）决定。在从左到右的文本（默认值）中，偏移从左边距开始；在从右至左的文本中，偏移由右边距开始。

下面的示例表格中设置了货币值的小数点对齐：

<TABLE border="border">
<COLGROUP>
<COL><COL align="char" char=".">
<THEAD>
<TR><TH>蔬菜<TH>单价（元/千克）
<TBODY>
<TR><TD>莴苣<TD>￥1.00
<TR><TD>土豆<TD>￥0.80
<TR><TD>蒜苔<TD>￥10.30
</TABLE>

表元对齐可逐个表元指定，也可从行、列或表格元素中继承。align、cha和charoff属性的继承顺序（优先权从高到低）如下：

1. 表元数据内的元素（例如P）设置的对齐属性。
2. 表元元素（TH和TD）设置的对齐属性。
3. 列或列组元素（COL和COLGROUP）设置的对齐属性。当表元为多列跨越的一部分时，对齐属性从跨越开始的表元定义中继承。
4. 行或行组元素（TR、THEAD、TFOOT和TBODY）设置的对齐属性。当表元为多行跨越的一部分时，对齐属性从跨越开始的表元定义中继承。
5. 表格元素（TABLE）设置的对齐属性。
6. 默认对齐属性值。

valign属性（及其他继承属性lang, dir和style）的继承优先权（从高到低）顺序：

1. 表元数据内的元素（例如P）设置的属性。
2. 表元元素（TH和TD）设置的属性。
3. 行或行组元素（TR、THEAD、TFOOT和TBODY）设置的属性。当表元为多行跨越的一部分时，属性值从跨越开始的表元定义中继承。
4. 列或列组元素（COL和COLGROUP）设置的属性。当表元为多列跨越的一部分时，属性从跨越开始的表元定义中继承。
5. 表格元素（TABLE）设置的属性。
6. 默认属性值。

2.  边框和边线

下列属性决定表格的外边框（frame）和内边线（rule）是否显示。

• frame = void｜above｜below｜hsides｜lhs｜rhs｜vsides｜box｜border：指定表格外边框的哪一侧为可见。可能的属性值为：void（无边框，默认值）、above（仅上侧）、below（仅下侧）、hsides（仅上下两侧）、vsides（仅左右两侧）、lhs（仅左侧）、rhs（仅右侧）、box（所有四边）及border（所有四边）。
• rules = none｜groups｜rows｜cols｜all：指定表格内表元的边线是否可见。可能的属性值为：none（无边线，默认值）、groups（只显示行组之间和列组之间的分隔线）、rows（只显示行分隔线）、cols（只显示列分隔线）及all（显示所有行列分隔线）。
• border = cdata：指定表格边框的宽度（以象素数为单位）。（border属性也可以定义OBJECT和IMG元素的边框，但取值不同。详见相关元素的说明。）

在下面的示例表格中，将左右两侧的边框设置为5个象素，并显示列间分隔边线：

<TABLE border="5" frame="vsides" rules="cols">
<TR> <TD>100 <TD>200 <TD>300
<TR> <TD>400 <TD>500 <TD>600
<TR> <TD>700 <TD>800 <TD>900
</TABLE>

在用户程序中的实现效果应该是：

为保持向后兼容性，HTML 4.0允许以下边框和边线的传统设置：

• border = “0”：等效于frame = “void” 及rules = “none”。
• border = 其他值：等效于frame = “border” 及rules = “all”。
• 在TABLE元素的起始标记中使用”border”值：可解释为frame属性的相应值，等效于rules=”all” 和border属性的某一默认值（非零）。

因此：

<FRAME border=”2″> 等效于 <FRAME border=”2″ frame=”border” rules=”all”>，<FRAME border> 则等效于 <FRAME frame=”border” rules=”all”>。

3.  表元边距

下面两个属性控制表元内的边距设置。

• cellspacing = length：指定表格内的表元之间、表格边框和每行每列的第一个或最后一个表元边框之间应留的间距。
• cellpadding = length：指定表元边框与其内容之间应留的间距。此属性值对表元内容的四个方向均有效。

下面的示例表格使用了这两个属性：

<TABLE>
<TR cellspacing="20"> <TD>Data1 <TD cellpadding="20%">Data2 <TD>Data3
</TABLE>

如果表格或表列为固定宽度，cellspacing和cellpadding可能会使实际宽度比指定的要宽。

三、表格示例

下面通过两个示例表格说明表格元素的使用。

1.  示例1

第一个示例演示了合并表元（跨越多行多列）的使用，也就是使用rowspan和colspan属性来使表元跨越多行或多列。其HTML代码如下：

<TABLE border="border">
<CAPTION>A test table with merged cells</CAPTION>
<TR><TH rowspan=2><TH colspan="2">Average
    <TH rowspan="2">other<BR>category<TH>Misc
<TR><TH>height<TH>weight
<TR><TH align="left">males<TD>1.9<TD>0.003
<TR><TH align="left" rowspan="2">females<TD>1.7<TD>0.002
</TABLE>

它在用户程序中的应该实现的效果如图1。

2.  示例2

第二个示例演示的是行组和列组的使用，它用COLGROUP元素对列进行分组，并设置默认的列对齐方式，另外还用TBODY来进行行分组。显示表格上下外边框和分组内边线，这是用frame和rules属性指定的。

<TABLE border="2" frame="hsides" rules="groups">
<CAPTION><b>Microsoft Windows 支持的代码页</b></CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>代码页<br>ID
<TH>名称
<TH>ACP
<TH>OEMCP
<TH>Windows<br>NT 3.1
<TH>Windows<br>NT 3.51
<TH>Windows<br>95
<TBODY><TR><TD>1200<TD>Unicode (ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*<TR><TD>1250<TD>Windows 3.1 东欧版<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 斯拉夫版<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 美国版 (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 希腊版<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 土耳其版<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>希伯来语<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>阿拉伯语<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>韩国语<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS 美国版<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>阿拉伯语 (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>阿拉伯语 (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>阿拉伯语 (透明阿拉伯语)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>阿拉伯语 (透明 ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>

此例在用户程序中的应该实现的效果如图2。

2.6 链接：超链接和媒体无关的链接

到现在为止，讨论的是给单个文档设计文档结构的问题。链接是HTML的重要特性，本小节介绍创建文档之间链接的概念与结构。

一、路径信息：BASE元素

当链接到其他文档或对象是，考虑路径问题是重要的。HTML路径总是以URL指定，相对URL根据基准URL解析，而基准URL可来自各种来源。BASE元素可用于显式指定文档的基准URL。

BASE元素必须出现于HTML文档的HEAD部分。BASE元素的作用范围仅限于当前文档。

BASE元素支持以下属性：

• href = url：指定一个绝对URL，作为解析相对URL时的基准URL。
• target：目的窗框信息。

如果有下列BASE语句：

  <BASE href=”http://www.bh.com/fou/intro.html”>

则相对URL “../gee/foo.html” 将被解析为 “http://www.bh.com /gee/foo.html”。

二、链接和锚的定义

HTML链接是从一个Web资源到另一个资源的连接。虽然概念很简单，但它却是Web获得成功的关键因素之一。

HTML链接有两个端点和一个方向，即：链接从源端开始，指向目的端。因此每个链接的定义都必须指定源端和目的端，一端定义在链接定义所在位置，另一端由则链接定义的属性指定。

链接可指向某种Web资源，例如HTML文档、图象、视频剪辑、声音、程序或当前文档等。链接也可指向一个锚（anchor）。锚是HTML文档内的命名区域，其中可包括文本或其他对象。

1.  链接的使用

按照链接的定义，它本身并没有什么固有的意义，它只是将链接的源端与目的端联系在一起。不过链接中可以包括类型信息（type information）。

目前链接最常见的用途还是获取另一个Web资源，方法通常是通过点击鼠标或激活一个声音命令的链接等。

当然，Web冲浪（Web-surfing）并不是链接的唯一应用。例如，可通过建立链接在一系列文档中指定“前一个”和“下一个”文档。用户程序可通过导航工具来实现，而不必作为文档目录的传统方式。

类似地，还可以通过链接定义一系列文档的打印顺序。用户程序沿此顺序可打印出用户手册或一本书的打印版本。

2.  标记链接的头和尾

如上所述，链接包括源和目的两个端点，其中一个由链接定义所在位置指定。但这是源端还是目的端呢？

假设正在用HTML写一本书，并希望读者从头到尾一章一章地阅读此书。如果每章是一个HTML文档，就可以用链接来表示顺序信息，即每个文档包含两个链接，一个指向前一章，另一个指向下一章。表示前一章的链接其目的端在当前文档，其源端在前一章；表示下一章的链接其源端在当前文档，其目的端在下一章。在链接定义中记录这一结构信息后，用户程序就可以用导航按钮、导航菜单等方式表示顺序关系。

rel属性用来指定源端在当前文档的链接，rev属性指定目的端在当前文档的链接。这两个属性还能够给定链接另一端与资源类型有关的一些信息。

3.  定义链接的元素

有两个HTML元素可用来定义链接，它们是LINK和A。

LINK只能出现于HTML文档中的HEAD段中。它定义当前文档与另一个资源的关系。尽管LINK元素本身没有内容，它所定义的关系仍然易于由用户程序实现。

A元素可以只出现于文档的BODY段中。它定义当前文档一个区域与另一资源的关系。A元素有内容（文本或图象等），用户程序通常突出显示其内容以表示是链接。

这两个元素另一个重要区别是，用户程序通常将A元素解释为“在链接的另一端获取资源”。它所获取的资源可用多种方式处理，例如在同一用户程序窗口打开新的HTML文档、在不同窗口打开新的HTML文档或启动一个新的程序来处理资源等。

可以对这两个元素设置title属性，以添加链接的基本信息。这一信息可能被用户程序朗读出来、显示为工具提示或在光标图象中产生一点变化等。

4.  定义锚的元素

在HTML文档中有两种方法定义锚：

• A元素。
• 任何元素的id属性。

A元素既可定义链接也可定义锚。在同一个A元素中同时定义链接和锚是可能的，而且更经济。

5.  链接的国际化问题

由于链接可能指向不同语言、不同书写顺序）或不同字符编码的文档，因此A元素和LINK元素支持lang（语言）、dir（文本方向）和charset（字符编码）属性。这些属性向用户程序提供链接另一端数据的基本特征。

使用这些信息后，用户程序就能够避免将无用信息（garbage）提供给用户。它或者找到需要正确表述文档所需的资源，或者，如果它们不能找到这种资源的话，至少可以警告用户文档可能无读阅读，并解释其原因。

三、A元素

A元素用来定义锚、链接或同时定义锚和链接。

A元素可支持以下属性：

• name =cdata：此属性表示A元素用来定义锚。属性值是唯一的锚名，而锚名的有效范围为当前文档。此属性与id属性共享同一名字空间（name space）。
• href = url：此属性表示A元素定义链接。属性值是链接一端所在的位置，链接另一端由元素所在位置定义。
• rel = cdata：此属性表示链接的源端在当前文档中定义。这时href属性表示链接的目的端。rel值指定链接的类型，取值为空格隔开的若干链接类型（详情见后）。
• rev = cdata：此属性表示链接的目的端在当前文档中定义。这时href属性表示链接的源端。rev值指定链接的类型，取值为空格隔开的若干链接类型。
• charset = cdata：此属性指定链接代表的数据的字符编码。属性值必须是RFC 2045定义的字符集（charset）名之一，其默认值为ISO-8859-1。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。
• target：目标窗框信息。
• tabindex：元素的跳位顺序（tabbing navigation）。
• accesskey：元素的访问键（access keys）。
• shape, coords：图象映射（image maps）。

A元素的用法与HTML 3.2大致相同。以下是一些使用示例。

定义链接：

有关W3C的详细情况，请参考<A href="http://www.w3.org/">W3C的Web站点</A>

指定目的页面的语言编码：

有关W3C的详细情况，请参考<A href="http://www.w3.org/" charset="ISO-8859-1">W3C的Web站点</A>

定义锚：

<A name="anchor-one">这是锚一所在位置。</A>

假定上述锚所在的文档为one.html，则对锚的链接可以采用相对URL：

详细内容请参阅<A href="./one.html#anchor-one">锚一</A>。

也可以采用绝对URL：

详细内容请参阅<A href="http://www.bh.com/one.html #anchor-one">锚一</A>。

如果链接是在同一文档，则可以单独指定锚：

详细内容请参阅<A href="#anchor-one">锚一</A>。

下面的A元素同时指定锚和链接：

我刚从黄山归来！人说“黄山归来不看山”，果其然也！请看我拍摄的
<A name="HuangShan" href="http://www.bh.com/~peiyf/vacation/HuangShan.html">
黄山的照片</A>！

以下是A元素使用的几个问题。

1.  属性值的用法

使用名字和rel、rev属性的值时，应注意：

• 这些值是不区分大小写的（case-insensitive）。但建议使用相同的大小写方式。
• 这些字符串值必须相配。某些字符可以有不同的表达方式，在不同位置指定同一值时，应该使用相同的表达方式，否则可能造成错误。

2.  Mailto链接

同以前版本的HTML一样，仍支持通过mailto URL来使用mailto链接。也就是将mailto URL作为href属性的值。例如：

如有任何问题和建议，请致信<A href="mailto:[email protected]">陈先生</A>。

3.  嵌套链接

A元素定义的链接和锚不允许嵌套。例如以下示例是错误的：

This text contains<A name="outer-anchor" href="next-outer.html">an outer anchor and
and link and <A name="inner-anchor" href="next-inner.html">an inner
anchor and link.</A></A>

4.  带id属性的锚

可以在任何元素的起始标记中使用id属性来定位锚。

下面的示例在H2元素中使用id属性定位一个锚，并通过A元素链接：

有关详细内容，参考<A href="#section2">第二节</A>。
……
<H2 id="section2">第二节</H2>
……

id属性和name属性共享同一名字空间。也就是说，在同一文档中，不能将同一个名字使用于id和name属性。另一方面，name属性中可包含字符实体，而id属性中则不可以包含实体。

四、LINK元素

LINK元素用于文档的HEAD段中（出现次数不限），定义媒体无关的链接。尽管LINK元素没有内容，但它所表达的链接关系却易于使用户程序实现非常有用的功能（例如带链接下拉菜单的工具栏）。

LINK元素禁止使用结束标记。它支持以下属性：

• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。
• href, rel, rev：链接和锚。
• target：目标窗框信息。
• type, media：头部样式信息。

下面的示例在文档HEAD段中数次使用LINK定义，并用rel和rev属性来指定每一链接的源与目的。

<HTML>
<HEAD>
<LINK rel="Index"    href="../index.html">
<LINK rel="Next"     href="Chapter_3.html">
<LINK rev="Previous" href="Chapter_1.html">
</HEAD>
...文档的其他内容...

1.  链接类型

rel和rev属性用来指定链接定义中哪一端是源端、哪一端是目的端，两者的属性值都描述链接的基本特征，即链接类型。两个属性可在同起始标记中指定。

用户程序、搜索引擎等可用不同方式来解释rel和rev属性指定的链接类型。例如，用户程序可能通过导航工具栏提供对链接文档的访问，或者将下一个文档预先下载以节省访问时间。

以下是HTML 4.0中定义的链接类型。

• Contents：链接指向用作目录的文档。
• Index：链接指向提供当前文档索引信息的文档。
• Glossary：链接指向提供当前文档有关词汇的文档。
• Copyright：链接指向当前文档的版权声明。
• Next：链接指向一系列顺序文档中的下一个文档。通常用于rel属性。
• Previous：链接指向一系列顺序文档中的上一个文档。通常用于rev属性。
• Start：链接指向若干文档组成的文档集中的第一个文档。这种链接类型用来告知搜索引擎文档集的起点。
• Help：链接指向提供帮助（详细内容，链接到其他来源信息等）的文档。
• Bookmark：链接指向一个书签。书签是指向扩展文档中的条目的链接，例如可用title属性来标识书签。一个文档中可定义多个书签。
• Stylesheet：链接指向外部样式表。
• Alternate：链接指向同一文档的不同版本。与lang属性联合使用时，则指明同一文档的翻译版本。与media属性联合使用时，则指明不同的媒体版本。

2.  链接与外部样式表

当LINK元素将外部样式表链接到文档时，用type属性来指定样式表语言，用media属性来指定目的媒体。用户程序可以仅从网络上下载适用于当前设备的样式表，以便节省传输时间。

有关样式表的详细内容请参见下一章。

3.  链接与搜索引擎

可以使用LINK元素向搜索引擎提供不同的信息，包括：

• 链接到用另一种语言编写的文档版本。
• 链接到不同媒体的文档版本，例如可打印版本。
• 链接到文档集的起始页面。

下面通过三个典型示例来说明这三种情况下LINK元素的用法。

第一个示例说明了语言信息、媒体类型和链接类型在改进搜索引擎文档处理中的联合使用。本示例指引搜索引擎到何处查找文档的日文、法文和阿拉伯文版本。

<HEAD>
<LINK lang="ja" title="日文版本"
      rel="alternate"
      href="http://www.bh.com/multi-lang/japanese.html">
<LINK lang="fr" title="法文版本"
      rel="alternate"
      href="http://www.bh.com/multi-lang/french.html">
<LINK lang="ar" title="阿拉伯文版本"
      dir="rtl"
      rel="alternate"
      href="http://www.bh.com/multi-lang/arabic.html">
</HEAD>

第二个示例指引搜索引擎到使用指南的打印版本：

<HEAD>
<LINK media="print" title="Postscript格式的使用指南"
      rel="alternate"
      href="http://www.bh.com/manual/manual.ps">
</HEAD>
最后一个示例则将搜索引擎带到文档集中的起始页面：
<HEAD>
<LINK rel="Start" title="使用指南的第一页"
      href="http://www.bh.com/manual/manual.ps">
</HEAD>

2.7  包容：对象、图象和小应用

本节介绍HTML 4.0提供的将各种资源插入到文档中不同机制。HTML 4.0允许文档中包容对象、图象、小应用、文档和图象映射等。

一、对象包容：OBJECT元素

大部分用户程序都能够处理一些公共数据类型，例如文本、GIF图象、颜色、字体和某些图象元素。如果要处理不支持数据类型，用户程序通常需要支持外部应用程序。OBJECT元素可用来控制对象的插入和处理。

通常情况下，插入对象时需要向用户提供三种类型的信息：

• 处理机制（嵌入对象的泛称）的实现。
• 要处理的数据。
• 运行处理机制需要的附加值。

某些时候也可能不需要指定全部信息。某些处理机制不需要数据（比如进行动画处理的小应用），另一些机制不需要运行参数初始化，还有的可能不需要实现的附加信息（比如用户程序能够处理的数据类型）。

在HTML中，OBJECT元素用来指定处理机制的位置和处理机制所需数据的位置。这些信息由OBJECT元素的属性指定。PARAM元素指定运行参数值。

用户程序必须根据下列原则处理OBJECT元素：用户程序首先试图处理元素属性指定的机制；如果不能处理，不管因为何种原因（配置不对、缺乏资源或体系结构错误等），它必须试图处理元素的内容。

OBJECT元素支持以下属性：

• codebase = url：指定用来解析相对URL的基准路径，而相对URL由classid属性指定。也就是说，当对象需要代码时，它给定代码的基准URL。如果未给定此属性，默认值为当前文档的基准URL。
• classid = url：用URL给定对象实现机制所在的位置。
• codetype = cdata：指定classid属性指定的实现机制期望的Internet媒体类型（Internet Media Type，即MIME类型）。此属性是可选的，但当classid指定时建议使用，因为这样可避免用户程序载入不支持的媒体类型信息。如果没有显式给定此属性的值，它默认使用type属性的值。
• data = url：指定待处理数据所在的位置。
• type = cdata：指定data属性指定的数据的Internet媒体类型。此属性是可选的，但当data指定时建议使用，因为这样可避免用户程序载入不支持的媒体类型信息。如果没有显式给定此属性的值，用户程序就试图自行决定数据的类型。
• declare：此属性如果存在，就表明当前OBJECT定义只是一个声明，对象必须由后面引用此声明的OBJECT定义来实例化（instantiated）。
• standby = cdata：指定用户程序在安装启用对象和载入其数据时，可以处理的信息。
• align=texttop｜middle｜textmiddle｜baseline｜textbottom｜left｜center｜right:指定对象相对于其上下文的位置。其属性值稍候将专门讨论。此属性在现已不建议使用（deprecated）。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。
• tabindex：元素的跳位顺序。
• shapes, usemap：客户端图象映射。
• name：提交带表单的对象。
• height, width, border, hspace, vspace：对象、图象和小应用的可视化表述。

下面的示例往文档中插入一个显示动画时钟的小应用，它是用假想的Python语言编写的，不需要任何附加数据或运行参数值。可用classid属性来指定小应用的位置：

<OBJECT classid="http://www.miamachina.it/analogclock.py"> </OBJECT>

将替换文本放入OBJECT元素的内容，以免用户使用不支持Phthon的用户程序时莫名其妙：

<OBJECT classid="http://www.miamachina.it/analogclock.py">一个动画时钟
</OBJECT>

设计页面时，还可为OBJECT元素指定一个替换对象，使每个嵌入的OBJECT声明都有一个替换的实现机制。这样，当用户程序不能处理最外层的OBJECT时，它可以试着处理它的内容，而此内容又可以是一个OBJECT元素，以此类推。

下面的示例演示了OBJECT声明的替换对象特性。用户程序将按下列顺序处理对象：① Python语言编写的地球小程序。② 地球的MPEG动画。③ 地球的GIF图象。④ 替换文本。

<OBJECT title="从太空看到的地球"
         classid="http://www.observer.mars/TheEarth.py">
  <OBJECT data="TheEarth.mpeg" type="application/mpeg">
    <OBJECT src="TheEarth.gif">
      从太空看到的<STRONG>地球</STRONG>
    </OBJECT>
  </OBJECT>
</OBJECT>

在本例中，最外层的声明指定了一个小应用，不需要任何数据或初值。第二层声明指定一个MPEG动画，并指明其类型。由于它不是一个处理机制，所以当用户程序不能处理MPEG时，它不会从网络上下载文件TheEarth.mpeg。第三层声明指定一个GIF文件的位置，如果用户程序还不能处理，则可以显示替换文本。

数据可以有两种处理方式：内联（inline）于文档之中，或从外部资源获取。内联数据处理速度较快，而外部数据则适于处理大量数据。

1.  对象初始化：PARAM元素

PARAM元素用于指定运行机制所需的参数值。在OBJECT声明的开始处，可以出现任意个PARAM元素。参数名和参数值与具体处理机制有关，并可通过该机制的标准输入方式传递进去。

PARAM元素支持的属性包括：

• name = cdata：定义运行参数的名字。此名称为对象的特性名（property name），并应已为插入对象所知。特性名是否区分大小写取决于对象本身。
• value = cdata：指定name属性指定的参数的参数值。此值称为特性值（property value），它对于HTML没有意义，其意义由对象决定。
• valuetype = data｜ref｜object：指定value属性的类型。可能的属性值包括：

① data：value属性指定的值作为字符串直接传递给嵌入对象（如果有字符实体需先转换）。这是valuetype属性的默认值，可单独出现于元素的起始标记中。

② ref：value属性指定的值为一个URL。此URL表示运行参数值存贮的位置，它应该原样传递给对象，而不能解析。

③ object：value属性指定的值为一个部分URL。此URL表示同一文档中的一个OBJECT声明。此时，OBJECT定义必须以id属性标识。

• type = cdata：指定value属性指定的资源的Internet媒体类型（MIME类型），仅当valuetype为ref时使用。

下面的示例仍使用上面的动画时钟，但这次假设时钟可处理两个运行参数，即时钟的高度和宽度。此例使用两个PARAM元素将其初值设置为40×40个象素。

<OBJECT classid="http://www.miamachina.it/analogclock.py">
<PARAM name="height" value="40" valuetype="data">
<PARAM name="width" value="40" valuetype="data">
这是一个Python时钟，但用户程序不支持Python应用！
</OBJECT>

由于PARAM元素的valuetype默认值为data，所以本例的两个PARAM元素也可由下面的形式代替：

<PARAM name="height" value="40">
<PARAM name="width" value="40" >

或

<PARAM name="height" value="40" data>
<PARAM name="width" value="40" data>

后一种形式中的data仅能用于valuetype，这是由此属性的DTD定义决定的。

在下面的示例中，处理机制的运行数据为外部资源（一个GIF文件）所指定的“Init_values”参数，因此valuetype属性的值设置为ref。它还使用standby属性来显示对象载入时的信息。

<OBJECT classid="http://www.gifstuff.com/gifappli"
         standby="正在载入Elvis...">
<PARAM name="Init_values"
        value="./images/elvis.gif">
        valuetype="ref">
</OBJECT>

HTML文档中嵌入的对象由URL来定位。绝对URL的第一部分表示传输协议，对于HTML文档它通常是http。但一些对象也可能使用其他协议。例如，指定Java对象时，可以URL中以java开头，而对于ActiveX小应用，则可使用clsid。

下例在HTML文档中插入一个Java小应用：

<OBJECT classid="java:program.start"> </OBJECT>

通过设置codetype属性，用户程序可根据自己的处理能力决定是否载入Java程序：

<OBJECT codetype="application/octet-stream"
          classid="java:program.start">
</OBJECT>

某些处理方案要求附加的信息来标识其实现方法，因而需要指定此信息的位置。下例使用codebase属性来指定路径信息。

<OBJECT codetype="application/octet-stream"
          classid="java:program.start">
          codebase="http://foooo.bar.com/java/myimplementation/"
</OBJECT>

下例用classid属性指定一个ActiveX小应用，URL以协议clsid开始。data属性用来指明程序（另一个时钟）的位置。

<OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
          data="http://www.acme.com/ole/clock.stm">
抱歉，您的用户程序不支持ActiveX！
</OBJECT>

2.  对象声明和实例化

前面的示例都是只声明单独的一个对象。当文档中包含同一对象的多个实例时，就可以将对象的声明与实例分开。这样做有几点好处：

• 用户程序只需要通过网络下载一次数据（声明时），而对每个实例多次重用。
• 有可能在文档不同位置对一个对象实例化，方法如激活链接。
• 有可能将对象指定为其他对象的运行数据。

设置OBJECT元素的布尔值属性declare，就可以在声明处理机制使用户程序只读入不执行。同时，还必须将OBJECT元素的id属性设置为一个唯一的值，以标识此声明。以后在对象的实例化时只需引用此标识符即可。

使用declare属性定义的处理机制在后来的每次引用时都被实例化。

下面的示例声明一个对象，并通过链接引用来进行实例化。因此，只需鼠标点击链接，就可激活对象。

<OBJECT declare
          id="earth_declaration"
          data="TheEarth.mpeg"
          type="application/mpeg">
  <OBJECT src="TheEarth.gif">
    从太空看到的<STRONG>地球</STRONG>
  </OBJECT>
</OBJECT>
……文档后面的某处……
点击此处观看<A href="#earth_declaration">地球动画</A>！

下面的示例将对象指定为其他对象的运行值。本例将文本（一首诗）发送到一个假想的诗歌查看程序，后者将此诗作为运行参数font的值（比如以某字体处理此诗）。参数值本身是一个插入font对象的对象。font对象和诗歌查看对象之间的关系通过以下两个步骤实现：首先将font对象声明的id属性设置为tribune，然后在诗歌查看对象的PARAM元素中引用它。

<OBJECT declare
     id="tribune"
     type="application/x-webfont"
     data="tribune.gif">
</OBJECT>
……在此处查看KublaKhan.txt中的诗歌……    （注：Kubla Khan: 忽必烈汗）
<OBJECT classid="http://foo.bar.com/poem_viewer"
         data="KublaKhan.txt">
    <PARAM name="font" valuetype="object" value="#tribune">
    <P>您错过了一个极酷的诗歌查看程序哦……
</OBJECT>

3.  对象对齐方式

align属性用来指定对象相对其上下文的位置，也就是对齐方式。它支持的属性值包括：

• texttop：对象的顶端应与当前文本行的顶端垂直对齐。
• middle：对象的中间应与当前基准线（baseline）垂直对齐。
• textmiddle：对象的中间应与基准线和当前字体x高度之间的位置中线垂直对齐。x高度定义为Western书写系统（ISO-8859-1）中小写字母x的顶端。如果文本字体为全大写样式，用户程序将使用大写X的高度。      对于其他书写系统，用户程序将对齐对象中间与文本中间。
• baseline：对象的底端应与当前基准线垂直对齐。
• textbottom：对象的底端应与当前文本行的底端垂直对齐。

align属性还支持left、center和right三个属性值，它们使对象成为浮动对象（实际就是水平对齐方式）。详细内容将在 §19.2中介绍。

HTML 4.0将align属性定为“不建议使用的（deprecated）”。它推荐使用样式表代替它。

二、图象包容：IMG元素

IMG元素在当前文档的元素所在位置嵌入图象。HTML 4.0扩充了OBJECT元素的用法，因此推荐使用OBJECT来插入图象。

IMG元素的高度和宽度属性会改写来源图象本身的自然高度和宽度，因此应该适当地设置其尺寸。

IMG元素支持以下属性：

• src = url：指定图象资源的位置。通常使用能够广泛识别的图象格式，例如GIF、JPEG和PNG。
• align = bottom｜middle｜top｜left｜right：指定图象相对其上下文的位置。此属性已不建议使用，而推荐用样式表代替它。它支持以下属性值：

* bottom：图象的底端应与当前基准线垂直对齐。这是默认值。

* middle：图象的中心应与当前基准线垂直对齐。

* top：图象的顶端应与当前文本行的顶端对齐。

* left, right：使图象成为浮动图象（实际是水平对齐方式）。详细内容将在 §19.2中介绍。

• id, class：文档内的标识。
• alt：替换文本。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。
• ismap, usemap：客户端图象映射。
• name：提交带表单的对象。
• height, width, border, hspace, vspace：对象、图象和小应用的可视化表述。

下面的示例将前面提到的黄山图片直接插入到当前文档中：

我刚从黄山归来！人说“黄山归来不看山”，果其然也！请看我拍摄的黄山照片：
<IMG src="http://www.bh.com/~peiyf/vacation/HuangShan.gif" alt="黄山照片">

此例可用OBJECT元素表示如下：

我刚从黄山归来！人说“黄山归来不看山”，果其然也！请看我拍摄的黄山照片：
<OBJECT data="http://www.bh.com/~peiyf/vacation/HuangShan.gif" type="image/gif>
黄山照片
</OBJECT>

三、小应用包容：APPLET元素

APPLET元素用来在文档中嵌入Java小应用。仅在支持Java的浏览器中可查看其效果。它现已不建议使用，而推荐用OBJECT元素代替。

APPET元素可以有内容，当用户程序不支持此元素或当前配置不支持小应用时，它用作替换信息。对于支持小应用的浏览器，APPLET元素的内容会被忽略。

APPLET元素支持以下属性：

• codebase = url：指定小应用的基准URL。如果没有指定此属性，则小应用的基准URL与当前文档相同。
• code = cdata：指定包含小应用编译子类的资源名。其值必须为关于小应用基准URL的相对URL。
• name = cdata：指定小应用的实例名，它使同一页面中的各小应用可以相互查找和通信。
• width = length：指定小应用显示区域的初始宽度（不计小应用弹出的窗口和对话框）。
• height = length：指定小应用显示区域的初始高度（不计小应用弹出的窗口和对话框）。
• align = bottom｜middle｜top｜left｜right：指定对象相对其上下文的位置。其值与图象元素IMG的对齐属性相同。
• archive = cdata：指定包含需要预载（preload）的类和其他资源的一个或多个（多个时用逗号隔开）档案文件（archive）。类通过给定codebase用AppletClassLoader的一个实例载入。预载资源可显著地改善小应用的性能。
• object = cdata：给定包含小应用连续化表示（serialized representation）的资源名。小应用将解开连续化（deserialized）。init( )方法不会被调用，但start( )方法则要被调用。原始对象连续化后，有效的属性值不会恢复。任何传递给小应用实例的属性都可为小应用所用。
• alt：替换文本。
• hspace, vspace：对象、图象和小应用的可视化表述。

下面的示例嵌入了一个Java小应用：

<APPLET code="Bubbles.class" width="500" height="500">
  绘制动画冒泡的Java小应用
</APPLET>

它可以用OBJECT元素进行改写：

<OBJECT codetype="application/octet-stream"
         classid="java:Bubbles.class"
         width="500" height="500">
  绘制动画冒泡的Java小应用
</OBJECT>

可以用PARAM元素给Java小应用提供初值。如下例：

<APPLET code="AudioItem" width="15" height="15">
  <PARAM name="snd" value="Hello.au｜Welcome.au">
  播放欢迎音乐的Java小应用
</APPLET>

它可用OBJECT元素改写为：

<OBJECT codetype="application/octet-stream"
         classid="AudioItem"
         width="15" height="15">
  <PARAM name="snd" value="Hello.au｜Welcome.au">
  播放欢迎音乐的Java小应用
</OBJECT>

四、文档包容

有时有必要将一个HTML文档的内容插入到另一个HTML文档，而链接到另一个文档可能并不方便。HTML 4.0推荐使用OBJECT元素及其data属性来实现这一目的。

例如，下例将文档piece_to_include.html的内容插入到OBJECT定义所在的位置：

<OBJECT data="file_to_include.html">
  警告：file_to_include.html的内容不能插入！
</OBJECT>

OBJECT元素的内容仅当data属性不能载入时才会处理。

插入锚定义的部分HTML文档时应该小心，因为此时锚定义后的整个文档都将插入，而一般情况下并不希望插入某些结束标记（例如BODY、HTML元素的结束标记）。

五、图象映射包容

图象映射（image map）可指定图象或对象的活动区域，并将每个区域指定为某一特定动作（例如获取文档或运行程序等）。

HTML 4.0的图象映射仍然包括两种类型：

• 服务器端（Server-side）。当用户用鼠标激活服务器端图象映射的一个区域时，点击的象素坐标被发送到文档所在的服务器，由服务器解释坐标并执行某一动作。
• 客户端（Client-side）。当用户用鼠标激活客户端图象映射的一个区域时，点击的象素坐标由用户程序解释，然后用户程序选择激活区域所指定的链接，并执行此链接。

客户端图象映射比服务器端映射更好。可以只用几个元素实现客户端图象映射。

对于非图形化用户程序，图象映射可处理为若干文本链接，并通过键盘激活文本区域。

1.  客户端图象映射

A和AREA元素使用以下属性来指定几何区域，并建立URL与几何区域的关联。

• shape = default｜rect｜circle｜poly：指定区域的形状。default为整个区域，rect为矩形区域，circle为圆形区域，ploy为多边形区域。
• coords = length-list：指定形状在屏幕上的位置。其数量和顺序与定义的形状有关。对于rect为左-x, 上-y, 右-x, 下-y；对于circle为圆心-x, 圆心-y, 半径；对于poly为x1, y1, x2, y2, …, xN, yN。坐标是相对于对象左上角的，其值为length（象素值或百分比值）。

OBJECT元素可使用shapes属性。设置此属性（为布尔值）时，就将对象定义为图象映射。OBJECT元素的内容将指定活动区域。

下面的示例为OBJECT元素创建一个客户端图象映射，并建立A元素定义的区域与URL的关联。

<OBJECT data="navbar.gif" shapes>
  <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> ｜
  <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> ｜
  <A href="search.html" shape="circ" coords="184,200,60">Search</A> ｜
  <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Top Ten</A>
</OBJECT>

如果OBJECT元素中包含shapes属性，用户程序就会分析元素内容，以便找到锚。

如果两个或多个区域重叠，定义在前的区域占先。

2.  带MAP和AREA的客户端图象映射

MAP和AREA元素提供客户端图象映射的另一种机制。它们支持以下属性（MAP只支持其中的id, class, style, title, name）：

• nohref：设置此属性（布尔值）时，表明指定区域没有相关链接。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• name：提交带表单的对象。
• alt：替换文本。
• href：链引用，target：窗框目标信息。
• tabindex：元素的跳位顺序。
• accesskey：元素的访问键。
• shape, coords：图象映射。

用于客户端映射时，OBJECT、IMG和INPUT元素支持usemap属性（其值为url），它指定MAP和AREA定义的图象映射所在位置。

可以用MAP和AREA元素重写前一个示例。这一次，用OBJECT创建一个插入图象的对象，并设置OBJECT的usemap属性，以建立对象与图象映射的关联，还需要在MAP元素的name属性中指定与usemap相同的值。

<OBJECT data="navbar1.gif" usemap="#map1"></OBJECT>
<MAP name="map1">
 <AREA href="guide.html"
        alt="Access Guide"
        shape="rect"
        coords="0,0,118,28">
 <AREA href="search.html"
        alt="Search"
        shape="rect"
        coords="184,0,276,28">
 <AREA href="shortcut.html"
        alt="Go"
        shape=circ
        coords="184,200,60">
 <AREA href="top10.html"
        alt="Top Ten"
        shape="poly"
        coords="276,0,373,28,50,50,276,0"> </MAP>

注意，HTML 4.0的MAP元素不与HTML 2.0保持向后兼容。

3.  服务器端图象映射

当图象映射对客户端图象映射来说过于复杂时，服务器端图象映射是合适的。

定义服务器端图象映射要使用IMG元素，并设置其ismap属性（布尔值）。区域的关联映射必须用usemap属性指定。

当用户激活图象映射的区域时，屏幕坐标直接送往文档所在的服务器。屏幕坐标以屏幕象素来表示。

点击位置通过如下方式传递给服务器。用户程序从href属性指定的URL中得到新的URL，并在坐标值（多值时以逗号隔开）前加一问号（?），然后就使用新的URL来访问链接。例如，如果用户在位置x=10, y=27处点击，则得到的URL为“/cgibin/navbar.map?10,27”。

在下面的示例中，第一个活动区域定义一个客户端链接，第二个活动区域定义服务器端链接，但没有指定特定的形状（此时使用shape属性的默认值）。由于两个链接有重叠，所以第一个链接优先权高于第二个。

<OBJECT data="game.gif" shapes>
  <A href="guide.html" shape="rect" coords="0,0,118,28">
     Rules of the Game</A>
  <A href="http://www.bh.com/cgi-bin/competition"
     ismap
     shape="default">
     Guess the location</a>
</OBJECT>

六、图象、对象和小应用的可视化表述

IMG和OBJECT元素包含可视化表述或对齐属性。这些属性在HTML 4.0中不建议使用，推荐用样式表代替它。

• height和width属性给定图象或对象的尺寸，以便用户程序留出指定空间，且在等待图象数据时仍可继续处理文档。这两个属性取值类型为length。用户程序将重新计算对象的尺寸，并与属性值相比较。
• vspace和hspace属性指定嵌入图象或对象时左右（hspace）或上下（vspace）应留出的空白。此属性的默认值没有指定，但通常是一个较小的非零长度。这两个属性的取值类型都是length。

图象或对象作为A元素的内容时，有时会使用一个边框。可使用border属性来指定边框的宽度。

七、替换文本的指定

一些非文本化的元素（IMG、AREA、APPLET和INPUT）允许指定一个替换文本（alternate text），作为元素不能正常处理时的显示内容。指定替换文本对于没有图形显示终端的用户、浏览器不支持表单功能的用户、视力有障碍的用户、使用语音合成的用户、将图形用户程序配置得不能显示图象的用户都非常有用。

替换文本由alt属性指定，其格式为alt = cdata。对于不能显示图象、表单或小应用的用户程序，此属性指定的替换文本就出现在相应的位置。替换文本的语言由lang属性指定。

虽然替换文本很有帮助，但还是要小心使用。以下是几点注意事项：

• 将嵌入的图象用于格式化页面时，不要指定无意义的替换文本。此时替换文本可指定为空字符串（””）。HTML 4.0不希望使用图象来格式化页面，它推荐使用样式表来代替。
• 不要指定无意义的替换文本。这不仅使用户失望，而且会减慢需要将文本转换为声音或盲文输出的用户程序的处理速度。

alt属性对于AREA元素是强制性的，但对于IMG、APPLET和INPUT是可选的。

如果IMG或APPLET元素中没有指定alt属性，用户程序将自行提供替换文本，并按以下顺序计算：

1. 如果指定了title属性，就将它的值作为替换文本。
2. 如果获取插入对象时HTTP头标提供标题信息，就将此信息作为替换文本。
3. 如果嵌入对象包含文本字段（例如GIF图象包含一些文本字段），就从文本字段中抽取信息作为替换文本。
4. 如果用户程序找不到其他信息，它可能将文件名（去掉扩展名）作为替换文本。

如果INPUT元素中没有指定alt属性，用户程序也将自行提供替换文本，并按以下顺序计算：

1. 如果指定了title属性，就将它的值作为替换文本。
2. 如果指定了name属性，就将它的值作为替换文本。
3. 否则，type属性的值可能作为替换文本。

3  HTML 4.0文档表述

文档表述（Presentation of documents）是HTML 4.0另一个重要方面的内容。所谓“表述”，就是文档数据的表示方法。如果说第18章强调的是文档结构，那么本章的文档表述则与结构无关，而是具体数据的表示。

文档表述包括三个主要内容：样式表、格式化与字体以及窗框。

3.1         样式表：控制文档的表述

样式表（Style sheets）是页面设计技术的一项重要突破，它能够相当程序地改善页面的外观。从前Web仅使用于科学技术环境中，人们对内容的重视远超过其表述。但现在不同了，不同层次和程度的人们正在发现和使用Web，HTML的表述局限性会挫伤他们的积极性。

为了克服HTML表述上的局限性，人们开发了多种技术来进行改进。但不幸的是这些技术也有副作用，它们有时、对某些人是好的，但决不是总是、对所有人都是好的。这些技术包括：

• 使用专用的HTML扩展。
• 将文本转换为图象。
• 使用图象控制页面中的空白。
• 使用表格进行页面布局。
• 编写程序代替HTML的功能。

这些技术增加了Web页面的复杂性，降低了灵活性，导致了互操作性问题，还会造成残疾人的使用困难。

样式表易于进行表述控制，扩充了HTML的文档表述功能。使用样式表后，指定文本各行之间的空白、各行的缩进量、文本颜色和背景颜色、字体大小和样式等等都变得非常容易。

HTML 4.0支持以下样式表功能：

1.  灵活放置样式信息（Style Information）

将样式表放在单独的文件中可使其便于重新使用。有时也可以在HTML文档中放入样式信息，或者在文档开始处集中指定样式信息，或在文档主体的元素属性中使用样式信息。为了便于集中管理基于站点的样式，也可以使用HTTP头标来对文档设置样式表。

2.  不依赖于特定样式表语言

HTML 4.0并没有将自己紧缚于某一特定的样式表语言。这就使得文档作者可根据自己的需要和喜好使用样式表语言中的任意一种，因为简单的语言适合多数用户，复杂的语言则适于有特殊需要的少数用户。

HTML 4.0规范中主要使用层叠样式表CSS（Cascading Style Sheets）语言。但根据HTML 4.0的机制，其他样式表语言也是可行的。

3.  层叠样式表

层叠样式表是CSS等样式表语言提供的一种能力。所谓层叠（Cascading），也就是可以将几个来源的格式信息混合在一起使用。它定义样式表的顺序，其中后面的样式表比前面的样式表优先级高。例如，层叠可以联合使用公司样式指南、工作组文档公共格式和特定文档的样式。这些样式表可单独存贮，因而可以重用，也就简化了文档的写作、提高了网络缓存的使用效率。

不是每种样式表语言都支持层叠功能。

4.  媒体相关性

HTML允许以媒体无关的方式指定文档。这就使得人们可以采用相当广泛的设备和媒体来访问Web页面，例如Windows和Mac的图形显示、X11、电视机顶置盒、特别适配的电话、基于PDA的移动设备、基于语音的浏览器以及基于盲文的小设备等。

样式表则可应用于特定媒体或媒体组。样式表可扩充屏幕的用途，可施用于打印时，但对于基于语言的浏览器则用处较小。

HTML 4.0允许对给定的样式表定义相当广泛的媒体类型。这样，用户程序就可避免获取不合适的样式表。样式表语言还可能允许在同一样式表中描述媒体相关性。

5.  可替换样式

有时可能需要为页面读者设计几种查看页面的可替换样式，例如使用较小字体的紧凑版本，以及使用较大字体以增大可读性。HTML 4.0具有这种机制，使得页面作者能够指定可替换样式，包括指定哪种样式为默认样式，用户还能够在不同样式中进行选择或在不同样式间来回切换。

一、给HTML添加样式

HTML文档可直接包括样式表规则，也可从外部导入样式表。HTML中可使用任何样式表语言。简单的样式表语言语言对大部分用户可能已经足够，但较复杂的语言则更适合特殊需要。HTML不依赖于特定样式表语言。但在HTML 4.0规范中，主要只使用层叠样式表语言CSS。

1.  设置默认样式表语言

样式规则的用法是样式表语言的用法，而不是HTML的。由于支持样式表的用户程序必须分析这些规则，因此必须声明使用何种样式表语言。

HTML规定使用META元素来设置文档的默认样式表语言。例如，如果要将默认样式表语言设置为CSS，只需在文档的HEAD中安放下面的声明：

<META http-equiv="Content-Style-Type" content="text/css">

默认样式表语言也可以用HTTP头标来设置。上述META声明等效于HTTP头标：

Content-Style-Type: text/css

如果使用两个以上的META声明或HTTP头标来指定默认样式表语言，那么最后一个占优先权。HTTP头标会比文档的HEAD得到更早的处理。如果没有显式声明，默认的样式表语言将被假设为CSS，但HTML 4.0建议写作工具提供显式声明。

支持样式表的HTML分析器必须能够区别HTML和样式表规则。HTML元素和属性定义样式表数据的开始，样式表数据的结束则定义为结束标记的前分隔符（</），其后是一个SGML名字开始字符（[a-zA-Z]）。所有样式表数据都必须给用户程序提供合适的样式表处理器（handler）。

2.  行内样式信息（Inline Style Information）

style属性用来指定单个元素的样式信息。此样式信息按默认样式表语言格式指定。

style属性的格式为：

style = cdata

下面的示例为段落文本设置颜色和字体大小信息：

<P type=”text/css” style=”font-size: 12pt; color: fuschia”>Aren’t style sheets wonderful?

这里，style属性使用CSS的声明格式：每一特性（Property）由name: value格式描写，而多个特性声明彼此之间用分号（;）隔开。

style属性适合指定单个HTML元素的样式特定信息。如果样式需要为几个元素所重用，就应该使用STYLE元素。若需较强灵活性，应该将样式放在单独的样式表中。

3.  头部样式信息：STYLE元素

STYLE元素可用来将样式表规则放置在文档的头部。HTML允许在文档的HEAD段中出现任意次STYLE元素。

用户程序不支持样式表，或不支持STYLE元素使用的特定样式表语言时，就会将STYLE元素隐藏起来，而不会显示为文档文本的一部分。有的样式表语言支持将其内容隐藏起来的用法。

STYLE元素支持以下属性：

• type = cdata：指定元素内容的样式表语言。它会改写默认样式表语言。样式表语言按Internet媒体类型（MIME类型）格式给定，例如”text/css”。
• media = cdata-list：指定样式信息期望的目的媒体。它可以是一个媒体类型，也可以是多个媒体类型（用逗号隔开）。可能的媒体类型包括：

① screen：预期输出为不分页的计算机屏幕。这是默认值。

② print：预期输出为分页的不透明材料，以及以打印预览形式在屏幕上查看的文档。

③ projection：预期输出为投影仪。

④ braille：预期输出为盲文触觉反馈设备。

⑤ speech：预期输出为语音合成器。

⑥ all：使用所有设备。

• lang：语言信息，dir：文本方向。

STYLE元素中使用的样式表规则可能会比style属性中能够使用的要多。例如，对于CSS来说，STYLE元素中可声明以下规则：

• 特定HTML元素的全部实例（例如全部P元素、全部H1元素等）。
• 属于特定类别的HTML元素的全部实例（即元素的class属性设置为某个值）。
• HTML元素的单个实例（即元素的id属性设置为某个值）。

样式规则的优先权和继承方式的规则取决于样式表语言。

下面的STYLE元素使用CSS声明在文档中的H1元素周围加一边框，并使其在页面中对中：

<HEAD>
  <STYLE type="text/css">
    H1 {border-width: 1; border: solid; text-align: center}
  </STYLE>
</HEAD>

如果要将这一样式信息只施加于特定类别的H1元素，则可以作以下修改：

<HEAD>
  <STYLE type="text/css">
    H1.myclass {border-width: 1; border: solid; text-align: center}
  </STYLE>
</HEAD>
<BODY>
  <H1 class="myclass"> 这个H1受样式信息的影响 </H1>
  <H1> 这个H1不受样式信息的影响 </H1>
</BODY>

如果要将样式信息的范围限制到H1的单个实例，则可设置id属性：

<HEAD>
  <STYLE type="text/css">
    H1.myid {border-width: 1; border: solid; text-align: center}
  </STYLE>
</HEAD>
<BODY>
  <H1 class="myclass"> 这个H1不受影响 </H1>
  <H1 id="myid"> 这个H1受样式影响 </H1>
  <H1> 这个H1不受影响 </H1>
</BODY>

虽然几乎所有的HTML元素都可设置样式信息，但有两个元素使用样式信息特别有用，因为它们不添加任何预先定义的表述。这两个元素是DIV和SPAN，它们只定义结构，因而与样式表结合起来后，就能够不受限制地扩充HTML。

下面的示例用SPAN元素将段落的头几个词的字体样式设置为小型大写字母：

<HEAD>
  <STYLE type="text/css">
    SPAN.sc-ex { font-variant: small-caps }
  </STYLE>
</HEAD>
<BODY>
  <P><SPAN id="sc-ex">The first</SPAN> few words of
  this paragraph are in small-caps.
</BODY>

下面的示例使用DIV元素和class属性设置几个段落文本对齐方式，将其标记为科学论文的摘要（Abstract）。这一样式信息可被其他摘要重用，只要在文档的其他地方设置class属性即可。

<HEAD>
  <STYLE type="text/css">
    DIV.Abstract { text-align: justify }
  </STYLE>
</HEAD>
<BODY>
  <DIV class="Abstract">
    <P>The Chieftain product range is our market winner for
        the coming year. This report sets out how to position
        Chieftain against competing products.
    <P>Chieftain replaces the Commander range, which will
        remain on the price list until further notice.
  </DIV>
</BODY>

media属性用于指定样式规则的期望输出。设置media属性后，用户程序就可以避免从网络上获取自己不支持的样式表。

下面的示例声明全部施用于H1元素。当显示在计算机屏幕上时，H1的全部实例都居中并显示为蓝色。打印时，H1的全部实例都居中。本例中还为语音合成器指定了另外一个样式。

<HEAD>
 <STYLE type="text/css" media="screen">
    H1 { color: blue}
 </STYLE>
 <STYLE type="text/css" media="screen, print">
   H1 { text-align: center }
 </STYLE>
 <STYLE type="text/acss" media="speech">
   H1 { cue-before: url(bell.aiff); cue-after: url(dong.wav)}
 </STYLE>
</HEAD>

媒体控制施用于外部样式表时特别有用，因为用户程序可以只从网络上获取施用于当前设备的样式表，以便节省传输时间。

前一个示例可以重写，以便使用外部样式表而不是STYLE元素。用户程序可以参考media属性，只获取适合目的媒体的样式表。

<HEAD>
<LINK href="doc1-screen.css" rel="stylesheet"
      type="text/css" media="screen">
<LINK href="doc1-print.css" rel="stylesheet"
      type="text/css" media="print">
<LINK href="doc1-speech.css" rel="stylesheet"
      type="text/css" media="speech">
</HEAD>

4.  外部样式表

样式表可以不在HTML文档中定义，而在单独的文件中定义。这样做的好处有：

• 可以在大量文档（和站点）中共享样式表。
• 不需修改文档就能改变样式表。

启用样式表时，用户有可能可以选择使用样式表。每个样式都可能是若干格式表的层叠。有的样式表不经用户选择直接使用（只要它引用当前媒体类型），这类样式表称为坚持表（persistent）。还有的样式表只根据特定选择施用，它们称作可选表（alternate）。载入页面时会自动施用默认样式表（default style sheet），但用户可以用可选样式表代替它。

HTML中必须用LINK元素来指明外部样式表，并使用以下属性：

• 将href属性值设置为样式表文件所在位置。href的值是一个URL。
• 用rel属性值来标明样式表是坚持表（rel=”stylesheet”）、默认表（rel=”stylesheet”）还是可选表（rel=”alternate stylesheet”）。
• 当样式表为默认样式表（可以由用户激活或去活）时，设置title属性值。

下例指定文件mystyle.css中的外部坚持样式表：

<LINK href="mystyle.css" rel="stylesheet">

设置title属性可将坚持表改变为默认表；此时用户程序将根据title属性向用户提供施用命名样式（named style）的可能。

<LINK href="mystyle.css" title="Compact" rel="stylesheet">

在rel属性中增加关键词alternate就将样式表改变为可选表：

<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet">

当用户通过用户程序激活样式时，共享同一title的全部可选样式都将得以施用，而title不相同的样式表则不会得到施用，但没有设置title属性的样式表则总是被施用（除非用户全部关闭样式表）。

用户程序应该给用户提供查看和选择可选样式表的方法，例如以title属性值来命名每一选项。

CSS等层叠样式表语言允许联合使用不同来源的样式信息，但不是所有样式表语言支持层叠功能。定义层叠的方法很简单，仅需使用一系列LINK和/或STYLE元素即可，而样式信息按照这些元素在HEAD中出现顺序进行层叠。层叠可包括施用于不同媒体的样式表，用户程序应负责过滤适合当前情况的样式表。

下面的示例定义两个名为compact的可选样式表，如果用户选择compact样式，那么这两个样式表将被施用，同时还施用common.css样式表，因为它没有设置title属性。如果用户选择big print样式，用户程序将施用文件bigprint.css和common.css，而compact样式表不会被施用。

<LINK rel="alternate stylesheet" title="compact" href="small-base.css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css">
<LINK rel=stylesheet href="common.css">

下面是同时使用LINK和STYLE元素的示例：

<LINK REL=stylesheet HREF="corporate.css">
<LINK REL=stylesheet HREF="techreport.css">
<STYLE TYPE="text/css">
    p.special { color: rgb(230, 100, 180) }
</STYLE>

5.  设置默认命名样式

HTML 4.0中使用META元素来给文档设置默认命名样式（default named style）。例如，在前面的示例中要将文档的默认命名样式设置为compact，就需在HEAD中包括下面的一行：

<META http-equiv="Default-Style" content="compact">

默认样式也可使用HTTP头标来设置。上述META声明等效于下面的HTTP头标：

Default-Style: “compact”

如果使用两个以上META声明或HTTP头标来指定默认样式，则最后一个占优先权。因此HTTP头标被视为发生在HEAD之前。如果没有显式声明，默认样式则由已设置title属性、且rel属性值为stylesheet的LINK元素来定义。

二、继承与层叠

用户程序处理文档时，需要查找样式特性的值，例如字体族（font family）、字体样式和大小、行高、文本颜色等等。准确的实现机制取决于样式表语言，下面是一般原则：

当多个样式规则全部直接施用于一个元素时，使用层叠机制。用户程序使用层叠机制对样式规则按特征（specificity）进行排序，决定施用哪一规则。如果没有找到任何规则，下一步就取决于样式特性（property）是否能继承。不是所有的特性都能继承。如果没有为特定元素指定显式规则，能够继承的特性使用的默认值由样式表语言提供。

如果特性能够继承，用户程序就确定样式内的元素是否施用某一规则，直到找到可施用的规则。这种机制使得样式表可以更简洁地指定。例如，如果要为BODY内的全部元素指定字体族，只需指定施用于BODY元素的一个规则。

三、隐藏样式元素的内容

对于不支持的用户程序，样式表设置的内容不能作为文档内容显示出来。有的样式表语言提供某一用法，可将STYLE元素的内容从不支持样式表的用户程序中隐藏起来。

下面的示例说明，CSS将STYLE元素内容用注释的方法从不支持样式表的用户程序中隐藏起来。

<STYLE type="text/css">
<!- -
   H1 { color: red }
   P  { color: blue}
   -->
</STYLE>

四、通过HTTP头标指定样式

有时，对Web服务器进行配置，将样式表指定施用于站点上的若干页面，将会更加方便。HTTP的Link头标与LINK元素的效果完全相同，支持的属性和属性也相同，使用多个Link头标就对应于多个LINK元素，而且其顺序也相同。因此，下面的头标

Link: REL=stylesheet HREF=”corporate.css”

等效于

<LINK rel=”stylesheet” href=”corporate.css”>

并且可以使用多个Link头标来指定几个可选样式，然后用rel属性来确定默认样式。下面的示例将compact设置为默认样式，因为它的rel属性不带alternate关键词：

Link: rel=”stylesheet” title=”compact” href=”compact.css”
Link: rel=”alternate stylesheet” title=”big print” href=”bigprint.css”

通过Email传输HTML文档时，这种机制同样有效。不过，有的email程序会改变RFC 822头标的顺序，为保证Linke头标指定的样式表层叠顺序不受影响，可使用连锁头标（header concatenation）来合并同一头标字段的数个实例。当属性值内包含白空格时，只需用引号（”）将其括起来即可。为了使用HTTP或email头标不允许的字符，或在传输时可能受网关影响的字符，可使用SGML字符实体。。

用HTTP头标暗指的LINK和META元素发生于文档HEAD中明指的LINK和META元素之前。

3.2 对齐方式、字体样式和水平分隔线

本节讨论的是用于文档可视格式化的HTML元素和属性，它们大多与以前版本的HTML基本相同。因此，HTML 4.0给它们许多可视表述的元素和属性标上了“不建议使用的（deprecated）”，在将来的HTML版本中可能被废除。一般来说，HTML 4.0建议用样式表来代替它们，但当用户程序不支持样式表或不支持样式表的某些功能时例外。

一、格式化

1.  背景颜色

同以前一样，bgcolor用来设置文档主体或表格表元的背景颜色：

bgcolor = color

此属性值可用于BODY元素和表格元素（TABLE、TR、TH和TD）。

2.  对齐方式

在页面中需要对块级元素（表格、图象、对象以及段落等）进行对齐设置时，使用align属性。虽然许多元素都可设置align属性，但其取值范围和意义有时对于不同的元素是不相同的。

align属性通常用于指定元素相对其上下文的水平对齐方式：

align = left｜center｜right｜justify

其中left, center, right和justify分别为左对齐、居中对齐、右对齐和两端对齐。左对齐为默认值。

下面的示例对H1设置align属性：

<H1 align="center"> How to Carve Wood </H1>

使用样式表可达到同一效果：

<HEAD>
 <STYLE>
  H1 { text-align: center}
 </STYLE>
</HEAD>
<H1> How to Carve Wood </H1>

但这样将使所有H1对居中。如果要减少样式应用范围，设置元素的id属性：

<HEAD>
 <STYLE type="text/css">
  H1.wood {text-align: center}
 </STYLE>
</HEAD>
<H1 id="wood"> How to Carve Wood </H1>

类似地，使用align属性设置的段落两端对齐

<P align=”justify”>……段落文本……

可使用样式表表达为：

<HEAD>
 <STYLE type="text/css">
  P.mypar {text-align: justify}
 </STYLE>
</HEAD>
<P id="mypar">……段落文本……

对若干段落设置两端对齐时，可使用DIV元素：

<DIV align="justify">
  <P>……第一段的文本……
  <P>……第二段的文本……
  <P>……第三段的文本……
</DIV>

它也同样可以使用样式表表示：

<HEAD>
 <STYLE type="text/css">
  DIV.mypars {text-align: justify}
 </STYLE>
</HEAD>
<DIV id="mypars">
 <P>……第一段的文本……
 <P>……第二段的文本……
 <P>……第三段的文本……
</DIV>

下例使用样式表对整个文档设置两端对齐：

<HEAD>
<STYLE type="text/css">
 BODY {text-align: justify}
</STYLE>
</HEAD>
<BODY>
……文档主体两端对齐……
</BODY>

CENTER元素与使用DIV元素并将其aling属性设置为center完全等效。CENTER元素也是不建议使用的。

3.  浮动对象

图象和对象可以象文本一样放置在行内，也可以浮动于页面的一侧，临时改变文本的页边距。

浮动对象、图象、窗框等也使用align属性。浮动时通常会开始一个新行。

用于浮动对象时，align属性可取值left、right和center，分别表示将对象浮动于页面的左边距、右边距和中间，而对象周围的文本作相应环绕。

需要控制浮动对象周围的文本时，使用带clear属性的BR元素。

clear = none｜left｜right｜all

clear属性指定BR元素开始的下一行从何处开始。none为默认值，它表示下一行正常开始；left表示下一行从页面左边距开始；right表示下一行从页面右边距开始；all表示下一行从页面任意一边距开始。这些都与以前版本的HTML没有什么不同。

使用样式表可以实现对象浮动及BR元素的换行特点。例如用CSS可实现如下：

<STYLE type="text/css">
  BR {clear: left}
</STYLE>

如果希望指定特定的BR元素实例，则需要使用id属性：

<HEAD>
 <STYLE type="text/css">
  BR.mybr {clear: left}
 </STYLE>
</HEAD>
<BODY>
 ……
 <BR id="mybr">
 ……
</BODY>

二、字体

以下字体信息元素在HTML 4.0中没有标为“不建议使用的”，但仍建议使用样式表来指定字体信息。

1.  字体样式元素：TT, I, B, BIG, SMALL, STRIKE, S和U

这些元素的意义没有太大变化。虽然其实现与具体用户程序有关，但基本上是：

• TT: 将字体处理为打字机字体或单行间距文本。
• I: 将字体处理为处理为斜体。
• B: 将字体处理为粗体。
• BIG: 将字体处理为处理为大号字体。
• SMALL: 将字体处理为小号字体。
• STRIKE和S: 将字体处理为带删除线的文本。不建议使用。
• U: 将字体处理为带下划线的文本。不建议使用。

这些元素支持以下属性：

• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown onkeyup：本征事件。

使用样式表能够实现更加丰富的字体效果。下例用CSS将段落指定为蓝色、斜体：

<HEAD>
  <STYLE>
    P.mypar {font-style: italic; color: blue}
  </STYLE>
</HEAD>
<P id="mypar">……蓝色斜体文本……

2.  字体修饰元素：FONT和BASEFONT

FONT元素设置文本的字体大小和颜色，BASEFONT元素设置基准字体大小（也可以设置颜色）。字体的实际大小是FONT相对于BASEFONT设置的基准字体实现的，如果没有使用BASEFONT，默认的基准字体大小为4。

这两个元素及其属性是不建议使用的，其效果可用样式表达到。

FONT和BASEFONT支持的属性包括：

• size = cdaa：设置字体的大小。其属性值为1~7的整数，表示字体绝对大小；或者为带 + 或 – 的整数，表示相对基准字体的增减字号数（实际值仍应在1~7之间）。此属性只由FONT元素可用。
• color = color：设置文本颜色。颜色值可以是颜色名或十六进制RGB颜色值。
• face = cdata-list：设置字体名。它可以设置多个字体名（用逗号分隔），用户程序按字体名出现的顺序进行搜索。

三、 水平分隔线：HR元素

HR元素在页面上产生一个水平分隔线。水平分隔线默认为带阴影的凹槽效果，且前后各有若干垂直空白（但空白大小取决于用户程序）。

• noshade：设置此属性时，分隔线显示为实心线，而不是传统的二色凹槽效果。
• size = length：指定分隔线的宽度。其默认值取决于用户程序。
• width = length：指定分隔线的长度。其默认值为100%，也就是整个窗口宽度。
• align：对齐方式。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

3.3 窗框：文档的多视图表述

HTML窗框（frame）提供页面的多视图表述机制。视图可以独立于窗口或子窗口，这样多个视图就可以使某些信息一直保持为可见，而其他视图滚动或被替换。窗框不是HTML 4.0的创造，但它对窗框功能有所扩充和增强。

一、窗框的布局

带窗框（frame）的HTML文档与不带窗框的文档稍有不同。标准的文档有一个HEAD段和一个BODY，而带窗框的文档有一个HEAD、一个FRAMESET和一个可选的BODY。文档的FRAMESET段指定用户程序主窗口中的视图布局，BODY段位于FRAMESET段后，提供可替换内容，以便用于不支持窗框或配置得不显示窗框的用户程序。

通常可以放置于BODY中的元素不能放置在第一个FRAMESET之前，否则FRAMESET就会被用户程序忽略。

1.  FRAMESET元素

FRAMESET元素指定用户主窗口的视图布局，指定时以窗口的矩形子空间（subspace）为单位。

FRAMESET元素支持以下属性：

• rows = length-list：指定水平窗框的布局。它是以逗号隔开的一组长度值，如果没有指定，默认值为100%。
• cols = length-list：指定垂直窗框的布局。它也是以逗号隔开的一组长度值，如果没有指定，默认值为100%。
• onload, onunload：本征事件。

实际上，设置rows属性定义水平子空间的数量，设置cols属性定义垂直子空间的数量，同时设置两个属性时就会创建一个窗框网格。

如果没有设置rows属性，每一列窗框就会直跨整个页面的长度；如果没有设置cols属性，每一行窗框就会横跨整个页面的宽度；如果两个属性都没有设置，窗框就占满整个页面的空间。

rows和cols属性值都是逗号分隔的若干长度值。长度可以是绝对值（象素数或百分比数），也可以是相对值。相对值是形式为 “i*” 的数，其中i为整数，且 “*” 等效于 “1*”。用户程序在分配空间时，先分配绝对长度，然后在相对长度间划分剩余的空间。

下面的示例将用户程序窗口划分为三列：第二列为250象素的固定宽度（用于放置大小已知的图象这样的场合），第一列得到剩余空间的25%（即1/4），第三列得到剩余空间的75%（即3/4）。

<FRAMESET cols="1*,250,3*">
  ……窗框集定义的其余部分……
</FRAMESET>

下面的FRAMESET标记创建2×3的子空间网格：

<FRAMESET rows="30%,70%" cols="33%,34%,33%">

下面是另外一个示例：

<FRAMESET rows="30%,400,*,2*">

FRAMESET定义可以嵌套（理论上可以任意层嵌套）。在下面的示例中，外层的FRAMESET将窗口空间划分为相等的三列，内层的FRAMESET将其中的第二列再划分为不相等的两行。

<FRAMESET cols="33%, 33%, 34%">
     ……第一个窗框的内容……
     <FRAMESET rows="40%, 50%">
        ……第二个窗框的第一个子窗框……
        ……第二个窗框的第二个子窗框……
     </FRAMESET>
     ……第三个窗框的内容
</FRAMESET>

2.  FRAME元素

FRAME元素用来定义单个视图（窗框）的内容和外观。

FRAME元素不允许使用结束标记。它支持以下属性：

• name = cdat：指定当前窗框的名字。此名可以是后续链接的目标。
• src = url：指定窗框中起始文档的位置。
• noresize：设置此属性时，窗框的大小不允许改变。
• scrolling = auto｜yes｜no：指定窗框的滚动信息。auto是需要时滚动（默认值），yes是产生滚动条，no是不产生滚动条。
• frameborder = 1｜0：指定窗框是否有边框。1是绘出边框（默认值），0是不绘出边框。设置0值时，邻近窗框有可能绘出边框。
• marginwidth = length：指定窗框内容的左右边距。属性值必须大于一个象素。默认值取决于用户程序。
• marginheight = length：指定窗框内容的上下边距。属性值必须大于一个象素。默认值取决于用户程序。
• target：目标窗框信息。

src属性用于指定窗框包含的初始HTML文档。src属性值所指定的文档不能是定义窗框集（frameset）的文档本身或它的部分内容。

下面是一个示例窗框文档：

<HTML>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contents_of_frame1.html">
      <FRAME src="contents_of_frame2.gif">
  </FRAMESET>
  <FRAME src="contents_of_frame3.html">
  <FRAME src="contents_of_frame4.html">
</FRAMESET>
</HTML>

它产生的窗框布局效果大致如下：

下面的示例则是不合法的，因为第二个窗框的内容与窗框集处于同一文档。

<HTML>
<FRAMESET cols="50%,50%">
  <FRAME src="contents_of_frame1.html">
  <FRAME src="#anchor_in_same_document">
</FRAMESET>
<BODY>
……其他文本……
<H2><A name="anchor_in_same_document">重要信息！</A></H2>
……其他文本……
</BODY>
</HTML>

下面的示例是窗框装饰属性的使用。它将第一个窗框设置为没有滚动条，第二个窗框设计了内容（一个图象文件）的边距，而且尺寸不许改变。第三个窗框和第四个窗框之间不给出边框。

<HTML>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contents_of_frame1.html" scrolling="no">
      <FRAME src="contents_of_frame2.gif"
               marginwidth="10" marginheight="15"
               noresize>
  </FRAMESET>
  <FRAME src="contents_of_frame3.html" border="0">
  <FRAME src="contents_of_frame4.html" border="0">
</FRAMESET>
</HTML>

二、指定目标窗框信息

target属性用于指定打开文档的目标窗框名。

target = cdata

用name属性给窗框命名后，其他元素定义的链接就可以将它作为目标。target属性可设置于链接元素（A和LINK）、图象映射元素（AREA）和表单元素（FORM）。

下面的示例的示例说明通过设置target，窗框的内容可进行动态修改。首先在文档frameset.html中定义一个窗框集：

<HTML>
<FRAMESET rows="50%,50%">
   <FRAME name="fixed" src="init_fixed.html">
   <FRAME name="dynamic" src="init_dynamic.html">
</FRAMESET>
</HTML>

然后，在文档init_dynamic.html中链接到窗框dynamic：

<HTML>
<BODY>
……文档的开始……
现在请看<A href="slide2.html" target="dynamic">第二张幻灯片</A>
……文档继续……
很好！您可以看<A href="slide3.html" target="dynamic">第三张幻灯片</A>了。
</BODY>
</HTML>

1.  设置链接的默认目标

当同一个文档中多个链接指明同一个目标时，就可以只指定一次目标，然后在各链接中共享此target属性。对BASE元素设置target属性就可达到这一目的。

利用这一特点，上一示例可用BASE元素改写为：

<HTML>
<HEAD>
<BASE target="dynamic">
</HEAD>
<BODY>
……文档的开始……
现在请看<A href="slide2.html">第二张幻灯片</A>
……文档继续……
很好！您可以看<A href="slide3.html">第三张幻灯片</A>了。
</BODY>
</HTML>

2.  目标语法

可以有几种方法使窗框成为链接的目标。

1. 如果一个元素的target属性设置为已知窗框，那么元素被激活时，元素所指明的文档就会载入到目标窗框中。
2. 如果元素没有设置target属性，但BASE元素已设置此属性，则BASE元素的目标决定窗框，载入规则同前。
3. 如果元素和BASE元素都没有设置target属性，则元素指明的文档就会载入到元素所在的窗框。
4. 如果任何目标涉及未知窗框F，用户程序就会创建新的窗口和窗框，并将窗框命名为F，然后将元素指明的文档载入到新窗框中。

用户程序有可能向用户提供改写target属性的机制。

3.  目标名

目标名可以是任何以字母（a-z, A-Z）开始的字符串。但下列目标名为特殊意义的保留名：

• _blank：将指定文档载入到未命名的新窗口中。
• _self：将文档载入到引入此目标的元素所在的窗框中。
• _parent：将文档载入到当前窗框的FRAMESET父窗框中。如果当前窗框没有父窗框，则此值等效于_self。
• _top：将文档载入到原始顶层窗口（即取消所有其他窗框）。如果当前窗框没有父窗框，此值等效于_self。

三、替换内容

由于存在不支持窗框功能的用户程序，或者可能将用户程序配置为不显示窗框， HTML 4.0仍然希望提供内容的替换版本。

不支持窗框的用户程序必须显示最外层的FRAMESET元素后的BODY段内容，而支持窗框的用户程序则会忽略这一BODY（除非用户将其配置为不显示窗框）。

另外，HTML 4.0仍然支持NOFRAMES元素。也就是说，可以用NOFRAMES元素来指定不显示窗框时的内容。支持窗框功能、但配置为不显示窗框的用户程序会显示NOFRAMES内容，不支持窗框功能的用户程序则永远显示NOFRAMES内容。

下面的示例假设有一个定义窗框集的文档top.html，它指明文档main.html和文档table_of_contents.html：

<HTML>
<FRAMESET cols="50%, 50%">
   <FRAME src="main.html">
   <FRAME src="table_of_contents.html">
</FRAMESET>
</HTML>

用户使用不显示窗框的用户程序时，将看不到任何东西，因为没有在top.html的BODY中提供替换内容。如果将table_of_contents.html和main.html直接插入BODY中，又有可能使得支持窗框的用户程序两次显示同一数据，一份来自窗框集，一份来自BODY。

为解决此问题，将目录内容（即table_of_contents.html的内容）放到文档main.html的NOFRAMES元素中：

<!-- main.html -->
<HTML>
<BODY>
<NOFRAMES>
……目录内容……
</NOFRAMES>
……文档的其他内容……
</BODY>
</HTML>

然后在top.html中创建一个指向main.html的链接：

<!-- top.html -->
<HTML>
<FRAMESET cols="50%, 50%">
   <FRAME src="main.html">
   <FRAME src="table_of_contents.html">
</FRAMESET>
<BODY>
请点击<A href="main.html">此处</A>查看目录！
</BODY>
</HTML>

四、内联窗框：IFRAME元素

IFRAME元素可将窗框插入到文本中。插入内联窗框（inline frame）类似于用OBJECT元素插入对象，它也可以将一个HTML文档插入到另一个文档中，或者设置对周围文本的对齐方式等。

插入的内联窗框信息用src属性指定。但是，IFRAME元素的内容只在不支持窗框或配置为不显示窗框的用户程序得到显示。

IFRAME元素支持以下属性：

• width, height = length：指定内联窗框的宽度和高度。
• name, src, frameborder, marginwidth, marginheight, scrolling：窗框控制和装饰。
• target：目标窗框信息。
• align：对齐方式。

内联窗框的大小不能改变（因此它也不支持nosize属性）。

对于不支持窗框的用户程序，下面的示例将插入一个内联窗框：

<IFRAME src="foo.html" width="400" height="500"
         scrolling="auto" frameborder="1">
[您的浏览器不支持窗框或当前配置不能显示窗框！
请点击<A href="foo.html">此处</A>获取相关文档。]
</IFRAME>

4 HTML 4.0交互文档

前两章的内容是HTML 4.0的基本内容，它将HTML的传统精华发展到了至臻至善的程度，代表了HTML的一个巅峰。本章的交互文档则是HTML的突破性进展，它是动态页面技术的精髓。在HTML以前的版本中，文档交互技术从不曾拥有如此重要的地位。

HTML 4.0交互文档包括两个主要方面的内容：一个是表单（Form），它是从HTML 2.0以来就具备的，但在HTML 4.0中它有了重大改进；另一个是脚本（Script），即动态文档（Animated document）和智能表单（Smart Form）。

4.1 表单（Form）

HTML表单是包含正常内容、标记和特殊元素的一段文档。这些特殊元素称为控件（control），它们负责接收用户输入和对用户输入作出响应。用户通常通过键入文本和选择菜单项等方式来填写表单，然后提交表单等候处理。提交的表单可以邮送给另一用户，也可以送给处理程序。

控件包括复选框（check box）、单选框（radio button）、标签（label）以及菜单（menu）等。每个控件都有自己的名字，当表单提交时，有的控件将它的名字/值对（name/value pair）连同表单一起提交。

一、FORM元素

FORM元素的作用相当于控件包容器。它指定以下内容：

• 表单的布局（由元素的内容给定）。
• 处理表单完成和提交的程序（action属性指定）。接收程序必须能够分析名字/值对，以便利用它们。
• 用户数据发送给服务器的方法（method属性）。
• 服务器处理表单必须接受的字符编码（accept-charset属性）。用户程序可以建议用户accept-charset属性的值，还可以限制用户输入不能识别的字符的能力。

FORM元素支持以下属性：

• action = url：指定处理提交的表单的程序。它可以是HTTP URL（将表单提交给程序），也可以是Mailto URL（邮送表单）。
• method = get｜post：指定用来将名字/值对提交给表单处理程序的HTTP方法。post表示HTTP POST方法，它包括表单体内的名字/值对，但不包括action属性指定的URL；get表示HTTP GET方法，它将名字/值对附加到action指定的URL，并将形成的新URL发送给服务器。为保持向后兼容，get是method属性的默认值；但在HTML 4.0中因为国际化考虑将其标记为“不建议使用的”。
• enctype = cdata：指定用来将表单提交给服务器的Internet媒体类型（MIME）（当method值为post时）。此属性的默认值为application/x-www-form-urlencoded。如果返回文档中包括提交文件，则应该使用multipart/form-data。
• accept-charset = cdata：指定服务器处理表单必须接受的输入数据字符编码方式。编码方式可以为空，也可以是多种编码方式的列表，彼此用逗号隔开，其charset值按RFC 2045规定。服务器必须将编码列表解释为异或（exclusive-or）列表，也就是说，服务器必须能够接受每接收实体的任何一个字符编码。

accept-charset属性的默认值为保留字UNKNOWN，但用户程序可能会将此值解释为用来传输包含FORM元素的文档的字符编码。

• accept = cdata：指定服务器正确处理表单的MIME类型。它也是逗号隔开的列表。用户程序在提示用户选择发送到服务器的文件时，可用此属性提供的信息来过滤不支持的文件（可与INPUT元素设置type=”file”比较）。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• style：行内样式信息。
• title：元素标题。
• target：目标窗框信息。
• onsubmit, onreset：本征事件。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

表单可包含文本和标记（段落、列表等等）以及控件。FORM元素内任何控件的name属性的有效范围为该FORM元素。

下例使用POST方法发送表单，并规定提交的表单交由程序adduser处理：

<FORM action="http://www.bh.com /prog/adduser" method="post">
  ……表单内容……
</FORM>

下例则说明可通过Email发送提交的表单：

<FORM action="mailto:[email protected]" method="post">
  ……表单内容……
</FORM>

二、控件

下列控件元素通常出现于FORM元素内部。但这些元素也可以出现在FORM元素外部，用来设计用户界面。这种用户往往见于HTML 4.0所称的“本征事件”，其详细内容见后。

有些表单控件自动带有标签（label）（INPUT和BUTTON元素创建的按钮），但大部分控件不自动附带标签（INUPT和TEXTAREA创建的文本字段，INPUT创建的复选框和单选框，SELECT创建的菜单）。对于隐含标签的控件，用户程序会将其value属性的值作为标签字符串；对于没有隐含标签的控件，则必须在控件元素定义之前或之后提供其标签。

1.  INPUT 元素

INPUT元素可以说是表单中最重要的元素，因为大部分表单控件实际上都是由它来定义的。

INPUT元素不能使用结束标记。它支持以下属性：

• type = text｜password｜checkbox｜radio｜submit｜reset｜file｜hidden｜ image｜button：指定创建的输入控件的类型。其默认值为text。关于输入控件的类型稍后再加详述。
• name = cdata：给控件指定一个名字。此属性指定的控件名将与当前控件值构成名字/值对，与表单一起提交。
• value = cdata：指定控件的初值。除类型是radio时此属性为必需外，其他情况下它是可选的。
• size = cdata：定义控件的初始宽度。宽度值以象素值给定，但当控件类型为text和password时，它是字符数（整数值）。
• maxlength = integer：控件类型为text和password时，此属性指定可输入的最大字符数。此值可超过size指定的大小，此时用户程序会提供滚动机制。此属性的默认值为不受限制的大小。
• checked：当控件类型为radio时，设置此属性即将单选框为指定为选中。对于其他控件，此属性将被忽略。
• src = url：当控件类型为image时，此属性指定图象的位置。输入控件中的图象通常用于装饰图形化的提交按钮。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• style：行内样式信息。
• title：元素标题。
• alt：替换文本。
• align：对齐方式。
• accept：服务器接受的全法MIME类型。
• readonly：只读输入控件。
• disabled：失效输入控件。
• tabindex：元素的跳位顺序。
• usemap：客户端图象映射。
• onfocus, onblur, onselect, onchange：本征事件。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

INPUT元素的type属性决定创建的控件。它的值可以是text、password、checkbox、radio、submit、reset、file、hidden、image及button中的一种，分别对应一种控件。

text类型创建单行文本框。text控件提交的值是输入的文本。

password类似于text，但输入的文本被处理为隐藏字符（通常显示为星号等）。这种控件用于密码等敏感输入，它提交的值也是输入文本（不加处理）。

checkbox创建复选框控件。它就象一个开关，当开关为开时，复选框的值为“活动”（选中）；当开关为关时，其值为“不活动”（不选中）。只有当开关为开时复选框的值才被提交。

通常同一表单内的数个复选框使用同一名字，提交表单时，每个同一名字的选中复选框以同名组件提交名字/值对。这样，用户就可以对给定特性选择多个值。

radio创建单选框控件。同checkbox一样，它也是一个开关，当开关为开其值为活动，当开关为关时其值为不活动，而且只有当开关为开时值才被提交。同一表单内数个单选框也使用同一名字，但是每次只能有一个按钮的值为开，其他按钮只能置为关。因此，对于相关单选按钮，只会有一个名字/值对被提交。

submit创建submit（提交）按钮。当用户激活按钮时，表单被提交到FORM元素的action属性指定的位置。一个表单可包含多个Submit按钮，只有被激活的Submit按钮才会随表单一起提交。

image创建一个图形化的Submit按钮。src属性的值指定装饰按钮的图象的URL。由于有的用户可能看不到图象，所以应该使用alt属性指定图象的替换文本。

当定点设备点击图象时，表单被提交，点击的位置被传送到服务器。位置用二维坐标衡量，x值从图象左侧算起，y值从图象顶端算起，均以象素数计量。提交的数据中包括name.x=x-value和name.y=y-value这样的值，其中name为name属性的值，而x-value和y-value分别为x和y坐标值。

如果服务器采取的动作与点击的位置有关，那么使用非图象浏览器用户就会非常不便。因此应该考虑替换方法，例如：

• 使用多个submit按钮（每个按钮使用各自的图象）来代替单个图象submit按钮。可使用样式表来控制这些按钮的定位。
• 在使用客户端图象映射的同时，使用脚本功方法。

reset创建reset（复位）按钮。用户激活此按钮时，表单的所有带值控件都位被复位到value属性指定的初值。reset按钮的名字/值不随表单一起提交。

button指定无默认特征的按钮。影响按钮的事件（例如鼠标点击按钮）发生时，触发客户端脚本，此脚本与按钮相关联，才能定义按钮的特征。value属性的值为此按钮的标签。

下面的示例语句使得点击按钮时执行函数verify。脚本由SCRIPT元素定义。

<INPUT type="button" value="Click Me" onclick="verify()">

脚本和事件的详细内容将在下一节“脚本”中讨论。

hidden创建一个用户程序不进行处理的元素，但元素的名字和值却随表单一起提交。这一控件通常用于存贮客户/服务器的交换信息，这些信息如果不存贮就会由于HTTP的非静态本质而丢失。

hidden类型的INPUT控件将其值与表单一起提交。因样式信息造成的不处理控件也同样是这样。下面的示例控件虽然不在用户程序中显示，但它的值将随表单一起提交。

<INPUT type="password" style="display:none" 
        name="invisible-password"
        value="mypassword">

file控件提示用户一个文件名，当表单提交时，文件的内容将与其他用户输入一起提交给服务器。用户程序会将多个文件封装到MIME的multipart文档中。

下面的示例定义一个简单的表单，让用户输入姓名、性别和email。激动Send按钮时，表单就被发送到action属性指定的程序。

<FORM action="http://somesite.com/prog/adduser" method="post">
  <P>
  First name: <INPUT type="text" name="firstname"><BR>
  Last name: <INPUT type="text" name="lastname"><BR>
  email: <INPUT type="text" name="email"><BR>
  <INPUT type="radio" name="sex" value="Male"> Male<BR>
  <INPUT type="radio" name="sex" value="Female"> Female<BR>
  <INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>

下面是另一个示例，它让用户输入一个名字和若干文件名，其内容将通过表单提交。由于将enctype属性值指定为multipart/form-data，文件的内容就会被存贮为multipart文档的不同部分。

<FORM action="http://server.dom/cgi/handle"
       enctype="multipart/form-data"
       method="post">
  What is your name? <INPUT type="text" name="name_of_sender"><BR>
  What files are you sending? <INPUT type="file" name="name_of_files">
</FORM>

ISINDEX元素使用户程序提示用户输入一行文本（可允许任意字符数），并将prompt属性的值作为提示的标题。由于它的功能可以用INPUT元素实现，因此在HTML 4.0中将它标为“不建议使用的”（但仍然可用）。

ISINDEX元素支持以下属性：

• prompt = cdata：输入字段的提示字符串。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。

下面的ISINDEX语句

<ISINDEX prompt="Enter your search phrase: ">

等效于下列的INPUT语句：

<FORM action="..." method="post">
Enter your search phrase: <INPUT type="text"> </FORM>

2.  BUTTON 元素

BUTTON元素是HTML 4.0新定义的，它用来定义按扭。

类型为submit的BUTTON元素非常类似于类型为submit的INPUT元素，二者都是产生一个待提交的表单，但BUTTON元素能够产生更丰富的表述。

类型为submit且内容为图象（例如IMG元素）的BUTTON元素与类型为image的INPUT元素非常相似，二者都产生一个待提交表单，但表述不同。INPUT元素显示为扁平图象，而BUTTON则处理为按钮（点击时有起伏和释放动作）。

BUTTON元素支持以下属性：

• name = cdata：指定按钮的名字。
• value = cdata：指定按钮的值。
• type = button｜submit｜reset：指定按钮的类型。如果没有设置此属性，则按钮的特征为未知。button产生一个简单按钮，使其触发一个脚本程序。submit创建一个提交表单的按钮，它是此属性的默认值。reset创建一个复位表单的按钮。
• disabled：失效输入控件。
• tabindex：元素的跳位顺序。
• usemap：客户端图象映射。
• onfocus, onblur：本征事件。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下面的示例扩充了前面的示例，将创建提交和复位按钮的INPUT元素用BUTTON实例代替，并使按钮包含IMG元素指定的图象。

<FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    First name: <INPUT type="text" name="firstname"><BR>
    Last name: <INPUT type="text" name="lastname"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <BUTTON name="submit" value="submit" type="submit">
    Send<IMG src="/icons/wow.gif" alt="wow"></BUTTON>
    <BUTTON name="reset" type="reset">
    Reset<IMG src="/icons/oops.gif" alt="oops"></BUTTON>
 </FORM>

可以将IMG元素作为BUTTON的内容（此时应使用alt属性指一替换文本）。但是，带图象映射的IMG放到BUTTON的内容中。例如下面的BUTTON语句不合法：

<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>

类型为reset的BUTTON元素非常类似于类型为reset的INPUT元素，二者都是重设元素的初值，但BUTTON元素的表述更丰富。

BUTTON元素还可与类型应为button的脚本程序同时使用。用户激动这样的按钮时，就会执行客户端脚本程序。

3.  SELECT和OPTION元素

SELECT元素和OPTION元素一起定义列可选菜单（Selectable menu），通常体现为列表框（List box）或下接菜单（Drop-down menu）。

SELECT元素创建用户可进行选择的选项列表。每个SELECT元素必须至少包括一个选项，而每个选项由一个OPTION实例指定。

SELECT元素支持以下属性：

• name = cdata：指定元素的名字。表单提交时，此名将与用户选择的值一起构成名字/值对。
• size = integer：指定列表框的行数。行数可小于选项数，此时用户程序将显示滚动条。
• multiple：设置此属性时，允许用户进行多项选择。不设置此属性时，SELCET元素只允许单项选择。允许多项选择时为列表框，只允许单项选择时为下拉菜单。

OPTION元素支持以下属性：

• selected：设置此属性时，表示此选项初值为已选中。
• value = cdata：指定表单提交时如果此项被选中所提交的值。此值将与SELECT元素的名字构成名字/值对。如果没有设置value属性，默认的提交值为OPTION元素的内容。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• disabled：失效输入控件。
• tabindex：元素的跳位顺序。
• onfocus, onblur, onchange：本征事件。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下面的示例让用户在七个软件组件中选择安装，其中第一个和第二个开始时即已选中，其他组件则未选中。所创建的列表框只显示四行，其他各行可通过滚动条显示。

<FORM action="http://somesite.com/prog/component-select" method="post">
   <SELECT multiple size="4" name="component-select">
      <OPTION selected value="Component_1_a">Component_1</OPTION>
      <OPTION selected value="Component_1_b">Component_2</OPTION>
      <OPTION>Component_3</OPTION>
      <OPTION>Component_4</OPTION>
      <OPTION>Component_5</OPTION>
      <OPTION>Component_6</OPTION>
      <OPTION>Component_7</OPTION>
   </SELECT>
   <INPUT type="submit" value="Send"><INPUT type="reset">
</FORM>

在此例中，每项选择与名字component-select配对提交，且每个OPTION的提交值为其内容，但头两个组件的值按其value属性设置。

4.  TEXTAREA元素

TEXTAREA元素创建多行文本输入控件。元素的内容为控件提供的初始文本。

TEXTAREA支持以下属性：

• name = cdata：指定元素的值。此值在提交时与元素的内容配对成名字/值对。
• rows = integer：指定可见文本的行数。用户可以输入的行数可多于此属性值，因此用户程序在必要时将提供滚动条。
• cols = integer：指定可见文本的宽度（平均字符数）。用户可输入多于此属性的字符数，因此用户程序将提供滚动和换行机制。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• readonly：只读输入控件。
• disabled：失效输入控件。
• tabindex：元素的跳位顺序。
• onfocus, onblur, onselect, onchange：本征事件。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下面的示例创建一个20行、80列的TEXTAREA控件，初始时包含两行：

<FORM action="http://somesite.com/prog/text-read" method="post">
   <TEXTAREA rows="20" cols="80">
   First line of initial text.
   Second line of initial text.
   </TEXTAREA>
   <INPUT type="submit" value="Send"><INPUT type="reset">
</FORM>

5.  LABEL元素

LABEL元素用于给其他控件元素（其他LABEL元素除外）提供附加信息。用户程序可按多种方式处理LABEL元素定义的标签。

当LABEL元素获得焦点时，它将焦点传递给与其相关的控件。

LABEL元素支持以下属性：

• for = control-name：建立另一个控件定义的标签的关联。此属性的值必须是同一文档的某个控件的id属性值。如果没有设置此属性，则所定义的标签与其内容关联。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• disabled：失效输入控件。
• accesskey：元素的访问键。
• tabindex：元素的跳位顺序。
• onfocus, onblur：本征事件。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下面的示例创建一个表格，用来对两个INPUT控件及其相关的标签设置对齐方式。每个标签都显示地与一个INPUT元素相关。

<FORM action="..." method="post">
<TABLE>
  <TR>
    <TD><LABEL for="fname">First Name</LABEL>
    <TD><INPUT type="text" name="firstname" id="fname">
  <TR>
    <TD><LABEL for="lname">Last Name</LABEL>
    <TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
<FORM>

下面的示例使用LABEL元素扩展了前面的一个示例。这里，LABEL元素是通过id属性建立与INPUT元素的关联的。

<FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    <LABEL for="firstname">First name: </LABEL>
      <INPUT type="text" id="firstname"><BR>
    <LABEL for="lastname">Last name: </LABEL>
      <INPUT type="text" id="lastname"><BR>
    <LABEL for="email">email: </LABEL>
      <INPUT type="text" id="email"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>

通过for属性创建多重引用，就能使多个LABEL与同一个控件关联。

要使一个标签与另一个控件隐式相关，使用控件成为LABEL的内容即可。此时LABEL可能只包含一个控件元素，而标签本身则可能放置于相关控件之前或之后。

下面的示例建立两个标签与两个INPUT元素的隐式关联。这种形式不能用表格来进行标签及其关联控件的布局。

<FORM action="..." method="post">
<LABEL>
   First Name
   <INPUT type="text" name="firstname">
</LABEL>
<LABEL>
   <INPUT type="text" name="lastname">
   Last Name
</LABEL>
</FORM>

6.  FIELDSET和LEGEND元素

FIELDSET和LEGEND两个元素是HTML 4.0新定义的。

FIELDSET元素可对相关控件按主题进行分组。当同时使用可视化用户程序的元素的跳位顺序和面向语音的用户程序的语音导航时，对控件进行分组能够使用户更易于了解控件的目的。适当运行这一元素还可以使残疾人更易于对文档进行访问。

LEGEND元素用来给FIELDSET设计一个标题。使用非可视化手段处理FIELDSET时，此标题能够改善可访问性；使用可视化手段处理时，设置LEGEND的align属性可设置它相对于FIELDSET的对齐方式。

FIELDSET不使用属性。LEGEND支持以下属性：

• align = top｜bottom｜left｜right：指定LEGEND相对于FIELDSET的位置。top将LEGEND置于FIELDSET之上（默认值），bottom将它置于FIELDSET之上，left将它置于FIELDSET左侧，right将它置于FIELDSET右侧。
• id, class：文档内的标识。
• lang：语言信息，dir：文本方向。
• title：元素标题。
• style：行内样式信息。
• accesskey：元素的访问键。
• align：对齐方式。
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup：本征事件。

下面的示例设计了一个病人在医生办公室填写的表单。它将表单划分为个人信息、病史和目前诊疗三部分，每一部分包含输入适当信息的控件。

<FORM action="..." method="post">
<FIELDSET>
  <LEGEND align="top">个人信息</LEGEND>
  姓名：<INPUT name="personal_name" type="text" tabindex="1">
  地址：<INPUT name="personal_address" type="text" tabindex="2">
  ……其他个人信息……
</FIELDSET>
<FIELDSET>
  <LEGEND align="top">就医历史</LEGEND>
  <INPUT name="history_illness"
          type="checkbox"
          value="Smallpox" tabindex="20">天花</INPUT>
  <INPUT name="history_illness"
          type="checkbox"
          value="Mumps" tabindex="21">腮腺炎</INPUT>
  <INPUT name="history_illness"
          type="checkbox"
          value="Dizziness" tabindex="22">头晕</INPUT>
  <INPUT name="history_illness"
          type="checkbox"
          value="Sneezing" tabindex="23">打喷嚏</INPUT>
  ……其他病史……
</FIELDSET>
<FIELDSET>
  <LEGEND align="top">目前诊疗</LEGEND>
  您目前是否采取诊疗措施？
  <INPUT name="medication_now"
          type="radio"
          value="Yes" tabindex="35">是</INPUT>
  <INPUT name="medication_now"
          type="radio"
          value="No" tabindex="35">否</INPUT>
  如果您已采取诊疗措施，请在下面的空白处写明：
  <TEXTAREA name="current_medication"
              rows="20" cols="50"
              tabindex="40">
  </TEXTAREA>
</FIELDSET>
</FORM>

在此例中，通过设置每个FIELDSET内的元素对齐方式（可使用样式表）、添加颜色和字体信息（也可使用样式表）、添加脚本程序（例如，如果病人指明已采用诊疗措施才打开文本区域）等方法，可明显改善表单的表述效果。

三、元素焦点的设置

HTML文档中的活动元素为了执行其任务，必须从用户那里得到焦点（Focus）。例如，用户要想连接到A元素指定的链接，必须激活此链接；用户要想在TEXTAREA中输入文本，必须将焦点转移到文本区域中。

可有多种方式给元素设置焦点：

• 用定点设备指定元素。
• 用键盘从一个元素跳转到另一个元素。文档中可定义跳位顺序（tabbing order），用来指定用户用键盘在文档中进行跳转时元素得到焦点的的顺序。一旦选定，元素就可按某一按键顺序激活。
• 使用称为“访问键”（亦称“键盘快捷键”或“键盘加速键”）的一组键盘动作来设置元素的焦点。

下面分别讨论跳位顺序和访问键。

1.  元素跳位顺序

跳位顺序（tabbing order）定义用户用键盘跳转时元素得到焦点的顺序。跳位顺序可包括嵌套于其他元素内的元素。

跳位顺序使用tabindex属性来定义。也就是说，它指定当前元素在当前文档的跳位顺序中的位置，其属性值为一个正整数或负整数。

可得到焦点的元素有用户程序中的跳转原则包括：

1. 支持tabindex属性且其值为正的元素首先得到焦点。跳转的顺序是从tabindex值较小的元素到此值较大的元素。各tabindex值不必是连续的，可以从任何值开始。tabindex值相同的元素按它们在文档中出现的顺序得到焦点。
2. 没有定义tabindex属性或不支持此属性的元素接着得到焦点。这些元素的跳转顺序为它们在文档中出现的顺序。
3. 支持tabindex属性但其值为负整数的元素不参加跳位。
4. 失效元素（Disabled element）不参加跳位。

下列元素支持tabindex属性：A, AREA, OBJECT, INPUT, SELECT, TEXTAREA和BUTTON。

下例中的元素跳位顺序为：BUTTON元素；三个INPUT元素（第一个INPUT与BUTTON的tabindex值相同，但它出现在BUTTON之后）；A元素创建的链接。

<HTML>
<BODY>
……其他文本……
单击此处链接至<A tabindex="10" href="http://www.w3.org/">W3C站点</A>
……其他文本……
<BUTTON type="button" name="get-database"
          tabindex="1" onclick="get-database">
单击此钮访问当前数据库。
</BUTTON>
……其他文本……
<FORM action="..." method="post">
  <INPUT tabindex="1" type="text" name="field1">
  <INPUT tabindex="2" type="text" name="field2">
  <INPUT tabindex="3" type="submit" name="submit">
</FORM>
</BODY>
</HTML>

实际的跳位键取决于用户程序的配置。最常见的情况是使用Tab键来跳转，使用Enter键来激活选定的元素。

2.  元素的访问键

按下元素的访问键时该元素将得到焦点，并执行有关动作。元素得到焦点时执行的动作取决于元素本身。例如，用户程序将连接到A元素定义的链接、改变单选框的值。

元素的访问键由accesskey属性定义。访问键为用户程序当前字符编码中的一个字符，用户程序通常将此属性值处理为区分大小写的值。

下列元素支持accesskey属性：LABEL, A, CAPTION和LEGEND。

下面的示例为INPUT控件关联的标签指定一个访问键U。用户键入访问键时，标签得到焦点，并转交给相关控件，用户就可以在INPUT中输入文本。

<FORM action="..." method="post">
<LABEL for="user" accesskey="U">
User Name
</LABEL>
<INPUT type="text" name="user">
</FORM>

下例则给A元素定义的链接指定一个访问键。用户键入访问键时，就会链接到另一个文档：

<A accesskey="C" href="http://somplace.com/specification/contents.html">
  Table of Contents</A>

访问键的启用取决于底层系统。例如，对于运行MS Windows的计算机，通常是按下alt键再加访问键；在Apple系统中，则通常是按下cmd键再加访问键。

访问键的实现取决于用户程序。它通常会将访问键的值处理为能够强调其作用、并可与其他字符区分开（例如加下划线）。

四、失效元素和只读元素

当用户输入不期望的值或无关值时，将元素处理为失效或只读是很重要的。例如，如果用户没有输入一些必需的值，可将表单的submit按钮置为失效。同样，可以在表单中包含一段与表单一同提交的只读文本。

1.  失效元素

要使表单控件成为失效元素，须对它设置disabled属性。它是一个布尔值，设置时使用用户输入控件失效。

下列元素支持disabled属性：INPUT, TEXTAREA, SELECT, OPTION, OBJECT, LABEL和BUTTON。

对元素设置disabled属性后，将产生以下效果：

• 失效元素将得不到焦点。
• 失效元素在跳位顺序中会被跳过。
• 失效元素的值不随表单一同提交。

失效元素的处理取决于用户程序，例如将失效的菜单项、按钮等变灰。

下例的失效INPUT元素不能得到输入输入，其值也不会随表单提交。

<INPUT disabled name=”fred” value=”stone”>

2. 只读元素

要使表单控件成为只读元素，须对它设置readonly属性。它是一个布尔值，设置时禁止用户改变控件的值。

下列元素支持readonly属性：INPUT, TEXT, PASSWORD和TEXTAREA。

对元素设置readonly属性后，将产生以下效果：

• 只读元素可得到焦点，但不能被用户修改。
• 只读元素包含在元素的跳位顺序中。
• 只读控件的值随表单一同提交。

动态修改disabled和readonly属性值的唯一方法是通过脚本程序。

五、表单提交

不是表单内的所有元素值都与表单一同提交。用户程序不提交下列各值：

• 失效的表单控件。
• 不带name属性值的表单控件。
• 不带name属性的OBJECT元素。
• 带declare属性的OBJECT元素。

4.2  脚本（Script）

HTML的脚本技术是动态文档和智能表单的基础。

客户端脚本程序（script）是伴随HTML文档或直接嵌入到HTML文档中的程序。当文档载入时或其他某些时候（如链接激活时），脚本程序在客户端计算机上执行。HTML对脚本的支持不依赖于脚本语言。

脚本程序能够以活动和交互方式扩充HTML文档。例如：

• 文档载入时脚本程序被科教片，从而动态修改文档的内容。
• 用户输入表单数据时，脚本可对输入进行处理。例如根据某些字段值动态填充表单的其他部分，或者提交表单之前检查用户输入的数据是否在合法范围内。
• 脚本可由影响文档的事件（如加载、卸载、元素焦点和鼠标移动等）来触发。
• 脚本可链接到表单控件（如按钮），以产生图形化用户界面元素。

有两种类型的脚本程序可使用于HTML文档中：

• 用户程序加载文档时执行一次的脚本程序。此时脚本程序出现于SCRIPT元素内，当文档载入时被执行。对于不支持或不处理脚本的用户程序，可通过NOSCRIPT元素指定替换内容。
• 每次指定事件发生时都执行的脚本程序。这些脚本可通过本征事件属性指定给相关元素。

一、脚本文档的设计

本节讨论面向支持脚本的用户程序的脚本文档设计。

1.  SCRIPT元素

SCRIPT元素将脚本放入文档中。此元素可在HTML文档的HEAD或BODY中出现任意次。

脚本可以在SCRIPT元素的内容中定义，也可以在外部文件中定义。如果没有设置src属性，用户程序就将元素的内容解释为脚本程序；如果src属性指定了一个URL值，用户程序则忽略元素的内容，并通过URL获得脚本程序。

脚本程序由用户程序已知的脚本引擎（script engine）进行运算。

SCRIPT元素支持以下属性：

• type = cdata：指定元素内容的脚本语言。属性值必须是Internet媒体类型（MIME类型）。此属性没有默认值。
• language = cdata：指定元素内容的脚本语言。属性值是语言的标识符。由于语言标识符是非标准的，HTML 4.0中将其列为“不建议使用的”，推荐用type代替它。
• src = url：指定外部脚本文件所在的位置。

2.  指定脚本语言

既然HTML不依赖于特定的脚本语言，文档中就应该明确指定每种脚本语言。这可以通过默认声明或局部声明来实现。

文档中如果既不包含SCRIPT元素的默认脚本语言声明，也不包括局部声明，那么文档是错误的。用户程序仍然可能解释脚本，但结果是不正确的。

如果要指定文档中所有脚本的默认脚本语言，就必须在文档HEAD中包含下面的META声明：

<META http-equiv="Content-Script-Type" content="type">

其中，type为命名脚本语言的Internet媒体类型（MIME类型），例如text/tcl、text/javascript或text/vbscript等。

如果没有使用META声明，默认语言也可用Content-Script-Type HTTP头标设置：

    Content-Script-Type: type

如果同时使用数个HTTP头标和META元素，则最后一个定义默认脚本语言。通常HTTP头标发生于文档HEAD之前。

也可以在每个SCRIPT元素中使用type属性来指定脚本语言，即所谓“局部声明”。如果没有设置默认脚本语言，那么SCRIPT元素中必须设置type属性；如果已经设置默认脚本语言，type属性会改写它。

下面的示例将默认脚本语言设置为text/tcl。本例HEAD内的SCRIPT元素中指定外部文件为脚本程序，其脚本语言设置为text/vbscript；BODY内的SCRIPT元素自带脚本，且设置的脚本语言为text/javascript

<HTML>
<HEAD>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
……JavaScript程序……
</SCRIPT>
</BODY>
</HTML>

每种脚本语言都能在脚本内引用HTML对象。引用规则属于各脚本语言，而不是HTML本身的内容。不过，不论是何种脚本语言，都应该根据指定的HTML对象名进行引用，而且脚本引擎在标识元素时应该考虑到，如果元素同时设置name属性id属性，则name属性的优先级高，否则二者之中的任何一个都可以使用。

3.  脚本内容的用法

SCRIPT元素的内容是脚本，既然如此，它就不能被用户程序处理为HTML标记。用户程序必须将它作为数据传递给脚本引擎。

HTML分析程序将起始标记开始、ETAGGO分隔符（“</”）结束的内容作为脚本数据。脚本数据并不一定需要以 </SCRIPT> 结束标记为结尾，它只要求以“</”结尾、后接一个名字字符（a~z, A~Z）。

因此，任何希望发送给脚本引擎的HTML标记都必须能够避免与HTML分析规则发生冲突。具体的细则与脚本语言有关。

下面是一个非法示例，它在SCRIPT元素内存在</EM>字符串，使得HTML分析程序将</EM>作为脚本的终结，产生的结束显然是不希望的。

<SCRIPT type="text/javascript">
  document.write ("<EM>This won't work</EM>")
</SCRIPT>

在JavaScript中，可以采用下面的作法避免上述问题：

<SCRIPT type="text/javascript">
  document.write ("<EM>This will work<\ /EM>")
</SCRIPT>

Tcl的作法与JavaScript相似：

<SCRIPT type="text/tcl">
  document write "<EM>This will work<\ /EM>"
</SCRIPT>

在VBScript中则采用Chr( ) 函数避免这一问题：

"<EM>This will work<\" & Chr(47) + "EM>"

4.  本征事件

用户与用户程序进行交互操作时，必然要产生许多操作事件（event），这些事件称为本征事件（intrinsic event）。在HTML 4.0中有可能建立动作与本征事件的关联，也就是说当某事件发生时产生某一动作。每一个本征事件的值都是一个脚本，当事件发生时执行此脚本。

INPUT、SELECT、BUTTON、TEXTAREA和LABEL等控件元素都对某一本征事件产生响应。如果这些元素不出现于表单中，就可以用作文档的图形用户界面的参数。例如，可以在文档中使用按钮，它不提交表单，但激活时仍与服务器通信。

在HTML 4.0中，本征事件用元素的属性描述。这些属性包括：

• onload = script：当用户程序完成窗口或FRAMESET中的所有窗框的加载时，onload事件发生。此属性可用于BODY元素和FRAMESET元素。
• onunload = script：当用户程序从窗口或窗框中移走文档时，onunload事件发生。此属性可用于BODY元素和FRAMESET元素。
• onclick = script：当定点设备的按钮在元素上点击时，onclick事件发生。此属性可用于大部分元素。
• ondblclick = script：当定点设备的按钮在元素上双击时，ondblclick事件发生。此属性可用于大部分元素。
• onmousedown = script：当定点设备的按钮在元素上按下时，onmousedown事件发生。此属性可用于大部分元素。
• onmouseup = script：当定点设备的按钮从元素上释放时，onmouseup事件发生。此属性可用于大部分元素。
• onmouseover = script：当定点设备的按钮移过元素时，onmouseover事件发生。此属性可用于大部分元素。
• onmousemove = script：当定点设备的按钮移过元素时，onmouseover事件发生。此属性可用于大部分元素。
• onmouseout = script：当定点设备的按钮从元素上移走时，onmouseout事件发生。此属性可用于大部分元素。
• onfocus = script：当元素通过定点设备或键盘跳位得到焦点时，onfocus事件发生。此属性可用于以下元素：LABEL, INPUT, SELECT, TEXTAREA 和BUTTON。
• onblur = script：当元素通过定点设备或键盘跳位失去焦点时，onblur事件发生。此属性可用于以下元素：LABEL, INPUT, SELECT, TEXTAREA 和BUTTON。
• onkeypress = script：当一个键在元素上按下并释放时，onkeypress事件发生。此属性可用于大部分元素。
• onkeydown = script：当一个键在元素上按下时，onkeydown事件发生。此属性可用于大部分元素。
• onkeyup = script：当一个键在元素上释放时，onkeypress事件发生。此属性可用于大部分元素。
• onsubmit = script：当表单被提交时onsubmit事件发生。它只能用于FORM元素。
• onreset = script：当表单被复位时onreset事件发生。它只能用于FORM元素。
• onselect = script：当用户从文本字段中选择某一文本时onselect事件发生。此属性可用于INPUT和TEXTAREA元素。
• onchange = script：当控件失去输入焦点、且自得到焦点以来其值发生变化时，onchange事件发生。此属性可用于INPUT、SELECT和TEXTAREA元素。

在下面的示例中，userName为必需的文本字段，当用户离开字段时，OnBlur事件调用JavaScript函数，以证实userName的值是否合法。

<INPUT NAME="userName" onBlur="validUserName(this.value)">

下面是另一个JavaScript示例：

<INPUT NAME="num"
    onChange="if (!checkNum(this.value, 1, 10))
        {this.focus();this.select();} else {thanks()}"
    VALUE="0">

接下来是VBScript文本字段的事件处理示例：

    <INPUT name="edit1" size="50"> 
    <SCRIPT type="text/vbscript">
      Sub edit1_changed()
        If edit1.value = "abc" Then
          button1.enabled = True
        Else
          button1.enabled = False
        End If
      End Sub
    </SCRIPT>

同一功能可用Tcl实现如下：

    <INPUT name="edit1" size="50">
    <SCRIPT type="text/tcl">
      proc edit1_changed {} {
        if {[edit value] == abc} {
          button1 enable 1
        } else {
          button1 enable 0
        }
      }
      edit1 onChange edit1_changed
    </SCRIPT>

下面是JavaScript的点击处理脚本示例：

<BUTTON type="button" name="mybutton" value="10">
<SCRIPT type="text/javascript">
      function my_onclick() {
         . . .
      }
      document.form.mybutton.onclick = my_onclick
</SCRIPT>
</BUTTON>

还有一个JavaScript的窗口处理脚本示例：

<SCRIPT type="text/javascript">
      function my_onload() {
         . . .
      }
      var win = window.open("some/other/URL")
      if (win) win.onload = my_onload
</SCRIPT>

使用Tcl实现这个窗口处理脚本：

 <SCRIPT type="text/tcl">
     proc my_onload {} {
       . . .
     }
     set win [window open "some/other/URL"]
     if {$win != ""} {
         $win onload my_onload
     }
 </SCRIPT>

本征事件的脚本属性的数据类型为CDATA。SGML处理CDATA属性值时要求属性值内用字符实体代替特殊字符，且属性值用配对的双引号（”）或单引号（’）分隔。

因此，分隔符 ‘、”、& 和 &# 不便于直接出现在脚本属性值中。为解决此问题，HTML 4.0规定脚本事件属性一律使用双引号分隔符，且可用字符实体形式代替双引号和 & 符。也就是说，'”‘应该写作”&quot;”或”&#34;”，’&’应该写作”&amp;”或”&#38;”。

据此可以写出下面的示例：

<INPUT name="num" value="0"
onChange="if (compare(this.value, &quot;help&quot;)) {gethelp()}">

SGML允许单引号出现于双引号括起来的属性字符串中，反之亦然。因此 “this is ‘fine'” 和 ‘so is “this”‘ 都是正确的。

5.  文档的动态修正

文档载入时执行的脚本程序可以动态修改文档内容。具体做法取决于实际的脚本语言，但文档动态修改的基本模型大致如下：

1. 对所有SCRIPT元素以文档加载顺序进行计算。
2. 对给定SCRIPT元素中的所有生成SDML CDATA的脚本结构进行计算，它们联合生成的文本插入到文档中SCRIPT元素所在的位置。
3. 生成的CDATA被重新进行计算。

在处理任何SCRIPT元素之前和之后，HTML文档都必须严格遵从HTML文档类型定义（DTD）。

下面的示例说明脚本程序可以动态修改文档。

<TITLE>测试文档</TITLE>
<SCRIPT type="text/javascript">
         document.write("<p><b>Hello World!<\/b>")
</SCRIPT>

它等效于以下HTML标记：

<TITLE>测试文档</TITLE>
 <P><B>Hello World!</B>

二、不支持脚本时的文档设计

本节讨论当用户程序不支持脚本功能时，应该如何设计HTML文档。

1.  NOSCRIPT元素

NOSCRIPT提供脚本程序不执行时的替换内容。对于支持脚本的用户程序，NOSCRIPT元素的内容仅当以下两种情况时才会处理：

• 用户程序配置为不计算脚本。
• 用户程序不支持SCRIPT元素指定的脚本语言。

不支持客户端脚本的用户程序则永远处理NOSCRIPT元素的内容。

在下面的示例中，执行SCRIPT的用户程序将在文档中包含一些动态创建的数据。如果用户程序不支持脚本功能，用户可通过链接获取数据。

<SCRIPT type="text/tcl">
 ……插入数据的Tcl脚本……
</SCRIPT>
<NOSCRIPT>
 <P>如果要访问数据，请点击<A href="http://someplace.com/data">此处。</A>
</NOSCRIPT>

2.  使用注释隐藏脚本

不能识别SCRIPT元素的用户程序很可能将元素内容处理为文本。因此，JavaScript、VBScript和Tcl等脚本语言的脚本引擎都允许将脚本语句放在SGML注释中，这样不能识别SCRIPT元素的用户程序将忽略注释，而支持脚本的用户程序则能够执行HTML文档注释中的脚本。

JavaScript引擎允许SCRIPT元素以字符串“<!–”开始，并忽略此行后面的字符。象C++一样，JavaScript将“//”开始的行解释为注释行。为了将脚本完整地隐藏起来，SCRIPT元素通常以字符串“–>”结束。

下面是一个示例。

<SCRIPT type="text/javascript">
<!--  使用HTML注释将脚本从不支持的浏览器中隐藏起来
  function square(i) {
    document.write("The call passed ", i ," to the function.","<BR>")
    return i * i
  }  document.write("The function returned ",square(5),".")
// 使用JavaScript注释结束隐藏  -->
</SCRIPT>

VBScript象Visual Basic一样，将单引号开始的行作为注释行。它也使用字符串“<!–”和“–>”对来隐藏脚本。例如：

   <SCRIPT type="text/vbscript">
     <!--
       Sub foo()
        ...
       End Sub
     ' -->
    </SCRIPT>

Tcl中则将字符 # 开始的行作为注释行：

<SCRIPT type="text/tcl">
<!--  使用HTML注释将脚本从不支持的浏览器隐藏起来
  proc square {i} {
    document write "The call passed $i to the function.<BR>"
    return [expr $i * $i]
  }  document write "The function returned [square 5]."
# 使用Tcl的注释结束隐藏  - ->
</SCRIPT>

另一种隐藏脚本的解决方案是将脚本程序放于外部文档中，通过src属性进行引用。

微信 复制链接 X