第1章 HTML语言简介课件.ppt

《第1章 HTML语言简介课件.ppt》由会员分享，可在线阅读，更多相关《第1章 HTML语言简介课件.ppt（53页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、第第1 1章章 HTML语言简介语言简介 1.1 1.1 【案例【案例1 1】第】第1 1个个HTMLHTML网页网页 1.2 1.2 【案例【案例2 2】“中国诗词佳句中国诗词佳句作者作者”网页网页 1.3 1.3 【案例【案例3 3】“鲸鱼和螃蟹鲸鱼和螃蟹”网页网页 1.4 1.4 【案例【案例4 4】“图像切换图像切换”网页网页 1.5 1.5 【案例【案例5 5】“链接技术演示链接技术演示”网页网页 1.6 1.6 【案例【案例6 6】“中国的世界文化遗产中国的世界文化遗产”网页网页 1.7 1.7 【案例【案例7 7】“FLASHFLASH技术说明技术说明”网页网页 1.8 1.8

2、【案例【案例8 8】“最新消息公告最新消息公告”网页网页 1.9 1.9 【案例【案例9 9】“水中倒影水中倒影”网页网页 1.10 1.10 【案例【案例1010】“飘动的枫叶飘动的枫叶”网页网页 1.1 1.1 【案例【案例1 1】第】第1 1个个HTMLHTML网页网页 1HTML文件特点文件特点HTML文件是标准的文件是标准的ASCII文件，它看起来像是加入了许多被称为链接签文件，它看起来像是加入了许多被称为链接签（tag）的特殊字符串的普遍文本文件。从结构上讲，）的特殊字符串的普遍文本文件。从结构上讲，HTML文件由元素文件由元素（element）组成，组成）组成，组成HTML文件的

3、元素有许多种，用于组织文件的内容和文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是指导文件的输出格式。绝大多数元素是“容器容器”，即它们有起始标记和结尾，即它们有起始标记和结尾标记。元素的起始标记叫做起始链接签（标记。元素的起始标记叫做起始链接签（start tag），元素的结束标记叫做结），元素的结束标记叫做结尾链接签（尾链接签（end tag），在起始链接签和结尾链接签中的部分是元素体。每一），在起始链接签和结尾链接签中的部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。个元素都有名称和可选择的属性，元素的名称和属性都在起始链接

4、签内标明。一个元素的元素体中可以有其他的元素。一个元素的元素体中可以有其他的元素。“属性名属性名”、“= =”和和“属性值属性值”合合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。需要说明的是，需要说明的是，HTML是一门发展很快的语言，早期的是一门发展很快的语言，早期的HTML文件并没有如文件并没有如此严格的结构，因而现在流行的浏览器为了保持对早期此严格的结构，因而现在流行的浏览器为了保持对早期HTML文件的兼容性，文件的兼容性，也支持不按上述结构编写的也支持不按上述结构编写的HTML文件。另外，各种浏

5、览器对文件。另外，各种浏览器对HTML元素及元素及其属性的解释也不完全一样。一般来讲，其属性的解释也不完全一样。一般来讲，HTML的元素有下列的元素有下列3种表示方法。种表示方法。（1）文件或超文本文件或超文本（2）文本或超文本文本或超文本（3）第第3种写法仅用于一些特殊的元素，例如分段元素种写法仅用于一些特殊的元素，例如分段元素P，它仅仅通知，它仅仅通知WWW浏览浏览器在此处分段，因而不需要界定作用范围，所以它没有结尾链接签。器在此处分段，因而不需要界定作用范围，所以它没有结尾链接签。HTML语言的标记种类很多，图语言的标记种类很多，图1-1-2中常用的标记含义介绍如下。注意：中常用的标记含

6、义介绍如下。注意：HTML文档中的起始链接签文档中的起始链接签“”和元素名称（例如和元素名称（例如BODY）之间不能有空格。）之间不能有空格。2网页基本结构标记网页基本结构标记（1）：它是：它是HTML文档中最基本的标记，不可缺少。文档中最基本的标记，不可缺少。表示表示HTML文档的开始，文档的开始，表示表示HTML文档的结束。文档的结束。（2）：它是网页头部标记。可以提高网页文档的可读：它是网页头部标记。可以提高网页文档的可读性，向浏览器提供一个信息。它可以忽略，但一般不予忽略。性，向浏览器提供一个信息。它可以忽略，但一般不予忽略。（3）：它是网页名称标记，是：它是网页名称标记，是标标记内唯

