第第2章章 HTML简介简介2.1 HTML文件举例文件举例2.2 HTML文件的基本结构文件的基本结构2.3 HTML语法规则语法规则2.4 HTML常用标记常用标记2.5 HTML综合实例综合实例思考与练习思考与练习2.1 HTML文件举例文件举例【例【例2.1】用】用HTML制作一个简单的网页（图制作一个简单的网页（图2.1） 用任何文本编辑器（用任何文本编辑器（Windows的写字板、书写的写字板、书写器、器、Word等）输入下列文本。图等）输入下列文本。图2.1效果图效果图 EXAMPLE21.HTM秋夕秋夕杜牧杜牧银烛秋光冷画屏银烛秋光冷画屏轻罗小扇扑流萤轻罗小扇扑流萤天阶夜色凉如水天阶夜色凉如水卧看牵牛织女星卧看牵牛织女星 以纯文本格式存为以纯文本格式存为EXAMPLE21.HTM文件。文件。 打开浏览器，在地址栏中输入打开浏览器，在地址栏中输入E:网页制作网页制作examplesexample2-1.htm，就会看到如图就会看到如图2.1所所示的画面。其中示的画面。其中E:网页制作网页制作examples为文件为文件所在的路径，所在的路径，example2-1.htm为用为用HTML编写的网编写的网页文件名。页文件名。图图2.12.2 HTML文件的基本结构文件的基本结构HTML文件由标记、代码和注释组成。标记是文件由标记、代码和注释组成。标记是HTML中用来控制文字、图形等显示方式的符号。中用来控制文字、图形等显示方式的符号。例如：例如：秋夕秋夕是一个标记，表示以是一个标记，表示以7号蓝色字显示文字号蓝色字显示文字“秋夕秋夕”。其中。其中“”表示这是表示这是HTML的标记而的标记而非普通文本，非普通文本，FONT是标记，是标记，/FONT是结束标记，是结束标记，表示前面表示前面FONT标记的结束，标记的结束，size、和和Color是属是属性，性，7和和#0000FF分别是它们的值。分别是它们的值。HTML标记的标记的一般格式为：一般格式为：受影响的文本受影响的文本有的标记没有结束标记，称为单标有的标记没有结束标记，称为单标记。记。从例从例2.1看出，一个看出，一个HTML网页文件有如下的基本结网页文件有如下的基本结构。构。注释。文件中的注释用注释。文件中的注释用“！”标记，标记，“”表示注释结束，中间的所有内容表示表示注释结束，中间的所有内容表示注释，且可以换行，它们并不在浏览器中显示出来，注释，且可以换行，它们并不在浏览器中显示出来，仅为设计人员阅读方便。注释可以放在任何地方。仅为设计人员阅读方便。注释可以放在任何地方。HTML文件标记。文件标记。HTML文件以文件以开头，开头，结尾。虽然结尾。虽然HTML文件标记在语法上是可文件标记在语法上是可选的，但如果省略，有些浏览器浏览时可能会发生选的，但如果省略，有些浏览器浏览时可能会发生错误。因此，在每个文件中应加上该标记。错误。因此，在每个文件中应加上该标记。文件头部标记文件头部标记Head。和和之间的内容表之间的内容表示文件的头部信息，标记网页的标题、预定义变量示文件的头部信息，标记网页的标题、预定义变量等。其中常用的是等。其中常用的是Title标记，用来说明网页的标题，标记，用来说明网页的标题，和和之间的文字将显示在浏览器的标之间的文字将显示在浏览器的标题栏中，之中不能有其他标记。题栏中，之中不能有其他标记。Head标记和标记和Title标标记都是可选的，但建议不要省略。记都是可选的，但建议不要省略。文件主体用文件主体用和和标记。网页正文中的所标记。网页正文中的所有内容（包括相应的格式化标记）都包含在这个标有内容（包括相应的格式化标记）都包含在这个标记之间，包括文字、表格、图像、声音、动画，等记之间，包括文字、表格、图像、声音、动画，等等。等。2.3 HTML语法规则语法规则HTML语言遵循以下语法规则。语言遵循以下语法规则。HTML文件以纯文本形式存放，扩展名为文件以纯文本形式存放，扩展名为“*.htm”或或“*.html”。若系统为若系统为UNIX系统，扩展名必须为系统，扩展名必须为“*.html”。HTML标记不区分大小写，标记不区分大小写，和和是相同是相同的。的。多数多数HTML标记可以嵌套，但不可交叉。例如：标记可以嵌套，但不可交叉。例如：奥林匹克情奥林匹克情将不能正确显示。将不能正确显示。HTML文件一行可以写多个标记，一个标记也可以分多文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。例如：行书写，不用任何续行符号。例如：2001年年7月月13日，北京申奥成功日，北京申奥成功!和和 2001年年7月月13日，日，北京申奥成功！北京申奥成功！都是正确的，且显示效果相同，但都是正确的，且显示效果相同，但HTML标记中的一个单词不能分两行书写，如：标记中的一个单词不能分两行书写，如： 2001年年7月月13日，日，北京申奥成功！北京申奥成功！是不正确的。是不正确的。HTML源文件中的换行、回车符和多个连续空格在显示效源文件中的换行、回车符和多个连续空格在显示效果中是无效的。显示内容的换行用果中是无效的。显示内容的换行用 标记，换段用标记，换段用标记，标记，表示段落开始，表示段落开始，表示段落结束。如表示段落结束。如果源文件中有多个连续空格，显示时也只显示一个。若果源文件中有多个连续空格，显示时也只显示一个。若需要多个空格，可以使用多个需要多个空格，可以使用多个 。例如：例如：2008 北京奥运北京奥运与与2008北京奥运北京奥运的浏览器显示效果均为的浏览器显示效果均为2008 北京奥运北京奥运2008北京奥运北京奥运与与2008北京奥运北京奥运的浏览器显示效果均为的浏览器显示效果均为2008北京奥运北京奥运注意：注意： 在源文件中加换行符，虽然显示效果不换行，在源文件中加换行符，虽然显示效果不换行，但在原换行符处会加一个空格。但在原换行符处会加一个空格。网页中所有的显示内容都应受限于一个或多个标记，网页中所有的显示内容都应受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生不应有游离于标记之外的文字或图像等，以免产生错误。错误。2.4 HTML常用标记常用标记2.4.1 页面标记页面标记1. HTML文件标记功能：文件标记功能： 说明文件为说明文件为HTML文件。文件。格式：格式： 。说明：说明： 放在文件开头，放在文件开头，放在文件结放在文件结尾，中间可以加入其他标记和文字。它们都是可尾，中间可以加入其他标记和文字。它们都是可选标记，即可以省略任一个或全部省略，但不推选标记，即可以省略任一个或全部省略，但不推荐这么做。荐这么做。2. 文件头部标记文件头部标记功能：功能： 说明文件头部信息。说明文件头部信息。格式：格式： 。说明：说明：该标记出现在文件的起始部分，用来说明文件的有关该标记出现在文件的起始部分，用来说明文件的有关信息，如文件标题、搜索引擎可用的关键词以及信息，如文件标题、搜索引擎可用的关键词以及不属于网页内容的其他信息；不属于网页内容的其他信息；head标记的起始标记和结束标记都是可选的；标记的起始标记和结束标记都是可选的；在在head的起始标记和结束标记之间可以插入其他标记，的起始标记和结束标记之间可以插入其他标记，如如Title标记等。标记等。3. 网页标题标记网页标题标记功能：功能： 设置页面标题。设置页面标题。格式：格式： 网页标题网页标题。说明：说明： 网页标题是提示网页内容和功能的提示性文字，网页标题是提示网页内容和功能的提示性文字，它出现在浏览器的标题栏中，一个网页只能有一它出现在浏览器的标题栏中，一个网页只能有一个标题，并且应出现在文件的头部。个标题，并且应出现在文件的头部。4. 文件主体标记文件主体标记功能：功能： 设置文件主体。设置文件主体。格式：格式： 。属性：属性：background设置网页背景图像；设置网页背景图像；bgcolor设置网页背景颜色，默认为白色；设置网页背景颜色，默认为白色；text设置网页非可链接文字的色彩，默认为黑色；设置网页非可链接文字的色彩，默认为黑色；link设置网页可链接文字的色彩设置网页可链接文字的色彩 ，默认为蓝色；，默认为蓝色；alink设置网页正被单击的可链接文字的色彩，默认为设置网页正被单击的可链接文字的色彩，默认为蓝色；蓝色；vlink设置网页已经单击设置网页已经单击(访问访问)过的可链接文字的色彩，过的可链接文字的色彩，默认为蓝色；默认为蓝色；leftmargin设置页面左边空白；设置页面左边空白；topmargin设置页面上面空白；设置页面上面空白；imageURL图像文件的路径；图像文件的路径；color颜色值，可以是颜色代码，如：颜色值，可以是颜色代码，如：RED(红红)、GREEN（绿）、绿）、BLUE（蓝）、蓝）、YELLOW（黄）、黄）、WHITE（白）、白）、BLACK（黑）等。也可以是黑）等。也可以是#加加6位十六进制数，如位十六进制数，如#000000（黑）、（黑）、#0000FF（蓝）蓝）、#FFFFFF（白）、白）、#FF0000（红）等；红）等；value空白量，可以是数值，也可以是相对页面窗口宽度空白量，可以是数值，也可以是相对页面窗口宽度和高度的百分比。和高度的百分比。说明：说明：Body标记说明文件的主体，可以省略，中间可以插入其标记说明文件的主体，可以省略，中间可以插入其他标记和文字；他标记和文字；其属性可以省略，也可以有一个或多个；其属性可以省略，也可以有一个或多个；若使用网页背景图像属性，当图像小于浏览窗口时，浏览若使用网页背景图像属性，当图像小于浏览窗口时，浏览器将用背景图像的多个复制件铺满整个显示窗口。器将用背景图像的多个复制件铺满整个显示窗口。例如例如设置背景为绿色，普通设置背景为绿色，普通前景文本为白色（除非再用前景文本为白色（除非再用FONT标记说明）。标记说明）。将将images目录下的目录下的bgimage01.jpg图像文件设置为背景图像文件设置为背景图像。图像。5. 超链接标记超链接标记功能：功能： 建立超链接。建立超链接。格式：格式： 显示文显示文本或图像本或图像。href： 要链接到目标的要链接到目标的URL地址。地址。URL： 要链接到的网页、网站或电子邮件地址，可以是要链接到的网页、网站或电子邮件地址，可以是绝对地址，也可以是相对地址，如绝对地址，也可以是相对地址，如http:/www.tsinghua.edu.cn, research.htm，mailto:zhaoxjtu263.net等。等。target： 指出要显示超链接内容的窗口名，默认时在当前指出要显示超链接内容的窗口名，默认时在当前窗口中显示。窗口中显示。window|name： 显示超链接内容的窗口名，如果该窗口显示超链接内容的窗口名，如果该窗口不存在，则打开一个新窗口。不存在，则打开一个新窗口。说明：说明： 该标记建立超链接，标记中间可以嵌套其他标记，该标记建立超链接，标记中间可以嵌套其他标记，如图像标记如图像标记Image、文本格式标记文本格式标记Font等。当在浏览等。当在浏览器窗口中单击显示文本或图像时，将在指定窗口中显器窗口中单击显示文本或图像时，将在指定窗口中显示相应的内容。示相应的内容。例如例如清华大学清华大学单击单击“清华大学清华大学”，打开一个名为，打开一个名为“tsinghua”的新窗口，在其中显示清华大学的主页。的新窗口，在其中显示清华大学的主页。English Version单击单击“English Version”时，将在当前窗口显示当前目录时，将在当前窗口显示当前目录下下English.htm文件的内容。文件的内容。中国地图中国地图单击单击“中国地图中国地图”时，将在当前窗口显示时，将在当前窗口显示images目录下的目录下的chinamap.jpg图像。图像。联系我们联系我们单单击击“联系我们联系我们”时，将打开时，将打开outlook或其他电子邮件或其他电子邮件软件，收件人地址为软件，收件人地址为“xjtuzhaosina.com”， 就可就可以给作者写信了。以给作者写信了。6. 标尺线标尺线功能：功能： 在页面上画横线。在页面上画横线。格式：格式： 。属性：属性：width标尺线长度，标尺线长度，value1可以是点数，如可以是点数，如50、100、200等，窗口改变时，横线宽度不变，也可以是相对窗口等，窗口改变时，横线宽度不变，也可以是相对窗口的百分比，如的百分比，如50%、100%，默认是，默认是100%；size标尺线的高度，标尺线的高度，value2的值可以是绝对点数，也可以的值可以是绝对点数，也可以是（相对长度的）百分比，默认高度为是（相对长度的）百分比，默认高度为1；align在页面中的水平位置，在页面中的水平位置，value3的值可以是的值可以是left（居左）、居左）、right（居右）、居右）、 center（居中），默认是居中；居中），默认是居中；color标尺线的颜色，标尺线的颜色，color1为为#加加6位十六进制位十六进制 RGB 数码或者是下列预定义色彩，如数码或者是下列预定义色彩，如Black、Olive、Teal、Red、Blue、Maroon、Navy、Gray、Lime、Fuchsia、White、Green、Purple、Silver、Yellow、Aqua等。等。说明：说明： 当当size值较大时，可以产生长方形或正方形图值较大时，可以产生长方形或正方形图形。形。2.4.2 文字格式标记文字格式标记1. 标题格式标记标题格式标记Hn功能：功能： 用于定义文章内章节标题用于定义文章内章节标题的显示格式。的显示格式。格式：格式： 。属性：属性：n标题字号，可以是标题字号，可以是1，2，3，4，5，6，数字越小，数字越小，字号越大。字号越大。align水平对齐方式，取值为水平对齐方式，取值为left、right或或center。说明：说明： 用该标记实现文章标题的效果有限，通常用用该标记实现文章标题的效果有限，通常用FONT标记实现文章实际标题的丰富多彩效果。标记实现文章实际标题的丰富多彩效果。2. 文字格式标记文字格式标记功能：功能： 设置网页中普通文字的显示效果。设置网页中普通文字的显示效果。格式：格式： （文字）（文字）。属性：属性：face指定文字的字体，如指定文字的字体，如“楷体楷体_GB2312”表示楷体，表示楷体，“黑体黑体”表示黑体，表示黑体，“宋体宋体”表示宋体；表示宋体；size字号，表示文字的大小，其值为字号，表示文字的大小，其值为17的整数，值越大，的整数，值越大，字越大。若数字前面加上字越大。若数字前面加上“+”或或“-”号，则表示相号，则表示相对基准字号的大小，如基准字号为对基准字号的大小，如基准字号为3号，则号，则+3表示表示6号号字。基准字号用如下标记定义。字。基准字号用如下标记定义。其中其中“基准字号基准字号”也是也是17之间的整数；之间的整数；color是文字颜色，颜色值的选择同上。是文字颜色，颜色值的选择同上。注意：注意： 浏览器显示的字体与客户端安装的字体有关，如浏览器显示的字体与客户端安装的字体有关，如果网页文件中设置了客户端没有安装的字体，则以默果网页文件中设置了客户端没有安装的字体，则以默认的宋体字显示。因此，在使用字体时，应尽量使用认的宋体字显示。因此，在使用字体时，应尽量使用一般操作系统都会安装的宋体、黑体、楷体字。一般操作系统都会安装的宋体、黑体、楷体字。3. 字型设置标记字型设置标记功能：功能： 设置文字的风格，如黑体、斜体、带下划线等。设置文字的风格，如黑体、斜体、带下划线等。这是一组标记，各种标记的格式和具体功能列在表这是一组标记，各种标记的格式和具体功能列在表2.1中。中。注意：注意：不要频繁使用各种字型，太花里胡哨的网页反而不要频繁使用各种字型，太花里胡哨的网页反而会引起读者的反感；会引起读者的反感；一些浏览器不能正常显示黑体和斜体时会加上下一些浏览器不能正常显示黑体和斜体时会加上下划线或反向显示，甚至忽略；划线或反向显示，甚至忽略；可以将几种文字的效果混用，如可以将几种文字的效果混用，如 霜叶红于霜叶红于二月花二月花4. 段落标记段落标记功能：功能： 设置文章段落开始和结束。设置文章段落开始和结束。格式：格式： 。属性：属性： align是水平对齐方式，取值为是水平对齐方式，取值为left、right或或center。说明：说明： 一个段落的开始表示上一个段落的结束，所以一个段落的开始表示上一个段落的结束，所以段落的结束标记可以省略，如段落的结束标记可以省略，如霜叶红于二月霜叶红于二月花花 霜叶红于二月花霜叶红于二月花和和霜叶红于霜叶红于二月花二月花霜叶红于二月花霜叶红于二月花都是合法的，显都是合法的，显示效果一样。示效果一样。注意：注意： HTML中显示文字的换段不能通过源文件中中显示文字的换段不能通过源文件中的回车实现。的回车实现。5. 强制换行标记强制换行标记功能：功能： 另起一行显示文字。另起一行显示文字。格式：格式： 。说明：说明： 这是一个单标记，其实它与段落标记在显示效这是一个单标记，其实它与段落标记在显示效果上都是另起一行书写。它们的不同之处是，段果上都是另起一行书写。它们的不同之处是，段落标记的行距要宽。图落标记的行距要宽。图2.2是两种标记的不同显示是两种标记的不同显示效果。效果。图图2.2【例【例2.2】段落标记和强制换行标记（显示效果见图】段落标记和强制换行标记（显示效果见图2.2）段落和换行标记段落和换行标记下面是段落标记的显示效果下面是段落标记的显示效果<P> 下面是强制换行标记的显示效果下面是强制换行标记的显示效果<BR>段落结束段落结束6. 预排格式标记预排格式标记功能：功能： 保留文字在纯文本编辑器中的格式，原样显示，保留文字在纯文本编辑器中的格式，原样显示，不受前面的文字格式和段落格式的影响。不受前面的文字格式和段落格式的影响。格式：格式： (预排格式的文本预排格式的文本)。说明：说明： 若已用其他文本编辑器编好了一段文本，如果若已用其他文本编辑器编好了一段文本，如果把它放进网页文件，常常需要加许多标记才能达把它放进网页文件，常常需要加许多标记才能达到原来的显示效果。如果在文本开头加上到原来的显示效果。如果在文本开头加上，在末尾加上在末尾加上，那么中间就不用加其他标那么中间就不用加其他标记了，这时文本中间的回车换行符就起作用了。记了，这时文本中间的回车换行符就起作用了。7. 文本对齐方式标记文本对齐方式标记功能：功能： 设置多个段落的文本居中、居左，还是居右。设置多个段落的文本居中、居左，还是居右。格式：格式： (文本文本)。属性：属性： align是对齐方式，其值为是对齐方式，其值为center、left或或right。说明：说明：对齐格式可以在多个标记中实现，如对齐格式可以在多个标记中实现，如、等。等。如果多个段落有相同的对齐方式，则可以将这些如果多个段落有相同的对齐方式，则可以将这些段落嵌套进段落嵌套进、之中；之中；如果是多段居中，还可以使用如果是多段居中，还可以使用CENTER标记，格式为：标记，格式为：(多段文本多段文本)。2.4.3 列表标记列表标记分段排列出一组级别相同的项目称为列表。如果每段分段排列出一组级别相同的项目称为列表。如果每段前面加上一个序号，则称为有序列表；如果在每前面加上一个序号，则称为有序列表；如果在每段前面加上一个相同的符号，则称为无序列表。段前面加上一个相同的符号，则称为无序列表。1. 无序列表无序列表功能：功能： 设置无序列表。设置无序列表。格式：格式： 列列表项目表项目1列列表项目表项目2Li ty。属性：属性：Type 在每个项目前显示加重符号的类型，其值为在每个项目前显示加重符号的类型，其值为disc(实心圆实心圆)、circle（空心圆）和空心圆）和square（实心实心方块）。方块）。img src 以指定的图像为加重符号，其值为图像文件以指定的图像为加重符号，其值为图像文件的的URL地址。地址。说明：说明：和和是一组标记，不能单独使用，两个参数都是一组标记，不能单独使用，两个参数都可以默认；可以默认；每个列表项目的加重符号可以相同，也可以不同。每个列表项目的加重符号可以相同，也可以不同。标记中默认时，使用标记中默认时，使用中的加重符号；都中的加重符号；都默认时加重符号为实心圆。默认时加重符号为实心圆。2. 有续列表有续列表功能：功能： 设置有序列表。设置有序列表。格式：格式： 列表项目列表项目1列表项目列表项目2列表项目列表项目3。属性：属性： type在每个项目前显示的序号类型，其值为在每个项目前显示的序号类型，其值为1（阿拉伯数（阿拉伯数字）、字）、A（大写英文字母）、大写英文字母）、a（小写英文字母）、小写英文字母）、（大写罗马字母）、（大写罗马字母）、（小写罗马字母）；（小写罗马字母）；start开始序号。开始序号。说明：说明： 无序列表和有序列表可以嵌套，产生缩进无序列表和有序列表可以嵌套，产生缩进的、有层次的列表项目。的、有层次的列表项目。2.4.4 表格标记表格标记表格是将文本和图像按一定的行、列规则进行排表格是将文本和图像按一定的行、列规则进行排列，以便更好地表示长信息，有利于快速查找列，以便更好地表示长信息，有利于快速查找信息。表格的格子称为单元格。信息。表格的格子称为单元格。表格的基本结构表格的基本结构功能：功能： 建立基本的表格。建立基本的表格。格式：格式：表题（表格说明表题（表格说明表头表头1表头表头2表头表头n表项表项1表项表项2表项表项n表项表项1表项表项2表项表项n。属性：属性：表格说明。该标记可以省略；表格说明。该标记可以省略；summary对表格格式或内容的简要说明，它并不对表格格式或内容的简要说明，它并不在网页上显示，相当于表格的注释；在网页上显示，相当于表格的注释；bgcolor表格的背景颜色，取值同表格的背景颜色，取值同Body标记中的颜标记中的颜色属性；色属性；background表格的背景图像，取值为图像的表格的背景图像，取值为图像的URL地址；地址；border指出表格线的宽度（粗细），指出表格线的宽度（粗细），n取整数，单取整数，单位为像素数，位为像素数，n=0表示无线；表示无线；bordercolor表格线的颜色，取值同上；表格线的颜色，取值同上；width表格宽度，取值为点数或相对于窗口的百分比；表格宽度，取值为点数或相对于窗口的百分比；heigth表格高度，取值为点数或相对于宽度的百分比；表格高度，取值为点数或相对于宽度的百分比；align表格在页面中的相对位置，取值为表格在页面中的相对位置，取值为left、right或或center，分别表示居左、居右或居中；分别表示居左、居右或居中；表格的标题说明，如表格的标题说明，如“美俄美俄军事力量对比表军事力量对比表”等；等；align标题相对表格的位置，取值为标题相对表格的位置，取值为left、right、center、top、bottom分别表示表格上部左边、表格上部右边、分别表示表格上部左边、表格上部右边、表格上部居中、表格上面、表格底部；表格上部居中、表格上面、表格底部； 定义行，该标记中间的内容显示在一行；定义行，该标记中间的内容显示在一行；定义表格表头的一列，如定义表格表头的一列，如“美俄军事力量美俄军事力量对比表对比表”的的“军队数量军队数量”、“航空母舰数量航空母舰数量”、“远远程导弹数量程导弹数量”、“核武器数量核武器数量”等，表头的每一列需等，表头的每一列需用一个用一个标记，内容显示加黑；标记，内容显示加黑；定义表格内容的一列。与定义表格内容的一列。与的区别是的区别是内容不加黑显示。内容不加黑显示。说明：说明：中的中的bgcolor、background、align、heigth、width等属性可以放在等属性可以放在Td标记中，作为单元格的属性；标记中，作为单元格的属性；一行的开始表示前一行的结束，一列的开始表示前一列的一行的开始表示前一行的结束，一列的开始表示前一列的结束，所以结束，所以、均可以作单标记使用；均可以作单标记使用；标记可以用于每行的第一列，设置行标题；标记可以用于每行的第一列，设置行标题；、标记之间可以嵌套其他格式化标记之间可以嵌套其他格式化标记，如标记，如、等；等；单元格内容可以是文字，也可以是图像；单元格内容可以是文字，也可以是图像；表格可以嵌套，表格嵌套可以产生复杂表格，也可以使用表格可以嵌套，表格嵌套可以产生复杂表格，也可以使用、中的其他属性实现单元格的合并，中的其他属性实现单元格的合并，属性属性Rowspan=n表示将表示将n行作为一行，属性行作为一行，属性Colspan=n 表示将表示将n列作为一列。列作为一列。【例【例2.3】表格】表格浏览效果如图浏览效果如图2.3所示。所示。表格示例表格示例XXX公司上半年销售量统公司上半年销售量统计表计表   第一季度第一季度第二季度第二季度  一月一月二月二月三月三月四月四月五月五月六月六月 东北地区东北地区哈尔滨哈尔滨10080909295100 长春长春90 70 95 84 90 90 沈阳沈阳110 90 80100 80 100 华北地区华北地区北京北京120 90 7080 90 110 天津天津90 80 7588 94 86 石家庄石家庄80 60 8090 80 902.4.5 图像和多媒体标记图像和多媒体标记1. 图像标记图像标记功能：功能： 在当前位置插入图像。在当前位置插入图像。格式：格式： 。属性：属性： 图图2.3src用来说明要加入图像文件的用来说明要加入图像文件的URL地址，通常图地址，通常图像格式为像格式为gif或或jpg；alt作为图像的文本替代说明，当图像无法显示时，作为图像的文本替代说明，当图像无法显示时，显示显示“简单说明简单说明”；longdesc关于图像的详细说明；关于图像的详细说明；width图像的宽度，可以为点数或相对窗口宽度的图像的宽度，可以为点数或相对窗口宽度的百分比；百分比；height图像的高度，可以为点数或相对窗口高度的图像的高度，可以为点数或相对窗口高度的百分比；百分比；border图像外围边框宽度，其值为非负整数；图像外围边框宽度，其值为非负整数；hspace水平方向空白（图像左右留多少空白）；水平方向空白（图像左右留多少空白）；vspace竖直方向空白（图像上下留多少空白）；竖直方向空白（图像上下留多少空白）；align在页面中的位置，在页面中的位置，left、right或或center。说明：说明： 图像的宽度和高度指图像显示时的大小，与图图像的宽度和高度指图像显示时的大小，与图像的真实大小无关。像的真实大小无关。2. 背景音乐标记背景音乐标记功能：功能： 在网页中加入声音，声音文件格式为在网页中加入声音，声音文件格式为*.wav、*.au或或*.mid。格式：格式： 。属性：属性： src指明声音文件的指明声音文件的URL地址，地址，loop控制播放控制播放次数，取次数，取-1或或INFINITE时，声音将一直播放到浏时，声音将一直播放到浏览者离开该网页为止。览者离开该网页为止。3. 视频标记视频标记功能：功能： 在网页中加入视频信息，格式为在网页中加入视频信息，格式为*.AVI。格式：格式： 。属性：属性：src指向一幅静态图像的指向一幅静态图像的URL地址，在未载入地址，在未载入.AVI文文件时，先在件时，先在.AVI的播放区域显示该图像；的播放区域显示该图像；dynsrc用来指明视频文件存放的路径和文件名；用来指明视频文件存放的路径和文件名；loop指明视频文件播放的次数，如果其值为指明视频文件播放的次数，如果其值为INFINITE则反复播放直到浏览者离开该网页；则反复播放直到浏览者离开该网页；loopdelay指明两次播放的间隔时间，单位是毫秒；指明两次播放的间隔时间，单位是毫秒；start指定何时开始播放视频文件，它的两个属性值为指定何时开始播放视频文件，它的两个属性值为fileopen 和和mouseover，fileopen是在链接到含本标记是在链接到含本标记的页面时开始播放，的页面时开始播放，mouseover是将鼠标移动到是将鼠标移动到.AVI播放区时才开始播放，默认值为播放区时才开始播放，默认值为fileopen。另外，当另外，当鼠标在鼠标在AVI播放区单击时，也可使浏览器开始播放；播放区单击时，也可使浏览器开始播放；controls在视频窗口下附加在视频窗口下附加 MS-WINDOWS 的的 AVI 文件文件播放控制条；播放控制条；此外，还有此外，还有IMG的常见属性，如的常见属性，如width，height，align等等也可以使用。也可以使用。2.4.6 超链接标记超链接标记超链接是网页制作中最关键的内容。超链接把页面一个个超链接是网页制作中最关键的内容。超链接把页面一个个链接起来，使得网页的浏览非常方便。具有超链接的链接起来，使得网页的浏览非常方便。具有超链接的文本、图像、表格、多媒体称为热点或锚点。文本、图像、表格、多媒体称为热点或锚点。功能：功能： 在页面中加入超链接。在页面中加入超链接。格式：格式： 热点文本或图像热点文本或图像。属性：属性： href指向欲链接到的网页地址，可以是绝对地指向欲链接到的网页地址，可以是绝对地址、相对地址或页内书签。址、相对地址或页内书签。说明：说明： “热点文本或图像热点文本或图像”指在页面上显示的文本或指在页面上显示的文本或图像，当鼠标指向该文本或图像时，鼠标光点变图像，当鼠标指向该文本或图像时，鼠标光点变成小手形状，单击该文本或图像就会链接到（显成小手形状，单击该文本或图像就会链接到（显示）示）URL指向的网页。指向的网页。例如：例如：清华大学清华大学是绝对地址链接，链接到清华大学主页。是绝对地址链接，链接到清华大学主页。清华大学清华大学是绝对地址链接，链接到清华大学网是绝对地址链接，链接到清华大学网站站research目录下的目录下的index.htm页面。页面。清华大学清华大学是相对地址链接，是相对地址链接，链接当前目录下的链接当前目录下的English.htm页面。页面。清华大学清华大学是相对地址是相对地址链接，链接链接，链接research目录下的目录下的index.htm页面。页面。是图像超链接，单击是图像超链接，单击images目录下目录下tsinghua.gif显示的图像时，链接到清华显示的图像时，链接到清华大学主页。大学主页。2.5 HTML综合实例综合实例【例【例2.4】HTML网页制作实例源文件网页制作实例源文件(见书第见书第19页页)注意：注意：本例中使用了表格，但它的内容并不是通常放数据本例中使用了表格，但它的内容并不是通常放数据的表格，而是利用表格将区域分成块来布局页面；的表格，而是利用表格将区域分成块来布局页面；本例中使用的图像和字体，如计算机中没有，可以本例中使用的图像和字体，如计算机中没有，可以换为其他图像和字体。换为其他图像和字体。图图2.4思考与练习思考与练习1 什么是什么是HTML标记？标记？2 HTML文件的基本结构是什么？它的文件扩展文件的基本结构是什么？它的文件扩展 名是什么？名是什么？3 对于一个基本的网页，一般应用哪些标记对于一个基本的网页，一般应用哪些标记?4 仿照例仿照例2.4，编写一个，编写一个HTML网页文件。网页文件。