第四部分多媒体内容编辑语言
*****************************************************************************
在世界性的信息网络时代，文档要便于访问、易于传输、有效检索和灵活多样，这就需要使文档不受软件和硬件的约束，而通用标记语言就是具有这些特性的语言。用来说明文档结构的第一个正式标记语言是由IBM公司于20世纪60年代创造的，称为通用标记语言(Generalized Markup Language，GML)，用于内部文档的标准化。其后扩展成标准通用标记语言(Standard General Markup Language，SGML)，成为许多工业用来表达信息的标准，并于1986年成为国际标准化组织(ISO)的正式标准(SGML ISO 8879-1986)。
超文本标记语言(Hypertext Markup Language，HTML)是20世纪90年代从SGML中挑选的一种Web语言，尽管它有这样那样的问题和局限性，但人们一直在使用和改进它。可扩展标记语言(Extensible Markup Language，XML)就是在广泛实践基础上创造出的一个重要成果，它克服了HTML不能由Web开发人员自己定义标签等不足。另一个重要成果就是使用句法严格的XML对1997发布的HTML 4.0进行了改造，于是就产生了可扩展超文本标记语言(Extensible Hypertext Markup Language，XHTML)。
目前，最基本的Web标准是HTML [1]和XML [2]。XHTML[4]是新一代的Web标准。这些Web标准是由万维网协会(World Wide Web Consortium，W3C)组织制定和推荐的。这些标准将为日益增长的多媒体网络应用、多媒体移动通信和多媒体电子出版业等产生深刻的影响。
第21章 超文本标记语言(HTML)
超文本标记语言(HTML)是组织多媒体文档的重要语言，它不仅用来编写Web网页，而且也使用HTML来制作光盘上的多媒体节目。HTML可用来编排文档、创建列表、建立链接、插入声音和影视片断。虽然编写多媒体文档不一定要直接使用HTML语言，而且目前市场上已有很多很优秀的所见即所得(what you see is what you get，WYSIWYG)编辑器(如微软公司的FrontPage和Macromedia公司的Dreamweaver)，它们都是用于编写HTML多媒体文档的工具。为了更好地理解和使用HTML编辑器，添加一些HTML编辑器暂时不支持的功能，学习一些HTML的基础知识是相当必要的。
21.1 HTML文档
21.1.1 Web与HTML
万维网(Web)是分布在全世界所有HTTP服务机上的互相连接的超文本文档(hypertext documents)的集合。它之所以能够取得巨大成功，主要是开发了下面的三项基本技术：
⑴ 指定网上信息资源地址的统一命名方法：统一资源地址(Uniform Resource Locator，URL)。
⑵ 存取资源的协议：超文本传送协议(Hypertext Transfer Protocol，HTTP)。
⑶ 在资源之间很容易浏览的超文本链接技术：源于HyperText的HyperLink。
万维网上的文档称作Web网页(Web pages)，存储网页并安装有服务软件(也称服务器)的计算机叫做Web服务机(Web servers)，读网页的计算机叫做Web客户机(Web clients)，客户机上观看网页的软件叫做Web浏览器(Web browser)。流行的浏览器是微软公司的IE(Internet Explorer)和网景公司的Netscape Navigator，以及Norwegian Opera Software公司开发的极具生命力的Opera浏览器。
Web网页通常是用HTML编写的文档，称为HTML文档。HTML文档由URL指定它所在的服务机和路径，这就是网页地址。所有的HTML文档都包含如何显示文档的指令，最普通的指令叫做HTML标签(tag)，如<p>这是一个段落</p>。在HTML文档中，使用超级链接技术可将文档中特定的单词和图像与相应的URL相连。因此，用户通过Web浏览器观看网页时，只需按键盘或鼠标器上的按钮就可以访问遥远的文件。这些文件可能包含文本(具有不同的字体或风格)、图形文件、图像文件、影视文件、声音文件以及Java小应用程序和ActiveX控件，或者是其他一些通过用户的点击来激活的内嵌的软件程序。访问Web网页的用户还可以通过网页上的链接，从执行文件传送协议(File Transfer Protocol，FTP)的服务机上下载文件，或使用电子邮件(e-mail)收发其他用户的消息。
目前使用的HTML版本是HTML 4.01，可支持不同种类的语言，可为信息检索工具提供更有效的检索，可提供更高质量的网页显示，也提高了文语转换(text-to-speech，TTS)的支持能力。现在使用比较广泛的一种语言是XML，是一种比HTML更加灵活的一种Web语言。HTML使用预先定义的标签来描述网页中的元素，而XML语言则允许网页开发人员定义自己的标签。
21.1.2 元素和标签的概念一个文档通常由文档头(head)、文档名称(title)、表格(table)、段落(paragraph)和列表(list)等成分构成。为了表达方便，我们把这些成分称为文档元素(element)，简称为元素。元素是文本文档的基本构件，并且使用HTML规定的标签来标识这些元素。例如，元素内容为“举办奥运史上最成功的奥运”，用粗体字表示该元素内容的元素是，
<b>举办奥运史上最成功的奥运</b>
其中，标签<b>表示用粗体字显示，这个元素将在浏览器显示为,
举办奥运史上最成功的奥运
HTML标签由3部分组成：左尖括号“<”，“标签名称”和右尖括号“>”。标签通常是成对出现的，一个表示开始的“开始标签(start tag)”，另一个表示结束的“结束标签(end tag)”标签。例如，<H1>与</H1>分别表示一级标题的开始标签和结束标签，“H1”是一级标签的名称。除了在结束标签名称前面加一个斜杠符号“/”之外，开始标签名称和结束标签名称都是相同的，它也不区分字母的大小写。开始标签和结束标签之间的文本叫做HTML元素的内容。HTML的一些常用标签将在21.2节解释。
标签可以包含“属性(attribute)”。它用来提供网页上的HTML元素的附加信息。属性是指背景颜色、字体属性(大小、颜色、正体、斜体等)、对齐方式等。属性不仅须要名称，而且还须要给它赋值，叫做属性值(attribute value)，并用双引号表示。属性名称和属性值放在开始标签中。例如，
<p align="center"><font color="#FF0000">举办奥运史上最成功的奥运</font></p>
其中，<p align=“center”>表示在显示时这段文字要居中对齐，<font color="#FF0000">表示用红色显示这段文字。
对于图像文件，同样可以指定图像的显示特性，如图像在顶部、在底部或在中间等对齐属性。
注意，HTML标签名称中的字母不分大小写。例如，<title>与<TITLE> 或者 <TiTlE>都是等效的。此外，Web浏览器不一定对所有的HTML标签都支持。如果一个浏览器遇到不认识的标签，它就不予理睬，但在标签之间的文本仍然会显示在计算机的屏幕上。
21.1.3 HTML文档的结构
HTML文档是一种没有格式的文档，也称为ASCII文件。因此，HTML文档可以使用任何一种文本编辑器来编写，如Windows中的记事本(Notepad)、写字板(Wordpad)和Word等。
每个HTML文档都是由标签<html>开始，以标签</html>标签结束。一个HTML文档主要由文档头(head)和正文(body)两个部分组成，并分别用标签<head> … </head>和标签<body> … </body>作标记。在文档头标签(即<head> … </head>)之间包含的内容是文档的名称(title)，如“章乃器轶事”。在正文标签(即<body> … </body>)之间含有用各种HTML标签作标记的段落、列表和其他元素组成的HTML元素。一个简单的HTML文档如下所示：
<html>
<head>
<title>章乃器轶事</title>
</head>
<body>
<h1 align="center">章乃器妙语揭贪官</h1>
<p> 章乃器是我国杰出的爱国人士。1938年3月，应当时安徽省政府主席李宗仁之邀，出任安徽省政府财政厅厅长。针对当时众多的贪官污吏乘国难之机贪污腐化、中饱私囊等劣行，章乃器上任伊始就提出了"铲除贪污"等四项重大措施。…
</p>
</body>
</html>
HTML文档的扩展名用htm或html表示。把编辑好的文件存储为“zhnaqi.htm”或“zhnaqi.htm”文件，然后使用浏览器浏览显示这个文件，就可在浏览器的窗口中看到如图21-01所示的网页。
图21-01 在Web浏览器上显示的HTML文档
21.2 HTML标签和属性
HTML标签和属性很多，为了了解标签和属性的含义，这里仅选择了少数标签和属性作一些解释。若要了解完整的标签和属性，请参看[5]。有些HTML编辑器的联机“帮助”文件中也可找到很完整的说明(例如Sausage Software公司的HotDog Professional )。
21.2.1 基本标签
1,<html>
HTML标签告诉浏览器在<html> … </html>之间的文件是用HTML文档。
2,<head>
文档头标签告诉浏览器在<head> … </head>之间包含的是html文档名称。
3,<title>
文档名称标签告诉浏览器在<title> … </title>之间包含的是具体的HTML文档名称。名称的长度通常不超过64个字符数。
[例21.1] 开始与结束标签之间的文档名称。
<html>
<head>
<title>HTML 4.0 Specification</title>
</head>
<body>
</body>
</html>
在这个HTML文档中，文档名称为HTML 4.0 Specification。
4,<body>
正文标签标签告诉浏览器在<body> … </body>之间的内容是正文部分。这是HTML文档中最多的部分，是显示在浏览器窗口中的文档内容。
5,<hn>
在HTML规范中定义了6个等级的标题标签，其中n＝1，2，…，6。<hn> … </hn>之间包含的是第n级标题。
6,<p>
段落(paragraph)标签告诉浏览器在<p> … </p>之间包含的是一段文字。HTML没有使用硬换行(carriage return)来分段落，这是与字处理软件不同的地方。在HTML文档中，<p>和</p>之间不论有多少行，不论每一行有多长或者多短，也不论其间有多少个空格，浏览器都把它作为一个段落来处理。
[例21.2] Web浏览器忽略标签<P>和</P>之间的行数、空行和空字符。
<P>步入HTML世界。
这是第一段。
把这段内容分成几个“小段”之后，
在浏览器上依然显示一个段落!
</P>
在源HTML文档中，虽然有硬换行，但浏览器只有遇到<P>标签之后才开始新的一行，在浏览器上将显示如图21-02所示的样式。
图21-02 标签<p>的特性
7,<ul>、<ol>和<li>
HTML支持无编号列表标签和有编号列表标签，而且还可以在列表标签中套列表标签。
① <ul> … </ul>表示标签之间的列表项目是无编号列表(Unnumbered List)。
② <ol> … </ol>表示标签之间的列表项目是有编号列表(Ordered List)。
③ <li>：表示标签后面的内容是具体的列表项目(List Item)。
[例21.3] 在<ul> … </ul>之间的项目表示无编号。
<ul>
<li> 计算机科学与技术系
<li> 工程物理系
<li> 生物科学与技术系
</ul>
在浏览器上将显示如图21-03所示的样式。
图21-03 标签<ul>的特性
[例21.4] 在<ol> … </ol>之间的项目是有编号的，这种列表也称为有序列表
<h2> 故宫(1998年—)：</h2>
<ol>
<li> 开放时间：08:30-17:30
<li> 门票价格：内宾20元，外宾60元。
<li> 住宿条件：附近有北京饭店等多个饭店
<li> 餐饮设施：附近有谭家菜餐厅等多个餐厅
<li> 天气状况：四季皆宜
</ol>
在浏览器上将显示如图21-04所示的样式。
图21-04 标签<ol>的特性
[例21.5] 嵌套列表
<ul>
<li> 直辖市
<ol>
<li> 北京市
<li> 天津市
<li> 上海市
<li> 重庆市
</ol>
<li> 省
<ol>
<li> 福建省
<li> 广东省
<li> 湖北省
<li> …
</ol>
</ul>
在浏览器上将显示如图21-05所示的样式。
图21-05 嵌套列表
8,<dl>、<dt>和<dd>
定义列表有三个标签：
<dl>标签：表示定义列表(Definition Lists)
<dt>标签：表示后面的项是定义术语(Definition Term)
<dd>标签：表示后面的项是定义释义(Definition Definition)
[例21.6] 定义列表格式
<dl>
<dt> HTML
<dd> 超文本标记语言，Hypertext Markup Language的缩写。
<dt> SMPTE time code
<dd> SMPTE时间码，记录在录像带上用来标识每一帧电视信号的一种信号标准，
它用于电视编辑。SMPTE(Society of Motion Picture and Television
Engineers)是运动图像和电视工程师协会缩写。
</dl>
在浏览器上将显示如图21-06所示的样式。
图21-06 标签<dl>、<dt>和<dd>的特性
9,<pre>
预格式文本(Preformatted Text)标签用于产生固定宽度的字符。在<pre> … </pre> 之间的空格、新行、空行和表格与HTML源文档中的一致。例如，
<pre>
HTML 超文本标记语言
Hypertext Markup Language的缩写。
SMPTE time code SMPTE时间码记录在录像带上用来标识每一帧电视信号的一种信号标准，它用于电视编辑。
SMPTE 运动图像和电视工程师协会
Society of Motion Picture and Television Engineers的缩写。
</pre>
在浏览器上将显示如图21-07所示的样式。
图21-07 标签<pre>的特性
10,<blockquote>
扩展引用(Extended Quotations)标签告诉浏览器在<blockquote> … </blockquote>之间包含一个比较长的引用语。例如，
<blockquote>
<p>不管前面是地雷阵还是万状深渊，我将一往无前，义无反顾，
鞠躬尽瘁，死而后已。</p>
<p>朱总理，1998年3月 </p>
</blockquote>
11,<br>
强制换行/邮政地址标签(Forced Line Breaks/Postal Addresses)告诉浏览器在显示时一定要换行，目的是不在行与行之间增加空白行。例如，
清华大学 计算机科学与技术系<br>
智能技术与系统国家重点实验室<br>
邮政编码：100084<br>
电话(tel), (010)62782266(o)<br>
传真(fax): (010)62771138<br>
电子邮件地址(e-mail),usernamef@mail.tsinghua.edu.cn<br>
在浏览器上将显示如图21-08所示的样式。
图21-08 标签<br>的特性
12,<form>
交易单标签用来收集用户的信息，它可以包含让用户输入文本和选择项目的接口构件，如文本域、按钮、复选框(checkboxe)，单选按钮(radio button)和选择列表等。使用<form>标签时需要注意：①在交易单中的每个接口构件必须和输入标签(<input>)或者选择标签(<selection>)一起定义；②交易单中的所有构件必须在<form>…</form>之间定义。例如，
<html>
<head><title>检查身份</title></head>
<body background="marble.jpg">
<center><font size=+2><b><font color="#ff0099">欢迎选修</font></col><br>
<font color="#0000ff">《多媒体技术基础》</font></b></center>
<hr>
<form method="post" action="/cgi-bin/passwod1.pl" ><font size=+1>
请输入您的姓名:
<input type="text" name="name" ></center> <br>
请输入您的密码:
<input type="password" name="passwd" >
<pre><input type="submit" value="提交"> <input type="reset" value="
清除">
</body>
</html>
在浏览器上将显示如图21-09所示的样式。
图21-09 标签<from>的特性
13,<hr>
水平线(Horizontal Rule)标签告诉浏览器在显示屏幕上产生一条用于分割文档的水平线，其长度与浏览器窗口等宽，粗细和长短都可设置。例如，
<hr size=4 width="50%">
在浏览器上将显示如图21-10所示的样式。
图21-10 标签<hr>的特性
14,<!--...--> 标签注释标签用来在HTML文档的源代码中插入注释，用来解释编写的源代码，并告诉浏览器不要显示注释。例如，
源代码
浏览器上显示
<!—这是解释源代码的注释-->
<p>上梁不正下梁歪</p>
上梁不正下梁歪
21.2.2 标签的属性
HTML的许多标签都有属性(attribute)。在SGML和HTML中，属性用来修改HTML标签之间的元素的特性。例如，标签之间的元素的对齐方式、图像的大小等等。
[例21.7] 设置字体属性
<p><font color="#ff0000" size="4">理解字符属性的概念</font></p>
这条语句表示“理解字符属性的概念”这几个字的颜色是红色，字号等于4。在浏览器上将显示如图21-11所示的样式。
图21-11 字体属性举例
[例21.8] 在HTML文档中插入对齐(align)属性：
<p align="center">
这是居中段落
</p>
align=center属性表示段落居中，在浏览器上将显示如图21-12所示的样式。align=right表示右对齐属性，align=left表示左对齐属性。
图21-12 对齐属性举例
21.3 字符样式
21.3.1 物理样式和逻辑样式
HTML为单独的词或者句子定义了两种样式：物理样式(Physical Style)和逻辑样式(Logical Styles)。物理样式说明标签之间的文句的特定外貌，而逻辑样式则按文本的意思显示文句的外貌。
表21-1和表21-2分别列出了部分物理样式和逻辑样式的标签功能。
表21-1 物理样式(Physical Style)
标签
显示样式
说明
<b>求实创新！</b>
求实创新！
黑体
<i>求实创新！</i>
求实创新！
斜体
<u>求实创新！</u>
求实创新！
下划线
<tt>求实创新！</tt>
求实创新！
打字机字体
<sup>求实创新！</sup>
求实创新！
上标
<sub>求实创新！</sub>
求实创新！
下标
<s>求实创新！</s>
求实创新！
加删除线
<strike>求实创新！</strike>
求实创新！
加删除线
表21-2 逻辑样式(Logical Style)
标签
显示样式
主要用途
<big>求实创新！</big>
求实创新！
<cite>求实创新！</cite>
求实创新!
书名、影视名等的引用，斜体
<code>求实创新！</code>
求实创新！
计算机代码，显示固定宽度字体
<dfn>求实创新！</dfn>
求实创新！
定义一个词，通常为斜体
<em>求实创新！</em>
求实创新！
强调，通常为斜体
<kbd>求实创新！</kbd>
求实创新！
键盘输入，显示无格式的固定宽度字体
<samp>求实创新！</samp>
求实创新！
显示固定宽度字体
<small>求实创新！</small>
求实创新！
显示固定宽度字体
<strong>求实创新！</strong>
求实创新！
强调，显示黑体字符
<var>变量</var>
变量
变量，显示斜体字符
从这两张表中可以看到，在某些情况下(如对于同样一个需要强调的词或者句子)，使用物理样式标签和逻辑样式标签可以获得相同的显示效果。
既然物理样式和逻辑样式可显示相同的效果，那么为什么要如此繁琐地定义这两种样式标签？这是因为在SGML语言中“内容”和“内容的表达方法”是分开的，HTML是SGML中的子集，它继承了SGML的特性。例如，SGML标记“HTML概要”为一级标题时，并没有指定一级标题中的“HTML概要”的字体大小(如四号字)和对齐方式(如居中)。这样做的好处是：如果想改变一级标题中的字体(如改为三号字体)和对齐方式(如改为左对齐)时，你所要做的仅仅是改变一级标题的定义。
物理样式和逻辑样式各有它们自己的优点。使用逻辑标签的优点是可强制文档中同一元素的类型的一致性。例如，标记某标题为<h1>比你去记住一级标题的字号、对齐方式等要容易得多，这样就不容易记错，保证了一级标题的一致性；使用物理样式的好处是浏览器会严格遵照你标记的样式显示文本，因此在不希望浏览器改变样式的情况下就应该使用物理格式。
21.3.2 字符实体字符实体(character entity)也称转义字符序列(escape sequence)。在HTML中，定义字符实体的原因有两个：第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的字符实体。当解释程序遇到这类字符串时就把它解释为真实的字符。例如，如果要在浏览器上显示“<或<”，在HTML文档必需要用字符实体“<或<”，其中“<”叫做实体名，“<”叫做实体号。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用字符实体来表示。
字符实体有三个部分：⑴与号(&)，⑵实体名称(或#号)和实体号，⑶分号(;)。表21-3列出的是特殊字符实体，其他一些字符的字符实体如表21-4所示。使用字符实体名称的好处是比较容易记，缺点是不是所有浏览器都支持最新的实体名称，而实体号则对几乎所有的浏览器都支持。此外，在输入字符实体名称时要严格遵守字母大小写的规则。
表21-3 特殊字符实体字符
字符实体号
字符实体名称
"
"
"
&
&
&
<
<
<
>
>
>
非断开空格(non-breaking space)
 
表21-4 其他字符字符
十进制
字符实体
字符
十进制
字符实体
字符
十进制
字符实体
¡
¡
á
Á
Á
á
á
á
￠
¢
¢
Â
ˆ
a
â
â
￡
£
£
Ã
Ã
ã
ã
¤
¤
¤
Ä
Ä
ä
ä
￥
¥
¥
Å
˚
å
å
|
¦
¦
Æ
Æ
æ
æ
§
§
§
Ç
Ç
ç
ç
¨
¨
¨
è
È
È
è
è
è
©
©
é
É
É
é
é
é
a
ª
ª
ê
Ê
Ê
ê
ê
ê
«
«
Ë
Ë
ë
ë
¬
¬
ì
Ì
Ì
ì
ì
ì
\x7f
­
­
í
Í
Í
í
í
í
®
®
Î
Î
î
î
ˉ
¯
¯
Ï
Ï
ï
ï
°
°
°
D
Ð
Ð
e
ð
&ieth;
±
±
±
Ñ
Ñ
ñ
ñ
2
²
²
ò
Ò
Ò
ò
ò
ò
3
³
³
ó
Ó
Ó
ó
ó
ó
′
´
´
Ô
Ô
ô
ô
μ
µ
µ
Õ
Õ
õ
õ
¶
¶
Ö
Ö
ö
ö
·
·
·
×
×
×
÷
÷
÷
¸
¸
Ø
Ø
ø
ø
1
¹
¹
ù
Ù
Ù
ù
ù
ù
o
º
º
ú
Ú
Ú
ú
ú
ú
»
»
Û
Û
û
û
¼
¼
ü
Ü
Ü
ü
ü
ü
½
½
Y
Ý
Ý
y
ý
ý
¾
¾
T
Þ
Þ
t
þ
þ
¿
¿
ß
ß
ÿ
ÿ
à
À
À
à
à
à
21.4 超链接
21.4.1 超链接的概念超文本链接(hypertext link)通常简称为超链接(hyperlink)，或者简称为链接(link)。链接是HTML的一个最强大和最有价值的功能。链接可以指向Web上的任何资源，如文档中的元素、图像、另一个文档或文档中的一部分、影视文件、声音文件等。
在HTML中，简单的链接标签是<a>，也称为锚(anchor)签。
要把一个文档包含在你的文档中，它的基本语法是：
<a href="文件名">,.,</a>
或
<a href="URL">,.,</a>
其中，href (hypertext reference)属性，用来指定被链接对象的地址。开始标签(<a……>)和结束标签(</a>)之间的文字将作为超级链接
[例21.9] 下面是一个使用HTML编辑器编辑的“HTML初学者指南”文档，它的文件名是beginner.htm，存放在C:\temp目录下。该文档包含有四个部分，每个部分用单独的一个文档来表示，分别是HTMLPrimerP1.htm，…，HTMLPrimerP4.htm，而且都存放在C:\temp目录下，“HTML初学者指南”的文档如下所示：
<html>
<head>
<title>HTML初学者指南</title>
</head>
<body>
<h2>HTML入门</h2>
<a href="HTMLPrimerP1.htm">第一部分</A> |
<a href="HTMLPrimerP2.htm">第二部分</A> |
<a href="HTMLPrimerP3.htm">第三部分</A> |
<a href="HTMLPrimerP4.htm">第四部分</A>
</body>
</html>
其中，“<a href="HTMLPrimerP1.htm">第一部分</a>”可使“第一部分”链接到相同目录下的文档“HTMLPrimerP1.htm”。其余类推。
在Web浏览器上显示文档时，通常用不同的颜色来区分有链接关系和没有链接关系的元素。在Netscape公司和其他一些公司开发的浏览器中，有链接关系的元素通常用蓝色和下划线表示。这个文档在浏览器上将显示如图21-13所示的样式。
图21-13 超链接在页面上的样式
21.4.2 文档的相对路径与绝对路径相对路径是指相对于当前的工作路径，而绝对路径是指一个完整的路径。如果一个文档在同一路径下，HTML可以使用相对路径或者绝对路径来链接该文档。否则只能使用绝对路径。
[例21.10] 在例21.9中，如果文档“HTMLPrimerP1.htm”存放在目录C:\temp\html_sub下，使用相对路径时可写成：
<A href=" html_sub/HTMLPrimerP1.htm">第一部分</A>
使用绝对路径时写成：
<A href=" C:/temp/html_sub/HTMLPrimerP1.htm">第一部分</A>
需要指出的是：①使用相对路径链接比使用绝对路径链接的运行效率会更高，移动一组文档时也更容易。②UNIX系统是区分大小写的，而DOS和Mac OS系统是不区分大小写的。因此在编写HTML文档时，对文档的大小写要严格区分，否则UNIX系统上的浏览器就找不到你写的文档。③路径名使用标准UNIX系统的句法。
21.4.3 使用URL
URL是识别因特网上任何一个文件地址或资源地址的标准表示法，称为统一资源地址。Web使用URL指定在其他服务机上文档的位置。一个信息资源在网络上的URL地址通常由三个部分组成：
请求服务的类型，它用来说明使用什么网络协议来存取资源，如Web服务程序使用HTTP，文件传送使用FTP(File Transfer Protocol)等。
网络上的主机名。
服务机上的文件名。
例如，http://www.microsoft.com/industry/justice/expttest.htm：第一部分，冒号(:)之前的“http”表示使用的网络协议是HTTP；第二部分，双钭线 (//) 之後的“www.microsoft.com”表示存放信息的主机名，这是微软公司的一个Web服务机；第三部分，第一个钭线后面的“industry/justice/expttest.htm”表示文件所在服务机上的目录和文件名。这个地址告诉Web浏览器“使用HTTP协议，从名字为www.microsoft.com的服务机里、在industry/justice/目录下取回名为expttest.htm的文件”。
[例21.11] 在例21.10中，如果文档“HTMLPrimerP1.htm,不在同一台机器上，而是在URL＝http://nn.sce.tsinghua.edu.cn/kj/Lec01/下，就要使用绝对路径并写成：
<a href="http://nn.sce.tsinghua.edu.cn/kj/Lec01/HTMLPrimerP1.htm">第一部分</a>
21.4.4 文档内部之间的链接有些文档比较长，在文档内部之间往往需要建立相互之间的链接。在这种情况下首先要对被链接的元素进行命名，也就是给它们进行编号，然后建立它们之间的链接关系。元素的命名或者编号要使得你的文档很清楚，便于阅读和修改。
现仍以“HTML初学者指南”文档为例。假设该文档分成4个部分，而且这4个部分都在同一个文档中，要求在浏览器上显示如图21-14所示的样式：
图21-14 文档件链接设计举例
当你点击“第一部分”时，浏览器就显示“第一部分 HTML简介”的内容，当你点击“返回到开头”时就返回到“HTML入门”。其他几个链接的设计也是如此。实现显示这个页面的HTML文档的源文件如下所示：
<html>
<head>
<title>html初学者指南</title>
</head>
<body>
<h2 align="center"><a name="HTML入门"></a>HTML入门</h2><center>
<a href="#第一部分 HTML简介">第一部分</a> |
<a href="#第二部分 HTML标签和属性">第二部分</a> |
<a href="#第三部分 字符样式">第三部分</a>|
<a href="#第四部分 超链接">第四部分</a></center>
<center>…</center><br>
<h3 align="center"><a name="第一部分 HTML简介">第一部分 HTML
简介</a></h3>
<center>…</center>
<center><a href="#HTML入门">返回到开头</a></center>
<h3 align="center"><a name="第二部分 HTML标签和属性"></A>第二部分
HTML标签和属性</h3>
<center>…</center>
<center><a href="#HTML入门">返回到开头</a></center>
<h3 align="center"><a name="第三部分 字符样式"></A>第三部分 字符样式
</h3>
<center>…</center>
<center><a href="#HTML入门">返回到开头</a></center>
<h3 align="center"><a name="第四部分 超链接"></A>第四部分 超链接</h3>
<center>…</center>
<center><a href="#HTML入门">返回到开头</a></center>
</body>
</html>
21.4.5 链接电子邮件程序在Web页面上链接电子邮件程序需要使用“mailto”。使用mailto可以创建预先填入有电子邮件地址的表单，其中的电子邮件地址可以是作者的，也可以是第三者的，这样可鼓励读者给作者反馈信息，也便于读者与第三方联系。mailto的语法结构如下：
<a href="mailto,userinfo@host">Name</a>
其中，“userinfo”是电子邮件地址的用户名，“host”是电子邮件服务机的主机名，“Name”应该是让人能容易理解的名称。
[例21.12] HTML文档中可插入如下一句：
<p>如有什么评论，把电子邮件发送给作者单位：
<a href="mailto:linfz@mail.tsinghua.edu.cn">清华大学计算机科学与技术系</a></p>
这个文档在浏览器上将显示如图21-15所示的样式。
图21-15 链接电子邮件程序举例当读者用鼠标器点击它时就会调出电子邮件编辑器，以供你编写电子邮件。
21.4.6 链接内联图像内联图像(inline image)是指与Web网页中的文本一起下载和显示的图像，而不需要在你选择之后才下载和显示，在浏览器上表现为文本和图像显示在同一网页上，这种图像也称为内嵌图像或者叫内插图像。
目前，Web网页上的图像一般都使用GIF和JPG格式，它们是Web页面上使用最普遍的图像文件存储格式。使用GIF格式存储的图像是数据无损压缩的图像，使用JPG格式的图像是数据有损压缩的图像。大多数Web浏览器都不需要调用其他的图像处理程序就能直接显示用这两种格式存储的图像。其他图像格式也逐步集成到Web浏览器，如流式网络图像格式(Portable Network Graphic，PNG)，这是一种可取代GIF格式的数据无损压缩图像存储格式。
在HTML文档中插入图像文件的格式如下：
<img src=ImageName> … </img>
其中，图像文件名“ImageName”是图像文件的URL地址；“<img src＝”与,<a href=”的功能相同。
[例21.13] 现有两幅宽度＝166象素、高度＝115象素的图像要插入到“HTML初学者指南”文档中，其中一幅在左边，另一幅在右边，图像边框的宽度＝2象素。如果使用不能显示图像的浏览器或者不想看图像，可把浏览器中的图像显示功能阻塞掉。其方法是分别使用“Test GIF Image”和“Test JPEG Image”文字替代“test.gif”和“test.jpg”图像。根据上述要求，HTML文档的源文件可写成：
<html>
<head>
<title>HTML初学者指南</title>
</head>
<body>
<img src="image0.gif" width="126" height="115" align="left" border="2" alt="Test
GIF Image"><img src="image1.gif" width="126" height="115" align="right"
border="2" alt="Test JPEG Image">
<h3 align="center"><a name="第一部分 HTML简介">第一部分 HTML简介
/a></h3>
<center><p>…</p></center>
<center><p><a href="21_lecture.htm">返回到开头</a></p></center>
</body>
</html>
这个文档在浏览器上将显示如图21-16所示的样式。
图21-16 链接内联图像举例要使图像显示在中央，则要用中间对齐标签<center>…</center>，可使用下面的语句：
<p><center><img src="image0.gif" width="126" height="115"
border="2" alt="Test GIF Image Align"></center></p>
21.4.7 用图像作超链接像文字一样，图像也可以作为超链接。
[例21.14] 假设beginner.htm，test.gif和下面的HTML文档在同一文件夹(即同一个路径)下，可使用下面的语句链接文档：
<a href="HTML_beginner.htm"><img src="image0.gif" alt="Hotlist"></a>
<a href="JavaScript_beginner.htm"><img src="image1.gif" alt="Hotlist"></a>
这个文档在浏览器上将显示如图21-17所示的样式。
图21-17 用图像作超链接举例图像有一个蓝色的边框，表示点击它可调出“beginner.htm”HTML文档。
21.4.8 用图像作网页的背景在浏览器上经常可看到各种背景图像，使用图像做网页背景的语法结构如下：
<body background="filename.gif">
做背景的图像不需要很大，浏览器会利用它的平铺(tiling)功能布满整个网页。
[例21.15] 设计网页的背景为黑色，文字白色，带链接，还未用鼠标器点击过的元素为浅蓝色，可用下面的HTML源代码实现：
<body bgcolor="#000000" text="#ffffff" link="#ccffff">
其中的颜色值用RGB (red,green,blue)彩色模型，每种颜色分量用1字节表示。
21.4.9 链接外联图像在HTML文档中，如果内联图像文件太大，在浏览主文档时就需要很长的时间来等待图像下载。为了改善这种状况，一种切实可行的方法是把大的图像当作外联(external image)图像来处理。在编写HTML文档时，用文字或者小的内联图标来代表大图像，而把大图像文件当作一个单独的文档，然后把文字或图标与大图像文件链接在一起。当在浏览器中阅读网页时，读者可用鼠标器激活这个链接，然后下载并显示在另一个窗口上。用这种方式链接的图像称为外联图像。
链接外联图像可使用下面的语句：
<a href="图像文件名">图像名称</a>
[例21.16] 假设Dmt_Test.htm文档和图像文件Tu01_MyImage.jpg在同一文件夹下。使用外联图像时可在Dmt_Test.htm中加入如下语句：
<center><a href="Tu01_MyImage.jpg">图01 我的照片</a></center>
或者
<center><a href="Tu01_MyImage.jpg">
<img src="Tu01_icon.gif" alt="图01 我的照片"></a></center>
这个文档在浏览器上将显示如图21-18(a)所示的样式，此时并没有显示图像。当用鼠标器点击图01 我的照片时，就把图像显示在新的窗口中，如图图21-18(b)所示。
(a) 外联图像链接显示 (b) 外联的实际图像图21-18 链接外联图像举例
21.4.10 在文档中链接和嵌入声音文件
1,把声音文件链接到HTML文档在HTML文档中，可以使用与外联图像类似的语句把声音文件链接到文档中，差别只是文件扩展名不同。
[例21.17] 假设Dmt_Test.htm文档和声音文件Sd01_MySound.wav在同一文件夹下。使用外联声音时可在Dmt_Test.htm中加入如下语句：
<a href="Sd01_ MySound.wav">老黄牛声音</a>
在浏览器上将显示如图21-19所示的样式。
图21-19 把声音文件链接到HTML文档举例当读者用鼠标器点击老黄牛声音”时，浏览器将调出一个播放器进行播放。
2,把声音文件嵌入到HTML文档如果想把声音文件嵌入到HTML文档中，可使用下面的语句：
<embed src="Sd01_ MySound.wav" ></embed><br>老黄牛声音</font><br>
在微软公司的Internet Explorer 4.X以上版本的浏览器上将显示一个播放控制器，按播放按钮就可播放。图21-20所示的播放器是微软公司的IE 6.0弹出的播放器。
图21-20 把声音文件嵌入到HTML文档举例如果你在Netscape公司的Communicator 4.04或更高版本的浏览器上播放时，显示的播放控制面板将取决于你所安装的播放声音的插入软件。
3,在文档中嵌入背景声音在HTML文档中可嵌入背景音乐，当打开HTML文档时就开始播放。嵌入背景音乐的基本语法结构如下：
<bgsound src="URL" loop=100>
其中，URL表示背景音乐的文件名，loop表示循环播放的次数。
21.4.11 在文档中链接和嵌入影视文件
1,把影视文件链接到HTML文档使用与外联图像类似的语句可把影视文件链接到HTML文档，差别只是文件扩展名不同。
[例21.18] 假设Dmt_Test.htm文档和影视文件chanticleer在同一文件夹下。使用外联影视文件时可在Dmt_Test.htm中加入如下语句：
<a href="aris.mpg">宇宙飞船的高度和速率指示系统
(altitude and rate indicating system，ARIS) </a>
如果要显示图标，然后点击图标后再播放影视，可使用：
<p><a href="aris.mpg"><img src="Tu01_icon.jpg" alt="影视片段：
宇宙飞船的高度和速率指示系统"></a></p>
<p><a href="aris.mpg">宇宙飞船的高度和速率指示系统</a> </p>
在微软公司的Internet Explorer 4.x版本以上的浏览器上将显示如图21-21(b)所示的样式：
或者
(a) (b)
图21-21 把影视文件链接到HTML文档当你点击“宇宙飞船的高度和速率指示系统(altitude and rate indicating system，ARIS)”时，在Windows 9x/2000/CE/NT/环境下，IE浏览器将调出一个多媒体播放器进行播放。图21-22是使用Windows 2000环境下的播放样式:
图21-22 链接的影视文件举例
2,在文档中嵌入影视与链接外联影视文件不同，对嵌入有影视文件的HTML文档，浏览器在从网络上下载该文档时就把影视文件一起下载下来，如果影视文件很大，则下载的时间就会很长。因此这种嵌入方式常用于影视文件不大的场合。嵌入这种影视文件的基本语法结构是：
<embed src=“URL”>
[例21.19] 在C:\temp\文件夹下有一个“HTML初学者指南.htm”文档和3个影视文件。在test.htm文档中嵌入这个影视文件可用下面几种语句:
① <img dynsrc="sky.avi" height="120" width="160" >
②<embed src="basket.avi" height="120" width="160"> </embed>
③ <img dynsrc="Kennedy.avi " height="120" width="160" start=mouseover>
对于语句①：当打开HTML文档时，显示不带播放控制按钮的图像，并马上开始播放，直到播放完毕。
对于语句②：当打开HTML文档时，就显示带有播放控制按钮的图像并开始播放。如果还想再观看一遍，可按下播放按钮。
对于语句③：当打开HTML文档时显示不带播放控制按钮的图像，并不开始播放，而是当把鼠标器放在图像上时才开始播放。
在Internet Explorer浏览器上将显示如图21-23所示的样式。
图21-23 文档中嵌入影视方法
21.5 表格标签和属性在HTML文档中，经常需要设计表格。一张表格有许多表素(table element)组成，例如表的名称(caption)、表行(table row),列表标题(table header)、列表数据单元(table data cell)等。HTML为表格规定了许多表素标签和属性，它们分别示于表21-5和表21-6。
表21-5 表素标签表 素
说 明
<table>...</table>
定义表格。若已设置边框(border)属性，则浏览器可显示边框
<caption>…</caption>
定义表的名称(caption)
<tr>,.,</tr>
定义表的行(table row)，可定义对齐属性
<th>,.,</th>
定义列表标题(table header)，通常为黑体字，中央对齐
<td>…</td>
定义列表数据(table data)单元
表21-6 表素属性属 性
说 明
align (left,center,right)
表单元的水平对齐方式
valign (top,middle,bottom)
表单元的垂直对齐方式
colspan=n
表单元跨越的列数
rowspan=n
表单元跨越的行数
nowrap
表单元中的文字无自动换行
在设计HTML的表格时应注意：
① <table> … </table>必须要包含整个表的定义。
② 在表格中的第一项是表的名称，是可有可无的。
③ <tr> … </tr>标签定义的行的数目没有限制。
④ 在一行中，使用<td> … </td>或<th> … </th>标签定义的数据单元数目没有限制。
⑤ 表的每一个单元的属性可单独设置，因此表格的形式可以多种多样。
⑥ 数据单元中的内容可以是文字或图标，也可以是它们两者，而且还可以设置超级链接。
一般的表格如下所示：
<html>
<head>
<title>html初学者指南</title>
</head>
<body>
<table border="2">
<!-- 表格定义开始 -->
<caption> 表号：表的名称</caption>
<!-- 标题说明-->
<tr>
<!-- 列表标题定义开始 -->
<th> 第一列标题</th>
<th>…</th>
<th> 最后一列标题 </th>
<!-- 列表标题定义结束 -->
</tr>
<tr>
<!--第一行列表数据开始 -->
<td> 第一行第一个单元的数据</td>
<th>…</th>
<td> 第一行最后一个单元的数据</td>
<!-- 第一行列表数据结束 -->
</tr>
<tr>
<!--第n行列表数据开始 -->
<td align="center">…</td>
<td align="center">…</td>
<td align="center">…</td>
<!--第n行列表数据结束 -->
</tr>
<tr>
<!-- 最后一行列表数据开始-->
<td> 最后一行第一个单元的数据 </td>
<th>…</th>
<td> 最后一行最后一个单元的数据</td>
<!-- 最后一行列表数据结束 -->
</tr>
<!-- 表格定义结束 -->
</table>
</body>
</html>
在浏览器上将显示如图21-24所示的样式。
图21-24 表格标签和属性演示页面练习与思考题谁在制定Web标准?
⑴ 网景公司(Netscape)
⑵ 万维网协会(The World Wide Web Consortium)
⑶ 微软公司哪一个HTML标签用于插入断行?
⑴ <lb>
⑵ <break>
⑶ <br>
哪一个HTML标签用于添加背景颜色?
⑴ <background>yellow</background>
⑵ <body bgcolor="yellow">
⑶ <body color="yellow">
哪一个HTML标签用于粗体字?
⑴ <bold>
⑵ <bb>
⑶ <b>
⑷ <bld>
哪一个HTML标签用于链接“第29届奥林匹克运动会组织委员会”?
⑴ <a>http://www.beijing-2008.org，第29届奥林匹克运动会组织委员会</a>
⑵ <a url="http://www.beijing-2008.org">第29届奥林匹克运动会组织委员会</a>
⑶ <a href="http://www.beijing-2008.org">第29届奥林匹克运动会组织委员会</a>
⑷ <a name="http://www.beijing-2008.org">第29届奥林匹克运动会组织委员会</a>
哪一个代码用于链接电子邮件程序?
⑴ <mail href="xxx@yyy">
⑵ <a href="xxx@yyy">
⑶ <a href="mailto:xxx@yyy">
⑷ <mail>xxx@yyy</mail>
如何把被链接的文档显示在新的浏览器窗口中?
⑴ <a href="url" new>
⑵ <a href="url" target="new">
⑶ <a href="url" target="_blank">
哪一个标签用于插入图像?
⑴ <image src="image.gif">
⑵ <img href="image.gif>
⑶ <img src="image.gif">
⑷ <img>image.gif</img>
哪一个标签用于插入背景图像?
⑴ <img src="background.gif" background>
⑵ <background img="background.gif">
⑶ <body background="background.gif">
为什么要定义字体的逻辑样式和物理样式？
指出“<h1 align="center">hmtl编辑器</h1>”中哪些是元素、标签和属性。
一个URL为http://www.tsinghua.edu.cn/docs/cindex.htm，说出各部分的含义。
电子邮件的地址为：liudf@public.bta.net.cn和bookshelf@mcp.com，分别说出各部分的含义。
把图像/影视文件链接到和嵌入到HTML文档中，在语法结构和工作方式上都有什么差别？分别说出各自的优缺点。
把声音文件链接到和嵌入到HTML文档中，在语法结构和工作方式上都有什么差别？分别说出各自的优缺点。
列出你和你的同学所知道的HTML编辑器，并讨论它们的性能。
参考答案：
21.1.⑵，21.2.⑶，21.3.⑵，21.4.⑶，21.5.⑶，21.6.⑶，21.7.⑶，21.8.⑶，21.9.⑶
参考文献和站点
W3C Recommendation 24 December 1999，HTML 4.01 Specification，http://www.w3.org/TR/html401/。
W3C Recommendation 6 October 2000，Extensible Markup Language (XML) 1.0 (Second Edition)，http://www.w3.org/TR/REC-xml。
W3C Recommendation 12-May-1998，Cascading Style Sheets,level 2，CSS2 Specification，http://www.w3.org/TR/REC-CSS2/。
W3C Recommendation 26 January 2000，XHTML? 1.0,The Extensible HyperText Markup Language，A Reformulation of HTML 4 in XML 1.0，http://www.w3.org/TR/xhtml1/。
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html。
http://developer.netscape.com/docs/manuals/htmlguid/index.htm。
Technical Manuals and Notes，http://developer.netscape.com/docs/manuals/index.html。
http://www.mcfedries.com/books/cightml/。
HTML 4 Document Type Definition,http://www.w3.org/TR/html4/sgml/dtd.html。
*****************************************************************************
在世界性的信息网络时代，文档要便于访问、易于传输、有效检索和灵活多样，这就需要使文档不受软件和硬件的约束，而通用标记语言就是具有这些特性的语言。用来说明文档结构的第一个正式标记语言是由IBM公司于20世纪60年代创造的，称为通用标记语言(Generalized Markup Language，GML)，用于内部文档的标准化。其后扩展成标准通用标记语言(Standard General Markup Language，SGML)，成为许多工业用来表达信息的标准，并于1986年成为国际标准化组织(ISO)的正式标准(SGML ISO 8879-1986)。
超文本标记语言(Hypertext Markup Language，HTML)是20世纪90年代从SGML中挑选的一种Web语言，尽管它有这样那样的问题和局限性，但人们一直在使用和改进它。可扩展标记语言(Extensible Markup Language，XML)就是在广泛实践基础上创造出的一个重要成果，它克服了HTML不能由Web开发人员自己定义标签等不足。另一个重要成果就是使用句法严格的XML对1997发布的HTML 4.0进行了改造，于是就产生了可扩展超文本标记语言(Extensible Hypertext Markup Language，XHTML)。
目前，最基本的Web标准是HTML [1]和XML [2]。XHTML[4]是新一代的Web标准。这些Web标准是由万维网协会(World Wide Web Consortium，W3C)组织制定和推荐的。这些标准将为日益增长的多媒体网络应用、多媒体移动通信和多媒体电子出版业等产生深刻的影响。
第21章 超文本标记语言(HTML)
超文本标记语言(HTML)是组织多媒体文档的重要语言，它不仅用来编写Web网页，而且也使用HTML来制作光盘上的多媒体节目。HTML可用来编排文档、创建列表、建立链接、插入声音和影视片断。虽然编写多媒体文档不一定要直接使用HTML语言，而且目前市场上已有很多很优秀的所见即所得(what you see is what you get，WYSIWYG)编辑器(如微软公司的FrontPage和Macromedia公司的Dreamweaver)，它们都是用于编写HTML多媒体文档的工具。为了更好地理解和使用HTML编辑器，添加一些HTML编辑器暂时不支持的功能，学习一些HTML的基础知识是相当必要的。
21.1 HTML文档
21.1.1 Web与HTML
万维网(Web)是分布在全世界所有HTTP服务机上的互相连接的超文本文档(hypertext documents)的集合。它之所以能够取得巨大成功，主要是开发了下面的三项基本技术：
⑴ 指定网上信息资源地址的统一命名方法：统一资源地址(Uniform Resource Locator，URL)。
⑵ 存取资源的协议：超文本传送协议(Hypertext Transfer Protocol，HTTP)。
⑶ 在资源之间很容易浏览的超文本链接技术：源于HyperText的HyperLink。
万维网上的文档称作Web网页(Web pages)，存储网页并安装有服务软件(也称服务器)的计算机叫做Web服务机(Web servers)，读网页的计算机叫做Web客户机(Web clients)，客户机上观看网页的软件叫做Web浏览器(Web browser)。流行的浏览器是微软公司的IE(Internet Explorer)和网景公司的Netscape Navigator，以及Norwegian Opera Software公司开发的极具生命力的Opera浏览器。
Web网页通常是用HTML编写的文档，称为HTML文档。HTML文档由URL指定它所在的服务机和路径，这就是网页地址。所有的HTML文档都包含如何显示文档的指令，最普通的指令叫做HTML标签(tag)，如<p>这是一个段落</p>。在HTML文档中，使用超级链接技术可将文档中特定的单词和图像与相应的URL相连。因此，用户通过Web浏览器观看网页时，只需按键盘或鼠标器上的按钮就可以访问遥远的文件。这些文件可能包含文本(具有不同的字体或风格)、图形文件、图像文件、影视文件、声音文件以及Java小应用程序和ActiveX控件，或者是其他一些通过用户的点击来激活的内嵌的软件程序。访问Web网页的用户还可以通过网页上的链接，从执行文件传送协议(File Transfer Protocol，FTP)的服务机上下载文件，或使用电子邮件(e-mail)收发其他用户的消息。
目前使用的HTML版本是HTML 4.01，可支持不同种类的语言，可为信息检索工具提供更有效的检索，可提供更高质量的网页显示，也提高了文语转换(text-to-speech，TTS)的支持能力。现在使用比较广泛的一种语言是XML，是一种比HTML更加灵活的一种Web语言。HTML使用预先定义的标签来描述网页中的元素，而XML语言则允许网页开发人员定义自己的标签。
21.1.2 元素和标签的概念一个文档通常由文档头(head)、文档名称(title)、表格(table)、段落(paragraph)和列表(list)等成分构成。为了表达方便，我们把这些成分称为文档元素(element)，简称为元素。元素是文本文档的基本构件，并且使用HTML规定的标签来标识这些元素。例如，元素内容为“举办奥运史上最成功的奥运”，用粗体字表示该元素内容的元素是，
<b>举办奥运史上最成功的奥运</b>
其中，标签<b>表示用粗体字显示，这个元素将在浏览器显示为,
举办奥运史上最成功的奥运
HTML标签由3部分组成：左尖括号“<”，“标签名称”和右尖括号“>”。标签通常是成对出现的，一个表示开始的“开始标签(start tag)”，另一个表示结束的“结束标签(end tag)”标签。例如，<H1>与</H1>分别表示一级标题的开始标签和结束标签，“H1”是一级标签的名称。除了在结束标签名称前面加一个斜杠符号“/”之外，开始标签名称和结束标签名称都是相同的，它也不区分字母的大小写。开始标签和结束标签之间的文本叫做HTML元素的内容。HTML的一些常用标签将在21.2节解释。
标签可以包含“属性(attribute)”。它用来提供网页上的HTML元素的附加信息。属性是指背景颜色、字体属性(大小、颜色、正体、斜体等)、对齐方式等。属性不仅须要名称，而且还须要给它赋值，叫做属性值(attribute value)，并用双引号表示。属性名称和属性值放在开始标签中。例如，
<p align="center"><font color="#FF0000">举办奥运史上最成功的奥运</font></p>
其中，<p align=“center”>表示在显示时这段文字要居中对齐，<font color="#FF0000">表示用红色显示这段文字。
对于图像文件，同样可以指定图像的显示特性，如图像在顶部、在底部或在中间等对齐属性。
注意，HTML标签名称中的字母不分大小写。例如，<title>与<TITLE> 或者 <TiTlE>都是等效的。此外，Web浏览器不一定对所有的HTML标签都支持。如果一个浏览器遇到不认识的标签，它就不予理睬，但在标签之间的文本仍然会显示在计算机的屏幕上。
21.1.3 HTML文档的结构
HTML文档是一种没有格式的文档，也称为ASCII文件。因此，HTML文档可以使用任何一种文本编辑器来编写，如Windows中的记事本(Notepad)、写字板(Wordpad)和Word等。
每个HTML文档都是由标签<html>开始，以标签</html>标签结束。一个HTML文档主要由文档头(head)和正文(body)两个部分组成，并分别用标签<head> … </head>和标签<body> … </body>作标记。在文档头标签(即<head> … </head>)之间包含的内容是文档的名称(title)，如“章乃器轶事”。在正文标签(即<body> … </body>)之间含有用各种HTML标签作标记的段落、列表和其他元素组成的HTML元素。一个简单的HTML文档如下所示：
<html>
<head>
<title>章乃器轶事</title>
</head>
<body>
<h1 align="center">章乃器妙语揭贪官</h1>
<p> 章乃器是我国杰出的爱国人士。1938年3月，应当时安徽省政府主席李宗仁之邀，出任安徽省政府财政厅厅长。针对当时众多的贪官污吏乘国难之机贪污腐化、中饱私囊等劣行，章乃器上任伊始就提出了"铲除贪污"等四项重大措施。…
</p>
</body>
</html>
HTML文档的扩展名用htm或html表示。把编辑好的文件存储为“zhnaqi.htm”或“zhnaqi.htm”文件，然后使用浏览器浏览显示这个文件，就可在浏览器的窗口中看到如图21-01所示的网页。
图21-01 在Web浏览器上显示的HTML文档
21.2 HTML标签和属性
HTML标签和属性很多，为了了解标签和属性的含义，这里仅选择了少数标签和属性作一些解释。若要了解完整的标签和属性，请参看[5]。有些HTML编辑器的联机“帮助”文件中也可找到很完整的说明(例如Sausage Software公司的HotDog Professional )。
21.2.1 基本标签
1,<html>
HTML标签告诉浏览器在<html> … </html>之间的文件是用HTML文档。
2,<head>
文档头标签告诉浏览器在<head> … </head>之间包含的是html文档名称。
3,<title>
文档名称标签告诉浏览器在<title> … </title>之间包含的是具体的HTML文档名称。名称的长度通常不超过64个字符数。
[例21.1] 开始与结束标签之间的文档名称。
<html>
<head>
<title>HTML 4.0 Specification</title>
</head>
<body>
</body>
</html>
在这个HTML文档中，文档名称为HTML 4.0 Specification。
4,<body>
正文标签标签告诉浏览器在<body> … </body>之间的内容是正文部分。这是HTML文档中最多的部分，是显示在浏览器窗口中的文档内容。
5,<hn>
在HTML规范中定义了6个等级的标题标签，其中n＝1，2，…，6。<hn> … </hn>之间包含的是第n级标题。
6,<p>
段落(paragraph)标签告诉浏览器在<p> … </p>之间包含的是一段文字。HTML没有使用硬换行(carriage return)来分段落，这是与字处理软件不同的地方。在HTML文档中，<p>和</p>之间不论有多少行，不论每一行有多长或者多短，也不论其间有多少个空格，浏览器都把它作为一个段落来处理。
[例21.2] Web浏览器忽略标签<P>和</P>之间的行数、空行和空字符。
<P>步入HTML世界。
这是第一段。
把这段内容分成几个“小段”之后，
在浏览器上依然显示一个段落!
</P>
在源HTML文档中，虽然有硬换行，但浏览器只有遇到<P>标签之后才开始新的一行，在浏览器上将显示如图21-02所示的样式。
图21-02 标签<p>的特性
7,<ul>、<ol>和<li>
HTML支持无编号列表标签和有编号列表标签，而且还可以在列表标签中套列表标签。
① <ul> … </ul>表示标签之间的列表项目是无编号列表(Unnumbered List)。
② <ol> … </ol>表示标签之间的列表项目是有编号列表(Ordered List)。
③ <li>：表示标签后面的内容是具体的列表项目(List Item)。
[例21.3] 在<ul> … </ul>之间的项目表示无编号。
<ul>
<li> 计算机科学与技术系
<li> 工程物理系
<li> 生物科学与技术系
</ul>
在浏览器上将显示如图21-03所示的样式。
图21-03 标签<ul>的特性
[例21.4] 在<ol> … </ol>之间的项目是有编号的，这种列表也称为有序列表
<h2> 故宫(1998年—)：</h2>
<ol>
<li> 开放时间：08:30-17:30
<li> 门票价格：内宾20元，外宾60元。
<li> 住宿条件：附近有北京饭店等多个饭店
<li> 餐饮设施：附近有谭家菜餐厅等多个餐厅
<li> 天气状况：四季皆宜
</ol>
在浏览器上将显示如图21-04所示的样式。
图21-04 标签<ol>的特性
[例21.5] 嵌套列表
<ul>
<li> 直辖市
<ol>
<li> 北京市
<li> 天津市
<li> 上海市
<li> 重庆市
</ol>
<li> 省
<ol>
<li> 福建省
<li> 广东省
<li> 湖北省
<li> …
</ol>
</ul>
在浏览器上将显示如图21-05所示的样式。
图21-05 嵌套列表
8,<dl>、<dt>和<dd>
定义列表有三个标签：
<dl>标签：表示定义列表(Definition Lists)
<dt>标签：表示后面的项是定义术语(Definition Term)
<dd>标签：表示后面的项是定义释义(Definition Definition)
[例21.6] 定义列表格式
<dl>
<dt> HTML
<dd> 超文本标记语言，Hypertext Markup Language的缩写。
<dt> SMPTE time code
<dd> SMPTE时间码，记录在录像带上用来标识每一帧电视信号的一种信号标准，
它用于电视编辑。SMPTE(Society of Motion Picture and Television
Engineers)是运动图像和电视工程师协会缩写。
</dl>
在浏览器上将显示如图21-06所示的样式。
图21-06 标签<dl>、<dt>和<dd>的特性
9,<pre>
预格式文本(Preformatted Text)标签用于产生固定宽度的字符。在<pre> … </pre> 之间的空格、新行、空行和表格与HTML源文档中的一致。例如，
<pre>
HTML 超文本标记语言
Hypertext Markup Language的缩写。
SMPTE time code SMPTE时间码记录在录像带上用来标识每一帧电视信号的一种信号标准，它用于电视编辑。
SMPTE 运动图像和电视工程师协会
Society of Motion Picture and Television Engineers的缩写。
</pre>
在浏览器上将显示如图21-07所示的样式。
图21-07 标签<pre>的特性
10,<blockquote>
扩展引用(Extended Quotations)标签告诉浏览器在<blockquote> … </blockquote>之间包含一个比较长的引用语。例如，
<blockquote>
<p>不管前面是地雷阵还是万状深渊，我将一往无前，义无反顾，
鞠躬尽瘁，死而后已。</p>
<p>朱总理，1998年3月 </p>
</blockquote>
11,<br>
强制换行/邮政地址标签(Forced Line Breaks/Postal Addresses)告诉浏览器在显示时一定要换行，目的是不在行与行之间增加空白行。例如，
清华大学 计算机科学与技术系<br>
智能技术与系统国家重点实验室<br>
邮政编码：100084<br>
电话(tel), (010)62782266(o)<br>
传真(fax): (010)62771138<br>
电子邮件地址(e-mail),usernamef@mail.tsinghua.edu.cn<br>
在浏览器上将显示如图21-08所示的样式。
图21-08 标签<br>的特性
12,<form>
交易单标签用来收集用户的信息，它可以包含让用户输入文本和选择项目的接口构件，如文本域、按钮、复选框(checkboxe)，单选按钮(radio button)和选择列表等。使用<form>标签时需要注意：①在交易单中的每个接口构件必须和输入标签(<input>)或者选择标签(<selection>)一起定义；②交易单中的所有构件必须在<form>…</form>之间定义。例如，
<html>
<head><title>检查身份</title></head>
<body background="marble.jpg">
<center><font size=+2><b><font color="#ff0099">欢迎选修</font></col><br>
<font color="#0000ff">《多媒体技术基础》</font></b></center>
<hr>
<form method="post" action="/cgi-bin/passwod1.pl" ><font size=+1>
请输入您的姓名:
<input type="text" name="name" ></center> <br>
请输入您的密码:
<input type="password" name="passwd" >
<pre><input type="submit" value="提交"> <input type="reset" value="
清除">
</body>
</html>
在浏览器上将显示如图21-09所示的样式。
图21-09 标签<from>的特性
13,<hr>
水平线(Horizontal Rule)标签告诉浏览器在显示屏幕上产生一条用于分割文档的水平线，其长度与浏览器窗口等宽，粗细和长短都可设置。例如，
<hr size=4 width="50%">
在浏览器上将显示如图21-10所示的样式。
图21-10 标签<hr>的特性
14,<!--...--> 标签注释标签用来在HTML文档的源代码中插入注释，用来解释编写的源代码，并告诉浏览器不要显示注释。例如，
源代码
浏览器上显示
<!—这是解释源代码的注释-->
<p>上梁不正下梁歪</p>
上梁不正下梁歪
21.2.2 标签的属性
HTML的许多标签都有属性(attribute)。在SGML和HTML中，属性用来修改HTML标签之间的元素的特性。例如，标签之间的元素的对齐方式、图像的大小等等。
[例21.7] 设置字体属性
<p><font color="#ff0000" size="4">理解字符属性的概念</font></p>
这条语句表示“理解字符属性的概念”这几个字的颜色是红色，字号等于4。在浏览器上将显示如图21-11所示的样式。
图21-11 字体属性举例
[例21.8] 在HTML文档中插入对齐(align)属性：
<p align="center">
这是居中段落
</p>
align=center属性表示段落居中，在浏览器上将显示如图21-12所示的样式。align=right表示右对齐属性，align=left表示左对齐属性。
图21-12 对齐属性举例
21.3 字符样式
21.3.1 物理样式和逻辑样式
HTML为单独的词或者句子定义了两种样式：物理样式(Physical Style)和逻辑样式(Logical Styles)。物理样式说明标签之间的文句的特定外貌，而逻辑样式则按文本的意思显示文句的外貌。
表21-1和表21-2分别列出了部分物理样式和逻辑样式的标签功能。
表21-1 物理样式(Physical Style)
标签
显示样式
说明
<b>求实创新！</b>
求实创新！
黑体
<i>求实创新！</i>
求实创新！
斜体
<u>求实创新！</u>
求实创新！
下划线
<tt>求实创新！</tt>
求实创新！
打字机字体
<sup>求实创新！</sup>
求实创新！
上标
<sub>求实创新！</sub>
求实创新！
下标
<s>求实创新！</s>
求实创新！
加删除线
<strike>求实创新！</strike>
求实创新！
加删除线
表21-2 逻辑样式(Logical Style)
标签
显示样式
主要用途
<big>求实创新！</big>
求实创新！
<cite>求实创新！</cite>
求实创新!
书名、影视名等的引用，斜体
<code>求实创新！</code>
求实创新！
计算机代码，显示固定宽度字体
<dfn>求实创新！</dfn>
求实创新！
定义一个词，通常为斜体
<em>求实创新！</em>
求实创新！
强调，通常为斜体
<kbd>求实创新！</kbd>
求实创新！
键盘输入，显示无格式的固定宽度字体
<samp>求实创新！</samp>
求实创新！
显示固定宽度字体
<small>求实创新！</small>
求实创新！
显示固定宽度字体
<strong>求实创新！</strong>
求实创新！
强调，显示黑体字符
<var>变量</var>
变量
变量，显示斜体字符
从这两张表中可以看到，在某些情况下(如对于同样一个需要强调的词或者句子)，使用物理样式标签和逻辑样式标签可以获得相同的显示效果。
既然物理样式和逻辑样式可显示相同的效果，那么为什么要如此繁琐地定义这两种样式标签？这是因为在SGML语言中“内容”和“内容的表达方法”是分开的，HTML是SGML中的子集，它继承了SGML的特性。例如，SGML标记“HTML概要”为一级标题时，并没有指定一级标题中的“HTML概要”的字体大小(如四号字)和对齐方式(如居中)。这样做的好处是：如果想改变一级标题中的字体(如改为三号字体)和对齐方式(如改为左对齐)时，你所要做的仅仅是改变一级标题的定义。
物理样式和逻辑样式各有它们自己的优点。使用逻辑标签的优点是可强制文档中同一元素的类型的一致性。例如，标记某标题为<h1>比你去记住一级标题的字号、对齐方式等要容易得多，这样就不容易记错，保证了一级标题的一致性；使用物理样式的好处是浏览器会严格遵照你标记的样式显示文本，因此在不希望浏览器改变样式的情况下就应该使用物理格式。
21.3.2 字符实体字符实体(character entity)也称转义字符序列(escape sequence)。在HTML中，定义字符实体的原因有两个：第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的字符实体。当解释程序遇到这类字符串时就把它解释为真实的字符。例如，如果要在浏览器上显示“<或<”，在HTML文档必需要用字符实体“<或<”，其中“<”叫做实体名，“<”叫做实体号。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用字符实体来表示。
字符实体有三个部分：⑴与号(&)，⑵实体名称(或#号)和实体号，⑶分号(;)。表21-3列出的是特殊字符实体，其他一些字符的字符实体如表21-4所示。使用字符实体名称的好处是比较容易记，缺点是不是所有浏览器都支持最新的实体名称，而实体号则对几乎所有的浏览器都支持。此外，在输入字符实体名称时要严格遵守字母大小写的规则。
表21-3 特殊字符实体字符
字符实体号
字符实体名称
"
"
"
&
&
&
<
<
<
>
>
>
非断开空格(non-breaking space)
 
表21-4 其他字符字符
十进制
字符实体
字符
十进制
字符实体
字符
十进制
字符实体
¡
¡
á
Á
Á
á
á
á
￠
¢
¢
Â
ˆ
a
â
â
￡
£
£
Ã
Ã
ã
ã
¤
¤
¤
Ä
Ä
ä
ä
￥
¥
¥
Å
˚
å
å
|
¦
¦
Æ
Æ
æ
æ
§
§
§
Ç
Ç
ç
ç
¨
¨
¨
è
È
È
è
è
è
©
©
é
É
É
é
é
é
a
ª
ª
ê
Ê
Ê
ê
ê
ê
«
«
Ë
Ë
ë
ë
¬
¬
ì
Ì
Ì
ì
ì
ì
\x7f
­
­
í
Í
Í
í
í
í
®
®
Î
Î
î
î
ˉ
¯
¯
Ï
Ï
ï
ï
°
°
°
D
Ð
Ð
e
ð
&ieth;
±
±
±
Ñ
Ñ
ñ
ñ
2
²
²
ò
Ò
Ò
ò
ò
ò
3
³
³
ó
Ó
Ó
ó
ó
ó
′
´
´
Ô
Ô
ô
ô
μ
µ
µ
Õ
Õ
õ
õ
¶
¶
Ö
Ö
ö
ö
·
·
·
×
×
×
÷
÷
÷
¸
¸
Ø
Ø
ø
ø
1
¹
¹
ù
Ù
Ù
ù
ù
ù
o
º
º
ú
Ú
Ú
ú
ú
ú
»
»
Û
Û
û
û
¼
¼
ü
Ü
Ü
ü
ü
ü
½
½
Y
Ý
Ý
y
ý
ý
¾
¾
T
Þ
Þ
t
þ
þ
¿
¿
ß
ß
ÿ
ÿ
à
À
À
à
à
à
21.4 超链接
21.4.1 超链接的概念超文本链接(hypertext link)通常简称为超链接(hyperlink)，或者简称为链接(link)。链接是HTML的一个最强大和最有价值的功能。链接可以指向Web上的任何资源，如文档中的元素、图像、另一个文档或文档中的一部分、影视文件、声音文件等。
在HTML中，简单的链接标签是<a>，也称为锚(anchor)签。
要把一个文档包含在你的文档中，它的基本语法是：
<a href="文件名">,.,</a>
或
<a href="URL">,.,</a>
其中，href (hypertext reference)属性，用来指定被链接对象的地址。开始标签(<a……>)和结束标签(</a>)之间的文字将作为超级链接
[例21.9] 下面是一个使用HTML编辑器编辑的“HTML初学者指南”文档，它的文件名是beginner.htm，存放在C:\temp目录下。该文档包含有四个部分，每个部分用单独的一个文档来表示，分别是HTMLPrimerP1.htm，…，HTMLPrimerP4.htm，而且都存放在C:\temp目录下，“HTML初学者指南”的文档如下所示：
<html>
<head>
<title>HTML初学者指南</title>
</head>
<body>
<h2>HTML入门</h2>
<a href="HTMLPrimerP1.htm">第一部分</A> |
<a href="HTMLPrimerP2.htm">第二部分</A> |
<a href="HTMLPrimerP3.htm">第三部分</A> |
<a href="HTMLPrimerP4.htm">第四部分</A>
</body>
</html>
其中，“<a href="HTMLPrimerP1.htm">第一部分</a>”可使“第一部分”链接到相同目录下的文档“HTMLPrimerP1.htm”。其余类推。
在Web浏览器上显示文档时，通常用不同的颜色来区分有链接关系和没有链接关系的元素。在Netscape公司和其他一些公司开发的浏览器中，有链接关系的元素通常用蓝色和下划线表示。这个文档在浏览器上将显示如图21-13所示的样式。
图21-13 超链接在页面上的样式
21.4.2 文档的相对路径与绝对路径相对路径是指相对于当前的工作路径，而绝对路径是指一个完整的路径。如果一个文档在同一路径下，HTML可以使用相对路径或者绝对路径来链接该文档。否则只能使用绝对路径。
[例21.10] 在例21.9中，如果文档“HTMLPrimerP1.htm”存放在目录C:\temp\html_sub下，使用相对路径时可写成：
<A href=" html_sub/HTMLPrimerP1.htm">第一部分</A>
使用绝对路径时写成：
<A href=" C:/temp/html_sub/HTMLPrimerP1.htm">第一部分</A>
需要指出的是：①使用相对路径链接比使用绝对路径链接的运行效率会更高，移动一组文档时也更容易。②UNIX系统是区分大小写的，而DOS和Mac OS系统是不区分大小写的。因此在编写HTML文档时，对文档的大小写要严格区分，否则UNIX系统上的浏览器就找不到你写的文档。③路径名使用标准UNIX系统的句法。
21.4.3 使用URL
URL是识别因特网上任何一个文件地址或资源地址的标准表示法，称为统一资源地址。Web使用URL指定在其他服务机上文档的位置。一个信息资源在网络上的URL地址通常由三个部分组成：
请求服务的类型，它用来说明使用什么网络协议来存取资源，如Web服务程序使用HTTP，文件传送使用FTP(File Transfer Protocol)等。
网络上的主机名。
服务机上的文件名。
例如，http://www.microsoft.com/industry/justice/expttest.htm：第一部分，冒号(:)之前的“http”表示使用的网络协议是HTTP；第二部分，双钭线 (//) 之後的“www.microsoft.com”表示存放信息的主机名，这是微软公司的一个Web服务机；第三部分，第一个钭线后面的“industry/justice/expttest.htm”表示文件所在服务机上的目录和文件名。这个地址告诉Web浏览器“使用HTTP协议，从名字为www.microsoft.com的服务机里、在industry/justice/目录下取回名为expttest.htm的文件”。
[例21.11] 在例21.10中，如果文档“HTMLPrimerP1.htm,不在同一台机器上，而是在URL＝http://nn.sce.tsinghua.edu.cn/kj/Lec01/下，就要使用绝对路径并写成：
<a href="http://nn.sce.tsinghua.edu.cn/kj/Lec01/HTMLPrimerP1.htm">第一部分</a>
21.4.4 文档内部之间的链接有些文档比较长，在文档内部之间往往需要建立相互之间的链接。在这种情况下首先要对被链接的元素进行命名，也就是给它们进行编号，然后建立它们之间的链接关系。元素的命名或者编号要使得你的文档很清楚，便于阅读和修改。
现仍以“HTML初学者指南”文档为例。假设该文档分成4个部分，而且这4个部分都在同一个文档中，要求在浏览器上显示如图21-14所示的样式：
图21-14 文档件链接设计举例
当你点击“第一部分”时，浏览器就显示“第一部分 HTML简介”的内容，当你点击“返回到开头”时就返回到“HTML入门”。其他几个链接的设计也是如此。实现显示这个页面的HTML文档的源文件如下所示：
<html>
<head>
<title>html初学者指南</title>
</head>
<body>
<h2 align="center"><a name="HTML入门"></a>HTML入门</h2><center>
<a href="#第一部分 HTML简介">第一部分</a> |
<a href="#第二部分 HTML标签和属性">第二部分</a> |
<a href="#第三部分 字符样式">第三部分</a>|
<a href="#第四部分 超链接">第四部分</a></center>
<center>…</center><br>
<h3 align="center"><a name="第一部分 HTML简介">第一部分 HTML
简介</a></h3>
<center>…</center>
<center><a href="#HTML入门">返回到开头</a></center>
<h3 align="center"><a name="第二部分 HTML标签和属性"></A>第二部分
HTML标签和属性</h3>
<center>…</center>
<center><a href="#HTML入门">返回到开头</a></center>
<h3 align="center"><a name="第三部分 字符样式"></A>第三部分 字符样式
</h3>
<center>…</center>
<center><a href="#HTML入门">返回到开头</a></center>
<h3 align="center"><a name="第四部分 超链接"></A>第四部分 超链接</h3>
<center>…</center>
<center><a href="#HTML入门">返回到开头</a></center>
</body>
</html>
21.4.5 链接电子邮件程序在Web页面上链接电子邮件程序需要使用“mailto”。使用mailto可以创建预先填入有电子邮件地址的表单，其中的电子邮件地址可以是作者的，也可以是第三者的，这样可鼓励读者给作者反馈信息，也便于读者与第三方联系。mailto的语法结构如下：
<a href="mailto,userinfo@host">Name</a>
其中，“userinfo”是电子邮件地址的用户名，“host”是电子邮件服务机的主机名，“Name”应该是让人能容易理解的名称。
[例21.12] HTML文档中可插入如下一句：
<p>如有什么评论，把电子邮件发送给作者单位：
<a href="mailto:linfz@mail.tsinghua.edu.cn">清华大学计算机科学与技术系</a></p>
这个文档在浏览器上将显示如图21-15所示的样式。
图21-15 链接电子邮件程序举例当读者用鼠标器点击它时就会调出电子邮件编辑器，以供你编写电子邮件。
21.4.6 链接内联图像内联图像(inline image)是指与Web网页中的文本一起下载和显示的图像，而不需要在你选择之后才下载和显示，在浏览器上表现为文本和图像显示在同一网页上，这种图像也称为内嵌图像或者叫内插图像。
目前，Web网页上的图像一般都使用GIF和JPG格式，它们是Web页面上使用最普遍的图像文件存储格式。使用GIF格式存储的图像是数据无损压缩的图像，使用JPG格式的图像是数据有损压缩的图像。大多数Web浏览器都不需要调用其他的图像处理程序就能直接显示用这两种格式存储的图像。其他图像格式也逐步集成到Web浏览器，如流式网络图像格式(Portable Network Graphic，PNG)，这是一种可取代GIF格式的数据无损压缩图像存储格式。
在HTML文档中插入图像文件的格式如下：
<img src=ImageName> … </img>
其中，图像文件名“ImageName”是图像文件的URL地址；“<img src＝”与,<a href=”的功能相同。
[例21.13] 现有两幅宽度＝166象素、高度＝115象素的图像要插入到“HTML初学者指南”文档中，其中一幅在左边，另一幅在右边，图像边框的宽度＝2象素。如果使用不能显示图像的浏览器或者不想看图像，可把浏览器中的图像显示功能阻塞掉。其方法是分别使用“Test GIF Image”和“Test JPEG Image”文字替代“test.gif”和“test.jpg”图像。根据上述要求，HTML文档的源文件可写成：
<html>
<head>
<title>HTML初学者指南</title>
</head>
<body>
<img src="image0.gif" width="126" height="115" align="left" border="2" alt="Test
GIF Image"><img src="image1.gif" width="126" height="115" align="right"
border="2" alt="Test JPEG Image">
<h3 align="center"><a name="第一部分 HTML简介">第一部分 HTML简介
/a></h3>
<center><p>…</p></center>
<center><p><a href="21_lecture.htm">返回到开头</a></p></center>
</body>
</html>
这个文档在浏览器上将显示如图21-16所示的样式。
图21-16 链接内联图像举例要使图像显示在中央，则要用中间对齐标签<center>…</center>，可使用下面的语句：
<p><center><img src="image0.gif" width="126" height="115"
border="2" alt="Test GIF Image Align"></center></p>
21.4.7 用图像作超链接像文字一样，图像也可以作为超链接。
[例21.14] 假设beginner.htm，test.gif和下面的HTML文档在同一文件夹(即同一个路径)下，可使用下面的语句链接文档：
<a href="HTML_beginner.htm"><img src="image0.gif" alt="Hotlist"></a>
<a href="JavaScript_beginner.htm"><img src="image1.gif" alt="Hotlist"></a>
这个文档在浏览器上将显示如图21-17所示的样式。
图21-17 用图像作超链接举例图像有一个蓝色的边框，表示点击它可调出“beginner.htm”HTML文档。
21.4.8 用图像作网页的背景在浏览器上经常可看到各种背景图像，使用图像做网页背景的语法结构如下：
<body background="filename.gif">
做背景的图像不需要很大，浏览器会利用它的平铺(tiling)功能布满整个网页。
[例21.15] 设计网页的背景为黑色，文字白色，带链接，还未用鼠标器点击过的元素为浅蓝色，可用下面的HTML源代码实现：
<body bgcolor="#000000" text="#ffffff" link="#ccffff">
其中的颜色值用RGB (red,green,blue)彩色模型，每种颜色分量用1字节表示。
21.4.9 链接外联图像在HTML文档中，如果内联图像文件太大，在浏览主文档时就需要很长的时间来等待图像下载。为了改善这种状况，一种切实可行的方法是把大的图像当作外联(external image)图像来处理。在编写HTML文档时，用文字或者小的内联图标来代表大图像，而把大图像文件当作一个单独的文档，然后把文字或图标与大图像文件链接在一起。当在浏览器中阅读网页时，读者可用鼠标器激活这个链接，然后下载并显示在另一个窗口上。用这种方式链接的图像称为外联图像。
链接外联图像可使用下面的语句：
<a href="图像文件名">图像名称</a>
[例21.16] 假设Dmt_Test.htm文档和图像文件Tu01_MyImage.jpg在同一文件夹下。使用外联图像时可在Dmt_Test.htm中加入如下语句：
<center><a href="Tu01_MyImage.jpg">图01 我的照片</a></center>
或者
<center><a href="Tu01_MyImage.jpg">
<img src="Tu01_icon.gif" alt="图01 我的照片"></a></center>
这个文档在浏览器上将显示如图21-18(a)所示的样式，此时并没有显示图像。当用鼠标器点击图01 我的照片时，就把图像显示在新的窗口中，如图图21-18(b)所示。
(a) 外联图像链接显示 (b) 外联的实际图像图21-18 链接外联图像举例
21.4.10 在文档中链接和嵌入声音文件
1,把声音文件链接到HTML文档在HTML文档中，可以使用与外联图像类似的语句把声音文件链接到文档中，差别只是文件扩展名不同。
[例21.17] 假设Dmt_Test.htm文档和声音文件Sd01_MySound.wav在同一文件夹下。使用外联声音时可在Dmt_Test.htm中加入如下语句：
<a href="Sd01_ MySound.wav">老黄牛声音</a>
在浏览器上将显示如图21-19所示的样式。
图21-19 把声音文件链接到HTML文档举例当读者用鼠标器点击老黄牛声音”时，浏览器将调出一个播放器进行播放。
2,把声音文件嵌入到HTML文档如果想把声音文件嵌入到HTML文档中，可使用下面的语句：
<embed src="Sd01_ MySound.wav" ></embed><br>老黄牛声音</font><br>
在微软公司的Internet Explorer 4.X以上版本的浏览器上将显示一个播放控制器，按播放按钮就可播放。图21-20所示的播放器是微软公司的IE 6.0弹出的播放器。
图21-20 把声音文件嵌入到HTML文档举例如果你在Netscape公司的Communicator 4.04或更高版本的浏览器上播放时，显示的播放控制面板将取决于你所安装的播放声音的插入软件。
3,在文档中嵌入背景声音在HTML文档中可嵌入背景音乐，当打开HTML文档时就开始播放。嵌入背景音乐的基本语法结构如下：
<bgsound src="URL" loop=100>
其中，URL表示背景音乐的文件名，loop表示循环播放的次数。
21.4.11 在文档中链接和嵌入影视文件
1,把影视文件链接到HTML文档使用与外联图像类似的语句可把影视文件链接到HTML文档，差别只是文件扩展名不同。
[例21.18] 假设Dmt_Test.htm文档和影视文件chanticleer在同一文件夹下。使用外联影视文件时可在Dmt_Test.htm中加入如下语句：
<a href="aris.mpg">宇宙飞船的高度和速率指示系统
(altitude and rate indicating system，ARIS) </a>
如果要显示图标，然后点击图标后再播放影视，可使用：
<p><a href="aris.mpg"><img src="Tu01_icon.jpg" alt="影视片段：
宇宙飞船的高度和速率指示系统"></a></p>
<p><a href="aris.mpg">宇宙飞船的高度和速率指示系统</a> </p>
在微软公司的Internet Explorer 4.x版本以上的浏览器上将显示如图21-21(b)所示的样式：
或者
(a) (b)
图21-21 把影视文件链接到HTML文档当你点击“宇宙飞船的高度和速率指示系统(altitude and rate indicating system，ARIS)”时，在Windows 9x/2000/CE/NT/环境下，IE浏览器将调出一个多媒体播放器进行播放。图21-22是使用Windows 2000环境下的播放样式:
图21-22 链接的影视文件举例
2,在文档中嵌入影视与链接外联影视文件不同，对嵌入有影视文件的HTML文档，浏览器在从网络上下载该文档时就把影视文件一起下载下来，如果影视文件很大，则下载的时间就会很长。因此这种嵌入方式常用于影视文件不大的场合。嵌入这种影视文件的基本语法结构是：
<embed src=“URL”>
[例21.19] 在C:\temp\文件夹下有一个“HTML初学者指南.htm”文档和3个影视文件。在test.htm文档中嵌入这个影视文件可用下面几种语句:
① <img dynsrc="sky.avi" height="120" width="160" >
②<embed src="basket.avi" height="120" width="160"> </embed>
③ <img dynsrc="Kennedy.avi " height="120" width="160" start=mouseover>
对于语句①：当打开HTML文档时，显示不带播放控制按钮的图像，并马上开始播放，直到播放完毕。
对于语句②：当打开HTML文档时，就显示带有播放控制按钮的图像并开始播放。如果还想再观看一遍，可按下播放按钮。
对于语句③：当打开HTML文档时显示不带播放控制按钮的图像，并不开始播放，而是当把鼠标器放在图像上时才开始播放。
在Internet Explorer浏览器上将显示如图21-23所示的样式。
图21-23 文档中嵌入影视方法
21.5 表格标签和属性在HTML文档中，经常需要设计表格。一张表格有许多表素(table element)组成，例如表的名称(caption)、表行(table row),列表标题(table header)、列表数据单元(table data cell)等。HTML为表格规定了许多表素标签和属性，它们分别示于表21-5和表21-6。
表21-5 表素标签表 素
说 明
<table>...</table>
定义表格。若已设置边框(border)属性，则浏览器可显示边框
<caption>…</caption>
定义表的名称(caption)
<tr>,.,</tr>
定义表的行(table row)，可定义对齐属性
<th>,.,</th>
定义列表标题(table header)，通常为黑体字，中央对齐
<td>…</td>
定义列表数据(table data)单元
表21-6 表素属性属 性
说 明
align (left,center,right)
表单元的水平对齐方式
valign (top,middle,bottom)
表单元的垂直对齐方式
colspan=n
表单元跨越的列数
rowspan=n
表单元跨越的行数
nowrap
表单元中的文字无自动换行
在设计HTML的表格时应注意：
① <table> … </table>必须要包含整个表的定义。
② 在表格中的第一项是表的名称，是可有可无的。
③ <tr> … </tr>标签定义的行的数目没有限制。
④ 在一行中，使用<td> … </td>或<th> … </th>标签定义的数据单元数目没有限制。
⑤ 表的每一个单元的属性可单独设置，因此表格的形式可以多种多样。
⑥ 数据单元中的内容可以是文字或图标，也可以是它们两者，而且还可以设置超级链接。
一般的表格如下所示：
<html>
<head>
<title>html初学者指南</title>
</head>
<body>
<table border="2">
<!-- 表格定义开始 -->
<caption> 表号：表的名称</caption>
<!-- 标题说明-->
<tr>
<!-- 列表标题定义开始 -->
<th> 第一列标题</th>
<th>…</th>
<th> 最后一列标题 </th>
<!-- 列表标题定义结束 -->
</tr>
<tr>
<!--第一行列表数据开始 -->
<td> 第一行第一个单元的数据</td>
<th>…</th>
<td> 第一行最后一个单元的数据</td>
<!-- 第一行列表数据结束 -->
</tr>
<tr>
<!--第n行列表数据开始 -->
<td align="center">…</td>
<td align="center">…</td>
<td align="center">…</td>
<!--第n行列表数据结束 -->
</tr>
<tr>
<!-- 最后一行列表数据开始-->
<td> 最后一行第一个单元的数据 </td>
<th>…</th>
<td> 最后一行最后一个单元的数据</td>
<!-- 最后一行列表数据结束 -->
</tr>
<!-- 表格定义结束 -->
</table>
</body>
</html>
在浏览器上将显示如图21-24所示的样式。
图21-24 表格标签和属性演示页面练习与思考题谁在制定Web标准?
⑴ 网景公司(Netscape)
⑵ 万维网协会(The World Wide Web Consortium)
⑶ 微软公司哪一个HTML标签用于插入断行?
⑴ <lb>
⑵ <break>
⑶ <br>
哪一个HTML标签用于添加背景颜色?
⑴ <background>yellow</background>
⑵ <body bgcolor="yellow">
⑶ <body color="yellow">
哪一个HTML标签用于粗体字?
⑴ <bold>
⑵ <bb>
⑶ <b>
⑷ <bld>
哪一个HTML标签用于链接“第29届奥林匹克运动会组织委员会”?
⑴ <a>http://www.beijing-2008.org，第29届奥林匹克运动会组织委员会</a>
⑵ <a url="http://www.beijing-2008.org">第29届奥林匹克运动会组织委员会</a>
⑶ <a href="http://www.beijing-2008.org">第29届奥林匹克运动会组织委员会</a>
⑷ <a name="http://www.beijing-2008.org">第29届奥林匹克运动会组织委员会</a>
哪一个代码用于链接电子邮件程序?
⑴ <mail href="xxx@yyy">
⑵ <a href="xxx@yyy">
⑶ <a href="mailto:xxx@yyy">
⑷ <mail>xxx@yyy</mail>
如何把被链接的文档显示在新的浏览器窗口中?
⑴ <a href="url" new>
⑵ <a href="url" target="new">
⑶ <a href="url" target="_blank">
哪一个标签用于插入图像?
⑴ <image src="image.gif">
⑵ <img href="image.gif>
⑶ <img src="image.gif">
⑷ <img>image.gif</img>
哪一个标签用于插入背景图像?
⑴ <img src="background.gif" background>
⑵ <background img="background.gif">
⑶ <body background="background.gif">
为什么要定义字体的逻辑样式和物理样式？
指出“<h1 align="center">hmtl编辑器</h1>”中哪些是元素、标签和属性。
一个URL为http://www.tsinghua.edu.cn/docs/cindex.htm，说出各部分的含义。
电子邮件的地址为：liudf@public.bta.net.cn和bookshelf@mcp.com，分别说出各部分的含义。
把图像/影视文件链接到和嵌入到HTML文档中，在语法结构和工作方式上都有什么差别？分别说出各自的优缺点。
把声音文件链接到和嵌入到HTML文档中，在语法结构和工作方式上都有什么差别？分别说出各自的优缺点。
列出你和你的同学所知道的HTML编辑器，并讨论它们的性能。
参考答案：
21.1.⑵，21.2.⑶，21.3.⑵，21.4.⑶，21.5.⑶，21.6.⑶，21.7.⑶，21.8.⑶，21.9.⑶
参考文献和站点
W3C Recommendation 24 December 1999，HTML 4.01 Specification，http://www.w3.org/TR/html401/。
W3C Recommendation 6 October 2000，Extensible Markup Language (XML) 1.0 (Second Edition)，http://www.w3.org/TR/REC-xml。
W3C Recommendation 12-May-1998，Cascading Style Sheets,level 2，CSS2 Specification，http://www.w3.org/TR/REC-CSS2/。
W3C Recommendation 26 January 2000，XHTML? 1.0,The Extensible HyperText Markup Language，A Reformulation of HTML 4 in XML 1.0，http://www.w3.org/TR/xhtml1/。
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html。
http://developer.netscape.com/docs/manuals/htmlguid/index.htm。
Technical Manuals and Notes，http://developer.netscape.com/docs/manuals/index.html。
http://www.mcfedries.com/books/cightml/。
HTML 4 Document Type Definition,http://www.w3.org/TR/html4/sgml/dtd.html。