7、一一个必须出现的元素，有记内唯一一个必须出现的元素，有标记就一定要有标记就一定要有标记。标记。TITLE元素是文件头中的元素，它也只能出现在文件头中。元素是文件头中的元素，它也只能出现在文件头中。TITLE标明该标明该HTML文件的题目，是对文件内容的概括。一个好的题目应该能使读者从中文件的题目，是对文件内容的概括。一个好的题目应该能使读者从中判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中，而以判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中，而以窗口的名称显示出来。除了标识窗口外，当将某一个网页存入书签或文件时，窗口的名称显示出来。除了标识窗口外，当将某一个网页存入书签

8、或文件时，TITLE还用做书签名或缺省的文件名。还用做书签名或缺省的文件名。TITLE的长度没有限制，但过长的题的长度没有限制，但过长的题目会导致转行，一般情况下它的长度不应超过目会导致转行，一般情况下它的长度不应超过64个字符。个字符。（4）：它是网页主题内容标记。其中包含了网页的正：它是网页主题内容标记。其中包含了网页的正文内容，一般不可缺少。文内容，一般不可缺少。（5）：使用：使用标记中的标记中的BGCOLOR属性，可以设置网页的背景颜色。使用的格式有以下两种。属性，可以设置网页的背景颜色。使用的格式有以下两种。在第一种格式中，在第一种格式中，RR、GG、BB可以分别取值为可以分别取值为

9、00FF的十六进制数。的十六进制数。RR、GG、BB分别用来表示颜色中的红色、绿色和蓝色成分的多少，数值越大，分别用来表示颜色中的红色、绿色和蓝色成分的多少，数值越大，颜色越深。红、绿、蓝三色按一定比例混合，可以得到各种颜色。颜色越深。红、绿、蓝三色按一定比例混合，可以得到各种颜色。例如，例如，RR =FF，GG=FF，BB=00，表示为黄色。如果，表示为黄色。如果RRGGBB取值为取值为000000，则为黑色；，则为黑色；RRGGBBRRGGBB取值为取值为FFFFFFFFFFFF，则为白色；，则为白色；RRGGBBRRGGBB取值为取值为FF8888FF8888， 则为浅红色。则为浅红色。

10、第二种格式是直接使用颜色的英文名称来设定网页的背景颜色。例如：第二种格式是直接使用颜色的英文名称来设定网页的背景颜色。例如：用来设置网页的背景颜色为蓝色。：用来设置网页的背景颜色为蓝色。：用来设置网页的背景颜色为红色。：用来设置网页的背景颜色为红色。：用来设置网页的背景颜色为白色。：用来设置网页的背景颜色为白色。（6）：它是图像标记。用来加载图像与：它是图像标记。用来加载图像与GIF动画。在网页中加载动画。在网页中加载GIF动画的方法与加载图像的方法一样。动画的方法与加载图像的方法一样。GIF动画文件的扩展名也是动画文件的扩展名也是.gif，文件格，文件格式是式是GIF89A格式。制作格式。制

11、作GIF动画的软件有很多，例如动画的软件有很多，例如Fireworks和和Ulead GIF Animator 5.0等。等。（7）SRC：它是依附于其他标记的一个属性，依附于：它是依附于其他标记的一个属性，依附于标记时，用来导标记时，用来导入图像与入图像与GIF动画。其格式如下：动画。其格式如下： （8）：它是换行标记，表示以后的内容移到下一行。它是单向标记，：它是换行标记，表示以后的内容移到下一行。它是单向标记，没有没有。（9）：它是保留文本原来格式的标记。它的作用是将其中：它是保留文本原来格式的标记。它的作用是将其中的的文本内容按照原来的格式显示。否则浏览器会自动取消文本中的空格。文本内

12、容按照原来的格式显示。否则浏览器会自动取消文本中的空格。 （10）：它是粗体标记。可使其中的文字变为粗体。：它是粗体标记。可使其中的文字变为粗体。3其他常用标记其他常用标记（1）：它是正文的第三级标题标记。此外，还有第一、二、三、：它是正文的第三级标题标记。此外，还有第一、二、三、四、五、六级标题标记，分别为四、五、六级标题标记，分别为、和和。级别越高，。级别越高，文字越小。文字越小。一般情况下，浏览器对标题作如下解释。一般情况下，浏览器对标题作如下解释。H1 黑体，特大字体，居中，上下各有两行空行。黑体，特大字体，居中，上下各有两行空行。H2 黑体，大字体，上下各有一到两行空行。黑体，大字体

