第21章超文本标记语言(HTML 第四部分 多媒体内容编辑语言 在世界性的信息网络时代,文档要便于访问、易于传输、有效检索和灵活多样,这就需 要使文档不受软件和硬件的约束,而通用标记语言就是具有这些特性的语言。用来说明文档 结构的第一个正式标记语言是由IBM公司于20世纪60年代创造的,称为通用标记语言 ( Generalized Markup Language,GML),用于内部文档的标准化。其后扩展成标准通用标记 语言( Standard General Markup Language,SGM),成为许多工业用来表达信息的标准,并于 986年成为国际标准化组织(SO的正式标准( SGMLISO8879-1986)。 超文本标记语言( Hypertext Markup Language,HM是20世纪90年代从SGML中挑 选的一种Web语言,尽管它有这样那样的问题和局限性,但人们一直在使用和改进它。可 扩展标记语言( Extensible Markup Language,xM)就是在广泛实践基础上创造出的一个重要 成果,它克服了HIML不能由Web开发人员自己定义标签等不足。另一个重要成果就是使 用句法严格的XML对1997发布的HIML40进行了改造,于是就产生了可扩展超文本标记 语言( Extensible Hypertext Markup Language, XHTML)。 目前,最基本的Web标准是HIML[]和XML[2]。 XHTML[4是新一代的Web标准。 这些Web标准是由万维网协会( World Wide Web Consortium,w3C组织制定和推荐的。这些 标准将为日益增长的多媒体网络应用、多媒体移动通信和多媒体电子出版业等产生深刻的影 第21章超文本标记语言(HTML) 超文本标记语言(HIML)是组织多媒体文档的重要语言,它不仅用来编写Web网页,而 且也使用HIML来制作光盘上的多媒体节目。HIML可用来编排文档、创建列表、建立链 接、插入声音和影视片断。虽然编写多媒体文档不一定要直接使用HIML语言,而且目前 市场上已有很多很优秀的所见即所得( what you see is what you get, WYSIWYG)编辑器(如微 软公司的 FrontPage和 Macromedia公司的 Dreamweaver),它们都是用于编写HIML多媒体 文档的工具。为了更好地理解和使用HIML编辑器,添加一些HIML编辑器暂时不支持的 功能,学习一些HIML的基础知识是相当必要的 211HTML文档 21.1.1Web与HTML 万维网(Wb)是分布在全世界所有HTP服务机上的互相连接的超文本文档( hyperte documents)的集合。它之所以能够取得巨大成功,主要是开发了下面的三项基本技术 (1)指定网上信息资源地址的统一命名方法:统一资源地址( Uniform Reso urce locator, URL)o (2)存取资源的协议:超文本传送协议( Hypertext Transfer Protocol,HITP) (3)在资源之间很容易浏览的超文本链接技术:源于 Hyper Text的 HyperLink 万维网上的文档称作web网页( Web pages),存储网页并安装有服务软件(也称服务器) 的计算机叫做Web服务机( Web servers),读网页的计算机叫做Web客户机( Web clients,客 户机上观看网页的软件叫做Web浏览器( Web browser)。流行的浏览器是微软公司的
第 21 章 超文本标记语言(HTML) 1 第四部分 多媒体内容编辑语言 ***************************************************************************** 在世界性的信息网络时代，文档要便于访问、易于传输、有效检索和灵活多样，这就需 要使文档不受软件和硬件的约束，而通用标记语言就是具有这些特性的语言。用来说明文档 结构的第一个正式标记语言是由 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)。流行的浏览器是微软公司的
第21章超文本标记语言(HTML IE( nternet Explorer)和网景公司的 Netscape Navigator,以及 Norwegian Opera Software公司 开发的极具生命力的 Opera浏览器 Web网页通常是用HIML编写的文档,称为HIML文档。HIML文档由URL指定它 所在的服务机和路径,这就是网页地址。所有的HIML文档都包含如何显示文档的指令, 最普通的指令叫做HIML标签(tag),如<p>这是一个段落<p>。在HML文档中,使用超 级链接技术可将文档中特定的单词和图像与相应的URL相连。因此,用户通过Web浏览器 观看网页时,只需按键盘或鼠标器上的按钮就可以访问遥远的文件。这些文件可能包含文本 (具有不同的字体或风格)、图形文件、图像文件、影视文件、声音文件以及Java小应用程序 和 ActiveX控件,或者是其他一些通过用户的点击来激活的内嵌的软件程序。访问Web网 页的用户还可以通过网页上的链接,从执行文件传送协议( File transfer protocol,FTP)的服 务机上下载文件,或使用电子邮件(e-mai)收发其他用户的消息。 目前使用的HTML版本是HTML401,可支持不同种类的语言,可为信息检索工具提 供更有效的检索,可提供更高质量的网页显示,也提高了文语转换(text-to- speech,TIS)的 支持能力。现在使用比较广泛的一种语言是XML,是一种比HIML更加灵活的一种Web 语言。HIML使用预先定义的标签来描述网页中的元素,而XML语言则允许网页开发人员 定义自己的标签 21.1.2元素和标签的概念 个文档通常由文档头(head)、文档名称(ttl)、表格 (table)、段落( paragraph)和列表list) 等成分构成。为了表达方便,我们把这些成分称为文档元素( element),简称为元素。元素是 文本文档的基本构件,并且使用HIML规定的标签来标识这些元素。例如,元素内容为“举 办奥运史上最成功的奥运”,用粗体字表示该元素内容的元素是, <b>举办奥运史上最成功的奥运</b> 其中,标签<b>表示用粗体字显示,这个元素将在浏览器显示为 举办奥运史上最成功的奥运 HIML标签由3部分组成:左尖括号“<”,“标签名称”和右尖括号“>”。标签通常是 成对出现的,一个表示开始的“开始标签( start tag)”,另一个表示结束的“结束标签 end tag) 标签。例如,<H1>与<H1>分别表示一级标题的开始标签和结東标签,“HI”是一级标签的 名称。除了在结束标签名称前面加一个斜杠符号“/”之外,开始标签名称和结束标签名称 都是相同的,它也不区分字母的大小写。开始标签和结束标签之间的文本叫做HIML元素 的内容。HIML的一些常用标签将在21.2节解释。 标签可以包含“属性( (attribute)”它用来提供网页上的HIML元素的附加信息。属性是 指背景颜色、字体属性(大小、颜色、正体、斜体等)、对齐方式等。属性不仅须要名称,而 且还须要给它赋值,叫做属性值( attribute value),并用双引号表示。属性名称和属性值放在 开始标签中。例如, p align=" center">< font colors="#F00°举办奥运史上最成功的奥运<ont><p 其中,< p align=“ center”>表示在显示时这段文字要居中对齐,< font color="#F000°表示 用红色显示这段文字 对于图像文件,同样可以指定图像的显示特性,如图像在顶部、在底部或在中间等对齐 属性。 注意,HIML标签名称中的字母不分大小写。例如,<tte与<1E>或者<TiE> 都是等效的。此外,Web浏览器不一定对所有的HIML标签都支持。如果一个浏览器遇到 不认识的标签,它就不予理睬,但在标签之间的文本仍然会显示在计算机的屏幕上
第 21 章 超文本标记语言(HTML) 2 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章超文本标记语言(HTML 21.13HTML文档的结构 HIML文档是一种没有格式的文档,也称为ASCI1文件。因此,HTML文档可以使用 任何一种文本编辑器来编写,如 Windows中的记事本( Notepad)、写字板( Wordpad)和Word 每个HIML文档都是由标签<html>开始,以标签<htm>标签结束。一个HIML文档主 要由文档头(head)和正文body)两个部分组成,并分别用标签<head…<head>和标签 <body>…<body>作标记。在文档头标签(即<head…<head>)之间包含的内容是文档的 名称(tite),如“章乃器轶事”。在正文标签(即<body>…<body>)之间含有用各种HIML 标签作标记的段落、列表和其他元素组成的HIML元素。一个简单的HIML文档如下所示 <htm> <ttle>章乃器轶事< /title < hI align=" center">章乃器妙语揭贪官</h1> p>章乃器是我国杰出的爱国人士。1938年3月,应当时安徽省政府主席 李宗仁之邀,出任安徽省政府财政厅厅长。针对当时众多的贪官污吏乘 国难之机贪污腐化、中饱私囊等劣行,章乃器上任伊始就提出了"铲除 贪污"等四项重大措施。 </html> HIML文档的扩展名用htm或html表示。把编辑好的文件存储为“ zhnaqi. htm”或 “ Zhnaqi. htm”文件,然后使用浏览器浏览显示这个文件,就可在浏览器的窗口中看到如图 21-01所示的网页。 章乃器铁事- Microsoft Internet Explorer 文件G编辑G)查看收藏(A)工具①帮助 中后退·+④的益搜索收藏夹④个栏·a⑧ 地址()cDQ9MmMW小转到链接 章乃器妙语揭贪官 章乃器是我国杰出的爱国人士。1938年3月,应当时安徽省政府主席李宗仁 之遨,出任安徽省政府财政厅厅长 章器上任伊始 时众多的贪官污吏乘国难之机 项重大措 包完成 我的电脑 图21-01在Web浏览器上显示的HIML文档 212HTML标签和属性 HIML标签和属性很多,为了了解标签和属性的含义,这里仅选择了少数标签和属性 作一些解释。若要了解完整的标签和属性,请参看[S]。有些HIML编辑器的联机“帮助” 文件中也可找到很完整的说明(例如 Sausage software公司的 HotDog Professional) 2121基本标签
第 21 章 超文本标记语言(HTML) 3 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 基本标签
第21章超文本标记语言(HTML 1. <htmL HIML标签告诉浏览器在<hm>…</html>之间的文件是用HIML文档 2. head> 文档头标签告诉浏览器在<head>…<head之间包含的是htm文档名称。 3. <title> 文档名称标签告诉浏览器在<tite。…<titl之间包含的是具体的HIML文档名称。名 称的长度通常不超过64个字符数 例21.1开始与结束标签之间的文档名称。 <htm> <head> <title>HTML 4.0 Specification</title> <head> body> </body> 在这个HIML文档中,文档名称为HIML40 Specification 4. <body> 正文标签标签告诉浏览器在<body>…</body>之间的内容是正文部分。这是HML文 档中最多的部分,是显示在浏览器窗口中的文档内容 5.<hn> 在HIML规范中定义了6个等级的标题标签,其中 之间包含的是第n级标题 段落( paragraph)标签告诉浏览器在<p>…<p>之间包含的是一段文字。HIML没有使 用硬换行( carriage return)来分段落,这是与字处理软件不同的地方。在HIML文档中,p 和<p>之间不论有多少行,不论每一行有多长或者多短,也不论其间有多少个空格,浏览器 都把它作为一个段落来处理 1例21.21Web浏览器忽略标签<P>和<P>之间的行数、空行和空字符 <P>步入HIML世界 这是第一段 把这段内容分成几个“小段”之后 在浏览器上依然显示一个段落! 在源HIML文档中,虽然有硬换行,但浏览器只有遇到<P>标签之后才开始新的一行, 在浏览器上将显示如图21-02所示的样式
第 21 章 超文本标记语言(HTML) 4 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章超文本标记语言(HTML 介纽M- Microsoft Internet Explorer=回 文件G编辑查看△O收蘇③工具(①帮助 步入H世界 图21-02标签“p>的特性 7.<u、<ol和<l HIML支持无编号列表标签和有编号列表标签,而且还可以在列表标签中套列表标签。 ①<u>…</ul>表示标签之间的列表项目是无编号列表( Unnumbered list ②<ol>…<ol>表示标签之间的列表项目是有编号列表( Ordered List ③<i>:表示标签后面的内容是具体的列表项目( List Item) 例21.3在<u山>…<山>之间的项目表示无编号。 <i>计算机科学与技术系 <l>工程物理系 <>生物科学与技术系 在浏览器上将显示如图21-03所示的样式。 介绍 HTML-Microsoft Internet Explorer 文件)编辑)查看△收藏)工具①帮助⑩ 算机科学与技术系 程物理系 生物科学与技术系 图21-03标签<ul>的特性 例21.41在<O>…<o>之间的项目是有编号的,这种列表也称为有序列表 <h2>故宫(1998年一):<h2> <li>开放时间:08:30-17:30 <>门票价格:内宾20元,外宾60元。 <>住宿条件:附近有北京饭店等多个饭店 <l讠>餐饮设施:附近有谭家菜餐厅等多个餐厅 <>天气状况:四季皆宜 </ol> 在浏览器上将显示如图21-04所示的样式
第 21 章 超文本标记语言(HTML) 5 图 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 所示的样式