第2章 HTML基础
本章导读
本章将向读者介绍有关超文本标记语言HTML的基础知识，包括HTML语言概述、HTML文档的结构、HTML文档头部及文档主体等内容。
2.1 HTML概述
Internet技术发展到今天，已经进入前所未有的信息高速时代。自从Internet盛行以来，网页的制作也随之普及，而制作网页的语言也开始流行起来，如HTML、ASP、PHP、JSP等语言，早已是耳熟能详了。当PHP、ASP或JSP尚未流行之前，HTML语言一枝独秀，即便是ASP等语言已流行的今天，作为WWW基础语言的HTML仍然是各种网页开发语言的框架基础。
2.1.1 通用标记语言GML
HTML语言实际上是一种标记语言。标记语言（Markup Language）是一种描述性语言，与一般的程序设计语言不同，它主要用于制作结构化的电子文档。
早在1969年，IBM提出在各种文档之间共享一些相似的属性，如字体和排版。IBM设计了一种文档系统，通过在文档中添加一些辅助标签（tag），从而达到可以标识文档中的各种元素的目的，IBM把这种标识语言称为通用标记语言（Generalized Markup Language，GML）。该语言的缩写也正好包含了3位创始人姓氏的首字母，他们是Charles F.Goldfarb、Ed Mosher和Ray Lorie。
2.1.2 标准通用标记语言SGML
GML是标准通用标记语言（SGML）的先驱和基础，SGML则是当今创建结构化文档描述语言规则的战略集合。
直到1986年，国际标准化组织（International Organization for Standardization，ISO）在IBM的GML基础上，发布了为生成标准化文档而定义的标记语言标准（标准号为ISO 8879），称为标准通用标记语言（Standard Generalized Markup Language，SGML）。
SGML最主要的目的，是定义一种描述电子文档的规范，也就是提供一种对文档进行结构化的法则，而当文档采用这种法则进行处理后，该SGML文件就可以被广泛传递与使用。
SGML提供了一种将文档内容与显示分离开来的数据表示方法，使得数据独立于操作系统平台和处理程序。SGML允许开发人员根据文档的结构与样式，制定出适当的文档类型定义（Document Type Definition，DTD），为组织文档的内容提供了一个框架，确保了文档的一致性。SGML是一种元（meta）语言，即可以用来定义新的标记语言的语言，HTML语言就是在SGML语言基础上产生的。
2.1.3 超文本标记语言HTML
20世纪90年代初，Tim Berners-Lee采用SGML元语言创建了用于描述万维网网页的语言——超文本标记语言（HyperText Markup Language，HTML），其最新版本是4.01版。
从诞生之初至今，HTML就一直被用作万维网信息的表示语言，用于描述万维网网页的格式设计与连接信息。万维网发展迅猛的原因之一就是所有的网页都是采用同一格式编写的，那就是HTML。
HTML是SGML标准的一个子集，用于创建超文本文档（即HTML文档）。所谓超文本，是因为它可以加入图片、声音、动画等内容，并且可以从一个主题跳到另一个主题，或者从一个页面转入另一个页面，与世界各地的万维网网页相连接。
2.1.4 HTML的发展
和很多流行技术一样，HTML起源于只有少数人使用的非正规的规范。随着HTML语言的广泛使用，HTML标准化就显得十分必要。从最初的HTML到现在的HTML 4.01版本，HTML的发展大致经历了以下过程：
● 1990年前后，Tim Berners-Lee采用一组SGML的DTD标记实现了最初的HTML。
● 1993年1月，非官方标准的HTML 1.0版本推出。
● 1995年11月，互联网工程任务组（The Internet Engineering Task Force，IETF）制定并推出了HTML 2.0版本。
● 1996年1月，万维网联盟（World Wide Web Consortium，W3C）制定并推出了HTML 3.2版本。
● 1997年12月，W3C制定并推出了HTML 4.0版本。
● 1999年12月，W3C推出了HTML 4.01版本。
2.2 HTML标签
2.2.1 标签与属性
一个HTML文档通常包括文档头（Head）、文档主体（Body）、标题（Title）、表格（Table）、表单（Form）、段落（Paragraph）等元素，这些元素是构成HTML文档的基本成分，它们需要用HTML规定的标签（Tag）来标识。
HTML标签由左尖括号“<”、“标签名”和右尖括号“>”这3部分组成，如<HTML>、<HEAD>、<H1>、<TABLE>、<PRE>、<DIV>等。HTML的标签名是不区分大小写的，也就是说<HTML>与<html>、<Html>、<HtMl>都是一样的，当浏览器对HTML文档进行解析时，会将这些标签当作同一个标签对待。
更为复杂的标签可以定义属性，这些属性被用来描述标签的显示或运行方式。标签属性是可选的，并且各属性之间没有先后次序。一般属性值可以加单引号（‘ ’）或双引号（“ ”），也可以不加任何引号，但是包含空格、%、#等特殊字符的属性值必须添加引号。示例代码如下：
<FONT COLOR="#0000FF" SIZE=6>
为属性值添加引号示例
</FONT>
说明：<FONT>标签指定了一段文本，并通过“COLOR”属性指定文本的颜色为“#0000FF（蓝色）”，通过“SIZE”属性指定文本的大小为“6”。示例代码的执行效果如图2-1所示。
图2-1 示例代码的执行效果
2.2.2 起始标签与结束标签
HTML标签通常可以成对使用，标签之间包含信息，这样的标签称之为容器标签，前面的标签称之为起始标签（Start Tag），而后面的标签称之为结束标签（End Tag），示例代码如下：
<H1>容器标签</H1>演示
★ 注意 ★
<H1>与</H1>分别表示一级标题的起始标签和结束标签，“H1”是一级标题标签的名称。可以看出，结束标签与起始标签十分相似，就是在起始标签基础上添加一个斜杠符号“/”形成的。示例代码的执行效果如图2-2所示。
图2-2 示例代码的执行效果
容器标签的作用域只限于起始标签与结束标签之间，而不会影响到容器标签以外的内容，如上例中的“容器标签”文本。
2.2.3 空标签
HTML标签还可以单独使用，用于在相应的位置插入指定元素，这样的标签称之为空标签。举例来说，空标签“<BR>”表示在当前位置插入一个换行，而空标签“<HR>”则表示在当前位置插入一条水平线，等等。
2.2.4 标签的嵌套
有些标签必须放置到其他标签内部，如“<INPUT>”标签必须在“<FORM>”标签的内部。而有些标签可以包含其他标签但并不强制要求，如“<HEAD>”标签可以包括“<META>”标签，也可以不包括。这种标签之中还有标签的情况称之为标签的嵌套。HTML语言是一种比较松散的语言，对于嵌套的HTML标签，并不强制要求嵌套顺序，例如，下面两种写法都是允许的：
<B><I>标签的嵌套演示</I></B>
<BR>
<B><I>标签的嵌套演示</B></I>
★ 注意 ★
<B>标签和<I>标签指定了一段文本，并将该文本的样式设置为“粗体”和“斜体”。示例代码的执行效果如图2-3所示。
图2-3 示例代码的执行效果
2.2.5 通用属性
许多HTML标签都包含属性。在HTML标签中有一组属性，对每一个使用它们的标签都有同样的功能，称之为通用属性。HTML标签的通用属性，如表2-1所示。
表2-1 HTML标签的通用属性
2.3 HTML文档结构
2.3.1 文档基本结构
一个HTML文档是由一系列的元素和标签组成的，通常起始于<HTML>标签而结束于</HTML>标签，大体上可以分为文档头部（Head）和文档本体（Body）两部分。
如果使用EditPlus来制作HTML文档的话，在新建一个HTML文档时，EditPlus会根据HTML模板自动创建基本的HTML文档。
打开EditPlus编辑器，选择“File（文件）”→“New（新建）”→“HTML Page（HTML页）”菜单命令，或使用【Ctrl+Shift+N】组合快捷键，EditPlus会自动创建一个无名（Noname）的HTML文档，该文档能够很好地说明HTML文档的基本结构，如图2-4所示。
图2-4 HTML文档的基本结构
2.3.2 文档类型声明
一个HTML文档可以包含文档类型（!DOCTYPE）声明，用于指定HTML文档所遵循的文档类型定义（DTD），其语法格式如下：
<!DOCTYPE 顶级元素类型 可用性 "注册//组织//类型 标签//定义 语言" "URL">
说明：
● 顶级元素类型，指定DTD中声明的顶级元素类型。默认为HTML。
● 可用性，指定正式公开标识符（Formal Public Identifier，FPI）是可公开访问的对象（PUBLIC）还是系统资源（SYSTEM）。默认为PUBLIC。
● 注册，指定组织是否由国际标准化组织（ISO）注册。如果组织名称已注册则为“+”，否则为“-”。默认为“+”。
● 组织，指定组织名称，该组织负责创建和维护由!DOCTYPE声明引用的DTD，如IETF（互联网工程任务组）、W3C（万维网联盟）等。
● 类型，指定公开文本类，即所引用的对象类型。默认为DTD。
● 标签，指定公开文本描述，即对所引用的公开文本的唯一描述名称，可附带版本号。默认为HTML。
● 定义，指定文档类型定义（DTD）。可选的DTD有以下3类：
Strict，严格文档类型，不包含已失效的元素以及框架。
Transitional，过渡文档类型，包含所有除Frameset元素的全部内容。
Frameset，框架集文档类型，文档使用框架元素。
● 语言，指定公开文本语言，即用于创建所引用对象的自然语言编码系统。默认为英语（EN）。
● URL，指定所引用对象的位置，可选。对应于3类DTD，可选的URL有以下3种：
http://www.w3.org/TR/html4/strict.dtd，指定Strict DTD的URL。
http://www.w3.org/TR/html4/loose.dtd，指定Transitional DTD的URL。
http://www.w3.org/TR/html4/frameset.dtd，指定Frameset DTD的URL。
文档类型声明必须出现在HTML文档的起始处，在所有的HTML标签之前。
2.3.3 HTML文档头部
在HTML文档中，由起始标签<HEAD>和结束标签</HEAD>所限定的文档部分称之为HTML文档头部（Head）。通常，文档头部中的信息是不会显示在浏览器正文窗口中的。
在文档头部中可以放置一些标签，用以说明HTML文档的标题和其他一些公共属性，常见的标签如表2-2所示。
表2-2 HTML文档头部标签
2.3.4 HTML文档本体
在HTML文档中，由起始标签<BODY>和结束标签</BODY>所限定的文档部分称之为HTML文档本体（Body）。通常，文档本体中的信息是要显示在浏览器正文窗口中的。
在文档本体中放置了要在浏览器中对显示信息修饰的所有标签和属性，详细说明参见后续章节。在<BODY>标签中也可以使用属性，用以描述文档正文的通用显示属性，常见的属性如表2-3所示。
表2-3 HTML文档本体标签
2.4 HTML文档头部
HTML文档头部是可选的，如果不需要头部信息，可以省略头部标签。
2.4.1 文档标题标签
文档的标题就是在HTML文档头部中，由起始标签“<TITLE>”和结束标签“</TITLE>”所限定的文档部分，用于描述该文档的名字或简要介绍，通常显示在浏览器的标题栏中。标签格式如下：
<TITLE> title </TITLE>
例程S0201演示了文档标题的用法，示例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>文档标题演示</TITLE> # 指定文档标题
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
</BODY>
</HTML>
在IE浏览器中执行S0201.htm，可以在标题栏中看到设置的文档，如图2-5所示。
图2-5 设置文档标题时的显示效果
如果没有指定文档标题，那么浏览器将会在标题栏位置显示文件名或URL，将以下代码删除：
<TITLE>文档标题演示</TITLE>
此时，在IE浏览器中执行S0201.htm，标题栏将显示文件名，如图2-6所示。
图2-6 未设置文档标题时的显示效果
2.4.2 基础路径标签
在制作网页时，如果网页中的超级链接有很多且很长时，例如W3C网站上HTML4的元素索引页http://www.w3.org/TR/html4/index/elements.html，其中链接了近91个HTML元素，如图2-7所示。
图2-7 W3C网站上HTML4的元素索引页
如果使用标准URL，每一个元素的链接都将十分长，并且以后想要修改链接时，要一个一个地修改，需花费大量的时间，使用基础路径标签则可以简化这种操作。
基础路径标签<BASE>用于设置每个网页的基础路径，标签格式如下：
<BASE HREF="url" TARGET="target">
标签属性说明：
● HREF，指定文档中链接到的所有文件默认的绝对URL地址。指定HREF属性后，所有相对链接的前面都会自动添加HREF属性的值。
● TARGET，指定文档中所有链接的默认打开窗口，可以是空白窗口（_blank）、本窗口（_self）、父窗口（_parent）等，最常用的是框架窗口（框架名）。
基础路径设置以后，整个网页的超级链接都将以此基础路径为起始路径。例程S0202演示了基础路径的用法，示例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>基础路径演示</TITLE>
<BASE HREF="http://localhost/ASPBook/01/"># 指定基础路径
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<A HREF="S0101.htm">第1章 示例一</A><BR><BR>
<A HREF="S0102.htm">第1章 示例二</A>
</BODY>
</HTML>
其中，HREF属性指定了网页S0202.htm的基础路径为http://localhost/ASPBook/01/（关于此URL，参见7.4节），因此链接中的文件S0101.htm和S0102.htm的URL实际上分别为http://localhost/ASPBook/01/S0101.htm和http://localhost/ASPBook/01/S0102.htm。
单击超级链接，默认情况下，将在同一个浏览器窗口中打开链接的文档。如果指定了TARGET属性，则将在指定窗口中打开链接的文档。将S0202代码中的粗体部分修改如下：
<BASE HREF="http://localhost/ASPBook/01/" TARGET="_blank">
在IE浏览器中执行S0202.htm，然后单击“第1章 示例一”链接，将在新的IE窗口中打开文档http://localhost/ASPBook/01/S0101.htm，如图2-8所示。
图2-8 在新IE窗口中打开链接的文档
2.4.3 元信息标签
元信息标签<META>是HTML文档头部的一个辅助性标签，用于为浏览器或搜索引擎提供信息。元信息标签<META>提供的信息对用户来说是不可见的，标签格式如下：
<META HTTP-EQUIV="type" CONTENT="content">
或
<META NAME="type" CONTENT="content">
标签属性说明：
● HTTP-EQUIV，指定HTTP响应头部的类型，常用的HTTP-EQUIV类型有：Content-Type、Content-Language、Refresh、Expires、Pragma、Set-Cookie、Pics-Label、Page-Enter、Page-Exit、MSThemeCompatible、Content-Script-Type等。
● NAME，指定页面描述信息的类型，常用的NAME类型有：Keywords、Description、Robots、Author、Copyright、Generator、Revisit-After等。
● CONTENT，指定信息的实际内容。
在HTML文档头部中可以指定任意数量的元信息标签，详细内容参见下述小节。
2.4.4 指定页面字符集和语言代码
浏览器可以自动选择正确的页面显示语言，只需通过Content-Type、Content-Language等类型设定页面使用的字符集和语言代码即可，用法如下：
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB2312">
<META HTTP-EQUIV=”Content-Language” CONTENT=”zh-CN”>
以上代码中，“text/html”指定文档类型为HTML文档，“charset=GB2312”指定页面显示的是简体中文，“zh-CN”指定页面语言为中文。如果系统中没有安装相应的字符集，则IE浏览器会提示用户下载安装。不同的语言对应不同的字符集，如果想要显示繁体中文，只需将“GB2312”替换为“BIG5”即可。示例代码S0203.htm如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>元信息演示 - 指定页面使用的字符集和语言代码</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5"> # 指定页面字符集
<META HTTP-EQUIV="Content-Language" CONTENT="zh-CN"> # 指定页面语言代码
</HEAD>
<BODY>
<H1>元信息标签<META>使用演示</H1>
<HR>
</BODY>
</HTML>
示例代码的执行效果如图2-9所示。
图2-9 指定页面使用的字符集和语言代码
2.4.5 指定页面刷新或跳转时间
使用Refresh类型可以指定页面多长时间后刷新自己，或多长时间后让页面自动链接到其他页面，用法如下：
<META HTTP-EQUIV="Refresh" CONTENT="time">
<META HTTP-EQUIV="Refresh" CONTENT="time; url=newurl">
时间单位为“秒”，下面的例程演示了使用Refresh的技巧，例程S0204是一个幻灯片，示例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>元信息演示 - 指定页面刷新或跳转时间</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="3; url=S02041.htm"># 设置3秒后跳转到S02041.htm
</HEAD>
<BODY>
<H1>元信息标签<META>使用演示</H1>
<HR>
<H3>演示页面 - 壹</H3>
</BODY>
</HTML>
其中URL指定的网页S02041.htm的代码基本上与S0204.htm一样，只是将其中的“S02041.htm”修改为“S02042.htm”。同样，将网页S02042.htm中的URL设置为“S0204.htm”，形成一个循环。
在IE浏览器中打开S0204.htm，页面停留3秒后将自动跳转到S02041.htm，停留3秒后又跳转到S02042.htm，停留3秒后又跳转到S0204.htm，如此循环，把幻灯播放下去……
示例代码的执行效果如图2-10所示。
图2-10 使用Refresh类型实现幻灯片播放效果
2.4.6 指定页面在缓存中的期限
为了节约时间，浏览器一般都会在本地磁盘中保存一个页面文件的临时版本，在用户下次打开该网页时，浏览器会直接调用磁盘上的临时版本，称之为页面缓存。
使用Expires类型可以指定网页在缓存中的过期时间，一旦页面过期，必须到服务器上重新调阅，用法如下：
<META HTTP-EQUIV="Expires" CONTENT="W, DD MM YYYY hh:mm:ss GMT">
<META HTTP-EQUIV="Expires" CONTENT="0">
★ 注意 ★
时间必须使用GMT格式，也可以为“0”，表示每次都到服务器上重新调阅。
例程S0205演示了缓存中页面过期的效果，示例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>元信息演示 - 指定页面在缓存中的期限</TITLE>
<META HTTP-EQUIV="Expires" CONTENT="Friday,13 Apr 2007 10:30:00 GMT"> # 设置页面
过期时间
</HEAD>
<BODY>
<H1>元信息标签<META>使用演示</H1>
<HR>
<FONT SIZE="5" COLOR="red">Internet，你好！</FONT>
</BODY>
</HTML>
示例代码表示网页将在2007年4月13日星期五下午18点30分00秒过期，注意北京的时区为GMT+8:00。IE缓存的页面通常保存在“C:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files”文件夹下，打开该文件夹可以看到缓存的页面S0205.htm，其“截止期”正是上面设置的时间，如图2-11所示。
图2-11 设置截止期的页面缓存文件
此时，如果我们修改了服务器上的S0205.htm文档，如果将文本的颜色由“red”更改为“blue”，在IE浏览器地址栏中输入S0205.htm的地址，回车后浏览器显示的页面并未变化。只有在缓存期限到达时，缓存中的页面文件才会更新到与服务器一致，此时在IE浏览器中才能看到页面的变化。
2.4.7 控制页面禁用缓存
如果想让浏览器每次打开网页时看到的都是最新版本，可以使用Pragma类型控制页面禁用缓存，而必须从服务器上调阅页面，Pragma类型的用法如下：
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
例程S0206演示了控制页面缓存的方法，示例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>元信息演示 - 控制页面缓存</TITLE>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> # 设置不缓存页面
</HEAD>
<BODY>
<H1>元信息标签<META>使用演示</H1>
<HR>
<FONT SIZE="5" COLOR="blue">Internet，你好！</FONT>
</BODY>
</HTML>
在IE浏览器中打开S0206.htm，然后修改S0206.htm文档中文本的颜色，再次在IE浏览器中打开，将看到页面文本颜色的变化，执行效果如图2-12所示。
图2-12 控制页面缓存的执行效果
2.4.8 设置页面Cookie
使用Set-Cookie类型可以设置网页的Cookie，并且可以设置Cookie的失效时间，如果网页过期，则缓存的Cookie将被删除，用法如下：
<META HTTP-EQUIV="Set-Cookie"
CONTENT="name=value; expires= W, dd MM YYYY hh:mm:ss GMT; path=/">
其中，“name=value”指定了Cookie的名称和值，“expires”指定了Cookie的失效时间（必须为GMT格式），“path”指定了Cookie存放的路径。
例程S0207演示了如何设置一个名为“用户名（UserName）”的Cookie，示例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>元信息演示 - 设置页面Cookie</TITLE>
<META HTTP-EQUIV="Set-Cookie" CONTENT="UserName=Forrid; expires=Fri,13-Apr-07
15:59:59 GMT; path=/login"> # 设置Cookie，包括UserName和expires
</HEAD>
</BODY>
</BODY>
</HTML>
在IE浏览器中打开S0207.htm，代码执行后将在“C:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files”文件夹下缓存一个名为“login”的Cookie，它的Internet地址为“cookie:administrator@localhost/login”，其内容如下：
UserName
Forrid
localhost/login
1088
3380636032
29851108
1399419808
29851102
*
根据设定的过期时间，该Cookie文件将在2007年4月14日零时被自动删除。
2.4.9 指定页面内容等级评定
在IE浏览器选项中有一项内容分级审查设置，该分级系统能够帮助用户控制在计算机上看到的Internet内容。
通过“工具”→“Internet选项”菜单命令将打开“Internet选项”对话框，如图2-13所示。切换至“内容”选项卡，单击“启用/禁用”按钮，可以打开或关闭分级审查，单击“设置”按钮，将打开“内容审查程序”对话框，如图2-14所示。
图2-13 “Internet选项”对话框
图2-14 “内容审查程序”对话框
通过选择RSACi类别，可以设置网站浏览级别，从而防止浏览一些受限制的网站，而网站的限制级别则是通过PICS-Label类型来设置的。
网站的PICS（Platform-Independent Content rating Scheme，平台无关内容等级评定方案）级别是由美国娱乐软件咨询委员会（Recreational Software Advisory Council，RSAC）评定的，是一种用来评价网站内容的标准，典型的应用是用来声明文档包含成人内容（性、暴力等）的级别。通常个人网站不用进行RSAC评定，而国外大型网站则都包含该评定，例如，IBM中国网站的内容等级评定如下：
<meta http-equiv="PICS-Label" content='(PICS-1.1
"http://www.icra.org/ratingsv02.html" l gen true r (cz 1 lz 1 nz 1 oz 1 vz 1)
"http://www.rsac.org/ratingsv01.html" l gen true r (n 0 s 0 v 0 l 0)
"http://www.classify.org/safesurf/" l gen true r (SS～～000 1))' />
2.4.10 指定页面过渡特效
经常上网的用户或许看到过，有些网页在进入或退出的时候都有一个特效，或是慢慢溶解，或是百叶窗式消退。利用JavaScript可以实现这样的网页变换特效，其实，META标签已提供了简单易用的页面过渡特效，那就是使用Page-Enter和Page-Exit类型，用法如下：
<META HTTP-EQUIV="Page-Enter" CONTENT="blendTrans(Duration=x)">
<META HTTP-EQUIV="Page-Exit" CONTENT="blendTrans(Duration=x)">
或
<META HTTP-EQUIV=”Page-Enter” CONTENT=”revealTrans(Duration=x, Transtion=y)”>
<META HTTP-EQUIV=”Page-Exit” CONTENT=”revealTrans(Duration=x, Transtion=y)”>
其中，Page-Enter表示进入网页，Page-Exit表示退出网页；blendTrans是一种动态滤镜，产生渐隐渐现的效果；revealTrans也是一种动态效果，产生指定的效果；Duration表示过渡时间（单位为秒），Transtion表示过渡效果，共有22种之多，如表2-4所示。
表2-4 revealTrans动态滤镜过度效果
例程S0208演示了页面过渡特效的使用方法，主页面S0208.htm的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>元信息演示 - 指定页面过渡特效</TITLE>
</HEAD>
<BODY bgcolor="#66CCCC" text="#FFFFFF" vlink="#eeeeee" alink="#ffffff">
<H1>元信息标签<META>使用演示</H1>
<HR>
<a href="S02081.htm">进入演示页面 -1</a><br />
<a href="S02082.htm">进入演示页面 -2</a>
</BODY>
</HTML>
演示页面S02081.htm的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>元信息演示 - 指定页面过渡特效</TITLE>
# 页面过度随机特效，进入页面时过渡时间为2.5秒，退出页面时过渡时间为3.5秒
<Meta HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(duration=2.5, transition=23)">
<Meta HTTP-EQUIV="Page-Exit" CONTENT="revealTrans(duration=3.5, transition=23)">
</HEAD>
<BODY bgcolor="#F2F1D7" text="red">
<H1>元信息标签<META>使用演示</H1>
<HR>
<i>Internet，你好！</i><br />
<a href="S0208.htm">返回主页面</a>
</BODY>
</HTML>
演示页面S02082.htm的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>元信息演示 - 指定页面过渡特效</TITLE>
# 页面进入和退出时渐隐渐现，过渡时间1.5秒
<META HTTP-EQUIV="Page-Enter" CONTENT="blendTrans(Duration=1.5)">
<META HTTP-EQUIV="Page-Exit" CONTENT="blendTrans(Duration=1.5)">
</HEAD>
<BODY bgcolor="#E8D098" text="blue">
<H1>元信息标签<META>使用演示</H1>
<HR>
<b>Internet，你好！</b><br />
<a href="S0208.htm">返回主页面</a>
</BODY>
</HTML>
在IE浏览器中执行S0208.htm，单击“进入演示页面-1”链接，随机产生一种页面过渡特效，如图2-15所示；单击“返回主页面”链接，页面将以随机特效退出到主页面，再单击“进入演示页面-2”链接，页面以慢慢淡入的特效载入，如图2-16所示。单击“返回主页面”链接，页面将以慢慢淡出的特效退出。
图2-15 页面随机产生过渡特效
图2-16 页面产生渐隐渐现的过渡特效
★ 注意 ★
网页中包含帧（Frame）则无法显示过渡特效。
2.4.11 指定是否兼容微软主题
使用MSThemeCompatible类型可以指定是否在IE浏览器中，使用Windows XP主题，用法如下：
<META HTTP-EQUIV=”MSThemeCompatible” CONTENT=”YesOrNo”>
指定MSThemeCompatible为“Yes”则打开IE浏览器的XP显示样式；指定MSThemeCompatible为“No”则关闭IE浏览器的XP显示样式。例程S0209演示了如何使用MSThemeCompatible控制IE浏览器是否兼容Windows XP主题样式，示例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>元信息演示 - 指定是否兼容微软主题</TITLE>
<META HTTP-EQUIV="MSThemeCompatible" CONTENT="No"> # 不兼容微软主题
</HEAD>
<BODY>
<H1>元信息标签<META>使用演示</H1>
<HR>
<FORM METHOD="POST" ACTION="no"> # 定义一个表单
请选择国籍：<br>
<INPUT TYPE="Radio" NAME="Nationality" checked>中国
<INPUT TYPE="Radio" NAME="Nationality">美国
<INPUT TYPE="Radio" NAME="Nationality">俄罗斯<br>
<INPUT TYPE="Reset" VALUE="重置">
<INPUT TYPE="Submit" VALUE="提交">
</FORM>
</BODY>
</HTML>
想要看到示例代码的执行效果，首先需要将操作系统调至Windows XP默认主题，然后在IE浏览器中打开示例代码S0209.htm，可以看出将MSThemeCompatible设置为“Yes”或“No”时，页面中表单控件显示样式的变化，如图2-17所示。
图2-17 指定IE浏览器是否兼容Windows XP主题样式
2.4.12 指定脚本和样式的类型
W3C新规范中定义了两个HTTP-EQUIV类型，Content-Script-Type和Content-Style-Type，分别用来指定页面中脚本语言和样式表的类型，用法如下：
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
例程S0210演示了如何指定页面中脚本语言和样式表的类型，并演示了简单脚本和样式表，示例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>元信息演示 - 指定脚本和样式的类型</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB2312">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> # 脚本类型为
JavaScript
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> # 样式为CSS
<STYLE TYPE="text/css">
body { background-color:#FBFBEA; font-size:20pt }
.p1 { size:18pt; color:#00B271 }
.p2 { color:#336699}
</STYLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
document.write("<BODY>");
document.write("<CENTER>");
document.write("<P class='p1'>Internet，你好！</P>");
document.write("<P class='p2'>");
for (i=1; i<5; i++)
{
for (j=1; j<=i; j++)
{
document.write("@ ");
}
document.write("<BR>");
}
document.write("</P>");
document.write("</CENTER>");
document.write("</BODY>");
//-->
</SCRIPT>
</HTML>
示例代码的执行效果如图2-18所示。
图2-18 示例代码的执行效果
2.4.13 指定关键字列表和内容简介
Internet上的网页数以亿计，要让别人快速找到并访问你的页面就需要借助搜索引擎，使用Keywords类型可以为搜索引擎提供关键字列表，而使用Description类型则可以为搜索引擎提供网页内容简介，用法如下：
<META NAME="Keywords" CONTENT="keylist">
<META NAME="Description" CONTENT="desc">
其中，关键字列表（keylist）中的关键字之间需用符号“，”隔开。使用Keywords和Description类型的示例代码如下：
<HEAD>
<TITLE>指定页面的关键字列表和内容简介</TITLE>
<META NAME="Keywords" CONTENT="HTML, DHTML, XML, XHTML, CSS, VBScript, JavaScript,
ASP, PHP, JSP, Perl, Python, Ruby">
<META NAME="Description"CONTENT="本页详细介绍了Web开发的相关知识，包括静态网页、动态网页、
层叠样式表、脚本语言、Web语言等内容。">
</HEAD>
2.4.14 指定页面作者和版权信息
使用Author类型用来指定页面作者的信息，使用Copyright类型用来指定页面的版权信息，其中，作者信息还可以包含电子邮件信息，用法如下：
<META NAME="Author" CONTENT="author">
<META NAME="Author" CONTENT="author, email">
<META NAME="Copyright" CONTENT="copyright">
使用Author和Copyright类型的示例代码如下：
<HEAD>
<TITLE>指定页面的作者和版权信息</TITLE>
<META NAME="Author" CONTENT="没有角的牛, kinson.cat@gmail">
<META NAME="Copyright" CONTENT="本网页版权归KINSON所有。保留所有权利。">
</HEAD>
2.4.15 指定搜索机器人检索方式
许多搜索引擎都是通过使用robot/spider机器人来搜索网站的，而面对浩瀚的网络搜索机器人又是如何进行搜索的呢？实际上就是通过Robots类型来指定搜索机器人如何检索网站，即告诉搜索机器人哪些页面需要索引，哪些页面不需要索引，用法如下：
<META NAME="Robots" CONTENT="All|None|Index|Noindex|Follow|Nofollow">
其中，检索的方式包括以下几种：
● All，网页将被检索，且页面上的链接可以被查询。
● None，网页将不被检索，且页面上的链接不可以被查询。
● Index，网页将被检索。
● Noindex，网页将不被检索，但页面上的链接可以被查询。
● Follow，页面上的链接可以被查询。
● Nofollow，网页将不被检索，但页面上的链接可以被查询。
默认值为All，使用Robots类型的示例代码如下：
<HEAD>
<TITLE>指定搜索机器人的检索方式</TITLE>
<META NAME="Description" CONTENT="本站主要为健康讲座。">
<META NAME="Robots" CONTENT="Index">
</HEAD>
示例代码指定搜索机器人的检索方式为“网页将被检索”。
2.4.16 指定页面编辑器说明
使用Generator类型用来指定页面编辑器的说明，即网页是用什么样的网页编辑器生成的，用法如下：
<META NAME="Generator" CONTENT="editor">
通常，使用网页制作工具如EditPlus、Frontpage等制作网页时，都会自动生成Generator说明。例如，使用EditPlus生成的页面代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus"># 页面编辑器为EditPlus
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
</BODY>
</HTML>
代码中粗体部分表示该页面是由EditPlus生成的。
2.4.17 指示搜索机器人重访
使用Revisit-After类型用来指示搜索机器人多长时间后重新访问网页，这对于定期更新的网站非常有用，用法如下：
<META NAME="Revisit-After" CONTENT="several days">
例如，要让搜索机器人一周（7天）后再次前来访问，可以在页面中添加如下代码：
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Revisit-After" CONTENT="7 days"> # 7天后重访
</HEAD>
2.4.18 可索引文档标签
可索引文档标签<ISINDEX>用来指示该页面是一个可检索的索引文档。可索引文档是一种交互式的页面，允许用户键入关键字进行检索，需要WWW服务器提供检索机制。如果服务器不提供检索机制，必须自己创建交互式页面，读入关键字并实现检索。可索引文档标签格式如下：
<ISINDEX>
或
<ISINDEX PROMPT="prompt">
属性说明：
● PROMPT，指定文本描述或者提示符。
可索引文档标签<ISINDEX>将在页面上显示一个文本编辑框，用户可以在其中键入关键字，按Enter键确认后，就开始进行检索。
例程S0211演示了如何使用<ISINDEX>标签，示例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>可索引文档标签演示</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="KINSON">
<ISINDEX> <!-- 使用可索引文档标签 -->
</HEAD>
<BODY>
<p>WinRAR is a powerful archive manager. It can backup your data and reduce size of
email attachments, decompress RAR, ZIP and other files downloaded from Internet and create
new archives in RAR and ZIP file format.</p>
<p>FlashGet is a freeware download manager (formerly shareware,adware) for Microsoft
Windows. It is extremely popular, and the standard download manager in China and many other
places.</p>
</BODY>
</HTML>
示例代码的执行效果如图2-19所示。
图2-19 示例代码的执行效果
将S0211.htm代码中粗体部分更改为以下代码：
<ISINDEX PROMPT="Please enter your search phrase:">
示例代码的执行效果如图2-20所示，文本编辑框的提示文本将发生更改。
图2-20 示例代码的执行效果
在文档头部最多只能包含一个<ISINDEX>标签。不推荐使用该标签，建议使用<INPUT>标签替代。
2.4.19 链接标签
链接标签<LINK>用来建立与外部文件的连接关系，最常见的是对层叠样式表（Cascading Style Sheet，CSS）的链接，用法如下：
<LINK REL=" relationship " HREF="url" TYPE="type">
属性说明：
● REL，指定页面与外部文件之间的关系，如StyleSheet（样式表）、Icon（图标）、Shortcut Icon（收藏夹图标）等。
● HREF，指定外部文件的地址。
● TYPE，指定媒体类型，如text/css、image/x-icon等。
例程S0212演示了链接标签<LINK>的常见用法，示例代码S0212.htm如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>链接标签演示</TITLE>
<BASE HREF="http://localhost/ASPBook/02/">
<LINK REL="stylesheet" HREF="default.css" TYPE="text/css"> # 链接样式表
<LINK REL="icon" HREF="favicon.ico" TYPE="image/x-icon"> # 链接图标
<LINK REL="shortcut icon" HREF="favicon.ico" TYPE="image/x-icon"> # 链接快捷方式图标
</HEAD>
<BODY>
<br><hr>
<a href="mailto:kinson.cat@gmail.com">联系方式：kinson.cat@gmail.com</a>
</BODY>
</HTML>
其中，样式文件default.css的源代码如下：
* {
margin: 0px;
padding: 0px;
}
body {
background: #E5ECF4;
min-width: 950px;
min-height: 100%;
height: auto;
font-size: 12px;
text-align: center;
font-family: Verdana;
}
a:link,a:visited {
color: #036;
text-decoration: none
} a:hover {
color: #E00;
text-decoration: none
}
示例代码中粗体部分指出，样式文件default.css与页面的关系是StyleSheet关系，而图标文件favicon.ico与页面的关系是Icon和Shortcut Icon的关系。示例代码的执行效果如图2-21所示。打开IE浏览器的“收藏”菜单，可以看到收藏夹图标正是用户所设置的，如图2-22所示。
图2-21 链接样式表和浏览器图标
图2-22 设置IE浏览器收藏夹图标
2.5 HTML文档主体
2.5.1 背景颜色属性
文档主体标签<BODY>的BGCOLOR属性用来指定页面的背景颜色，用法如下：
<BODY BGCOLOR="color">
默认情况下，页面的背景颜色为白色。BGCOLOR属性的值可以是预定义的颜色单词，如red（红色）、blue（蓝色）、gray（灰色）等；也可以是带符号“#”的十六进制代码，如#FFFFFF（白色）、#6699CC（天蓝色）等。示例代码如下：
<HTML>
<HEAD>
<TITLE>背景颜色属性演示</TITLE>
</HEAD>
<BODY BGCOLOR="#B45B3E">
</BODY>
</HTML>
上面的代码会将页面的背景颜色设置为棕色，示例代码的执行效果如图2-23所示。
图2-23 设置页面的背景颜色
2.5.2 背景图案属性
文档主体标签<BODY>的BACKGROUND属性用来指定页面的背景图案，用法如下：
<BODY BACKGROUND="url">
如果要设置成图案的图像大小不及浏览器窗口，则该图像将平铺占满窗口，示例代码如下：
<HTML>
<HEAD>
<TITLE>背景图案属性演示</TITLE>
</HEAD>
<BODY BACKGROUND="../images/bg.jpg">
</BODY>
</HTML>
上面的代码将会设置页面的背景图案，注意图案的平铺效果，如图2-24所示。
图2-24 设置页面的背景图案
2.5.3 文字颜色属性
文档主体标签<BODY>的TEXT属性用来指定页面中文字的颜色，用法如下：
<BODY TEXT="color">
默认情况下，文字的颜色为黑色。TEXT属性的值可以是预定义的颜色单词，也可以是十六进制代码，参见2.5.2小节。示例代码如下：
<HTML>
<HEAD>
<TITLE>文字颜色属性演示</TITLE>
</HEAD>
<BODY BGCOLOR="#6699CC" TEXT="white">
<h2>演示页面</h2>
背景颜色：天蓝色<br />
文字颜色：白色
</BODY>
</HTML>
上面的代码将设置页面的背景为天蓝色，并设置文字的颜色为白色，执行效果如图2-25所示。
图2-25 设置页面中文字的颜色
2.5.4 链接文字属性
文档主体标签<BODY>的LINK属性用来指定页面中超级链接的文字颜色；ALINK属性用来指定页面中活动链接的文字颜色；VLINK属性用来指定已访问链接的文字颜色，用法如下：
<BODY LINK="color1" ALINK="color2" VLINK="color3">
默认情况下，超级链接的文字为蓝色，活动链接的文字为红色，已访问链接的文字为紫色，链接文字的颜色参见2.5.2小节。示例代码如下：
<HTML>
<HEAD>
<TITLE>链接文字属性演示</TITLE>
</HEAD>
<BODY LINK="Green" ALINK="Red" VLINK="Black">
<a href="hyperlink1">示例超级链接 -1</a><br />
<a href="hyperlink2">示例超级链接 -2</a><br />
<a href="hyperlink3">示例超级链接 -3</a>
</BODY>
</HTML>
上面的代码将页面中超级链接、活动链接、已访问链接的文字分别设置为绿色、红色和黑色。依次点击“示例超级链接 -2”和“示例超级链接-1”，页面中链接文字的颜色如图2-26所示。
图2-26 设置页面中链接文字的颜色
2.5.5 页边距属性
文档主体标签<BODY>的LEFTMARGIN和TOPMARGIN属性用来指定页面左侧和顶部的页边距，用法如下：
<BODY LEFTMARGIN="left" TOPMARGIN="top">
默认情况下，页面内容距页面左侧和顶部的距离均为10px，示例代码如下：
<HTML>
<HEAD>
<TITLE>页边距属性演示</TITLE>
</HEAD>
<BODY LEFTMARGIN="100" TOPMARGIN="50">
<table border="5" bgcolor="blue">
<tr height="100">
<td width="200"></td>
</tr>
</table>
</BODY>
</HTML>
上面的代码分别设置左页边距为100px，设置顶页边距为50px，执行效果如图2-27所示。
图2-27 设置页面的页边距
2.6 本章小结
通过对本章的学习，读者应当掌握以下内容：
● 超文本标记语言HTML
● HTML的标签与属性
● HTML文档结构
● HTML文档头部及其标签
● HTML文档主体及其属性