13、，上下各有一到两行空行。H3 黑体（斜体），大字体，左端微缩进，上下空行。黑体（斜体），大字体，左端微缩进，上下空行。H4 黑体，普通字体，比黑体，普通字体，比H3缩进更多，上边一空行。缩进更多，上边一空行。H5 黑体（斜体），与黑体（斜体），与H4相同缩进，上边一空行。相同缩进，上边一空行。H6 黑体，与正文有相同缩进，上边一空行。黑体，与正文有相同缩进，上边一空行。Hn可以有对齐属性，可以有对齐属性，ALIGN#，“#”表示表示Left（标题居左）、（标题居左）、Center（标（标题居中）和题居中）和Right（标题居右）。例如：（标题居右）。例如： 标题标题2 （2）：它是段落标记。它

14、的作用是将其内的文字另起一段显示。：它是段落标记。它的作用是将其内的文字另起一段显示。段与段之间有一个空行。段与段之间有一个空行。HTMLHTML的浏览器是基于窗口的，用户可以随时改变显的浏览器是基于窗口的，用户可以随时改变显 示区的大小，所以示区的大小，所以HTML将多个空格以及回车等效为一个空格，这是和绝大将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。段落标记也可以有多种属性，比较常用的属性是多数字处理器不同的。段落标记也可以有多种属性，比较常用的属性是Aligh#。“#”可以是可以是Left、Center或或Right，其含义同上文。，其含义同上文。4文件的路径名文件的

15、路径名（1）绝对路径：绝对路径是写出全部路径，系统按照全部路径进行文件的查）绝对路径：绝对路径是写出全部路径，系统按照全部路径进行文件的查找。绝对路径中的盘符后用找。绝对路径中的盘符后用“：”或或“：/”，各个目录名之间以及目录名与，各个目录名之间以及目录名与文件名之间，应用文件名之间，应用“”或或“/”分隔开。绝对路径名的写法及其含义如表所示。分隔开。绝对路径名的写法及其含义如表所示。（2）相对路径：相对路径是以当前文件所在路径和子目录为起始目录，进行）相对路径：相对路径是以当前文件所在路径和子目录为起始目录，进行相对的文件查找。通常都采用相对路径，这样可以保证站点中的文件整体移相对的文件查

16、找。通常都采用相对路径，这样可以保证站点中的文件整体移动后，不会产生断链现象。相对路径名的写法及其含义如表所示。动后，不会产生断链现象。相对路径名的写法及其含义如表所示。绝对路径名 含 义 HREF=“http:/ HTML0.htm在域名为的服务器中的TD目录下 HREF=“E:DRAWTDTDHTML0.htm” HTML0.htm放在E盘的DRAWTD目录下的TD子目录中 绝对路径名的写法及其含义 5URLURL（Uniform Resource Locator）即统一资源定位器，）即统一资源定位器，WWW上的地址编码，上的地址编码，是文件名的扩展。它指出了文件在是文件名的扩展。它指出了

17、文件在Internet中的位置。它存在的目的在于统一中的位置。它存在的目的在于统一WWW上的地址编码，给每一个网页指定的地址，这样就不会出现重复或由上的地址编码，给每一个网页指定的地址，这样就不会出现重复或由于编码不统一而出现无法浏览等问题。当用户查询信息资源时，只要给出于编码不统一而出现无法浏览等问题。当用户查询信息资源时，只要给出URL地址，地址，WWW服务器就可以根据它找到网络资源的位置，并将它传送给服务器就可以根据它找到网络资源的位置，并将它传送给用户的计算机。通常，当用户用鼠标单击网页中的链接点时，就将用户的计算机。通常，当用户用鼠标单击网页中的链接点时，就将URL地址地址的请求传送

18、给了的请求传送给了WWW服务器。服务器。相对路径名 含 义 HREF=“HTML0.htm” HTML0.htm是当前目录下的文件名 HREF=“DRAWTD/HTML0.htm” HTML0.htm是当前目录中“DRAWTD”目录下名字为HTML 0.htm的文件 HREF=“DRAWTD/TD/HTML0.htm” HTML0.htm是当前目录中，“DRAWTD/TD”目录下名字为HTML0.htm的文件 HREF=“./HTML0.htm” HTML0.htm是当前目录的上一级目录下名字为HTML0.htm的文件 HREF=“././HTML0.htm” HTML0.htm是当前目录的上

19、两级目录下名字为HTML0.htm的文件 在单机系统中，定位一个文件需要路径和文件名；对于遍布全球的在单机系统中，定位一个文件需要路径和文件名；对于遍布全球的Internet，显然还需要知道文件存放在哪个网络的哪台主机中才行。另外，单机系统中，显然还需要知道文件存放在哪个网络的哪台主机中才行。另外，单机系统中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而在在Internet上，各个网络，各台主机的操作系统都不一样，因此必须指定访问上，各个网络，各台主机的操作系统都不一样，因此必须指定访问该文件的方法。该文件

