第18章 超文本标记链接语言(HTML)
HTML是组织多媒体文档的重要语言，它不仅用来编写Web网页，而且也越来越多地使用HTML来制作光盘上的多媒体节目。HTML可用来编排文档、创建列表、建立链接、插入声音和影视片断。目前市场上已有很多很好的HTML编辑器可以用来编写多媒体文档。虽然编写多媒体文档不一定要直接使用HTML语言，但为了更好地理解和使用HTML编辑器，添加一些你遇到的编辑器所不支持的功能，学习一些HTML的基础知识是相当必要的。
18.1 HTML文档
18.1.1 HTML简介
万维网(Web)是一个信息资源网络，它之所以能够使这些信息资源为广大用户所利用，主要依靠下面的三条基本技术：
1．指定网上信息资源地址的统一命名方法：URL(Uniform Resource Locator)。
2．存取资源的协议：超文本传送协议HTTP(Hypertext Transfer Protocol)。
3．在资源之间很容易浏览的超文本链接技术：源于HyperText的HyperLink。
为了出版可在全球发行的信息，人们需要一种所有计算机都能理解的出版语言，现在Web使用的出版语言就是HTML(HyperText Markup Language)语言，称为超文本链接标记语言。HTML可用于：
1．出版联网文档，这种文档可包含标题、文字、表格、列表、图象以及声音和影视文件等。
2．通过超文本链接可以检索和阅读联网信息。
3．设计交易单(FORM/form)。这是一种用来从读者处收集信息的Web文档，可以与远程服务单位作交易，例如，查找信息预约旅馆的房间、定购产品等。多数交易单至少有一个可供输入文本数据(例如名字或者搜索关键字)的文本域。很多较为精致复杂的表单还包括有用于切换选项的复选框、用于从几个选项中选择其一的单选按钮和执行任务(例如提交表单)的按钮。
目前使用比较普遍的HTML版本是HTML 4,0。这个版本可支持不同种类的语言，可为信息检索工具提供更有效的检索、更高的网页质量和更好的文语转换(text-to-speech，TTS)质量等。现在正在标准化的一种语言是可扩张标记语言(Extensible Markup Language，XML)。它是一种比超文本标记语言(Hypertext Markup Language，HTML)更加灵活的一种Web文档格式。HTML使用预先定义的标签(tag)来描述网页中的文素(elements)，而XML语言则允许网页开发人员定义标签。XML是通用标记语言(Standard for General Markup Language，SGML)文档格式的一个子集，HTML是SGML的一种文档类型。
18.1.2 文档元素和标签的概念
一个文档通常由文档头(head)、文档名称(title)、表格(table)、段落(paragraph)和列表(list)等成分构成。为了表达方便，我们把这些成分称为文档元素(element)，简称为文素，它们是文本文档的基本构件，并且使用超文本标记语言(Hypertext Markup Language，HTML)规定的标签(tag)来标识这些文素。
HTML标签由3部分组成：左尖括号“<”，“标签名称”和右尖括号“>”。标签通常是成对出现的，左尖括号表示开始的“开始标签(start tag)”，右尖括号表示结束的“结束标签(end tag)”标签。例如，<H1>与</H1>分别表示一级标题的开始标签和结束标签，“H1”是一级标签的名称。除了在结束标签名称前面加一个斜杠符号“/”之外，开始标签名称和结束标签名称都是相同的。HTML中的部分标签将在18.2节解释。
某些文素还可以包含“属性(attribute)”。属性是指背景颜色、字体属性(大小、颜色、正体、斜体等)、对齐方式等等，它是包含在开始标签中的附加信息。例如，<P ALIGN=CENTER>表示这段文字是居中对齐的。你同样也可以指定图象的对齐属性(如图象在顶部、在底部或者在中间)。
注意，HTML标签名称中的字母不分大小写。例如，<title>与<TITLE> 或者 <TiTlE>都是等效的。此外，Web浏览器不一定对所有的HTML标签都支持。如果一个浏览器遇到不认识的标签，它就不予理睬，但在这一对不认识的标签之间的文本仍然会显示在计算机的屏幕上。
18.1.3 HTML文档的结构
HTML文档是一种没有格式的文档，也称为ASCII文件。因此，HTML文档可以使用任何一种文本编辑器来编写。例如，Windows中的记事本(Notepad)、写字板(Wordpad)，当然也可以使用字处理软件，例如，微软公司的Word 7.0等。
每个HTML文档都是由标签<HTML>开始，而以标签</HTML>结束。每个HTML文档分成两个部分组成：文档头(head)和正文(body)，并分别用<HEAD> … </HEAD>和<BODY> … </BODY>来作标记。文档头标签<HEAD> … </HEAD>之间所包含的是文档的名称(title)，例如“章乃器轶事”。正文标签<BODY> … </BODY>之间含有用各种HTML标签作标记的段落、列表、和其他文素组成的实际文档。一个简单的HTML文档如下所示：
<HTML>
<HEAD>
<TITLE>章乃器轶事</TITLE>
</HEAD>
<BODY>
<H1>章乃器妙语揭贪官</H1>
<P> 章乃器是我国杰出的爱国人士。1938年3月，应当时安徽省政府
主席李宗仁之邀，出任安徽省政府财政厅厅长。</P>
<P>针对当时众多的贪官污吏乘国难之机贪污腐化、中饱私囊等劣行，章乃器上任伊始就提出了“铲除贪污”等四项重大措施。… </P>
</BODY>
</HTML>
如果用word 7.0编辑HTML文档，可直接输入内容而不必输入标签，并把它存储为"zhnaqi.html"或者"zhnaqi.htm"文件，然后使用浏览器浏览，你就可在浏览器的窗口中看到如图18-01所示的网页。
图18-01 在Web浏览器上显示的HTML文档
18.2 HTML标签和属性
HTML标签和属性很多，为了了解标签和属性的含义，这里仅选择了少数标签和属性作一些解释。若要了解完整的标签和属性，请参看[5]。有些HTML编辑器的联机“帮助”文件中也可找到很完整的说明(例如Sausage Software公司的HotDog Professional )。
18.2.1 基本标签
<HTML>
图18-02 标签<P>的特性
<UL>、<OL>和<LI>
- <UL> … </UL>表示标签之间的列表项目是无编号列表(Unnumbered List)。
- <OL> … </OL>表示标签之间的列表项目是有编号列表(Ordered List)。
- <LI>：表示标签后面的内容是具体的列表项目(List Item)。
[例18.3]
图18-03 标签<UL>的特性
[例18.4]
图18-04 标签<OL>的特性
[例18.5]
图18-05 嵌套列表
<DL>、<DT>和<DD>
- <DL> … </DL>标签：表示定义列表(Definition Lists)
- <DT>标签：表示后面的项是定义术语(Definition Term)
- <DD>标签：表示后面的项是定义释义(Definition Definition)
[例18.6]
图18-06 标签<DL>、<DT>和<DD>的特性
在使用Netscape公司的Communicator时，如果文本显示不能自动换行，可编辑浏览器试试能否解决问题，方法是：打开Preferences → Appearance → Font → For font Encoding → Simplified Chinese。
<PRE>
预格式文本(Preformatted Text)标签：用于产生固定宽度的字符。在<PRE> … </PRE> 之间的空格、新行、空行和表格与HTML源文档中的一致。例如，
<PRE>
HTML 超文本标记语言
Hypertext Markup Language的缩写。
SMPTE time code SMPTE时间码
记录在录像带上用来标识每一帧电视信号的一种信号标准，它用于电视编辑。
SMPTE 运动图像和电视工程师协会
Society of Motion Picture and Television Engineers的缩写。
</PRE>
在浏览器上将显示如图18-07所示的样式。
图18-07 标签<PRE>的特性
<BLOCKQUOTE>
<BR>
在浏览器上将显示如图18-08所示的样式。
图18-08 标签<BR>的特性
<FORM>
图18-09 标签<FROM>的特性
<HR>
图18-10 标签<HR>的特性
18.2.2 属性
HTML的许多标签都有属性(attribute)。在标准通用标记语言SGML(Standard Generalized Markup Language)和HTML语言中，属性是指用来修改HTML标签之间的文素特性。例如，标签之间的文素的对齐方式、图象的大小等等。
[例18.7] 设置字体属性
<P><FONT COLOR="#FF0000" SIZE="4">理解字符属性的概念</FONT></P>
这条语句表示“理解字符属性的概念”这几个字的颜色是红色，字号等于4。在浏览器上将显示如图18-11所示的样式。
图18-11 字体属性举例
[例18.8]
图18-12 对齐属性举例
18.3 字符样式
18.3.1 物理样式和逻辑样式
HTML为单独的词或者句子定义了两种样式：物理样式(Physical Style)和逻辑样式(Logical Styles)。物理样式说明标签之间的文句的特定外貌，而逻辑样式则按文本的意思显示文句的外貌。
表18-1和表18-2分别列出了部分物理样式和逻辑样式的标签功能。
表18-1物理样式(Physical Style)
| 标签 | 显示样式 | 说明 |
| <B>求实创新！</B> | 求实创新！ | 黑体 |
| <I>求实创新！</I> | 求实创新！ | 斜体 |
| <U>求实创新！</U> | 求实创新！ | 下划线 |
| <TT>求实创新！</TT> | 求实创新！ | 打字机字体 |
| <SUP>求实创新！</SUP> | 求实创新！ | 上标 |
| <SUB>求实创新！</SUB> | 求实创新！ | 下标 |
| <S>求实创新！</S> |
求实创新！ | 加删除线 |
| <STRIKE>求实创新！</STRIKE> |
求实创新！ | 加删除线 |
表18-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标记“HTML概要”为一级标题时，并没有指定一级标题中的“HTML概要”的字体大小(如四号字)和对齐方式(如居中)。这样做的好处是：如果想改变一级标题中的字体(如改为三号字体)和对齐方式(如改为左对齐)时，你所要做的仅仅是改变浏览器中的一级标题的定义。
物理样式和逻辑样式各有它们自己的优点。使用逻辑标签的优点是可强制文档中同一文素的类型的一致性。例如，标记某标题为<H1>比你去记住一级标题的字号、对齐方式等等要容易得多，这样就不容易记错，保证了一级标题的一致性；使用物理样式的好处是浏览器会严格遵照你标记的样式显示文本，因此在不希望浏览器改变样式的情况下就应该使用物理格式。
18.3.2 转义字符串
转义字符串(Escape Sequence)也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。表18-3是其中的几个转义字符串。
表18-3 特殊字符
| 字符 | 十进制 | 转义字符 |
| " | " | " |
| & | & | & |
| < | < | < |
| > | > | > |
| 不断开空格(non-breaking space) |   | |
表18-4 其他字符
| 字符 | 十进制 | 转义字符 | 字符 | 十进制 | 转义字符 | 字符 | 十进制 | 转义字符 |
| ¡ | ¡ | ¡ | Á | Á | Á | á | á | á |
| ￠ | ¢ | ¢ | Â | Â | ˆ | â | â | â |
| ￡ | £ | £ | Ã | Ã | Ã | ã | ã | ã |
| ¤ | ¤ | ¤ | Ä | Ä | Ä | ä | ä | ä |
| ￥ | ¥ | ¥ | Å | Å | ˚ | å | å | å |
| | | ¦ | ¦ | Æ | Æ | Æ | æ | æ | æ |
| § | § | § | Ç | Ç | Ç | ç | ç | ç |
| ¨ | ¨ | ¨ | È | È | È | è | è | è |
| © | © | © | É | É | É | é | é | é |
| a | ª | ª | Ê | Ê | Ê | ê | ê | ê |
| « | « | « | Ë | Ë | Ë | ë | ë | ë |
| ¬ | ¬ | ¬ | Ì | Ì | Ì | ì | ì | ì |
| | ­ | ­ | Í | Í | Í | í | í | í |
| ® | ® | ® | Î | Î | Î | î | î | î |
| ˉ | ¯ | ¯ | Ï | Ï | Ï | ï | ï | ï |
| ° | ° | ° | Ð | Ð | Ð | ð | ð | &ieth; |
| ± | ± | ± | Ñ | Ñ | Ñ | ñ | ñ | ñ |
| 2 | ² | ² | Ò | Ò | Ò | ò | ò | ò |
| 3 | ³ | ³ | Ó | Ó | Ó | ó | ó | ó |
| ′ | ´ | ´ | Ô | Ô | Ô | ô | ô | ô |
| μ | µ | µ | Õ | Õ | Õ | õ | õ | õ |
| ¶ | ¶ | ¶ | Ö | Ö | Ö | ö | ö | ö |
| · | · | · | × | × | × | ÷ | ÷ | ÷ |
| ¸ | ¸ | ¸ | Ø | Ø | Ø | ø | ø | ø |
| 1 | ¹ | ¹ | Ù | Ù | Ù | ù | ù | ù |
| o | º | º | Ú | Ú | Ú | ú | ú | ú |
| » | » | » | Û | Û | Û | û | û | û |
| ¼ | ¼ | ¼ | Ü | Ü | Ü | ü | ü | ü |
| ½ | ½ | ½ | Ý | Ý | Ý | ý | ý | ý |
| ¾ | ¾ | ¾ | Þ | Þ | Þ | þ | þ | þ |
| ¿ | ¿ | ¿ | ß | ß | ß | ÿ | ÿ | ÿ |
| À | À | À | à | à | à |
18.4 超链接
18.4.1 超链接的概念
超文本链接(hypertext link)通常简称为超链接(hyperlink)，或者简称为链接(link)。链接是HTML的一个最强大和最有价值的功能。链接是指文档中的文素或者图象与另一个文档、文档的一部分或者一幅图象链接在一起。在HTML中，简单的链接标签是<A>，也称为锚(anchor)签。
要把一个文档包含在你的文档中，它的基本语法是：
<A HREF="文件名"> ... </A>
或 <A HREF="URL"> ... </A>
其中HREF是hypertext reference的缩略词
[例18.9] 下面是一个使用HTML编辑器编辑的《HTML初学者指南》文档，它的文件名是beginner.html，存放在C:/temp目录下。该文档包含有四个部分，每个部分用单独的一个文档来表示，分别是HTMLPrimerP1.html，…，HTMLPrimerP4.html，而且都存放在C:/temp目录下，《HTML初学者指南》的文档如下所示：
<HTML>
<HEAD>
<TITLE>HTML初学者指南</TITLE>
</HEAD>
<BODY>
<H2>HTML入门</H2>
<A href="HTMLPrimerP1.html">第一部分</A>
<A href="HTMLPrimerP2.html">第二部分</A>
<A href="HTMLPrimerP3.html">第三部分</A>
<A href="HTMLPrimerP4.html">第四部分</A>
</BODY>
</HTML>
其中，“<A href="HTMLPrimerP1.html">第一部分</A>”这一项可使“第一部分”链接到相同目录下的文档“HTMLPrimerP1.html”。其余类推。
在Web浏览器上显示文档时，通常用不同的颜色来区分有链接关系和没有链接关系的文素。在Netscape公司和其他一些公司开发的浏览器中，有链接关系的文素通常用蓝色和下划线表示。这个文档在浏览器上将显示如图18-13所示的样式。
图18-13 超链接在页面上的样式
18.4.2 文档的相对路径与绝对路径
相对路径是指相对于当前的工作路径，而绝对路径是指一个完整的路径。如果一个文档在同一路径下，HTML可以使用相对路径或者绝对路径来链接该文档。否则只能使用绝对路径。
[例18.10] 在例18.9中，如果文档“HTMLPrimerP1.html”存放在目录C:/temp/html_sub下，使用相对路径时可写成：
<A href=" html_sub/HTMLPrimerP1.html">第一部分</A>
使用绝对路径时写成：
<A href=" C:/temp/html_sub/HTMLPrimerP1.html">第一部分</A>
需要指出的是：①使用相对路径链接比使用绝对路径链接的运行效率会更高，移动一组文档时也更容易。②UNIX系统是区分大小写的，而DOS和Mac OS系统是不区分大小写的。因此在编写HTML文档时，对文档的大小写要严格区分，否则UNIX系统上的浏览器就找不到你写的文档。③路径名使用标准UNIX系统的句法。
18.4.3 使用URL
URL(Uniform Resource Locator)是识别因特网(Internet)上任何一个文件地址或资源地址的标准表示法，称为统一资源地址。万维网(WWW)使用URL来指定在其他服务器上文档的位置。一个信息资源在网络上的URL地址通常由三个部分组成：
- 请求服务的类型，它用来说明使用什么网络协议来存取资源，如, WWW服务程序使用HTTP(HyperText Transfer Protocol)协议，文件传送使用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的文件”。
[例18.11] 在例18.10中，如果文档“HTMLPrimerP1.html ”不在同一台机器上，而是在URL＝http://nn.sce.tsinghua.edu.cn/kj/Lec01/下，就要使用绝对路径并写成：
<A href="http://nn.sce.tsinghua.edu.cn/kj/Lec01/HTMLPrimerP1.html">第一部分</A>
18.4.4 文档内部之间的链接
有些文档比较长，在文档内部之间往往需要建立相互链接。在这种情况下首先要对被链接的文素进行命名，也就是给它们进行编号，然后建立它们之间的链接关系。文素的命名或者编号要使得你的文档很清楚，便于阅读和修改。
现仍以《HTML初学者指南》文档为例。假设该文档分成4个部分，而且这4个部分都在同一个文档中，要求在浏览器上显示如图18-14所示的样式：
图18-14 文档件链接设计举例
当你点击“第一部分”时，浏览器就显示“第一部分 HTML简介”的内容，当你点击“返回到开头”时就返回到“HTML入门”。其他几个链接的设计也是如此。实现显示这个页面的HTML文档的源文件如下所示：
<HTML>
<HEAD>
<TITLE>HTML初学者指南</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER"><A NAME="HTML入门"></A>HTML入门</H2>
<CENTER>
<A><A HREF="#第一部分 HTML简介">第一部分</A>
<A><A HREF="#第二部分 HTML标签和属性">第二部分</A>
<A><A HREF="#第三部分 字符样式">第三部分</A>
<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>
18.4.5 链接电子邮件程序
在Web页面上链接电子邮件程序需要使用“mailto”。使用mailto可以创建预先填入有电子邮件地址的表单，其中的电子邮件地址可以是作者的，也可以是第三者的，这样可鼓励读者给作者反馈信息，也便于读者与第三方联系。mailto的语法结构如下：
<A HREF="mailto: userinfo@host">Name</A>
其中，“userinfo”是电子邮件地址的用户名，“host”是电子邮件服务器的主机名，“Name”应该是让人能容易理解的名称。
[例18.12] HTML文档中可插入如下一句：
<P>如有什么评论请发电子邮件到<A HREF="mailto:qjn-tup@tsinghua.edu.cn">清华大学出版社</A></P>
这个文档在浏览器上将显示如图18-15所示的样式。
图18-15 链接电子邮件程序举例
只要你用鼠标器点击它，就会调出电子邮件编辑器供你编写电子函件。
18.4.6 链接内联图象
内联图象(inline image)是指与Web网页中的文本一起下载和显示的图象，而不需要在你选择之后才下载和显示，在浏览器上表现为文本和图象显示在同一网页上，这种图象也称为内嵌图象或者叫内插图象。
目前，Web网页上的图象一般都使用图形文件交换格式(Graphics Interchange Format，GIF)和联合图像专家组(Joint Photographic Experts Group，JPEG)定义的JPG格式，这两种格式是Web页面上使用最普遍的图象文件存储格式。使用GIF格式存储的图象是无损压缩的图象，使用JPG格式的图象是有损压缩的图象。大多数Web浏览器都不需要调用其他的图象处理程序就能直接显示用这两种格式存储的图象。其他图象格式也许会集成到Web浏览器，例如正在开发的流式网络图象格式(Portable Network Graphic，PNG)，这是一种可取代GIF格式的无损压缩图象存储格式。
在HTML文档中插入图象文件的格式如下：
<IMG SRC=ImageName> … </IMG>
其中的图象文件名“ImageName”是图象文件的URL地址；“<IMG SRC＝”与 “<A HREF=”的功能相同。
[例18.13] 现有两幅宽度＝166象素、高度＝115象素的图象要插入到《HTML初学者指南》文档中，其中一幅在左边，另一幅在右边，图象边框的宽度＝2象素，如果使用不能显示图象的浏览器或者你不想看图象而把浏览器中的图象显示功能阻塞掉，可分别使用“Test GIF Image”和“Test JPEG Image”文字替代“test.gif”和“test.jpg”图象。根据上述要求，HTML文档的源文件可写成：
…
<HTML>
<HEAD>…</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.html">返回到开头</A></A></P></CENTER>
</BODY>
</HTML>
…
这个文档在浏览器上将显示如图18-16所示的样式。
图18-16 链接内联图象举例
要使图象显示在中央，则要用中间对齐标签<CENTER>…</CENTER>，如下面所示：
<P><CENTER><IMG SRC="image0.gif" WIDTH="126" HEIGHT="115" BORDER="2" ALT="Test GIF Image Align"></CENTER></P>
18.4.7 用图象作超链接
像文字一样，图象也可以作为超链接。
[例18.14] 假设beginner.html、test.gif和下面的HTML文档在同一文件夹(即同一个路径)下，可使用下面的语句链接文档：
<A HREF="HTML_beginner.html"><IMG SRC=" image0.gif" ALT="Hotlist"></A>
<A HREF="JavaScript_beginner.html"><IMG SRC=" image1.gif" ALT="Hotlist"></A>
这个文档在浏览器上将显示如图18-17所示的样式。
图18-17 用图象作超链接举例
图象有一个蓝色的边框，表示点击它可调出“beginner.html”HTML文档。
18.4.8 用图象作网页的背景
在浏览器上经常可看到各种背景图象，使用图象做网页背景的语法结构如下：
<BODY BACKGROUND="filename.gif">
做背景的图象不需要很大，浏览器会利用它的平铺(tiling)功能布满整个网页
[例18.15] 设计网页的背景(BGCOLOR)为黑色，文字(TEXT)为白色，带链接(LINK)但还未用鼠标器点击过的文素为浅蓝色，可用下面的HTML源代码实现：
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#CCFFFF">
其中的颜色值用RGB (red, green, blue)彩色模型，每种颜色分量用1字节表示。
18.4.9 链接外联图象
在HTML文档中，如果内联图象文件太大，在浏览主文档时就需要很长的图象下载等待时间。为了改善这种状况，除了开发新的流式网络图象格式PNR之外，一种切实可行的方法是把大的图象当作外联(external image)图象来处理。在编写HTML文档时，用文字或者小的内联图标来代表大图象，而把大图象文件当作一个单独的文档，然后把文字或者图标与大图象文件链接在一起，当读者用鼠标器激活这个链接后再下载并显示在另一个窗口上，这种图象就称为外联图象。
链接外联图象可使用下面的语句：
<A HREF="图象文件名">图象名称</A>
[例18.16] 假设Dmt_Test.html文档和图象文件Tu01_MyImage.jpg在同一文件夹下。使用外联图象时可在Dmt_Test.html中加入如下语句：
<CENTER><A HREF="Tu01_MyImage.jpg">图01 我的照片</A></CENTER>
或者
<CENTER><A HREF="Tu01_MyImage.jpg"><IMG SRC="Tu01_icon.gif" ALT="图01 我的照片"></A>
</CENTER>
这个文档在浏览器上将显示如图18-18(a)和(b)所示的样式。
(a)
或者显示：
(b)
图18-18 链接外联图象举例
当点击“图01 我的照片”或者点击图标时就会把照片显示在另一个窗口上。
18.4.10 在文档中链接和嵌入声音文件
1. 把声音文件链接到HTML文档
图18-19 把声音文件链接到HTML文档举例
当你点击“我的声音”时，浏览器将调出一个播放器进行播放。
2. 把声音文件嵌入到HTML文档
如果你想把声音文件嵌入到HTML文档中，可使用下面的语句：
<EMBED SRC="Sd01_ MySound.wav" ></EMBED><BR>
我的声音</FONT><BR>
在微软公司的Internet Explorer 4.X浏览器上将显示一个播放控制器，你按播放按钮
就可播放，如图18-20所示的样式。
图18-20 把声音文件嵌入到HTML文档举例
如果你在Netscape公司的Communicator 4.04或更高版本的浏览器上播放时，显示的播放控制面板将取决于你所安装的播放声音的插入软件。
3. 在文档中嵌入背景声音
在HTML文档中可嵌入背景音乐，当打开HTML文档时就开始播放。嵌入背景音乐的基本语法结构如下：
<BGSOUND SRC="URL" LOOP=100>
其中，URL表示背景音乐的文件名， LOOP表示循环次数。
18.4.11 在文档中链接和嵌入影视文件
1. 把影视文件链接到HTML文档
或者 
图18-21 把影视文件链接到HTML文档(一) 图18-21 把影视文件链接到HTML文档(二)
当你点击“HotDog”时，在Windows 95/98环境下浏览器将调出一个多媒体播放器进行播放，如图18-22所示:
图18-22 链接的影视文件举例
2. 在文档中嵌入影视
图18-23 文档中嵌入影视方法
对于语句①：打开HTML文档时显示带有播放控制按钮的图象，当按下播放按钮之后就开始播放。
对于语句②：打开HTML文档时显示不带播放控制按钮的图象，并马上开始播放直到播放完毕。
对于语句③：打开HTML文档时显示不带播放控制按钮的图象，并马上开始播放直到播放完毕。当把鼠标器放在图象上时又重新播放。
18.5 表格标签和属性
在HTML文档中，经常需要设计表格。一张表格有许多表素(table element)组成，例如表的名称(caption)、表行(table row)、 列表标题(table header)、列表数据单元(table data cell)等等。HTML为表格规定了表素标签和属性，它们分别示于表18-5和表18-6。
表18-5 表素标签
| 表 素 | 说 明 |
| <TABLE>...</TABLE> | 定义表格。如果已设置表的边框(BORDER)属性，浏览器就可显示边框 |
| <CAPTION>…</CAPTION> | 定义表的名称(CAPTION) |
| <TR> ... </TR> | 定义表的行(Table Row)，可定义对齐属性 |
| <TH> ... </TH> | 定义列表标题(Table Header)，通常为黑体字，中央对齐 |
| <TD>…</TD> | 定义列表数据(Table Data)单元 |
表18-6 表素属性
| 属 性 | 说 明 |
| ALIGN (LEFT, CENTER, RIGHT) | 表单元的水平对齐方式 |
| VALIGN (TOP, MIDDLE, BOTTOM) | 表单元的垂直对齐方式 |
| COLSPAN=n | 表单元跨越的列数 |
| ROWSPAN=n | 表单元跨越的行数 |
| NOWRAP | 表单元中的文字无自动换行 |
对HTML的表格设计时应注意：①<TABLE> … </TABLE>必须要包含整个表的定义；②在表格中的第一项是表的名称(CAPTION)，它是可有可无的；③<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>
<TD>…</TD>
<TD> 第一行最后一个单元的数据</TD>
<!-- 第一行列表数据结束 -->
</TR>
<TR>
<!--第n行列表数据开始 -->
<TD ALIGN="CENTER">…</TD>
<TD ALIGN="CENTER">…</TD>
<TD ALIGN="CENTER">…</TD>
<!--第n行列表数据结束 -->
</TR>
<TR>
<!-- 最后一行列表数据开始-->
<TD> 最后一行第一个单元的数据 </TD>
<TD>…</TD>
<TD> 最后一行最后一个单元的数据</TD>
<!-- 最后一行列表数据结束 -->
</TR>
<!-- 表格定义结束 -->
</TABLE>
</BODY>
</HTML>
在浏览器上将显示如图18-24所示的样式。
图18-24 表格标签和属性演示页面
练习与思考题
- 为什么要定义字体的逻辑样式和物理样式？
- 指出“<H1 ALIGN="CENTER">HMTL编辑器</H1>”中哪些是文素、标签和属性。
- 一个URL为http://www.tsinghua.edu.cn/docs/cindex.html，说出各部分的含义。
- 电子邮件的地址为：liudf@public.bta.net.cn和bookshelf@mcp.com，分别说出各部分的含义。
- 把图象/影视文件链接到和嵌入到HTML文档中，在语法结构和工作方式上都有什么差别？分别说出各自的优缺点。
- 把声音文件链接到和嵌入到HTML文档中，在语法结构和工作方式上都有什么差别？分别说出各自的优缺点。
- 列出你和你的同学所知道的HTML编辑器，并讨论它们的性能。
- http://www.mcfedries.com/books/cightml/
- http://developer.netscape.com/docs/manuals/index.html
- http://developer.netscape.com/docs/manuals/htmlguid/index.htm
- http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html
- HTML 4.0 Specification. http://www.w3.org/TR/REC-html40
<EMBED SRC=“URL”>
[例18.19] 在C:/temp/文件夹下有一个“Test.html”文档和3个AVI影视文件。在Test.html文档中嵌入这个影视文件可用下面几种语句:
① <EMBED SRC=" Basket01.avi" HEIGHT="120" WIDTH="160"></EMBED>
② <IMG DYNSRC="Basket02.avi" HEIGHT="120" WIDTH="160" ></IMG>
③ <IMG DYNSRC=" Basket03.avi " HEIGHT="120" WIDTH="160" START=MOUSEOVER></IMG>
在Internet Explorer浏览器上将显示如图18-23所示的样式。 使用与外联图象类似的语句可把影视文件链接到HTML文档，差别只是文件扩展名不同。
[例18.18] 假设Dmt_Test.html文档和影视文件splash.avi在同一文件夹下。使用外联影视文件时可在Dmt_Test.html中加入如下语句：
<A HREF="splash.avi">HotDog</A>
如果要显示图标，然后点击图标后播放影视，可使用：
<CENTER><A HREF="splash.avi"><IMG SRC="Tu01_icon.gif" ALT="影视片段： HotDog"></A>
在微软公司的Internet Explorer 4.x浏览器上将显示如图18-21所示的样式： 在HTML文档中，可以使用与外联图象类似的语句把声音文件链接到文档中，差别只是文件扩展名不同。
[例18.17] 假设Dmt_Test.html文档和声音文件文件Sd01_MySound.wav在同一文件夹下。使用外联声音时可在Dmt_Test.html中加入如下语句：
<A HREF="Sd01_ MySound.wav">我的声音</A>
在浏览器上将显示如图18-19所示的样式。在源HTML文档中插入ALIGN(对齐)属性：
<P ALIGN=CENTER>
这是居中段落
</P>
ALIGN=CENTER属性表示段落居中，在浏览器上将显示如图18-12所示的样式。ALIGN=RIGHT表示右对齐属性，ALIGN=LEFT表示左对齐属性。
水平线(Horizontal Rule)标签：生成一条用于分割文档的水平线，其长度与浏览器窗口等宽，粗细和长短都可设置。例如，
<HR SIZE=4 WIDTH="50%">
在浏览器上将显示如图18-10所示的样式。交易单标签：用来收集用户的信息，它可以包含让用户输入文本和选择项目的接口构件，例如文本域、按钮、复选框(checkboxe)，单选按钮(radio button)和选择列表。使用<FORM>标签时需要注意：①在交易单中的每个接口构件必须和输入标签(<INPUT>)或者选择标签(<SELECTION>)一起定义；②交易单中的所有构件必须在<FORM>…</FORM>之间定义。例如，
<HTML>
<HEAD><TITLE>检查身份 jcsf</TITLE></HEAD>
<BODY BACKGROUND="stucco.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" >
<INPUT type="submit" value="提交"> <INPUT TYPE="reset" VALUE="清除">
</BODY>
</HTML>
在浏览器上将显示如图18-09所示的样式。
强制换行/邮政地址标签(Forced Line Breaks/Postal Addresses)：使用<BR>标签可强制文本换行，其好处是不在行与行之间增加空白行。例如，
清华大学 计算机科学与技术系<BR>
智能技术与系统国家重点实验室<BR>
邮政编码：100084<BR>
电话(Tel): (010)62782266(O)<BR>
传真(Fax): (010)62771138<BR>
电子邮件地址(E-mail): usernamef@mail.tsinghua.edu.cn<BR>
扩展引用(Extended Quotations)标签：<BLOCKQUOTE> … </BLOCKQUOTE>用来包含一个比较长的引用语。例如，
<BLOCKQUOTE>
<P>不管前面是地雷阵还是万状深渊，我将一往无前，义无反顾，鞠躬尽瘁，死而后已。</P>
<P>朱总理，1998年3月 </P>
</BLOCKQUOTE> 定义列表格式
<DL>
<DT> HTML
<DD> 超文本标记语言，Hypertext Markup Language的缩写。
<DT> SMPTE time code
<DD> SMPTE时间码，记录在录像带上用来标识每一帧电视信号的一种信号标准，它用于电视编辑。SMPTE(Society of Motion Picture and Television Engineers)是运动图像和电视工程师协会缩写。
</DL>
在浏览器上将显示如图18-06所示的样式。 定义列表有三个标签：嵌套列表
<UL>
<LI> 直辖市
<OL>
<LI> 北京市
<LI> 天津市
<LI> 上海市
<LI> 重庆市
</OL>
<LI> 省
<OL>
<LI> 福建省
<LI> 广东省
<LI> 湖北省
<LI> 台湾省
<LI> …
</OL>
</UL>
在浏览器上将显示如图18-05所示的样式。在<OL> … </OL>之间的项目是有编号的，这种列表也称为有序列表(Ordered List)，
<H2> 故宫(1998年�)：</H2>
<OL>
<LI> 开放时间：08:30-17:30
<LI> 门票价格：内宾20元，外宾60元。
<LI> 住宿条件：附近有北京饭店等多个饭店
<LI> 餐饮设施：附近有谭家菜餐厅等多个餐厅
<LI> 天气状况：四季皆宜
</OL>
在浏览器上将显示如图18-04所示的样式。在<UL> … </UL>之间的项目表示无编号。
<UL>
<LI> 计算机科学与技术系
<LI> 工程物理系
<LI> 生物科学与技术系
</UL>
在浏览器上将显示如图18-03所示的样式。
列表标签：HTML支持无编号列表和有编号列表，而且还可以在列表中套列表。
HTML标签：这个标签告诉浏览器在<HTML> … </HTML>之间的文件是用HTML编写的文档。
<HEAD>
文档头标签：<HEAD> … </HEAD>之间包含的是HTML文档名称。
<TITLE>
文档名称标签：<TITLE> … </TITLE>之间包含的是具体的HTML文档名称，字符数通常不超过64。
[例18.1] 开始与结束标签之间的文档名称。
<HTML>
<HEAD>
<TITLE>HTML 4.0 Specification</TITLE>
</HEAD>
<BODY>
…
</BODY>
</HTML>
在这个HTML文档中，电子文档的名称为HTML 4.0 Specification。
<BODY>
正文标签： <BODY> … </BODY>之间是正文部分，这是HTML文档最多的部分，它包含的是显示在浏览器文本窗口中的文档内容。
<Hn>
标题(Heading)标签：HTML定义了6个等级的标题标签，其中n＝1，2，…，6。<Hn> … </Hn>之间包含的是第n级标题。
<P>
段落(Paragraph)标签：<P> … </P>之间包含的是一段文本。HTML中没有使用硬换行(carriage return)来分段落，这是与字处理软件不同的。在HTML文档中，<P>和</P>之间不论有多少行，不论每一行有多长或者多短，也不论其间有多少个空格，浏览器都把它作为一个段落来处理。
[例18.2] Web浏览器忽略标签<P>和</P>之间的的行数、空行和空字符。
<P>步入HTML世界。
这是第一段。
把这段内容分成几个“小段”之后，
在浏览器上依然显示一个段落!
</P>
在源HTML文档中，虽然有硬换行，但浏览器只有遇到<P>标签之后才开始新的一行，在浏览器上将显示如图18-02所示的样式。
扫一扫
2279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