20、的方法。一个完整的一个完整的URL地址通常由通信协议名（访问该资源所采用的协议，即访问地址通常由通信协议名（访问该资源所采用的协议，即访问该资源的方法）、该资源的方法）、Web服务器地址（存放该资源主机域名地址，在因特网上，服务器地址（存放该资源主机域名地址，在因特网上，主机名可以使用主机域名地址或主机名可以使用主机域名地址或IP地址，通常以字符形式出现）、文件在服地址，通常以字符形式出现）、文件在服务器中的路径和文件名四部分组成。例如务器中的路径和文件名四部分组成。例如 Transfer Protocol），），是是Web服务器地址（主机域名地址），服务器地址（主机域名地址），/DRAWTD

21、/TD/是文件在服务器中的路是文件在服务器中的路径，径，HTML0.html是文件名。是文件名。在文件名之后，可以加在文件名之后，可以加“#”号和锚点名。有时也可以在文件名之后加问号号和锚点名。有时也可以在文件名之后加问号（“？”），然后加查询字符串。），然后加查询字符串。与单机系统绝对路径和相对路径的概念类似，统一资源定位器也有绝对与单机系统绝对路径和相对路径的概念类似，统一资源定位器也有绝对URL和相对和相对URL之分。上文所述的是绝对之分。上文所述的是绝对URL。相对。相对URLURL是相对于用户最近访问是相对于用户最近访问 的的 U R L 。 比 如 现 在 观 看 一 个。 比 如

22、 现 在 观 看 一 个 U R L 为为 h t t p : / / T M L 1 . h t m l 就 是 一 个 相 对就 是 一 个 相 对 U R L ， 它 的 绝 对， 它 的 绝 对 U R L 为为 1.2 1.2 【案例【案例2 2】“中国诗词佳句中国诗词佳句作者作者”网页网页1文字的字体大小和颜色文字的字体大小和颜色（1）字体大小：）字体大小：HTML文件可以有文件可以有7种字号，种字号，1号最小，号最小，7号最大。默认字号号最大。默认字号为为3，可以用，可以用设置默认字号。设置文本的字号有两种办法，设置默认字号。设置文本的字号有两种办法，一种是设置绝对字号，一种是设

23、置绝对字号，；另一种是设置文本的相对字号，；另一种是设置文本的相对字号，。用第。用第2种方法时种方法时“+”号表示字体变大，号表示字体变大，“- -”号表示字号表示字体变小。体变小。（2）字体颜色：字体的颜色用）字体颜色：字体的颜色用指定，指定，#可以是可以是6位十六进制位十六进制数，分别指定红、绿、蓝的值。也可以使用数，分别指定红、绿、蓝的值。也可以使用16种标准颜色，如表所示。种标准颜色，如表所示。色 彩 名 十六进制值 色 彩 名 十六进制值 Aqua（水蓝色） #00FFFF Navy（藏青色） #000080 Black（黑色） #000000 Olive（茶青色） #808000

24、Blue（蓝色） #0000FF Purple（紫色） #800080 Fuchsia（樱桃色） #FF00FF Red（红色） #FF0000 Green（绿色） #808080 Silver（银色） #C0C0C0 Gray（灰色） #008000 Teal（茶色） #008080 Line（石灰色） #00FF00 While（白色） #FFFFFF Maroon（褐红色） #800000 Yellow（黄色） #FFFF00 例如，例如，“字体大小和颜色字体大小和颜色”网页（网页（HTML2-2.htm）代码如下。）代码如下。 字体大小和颜色字体大小和颜色 字体大小和颜色字体大小和颜色

25、字体大小和颜字体大小和颜色色 字体大小和颜色字体大小和颜色字体大小和颜字体大小和颜色色 闪烁的文本闪烁的文本 （3）闪烁：使用）闪烁：使用BLINK标记可以使文本闪烁，闪烁频率为标记可以使文本闪烁，闪烁频率为1秒一次，举例如秒一次，举例如下。下。 闪烁的文本闪烁的文本2字体风格字体风格字体风格分为物理风格和逻辑风格。字体的物理风格直接指定字体，物理风字体风格分为物理风格和逻辑风格。字体的物理风格直接指定字体，物理风格的字体有格的字体有黑体、黑体、斜体、斜体、下画线和下画线和打字机体等，如表所示。打字机体等，如表所示。例如，例如，“各种字体风格各种字体风格”网页代码如下（网页代码如下（HTML2

26、-3.htm）。）。 各种字体风格各种字体风格标 记 符 功 能 标 记 符 功 能 粗体 删除线 大字体 下标 斜体 上标 删除线 固定宽度字体 小字体 下画线 各种字体风格各种字体风格 各种字体风格各种字体风格 各种字体风格各种字体风格 各种字体风格各种字体风格 各种字体风格各种字体风格 各种字体风格各种字体风格 各种字体风格各种字体风格 各种字体风格各种字体风格 字体的逻辑风格用来指定文本的作用，有字体的逻辑风格用来指定文本的作用，有强调、强调、特别强调、特别强调、源代码、源代码、例子、例子、键盘输入、键盘输入、变量、变量、定义、定义、引用、引用、较小、较小、较大、较大、上标和上标和下下

27、标。标。3边框包围的文字边框包围的文字可以通过可以通过标记定义文字的边框。输入下面的标记定义文字的边框。输入下面的HTML代码（保存代码（保存在名称为在名称为“HTML2-4.htm”文件中）。文件中）。 图像的大小和边框图像的大小和边框 增加了边框的文字增加了边框的文字 4添加注释添加注释无论是编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作无论是编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作习惯。实际上，添加注释是任何程序开发工作必须遵循的规范之一。习惯。实际上，添加注释是任何程序开发工作必须遵循的规范之一。HTML的注释有开始标记符的注释有开始标记符“”构成。这

28、两个标记符之间构成。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。该标记可以添的任何内容都将被浏览器解释为注释，而不在浏览器中显示。该标记可以添加在加在HTML代码的任何位置。代码的任何位置。 1.3 1.3 【案例【案例3 3】“鲸鱼和螃蟹鲸鱼和螃蟹”网页网页 1调整图像大小和给图像加边框调整图像大小和给图像加边框在网页中插入图像时使用的标记是在网页中插入图像时使用的标记是，用来加载，用来加载GIF图像与动画，图像与动画，“SRC”属性用来输入图像的路径。在网页中加载属性用来输入图像的路径。在网页中加载GIF动画的方法与加载动画的方法与加载GIF图像的方法一样。图像的

29、方法一样。GIF动画文件的扩展名也是动画文件的扩展名也是.gif，文件格式是，文件格式是GIF89A。（1）调整图像大小：使用）调整图像大小：使用标记中的标记中的HEIGHT和和WIDTH属性可以调整属性可以调整图像的大小。图像的大小。HEIGHT（决定图像的高）和（决定图像的高）和WIDTH（决定图像的宽）的取值（决定图像的宽）的取值单位为像素。单位为像素。（2）给图像加边框：使用）给图像加边框：使用标记中的标记中的BORDER属性可以给图像加边框。属性可以给图像加边框。BORDER的取值单位为像素，当它的取值为的取值单位为像素，当它的取值为0或者不加或者不加BORDER属性时，则属性时，则

30、没有边框。没有边框。通过通过标记中的标记中的HEIGHT和和WIDTH属性调整图像，虽然可以改变图像属性调整图像，虽然可以改变图像在网页中的大小，但是调整过大会使图像严重失真。合理设置在网页中的大小，但是调整过大会使图像严重失真。合理设置HEIGHT和和WIDTH属性，才能得到最好的显示效果。属性，才能得到最好的显示效果。2背景平铺图像和图像文字说明背景平铺图像和图像文字说明（1）设置背景平铺图像：使用）设置背景平铺图像：使用标记中的标记中的BACKGROUND属性，可属性，可设置网页的平铺背景图像，其格式如下。设置网页的平铺背景图像，其格式如下。 （2）添加图像文字说明：为了增强图像在网页中

31、的显示效果，可以为图像添）添加图像文字说明：为了增强图像在网页中的显示效果，可以为图像添加文字说明。当鼠标移到图片上方时，会出现说明文字。在关闭浏览器中的加文字说明。当鼠标移到图片上方时，会出现说明文字。在关闭浏览器中的载入图像命令时，说明文字可以替代图像。使用载入图像命令时，说明文字可以替代图像。使用标记的标记的ALT属性可以属性可以为图像添加文字说明。为图像添加文字说明。3调整图像和文本的相对位置调整图像和文本的相对位置在网页中，经常需要将图像和文本放在一起进行显示。使用在网页中，经常需要将图像和文本放在一起进行显示。使用标记的标记的ALIGN属性可以调整图像与文本的相对位置。使用属性可以

32、调整图像与文本的相对位置。使用标记中的标记中的VSPACE和和HSPACE属性可以调整图像与文本间的距离。属性可以调整图像与文本间的距离。VSPACE（图像与文本上下（图像与文本上下的距离）和的距离）和HSPACE（图像与文本左右的距离）的单位均为像素。（图像与文本左右的距离）的单位均为像素。标记中的标记中的ALIGN属性用于调整图像与文字的对齐方式，主要含义如下属性用于调整图像与文字的对齐方式，主要含义如下所述。所述。（1）ALIGN项缺省时：图像的底部与其他文本或图像的底部对齐。项缺省时：图像的底部与其他文本或图像的底部对齐。（2）ALIGN=top：图像的顶部与其他文本或图像的顶部对齐。

33、：图像的顶部与其他文本或图像的顶部对齐。（3）ALIGN=middle：图像的中间与其他文本或图像的中部对齐。：图像的中间与其他文本或图像的中部对齐。（4）ALIGN=bottom：图像的底部与其他文本或图像的底部对齐。：图像的底部与其他文本或图像的底部对齐。（5）ALIGN=left：图像位于屏幕左边。：图像位于屏幕左边。（6）ALIGN=right：图像位于屏幕右边。：图像位于屏幕右边。 1.4 1.4 【案例【案例4 4】“图像切换图像切换”网页网页 1添加背景音乐添加背景音乐使用使用标记可以在网页中插入背景音乐。标记可以在网页中插入背景音乐。标记可以标记可以放在放在与与标记内的任何地方

34、。引导音乐文件的属性是标记内的任何地方。引导音乐文件的属性是SRC，其格式如下。其格式如下。 2在网页中插入在网页中插入Flash动画动画在网页中直接包含多媒体对象最常用的两个标记是在网页中直接包含多媒体对象最常用的两个标记是标记和标记和标记。标记。（1）标记：使用标记：使用标记不仅可以在网页中插入标记不仅可以在网页中插入Flash动画，动画，还可以使用下载并显示由插件支持的其他多媒体应用程序。使用还可以使用下载并显示由插件支持的其他多媒体应用程序。使用标记可以在网页中插入标记可以在网页中插入Flash对象同添加背景音乐的方法一样，对象同添加背景音乐的方法一样，标标记可以放在记可以放在与与标记

35、内的任何地方。引导标记内的任何地方。引导Flash动画文件的动画文件的属性是属性是SRC，格式如下：，格式如下： 当浏览器遇到当浏览器遇到标记时，会加载其中指定的文件并确定它的标记时，会加载其中指定的文件并确定它的MIME类类型。型。MIMEMIME信息告知浏览器正在下载的文件类型。然后浏览器查找与该信息告知浏览器正在下载的文件类型。然后浏览器查找与该MIME MIME 类型一致的插件，如果有就使用，如果没有则会显示一条错误信息，并且提类型一致的插件，如果有就使用，如果没有则会显示一条错误信息，并且提示用户下载该插件。示用户下载该插件。（2）标记：该标记可以使网页中包含标记：该标记可以使网页中

36、包含JavaApple、视频和音频等、视频和音频等多媒体及其他文件。当浏览器遇到多媒体及其他文件。当浏览器遇到标记时，会加载相应的文件并标记时，会加载相应的文件并根据该标记包含属性的值来显示它。根据该标记包含属性的值来显示它。 1.5 1.5 【案例【案例5 5】“链接技术演示链接技术演示”网页网页1链接文件使用的链接文件使用的HTML标记标记链接也叫超文本链接。在网页中加入超文本链接，就是通过单击一部分文字、链接也叫超文本链接。在网页中加入超文本链接，就是通过单击一部分文字、图像或图像中的一个区域，即可调出另一个网页或本网页的另一部分内容。图像或图像中的一个区域，即可调出另一个网页或本网页的

37、另一部分内容。HTML文件的链接是通过链接标记文件的链接是通过链接标记来实现的。在来实现的。在标记中除标标记中除标记名记名“A”外还包括一些属性。外还包括一些属性。HREF是链接标记中一个最常用的属性。该属是链接标记中一个最常用的属性。该属性用来指出所要链接的文件的路径（或目录）和名称或性用来指出所要链接的文件的路径（或目录）和名称或URL；其简单的结构；其简单的结构形式如下。形式如下。 文字文字所有写在起始标记所有写在起始标记和结束标记和结束标记之间的文字构成一个实际的链接，当之间的文字构成一个实际的链接，当网页在浏览器内显示时，这些文字将以蓝色高亮度或带有下画线的形式出现。网页在浏览器内显

38、示时，这些文字将以蓝色高亮度或带有下画线的形式出现。如果需要链接的文件都放在本机磁盘上，则这种链接叫本地链接，它不必链如果需要链接的文件都放在本机磁盘上，则这种链接叫本地链接，它不必链接网络，只要本地的机器上有一个编辑器和浏览器就足够了。如果需要链接接网络，只要本地的机器上有一个编辑器和浏览器就足够了。如果需要链接的文件在网络上，则需要网络链接。网络链接需要知道网址（的文件在网络上，则需要网络链接。网络链接需要知道网址（URL）。）。2使用图像或动画的链接使用图像或动画的链接用图像或动画的链接，就是在单击图像或动画后，即可调出与之链接的网页用图像或动画的链接，就是在单击图像或动画后，即可调出与

39、之链接的网页文件或本网页中的一段内容。建立图像或动画的链接的方法是在链接标记文件或本网页中的一段内容。建立图像或动画的链接的方法是在链接标记的中间加入一个的中间加入一个标记，其格式如下。标记，其格式如下。 加入了链接的图像或动画会自动产生一个外框，以示与一般的图像或动画的加入了链接的图像或动画会自动产生一个外框，以示与一般的图像或动画的区别。区别。 1.6 1.6 【案例【案例6 6】“中国的世界文化遗产中国的世界文化遗产”网页网页1在同一个网页中建立链接的在同一个网页中建立链接的HTML标记标记在同一个网页文件中建立链接，需要做以下工作。在同一个网页文件中建立链接，需要做以下工作。（1）在文

40、件的前面需要列出链接的标题文字，它们相当于文章的目录。同时）在文件的前面需要列出链接的标题文字，它们相当于文章的目录。同时将这些文字与相应的锚名（即定位名）建立链接。所谓将这些文字与相应的锚名（即定位名）建立链接。所谓“锚名锚名”是指网页中是指网页中能被链接到的一个特定位置。建立链接时，要在锚名前加一个能被链接到的一个特定位置。建立链接时，要在锚名前加一个“#”符号，其符号，其格式如下。格式如下。 标题名字标题名字（2）为被链接的内容起一个名字，该名字叫锚名，其格式如下。）为被链接的内容起一个名字，该名字叫锚名，其格式如下。 锚名的定义要放在相应标题对应的内容前面。锚名的定义要放在相应标题对应

41、的内容前面。2 2建立电子邮件链接建立电子邮件链接如果将如果将HREFHREF属性值指定为属性值指定为“MAILTO:MAILTO:电子邮件地址电子邮件地址”，就可以获得电子邮件链，就可以获得电子邮件链接的效果。例如，使用下面的接的效果。例如，使用下面的HTMLHTML代码可以设置电子邮件的超链接。代码可以设置电子邮件的超链接。 邮 箱 地 址 ：邮 箱 地 址 ： 当浏览网页的用户单击了指向电子邮件的超级链接后，系统将自动启动邮件当浏览网页的用户单击了指向电子邮件的超级链接后，系统将自动启动邮件客户程序（对于安装了客户程序（对于安装了Windows 98/2000以上操作系统的计算机，默认时

42、启以上操作系统的计算机，默认时启动动Outlook Express），并将指定的邮件地址填写到），并将指定的邮件地址填写到“收件人收件人”栏中，用户可栏中，用户可以编辑并发送该邮件。以编辑并发送该邮件。如果是第一次启动如果是第一次启动Outlook Express，会要求进行软件设置。，会要求进行软件设置。3链接到其他页面中的锚点链接到其他页面中的锚点通过前面的案例，可以看出从一个文件链接到另外一个文件与同一个文件中通过前面的案例，可以看出从一个文件链接到另外一个文件与同一个文件中的链接的格式有所不同。那么，能不能使用一个命令，链接到其他文件的指的链接的格式有所不同。那么，能不能使用一个命令，

43、链接到其他文件的指定位置呢？定位置呢？在网页中建立文字链接的在网页中建立文字链接的HTML代码是代码是文字文字。只要将。只要将“被链接的文件名或被链接的文件名或URL”替换为替换为“要链接的文要链接的文件 名 或件 名 或 U R L 加加 # 加 锚 点 名 称加 锚 点 名 称 ” 即 可 。 例 如 ，即 可 。 例 如 ， 天坛天坛标记，即可建立一个到标记，即可建立一个到HTMLABC.htm网页文档中的网页文档中的“天坛天坛”锚点的链接。锚点的链接。 1.7 1.7 【案例【案例7 7】“FLASHFLASH技术说明技术说明”网页网页 1设置框架和修饰框架设置框架和修饰框架（1）设置

44、框架：框架就是把一个网页页面分成几个单独的区域（窗口），）设置框架：框架就是把一个网页页面分成几个单独的区域（窗口），每个区域显示一个独立的网页，该部分可以是一个独立的每个区域显示一个独立的网页，该部分可以是一个独立的HTML文件。因此，文件。因此，框架可以实现在一个网页内显示多个框架可以实现在一个网页内显示多个HTML文件。一个有文件。一个有n个区域的框架网个区域的框架网页来说，每个区域有一个页来说，每个区域有一个HTML文件，整个框架结构也是一个文件，整个框架结构也是一个HTML文件，文件，因 此 该 框 架 网 页 有因 此 该 框 架 网 页 有 n + 1 个个 H T M L 文

45、件 。 设 置 框 架 需 要 使 用 标 记文 件 。 设 置 框 架 需 要 使 用 标 记来取代来取代标记。标记。标记有两个属性：标记有两个属性： ROWS=“n1,n2,n3”：纵向设置框架；：纵向设置框架； COLS=“n1,n2,n3”：横向设置框架。：横向设置框架。其中，其中，n1、n2、n3为开设的框架占整个页面的百分数。为开设的框架占整个页面的百分数。（ 2 ） 修 饰 框 架 ： 修 饰 框 架 需 要 使 用） 修 饰 框 架 ： 修 饰 框 架 需 要 使 用 标 记 ， 它 在标 记 ， 它 在标记之间。标记之间。标记有标记有6个属性，介个属性，介绍如下。绍如下。 R

46、C=“URL”属性：用来链接一个属性：用来链接一个HTML文件，如果没有该属性，则窗口内文件，如果没有该属性，则窗口内无内容。无内容。 NAME=“窗口名称窗口名称”属性：给窗口命名。属性：给窗口命名。MARGINWIDTH=n属性：属性： 用来控制窗口内的内容与窗口左右边缘的间距。用来控制窗口内的内容与窗口左右边缘的间距。n为像素个数，默认值为为像素个数，默认值为1。MARGINHEIGHT=n属性：用来控制窗口内的内容与窗口上下边缘的间距。属性：用来控制窗口内的内容与窗口上下边缘的间距。n为像素个数，默认值为为像素个数，默认值为1。SCROLING=YESSCROLING=YES、NONO

47、或或AUTOAUTO属性：用来确定窗口是否加滚动条。选属性：用来确定窗口是否加滚动条。选YESYES时，为要时，为要滚动条；选滚动条；选NONO时，为不要滚动条；选时，为不要滚动条；选AUTOAUTO时，可以加滚动条，根据内容是否时，可以加滚动条，根据内容是否可以完全在窗口内全部显示出来，来决定是否要滚动条。默认为可以完全在窗口内全部显示出来，来决定是否要滚动条。默认为AUTO AUTO 。NORESIZENORESIZE属性：如果设置了此属性，则窗口不可被用户用鼠标调整大小；如属性：如果设置了此属性，则窗口不可被用户用鼠标调整大小；如果没设置此属性，则窗口可以被用户用鼠标调整大小。果没设置此

48、属性，则窗口可以被用户用鼠标调整大小。FRAMEBORDER=nFRAMEBORDER=n属性：可以控制是否显示框架边框。属性：可以控制是否显示框架边框。n n取值为取值为1 1，表示生成，表示生成3 3D D边边框（此为默认设置）；框（此为默认设置）；n n取值为取值为0 0，则不显示边框。只有将所有相邻框架的边，则不显示边框。只有将所有相邻框架的边框都设置为框都设置为0 0，才能隐藏边框。，才能隐藏边框。2 2网页框架举例网页框架举例（1 1）开设纵向窗口：纵向开设）开设纵向窗口：纵向开设3 3个窗口，各占个窗口，各占50%50%、30%30%和和20%20%，各窗口内分别，各窗口内分别加

49、载加载HTMLHTML文件为文件为HTML2-1.htmHTML2-1.htm、HTML2-2.htmHTML2-2.htm和和HTML2-3.htmHTML2-3.htm。在浏览器中观察。在浏览器中观察该网页的结果。打开记事本程序，输入如下该网页的结果。打开记事本程序，输入如下HTMLHTML代码。将该代码。将该HTMLHTML文件以名字文件以名字HTML7-2.htmHTML7-2.htm保存在保存在“DRAWTDDRAWTD”目录下。目录下。 （2）开设横向窗口：横向开设三个窗口，各占）开设横向窗口：横向开设三个窗口，各占50%、30%和和20%，各窗口内，各窗口内分别加载分别加载HTM

50、L文件为文件为HTML2-1.htm、HTML2-2.htm和和HTML2-3.htm。在。在浏览器中观察该网页的结果。打开记事本程序，输入如下浏览器中观察该网页的结果。打开记事本程序，输入如下HTML代码。将该代码。将该HTML文件以名字文件以名字HTML7-3.htm保存在保存在“DRAWTD”目录下。目录下。 （3）同时开设横向和纵向窗口：纵向开设两个窗口，各占）同时开设横向和纵向窗口：纵向开设两个窗口，各占40%和和60%，上边，上边的窗口横向开设两个窗口，各占的窗口横向开设两个窗口，各占50%和和50%，下边的窗口横向开设两个窗口，下边的窗口横向开设两个窗口，各占各占40%和和60%