《网页设计与制作第二版》网页制作基础——HTML

1、? ?网页设计与制作第二网页设计与制作第二版版? ?第第6 6章网页制作根章网页制作根底底HTMLHTML2022-4-14?网页设计与制作第二版?26.1 HTML根本知识根本知识 6.1.1 HTML6.1.1 HTML简介简介 HTMLHTMLHyper Text Markup LanguageHyper Text Markup Language是建立发表联机文档是建立发表联机文档采用的语言，称为超文本标识语言。采用的语言，称为超文本标识语言。所谓超文本，是指可以参加图片、声音、动画、影视等内容，所谓超文本，是指可以参加图片、声音、动画、影视等内容，可以从一个文件跳转到另一个文件，与世界

2、各地主机的文可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。件连接。HTMLHTML文档也称为文档也称为WebWeb文档，它由文本、图形、声音和超链接文档，它由文本、图形、声音和超链接组成。组成。每个每个HTMLHTML文档称为一个文档称为一个WebWeb页面，页面是浏览器中看到的内页面，页面是浏览器中看到的内容。容。InternetInternet上的上的WebWeb站点一般由多个页面组成，可以通过超链站点一般由多个页面组成，可以通过超链接在页面间切换。所有的页面均放在作为效劳器的计算机接在页面间切换。所有的页面均放在作为效劳器的计算机上，它向任何发出请求的计算机提供指定页面。上，

3、它向任何发出请求的计算机提供指定页面。HTMLHTML文档的本质是一种程序，建立一个文档的本质是一种程序，建立一个HTMLHTML文档，实际进行文档，实际进行的工作就是编写的工作就是编写HTMLHTML命令代码，或者说命令代码，或者说“编程。编程。 2022-4-14?网页设计与制作第二版?5v 标记标记和和里面包含了整个文档。里面包含了整个文档。 v 头标记头标记指定文档初始信息，如标题、脚本。任何指定文档初始信息，如标题、脚本。任何HTMLHTML文档的页文档的页头局部都应为于头局部都应为于WebWeb页的主信息之前。起始标记页的主信息之前。起始标记和结束标记和结束标记把页头局部的内容封闭

4、在其中。把页头局部的内容封闭在其中。和和标记之间包标记之间包含的文字是关于文件的一些常规信息，并且不会作为文档文字本身的含的文字是关于文件的一些常规信息，并且不会作为文档文字本身的一局部显示出来。一局部显示出来。v HeadHead标记可以包含任意数量的标记可以包含任意数量的6 6种可能的命令种可能的命令v 和和是成对标记，描述文档的标题，字符数不能大于是成对标记，描述文档的标题，字符数不能大于6060个。个。v 是单标记，说明标记后是索引文档，其文档在浏览时可用是单标记，说明标记后是索引文档，其文档在浏览时可用关键字检索。关键字检索。v 是单标记，显示文档的原始是单标记，显示文档的原始URL

5、URL。v 是单标记，后续元素标记，建立唯一的文档标识。是单标记，后续元素标记，建立唯一的文档标识。v 是单标记，链接元素标记，显示与其他文档的关系。是单标记，链接元素标记，显示与其他文档的关系。v 是单标记，嵌入异于其他元素的信息。是单标记，嵌入异于其他元素的信息。v 其中，只有其中，只有titletitle标记是必需的，其余局部可选。标记是必需的，其余局部可选。 2022-4-14?网页设计与制作第二版?6v一个一个WebWeb页的主体是用户在浏览时实际看到的文档页的主体是用户在浏览时实际看到的文档正文信息。它可大可小，但是对主体的设置必须正文信息。它可大可小，但是对主体的设置必须正确无误

6、。所有正确无误。所有WWWWWW文档的主体局部都是由文档的主体局部都是由标记定义的。它有一个起始标记标记定义的。它有一个起始标记用于显示用于显示信息起始的位置，一个结束标记信息起始的位置，一个结束标记用于指出用于指出数据终止的地方。在主体内部，可以存在文字、数据终止的地方。在主体内部，可以存在文字、超链接、标题、图形、图像、地图、表格以及用超链接、标题、图形、图像、地图、表格以及用户实际看到的任何东西。户实际看到的任何东西。 v标记可以包含标记，如表格中包含表格或标记，标记可以包含标记，如表格中包含表格或标记，但是标记不能交叉嵌套。但是标记不能交叉嵌套。2022-4-14?网页设计与制作第二版

7、?7v下面的下面的HTMLHTML代码结构是正确的：代码结构是正确的：table width=50% border=10 cellspacing=10 cellpadding=10table width=100% border=1 cellspacing=1 cellpadding=1 hjk hjk v如下面这样的代码是错误的：如下面这样的代码是错误的： 2022-4-14?网页设计与制作第二版?82 2特殊字符特殊字符 在在HTMLHTML文件中，有些符号是代表特定的意义的。所以当要使文件中，有些符号是代表特定的意义的。所以当要使用这些特殊符号时，就要用替代指令。用这些特殊符号时，就要用替

8、代指令。 一般来说，在一般来说，在HTMLHTML中，一个特殊字符有两种表达方式，一种中，一个特殊字符有两种表达方式，一种称作数字参考，一种称作实体参考。称作数字参考，一种称作实体参考。所谓数字参考，就是用数字来表示文档中的特殊字符，通常所谓数字参考，就是用数字来表示文档中的特殊字符，通常由前缀由前缀“&#“&#，加上数值，再加上后缀，加上数值，再加上后缀“;“;而组成，它而组成，它可以采用如下方式：可以采用如下方式：&#D;.&#D;.其中其中D D是一个十进制数值。是一个十进制数值。下面是一些特殊字符的数字参考例如。下面是一些特殊字符的数字参考例如。&

9、;#169; © 对应于特殊字符对应于特殊字符“® ® 对应于特殊字符对应于特殊字符“所谓实体参考，实际上就是用有意义的名称来表示特殊字符，所谓实体参考，实际上就是用有意义的名称来表示特殊字符，通常由前缀通常由前缀“&“&，加上字符对应的名称，再加上后缀，加上字符对应的名称，再加上后缀“;“;而组成，其表达方式如下：而组成，其表达方式如下：&name;&name;其中其中namename是一个用于表示字符的名称，它是区分大小写的。是一个用于表示字符的名称，它是区分大小写的。例如，可以使用例如，可以使用“&am

10、p;copy;“©来表示版权符号来表示版权符号“，用，用“®“®来表示注册商标符号来表示注册商标符号“，这比数字要容易记，这比数字要容易记忆得多。忆得多。2022-4-14?网页设计与制作第二版?9p但不是所有的浏览器都能够正确认出采用实体参考方式但不是所有的浏览器都能够正确认出采用实体参考方式的特殊字符，但是它们都能够识别出采用数字参考方式的特殊字符，但是它们都能够识别出采用数字参考方式的特殊字符，如果可能，对于一些特别不常见的字符，的特殊字符，如果可能，对于一些特别不常见的字符，应该使用数字参考方式。应该使用数字参考方式。p对于那些常见的特

11、殊字符，使用其实体参考方式是平安对于那些常见的特殊字符，使用其实体参考方式是平安的，在实际应用中，只要记住这些常用特殊字符的实体的，在实际应用中，只要记住这些常用特殊字符的实体参考就足够使用了。参考就足够使用了。 2022-4-14?网页设计与制作第二版?103 3语法语法 一个标记，为了明确它的功能，往往用一些属性参数来描述，一个标记，为了明确它的功能，往往用一些属性参数来描述，对这些属性参数的规定就是语法。对这些属性参数的规定就是语法。标记参数的具体值都要加西文引号。标记参数的具体值都要加西文引号。例如，要使段落内容居中，正确的写法为：例如，要使段落内容居中，正确的写法为：段落内容居中例如

12、段落内容居中例如单标记单标记单标记能完整地表达意思，这类标记的语法是：单标记能完整地表达意思，这类标记的语法是： 最常用的单标签是最常用的单标签是，它表示换行。，它表示换行。 双标记双标记双标记由双标记由“始标记和始标记和“尾标记两局部构成，尾标记两局部构成，必须成对使用，其中始标记告诉必须成对使用，其中始标记告诉WebWeb浏览器从此处开始执浏览器从此处开始执行该标记所表示的功能，而尾标记告诉行该标记所表示的功能，而尾标记告诉WebWeb浏览器在这里浏览器在这里结束该功能。始标记前加一个斜杠结束该功能。始标记前加一个斜杠/ /即成为尾标记。即成为尾标记。这类标记的语法是：这类标记的语法是：

13、内容内容/ 2022-4-14?网页设计与制作第二版?11p其中，其中，“内容局部就是要被这对标记施加作用的局部。内容局部就是要被这对标记施加作用的局部。p例如想突出对某段文字的显示，就将此段文字放在一例如想突出对某段文字的显示，就将此段文字放在一 标记中。标记中。p第一：第一：p标记属性标记属性许多单标记和双标记的始标记内可以包含许多单标记和双标记的始标记内可以包含一些属性，其语法是：一些属性，其语法是：p 2022-4-14?网页设计与制作第二版?126.2 文文 本本 标标 记记 6.2.1 6.2.1 文字的颜色、字体、大小标记文字的颜色、字体、大小标记1 1设定设定HTMLHTML文

14、件文字颜色文件文字颜色 标记标记颜色值可以是一个十六进制数用颜色值可以是一个十六进制数用“#“#作为前缀，也可作为前缀，也可以是以下以是以下1616种颜色名称。种颜色名称。Black=#000000Black=#000000Green=#008000Green=#008000Silver=#C0C0C0Silver=#C0C0C0Lime=#00FF00Lime=#00FF00Gray=#808080Gray=#808080Olive=#808000Olive=#808000White= #FFFFFFWhite= #FFFFFFYellow=#FFFF00Yellow=#FFFF00Maro

15、onMaroon= #800000= #800000NavyNavy= #000080= #000080RedRed= #FF0000= #FF0000BlueBlue= #0000FF= #0000FFPurplePurple= #800080= #800080TealTeal= #008080= #008080FuchsiaFuchsia= #FF00FF= #FF00FF AquaAqua= #00FFFF= #00FFFF例如例如或或body text=“#FF0000 2022-4-14?网页设计与制作第二版?132 2设定设定HTMLHTML文件文字字体文件文字字体标记。标记。fo

16、nt face= HTML HTML提供了以下一些标签。提供了以下一些标签。 ：粗体字。例如：粗体字。例如：粗体字粗体字。 ：斜体字。例如：斜体字。例如：斜体字斜体字。 ：加底线。例如：加底线。例如：加底线加底线。 ：加横线表示删除。例如：加横线表示删除。例如：横横线线。 ：打字体固定宽度文字。例如：打字体固定宽度文字。例如：打字体打字体。 ：上标字。例如：字体：上标字。例如：字体上标字上标字。 ：下标字。例如：字体：下标字。例如：字体下标字下标字。 2022-4-14?网页设计与制作第二版?143 3设定设定HTMLHTML文件文字大小文件文字大小 设置字号大小的是设置字号大小的是fontf

17、ont标记，标记，fontfont标记有一个属性标记有一个属性sizesize，通，通过指定过指定sizesize属性就能设置字号大小，而属性就能设置字号大小，而sizesize属性的有效值属性的有效值范围为范围为1 17 7，其中缺省值为，其中缺省值为3 3。我们可以在我们可以在sizesize属性值之前加上属性值之前加上“、“字符，来指字符，来指定相对于字号初始值的增量或减量。定相对于字号初始值的增量或减量。 ：设定根本字体，：设定根本字体，size=1size=17 7，1 1最小，最小，7 7最大。最大。 例如：例如：根本字体大小为根本字体大小为44 ：根本字体加大。：根本字体加大。例

18、如：例如：根本字体大小为根本字体大小为4 4，加大为加大为55 ：根本字体减小。：根本字体减小。例如：例如：根本字体大小为根本字体大小为4 4，减小为减小为3 3 2022-4-14?网页设计与制作第二版?154 4本卷须知本卷须知 1 1定字体的大小区分。绝对定字体的大小区分。绝对sizesize，例如，例如，font size=4；相对；相对sizesize，例如，例如，是是以以basefontbasefont设定的字体大小做加减的。设定的字体大小做加减的。 2 2设定字体的颜色可以是颜色名称或设定字体的颜色可以是颜色名称或#RRGGBB#RRGGBB表表红绿蓝强度红绿蓝强度0000暗暗F

19、FFF亮。亮。 3 3设定字体的字型会按照顺序找出显示的字型，设定字体的字型会按照顺序找出显示的字型，假设找不到那么以系统预设字型显示。假设找不到那么以系统预设字型显示。例如：例如：font face=“Arialwelcomecolor=redwelcome设置字符串设置字符串“welcome“welcome为红色为红色5 5号号ArialArial字体，如字体，如果客户机上没有果客户机上没有ArialArial字体，那么浏览器改用字体，那么浏览器改用SansSans字体显示。字体显示。 2022-4-14?网页设计与制作第二版?166.2.2 6.2.2 标题、段落标记标题、段落标记 n

20、HTMLHTML中也提供了相应的标题标记中也提供了相应的标题标记h,其中其中n n为标题的等级数，为标题的等级数，HTMLHTML总共提供总共提供1 16 6六个等级的标题，六个等级的标题，n n越小，标题字号就越大。越小，标题字号就越大。第第1级标题级标题第第2级标题级标题 第第6级标题级标题 n 在编辑在编辑HTMLHTML文本时，按下文本时，按下EnterEnter键，浏览器上并不会形成段落。要键，浏览器上并不会形成段落。要形成段落必须显式地告诉浏览器插入回车符。形成段落必须显式地告诉浏览器插入回车符。n 段落格式采用单个标记而没有结束标记，因为一个段落格式采用单个标记而没有结束标记，因

21、为一个的开始就意的开始就意味着上一个味着上一个的结束。的结束。产生回车，产生回车，产生回车和一个空行。产生回车和一个空行。标签还有一个属性标签还有一个属性alignalign，它用来指明字符显示时的对齐方式，它用来指明字符显示时的对齐方式，一般值有一般值有centercenter，leftleft和和right 3right 3种。种。 2022-4-14?网页设计与制作第二版?17例：例：段落段落唐诗唐诗明月出天山，明月出天山，沧茫云沧茫云海间。海间。 2022-4-14?网页设计与制作第二版?186.3 表表 格格 标标 记记 6.3.1 6.3.1 表格的根本结构表格的根本结构 定义表格

22、定义表格 定义标题定义标题 定义表行定义表行 定义表头定义表头 定义表元定义表元( (表格的具体数据表格的具体数据) ) 例：例：姓名姓名性别性别年龄年龄李好李好女女1818 2022-4-14?网页设计与制作第二版?196.3.2 6.3.2 表格的标题表格的标题 表格标题的位置可由表格标题的位置可由alignalign属性来设置，其位置分为表格属性来设置，其位置分为表格上方和表格下方。上方和表格下方。 n 设置标题位于表格上方：设置标题位于表格上方：n 设置标题位于表格下方：设置标题位于表格下方：例：标题位于表格上方。例：标题位于表格上方。英语课程表英语课程表 星期星期一一二二三三 教室教

23、室多媒体多媒体语言室语言室大教室大教室 2022-4-14?网页设计与制作第二版?206.3.3 6.3.3 表格尺寸设置表格尺寸设置 1 1表格的大小表格的大小 一般情况下，表格的总长度和总宽度是根据各行和一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果要直接固定表格的各列的总和自动调整的，如果要直接固定表格的大小，可以使用方式：大小，可以使用方式： width width和和heightheight属性分别指定表格一个固定的宽度属性分别指定表格一个固定的宽度和长度，和长度，n1n1和和n2n2可以用像素来表示，也可以用百可以用像素来表示，也可以用百分比与整个屏幕相比的

24、大小比例来表示。分比与整个屏幕相比的大小比例来表示。例如，例如，是一个长为是一个长为200200像素，宽为像素，宽为100100像素的表格。像素的表格。 2022-4-14?网页设计与制作第二版?212 2边框尺寸设置边框尺寸设置 例：例： 成绩单成绩单英语英语数学数学体育体育100分分95分分80分分 3 3格间线宽度格间线宽度 格与格之间的线为格间线，它的宽度可以使用格与格之间的线为格间线，它的宽度可以使用标记中的标记中的cellspacingcellspacing属性加以调节。格式为：属性加以调节。格式为：#表示要取用的像素值。表示要取用的像素值。例：例： 成绩单成绩单英语英语数学数学体

25、育体育100分分95分分80分分 2022-4-14?网页设计与制作第二版?224 4内容与格线之间的宽度内容与格线之间的宽度 我们还可以在我们还可以在标记中设置标记中设置cellpaddingcellpadding属性，用来规定内容属性，用来规定内容与格线之间的宽度。格式为：与格线之间的宽度。格式为：#表示要取用的像素值。表示要取用的像素值。例：例：成绩单成绩单英语英语数学数学体育体育100分分95分分80分分 2022-4-14?网页设计与制作第二版?236.3.4 6.3.4 表格内文字的对齐表格内文字的对齐/ /布局布局 表格中数据的排列方式有两种，分别是左右排列和表格中数据的排列方式

26、有两种，分别是左右排列和上下排列。上下排列。左右排列是以左右排列是以alignalign属性来设置，而上下排列那么属性来设置，而上下排列那么由由valignvalign属性来设置。属性来设置。其中左右排列的位置可分为其中左右排列的位置可分为3 3种：居左种：居左leftleft、居右居右rightright和居中和居中centercenter；上下排列根本上比较常用的位置有上下排列根本上比较常用的位置有4 4种：上齐种：上齐toptop、居中、居中middlemiddle、下齐、下齐bottombottom和基和基线线baselinebaseline。 #=left, center, righ

27、t #=left, center, right #=top#=top，middlemiddle，bottombottom，baseline baseline 2022-4-14?网页设计与制作第二版?241 1左右排列左右排列 左边左边中间中间右边右边 A B C 2 2上下排列上下排列 上对齐上对齐居中居中 下对齐下对齐基线基线 A B 2022-4-14?网页设计与制作第二版?256.3.5 6.3.5 表格的颜色表格的颜色n 在表格中，既可以对整个表格填入底色，也可以对任何一行、一在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。个表元使用背景色。表格的背景色彩表

28、格的背景色彩 行的背景色彩行的背景色彩 表元的背景色彩表元的背景色彩或或 例：例：衣服衣服 花朵花朵 AB 2022-4-14?网页设计与制作第二版?26例如，加强型增加背景颜色、表格标题、栏标题、例如，加强型增加背景颜色、表格标题、栏标题、跨栏宽和跨栏高。跨栏宽和跨栏高。标题标题行行 1 1 行行 2 2列列 1 A A A A 1 A A A AB B B BB B B B列列 2 C C C C 2 C C C CD D D DD D D D 2022-4-14?网页设计与制作第二版?276.4 超文本标记超文本标记 6.4.1 6.4.1 图像标记图像标记插入图像的标记是插入图像的标记

29、是，其根本语法结构如下：，其根本语法结构如下：img start=type 2022-4-14?网页设计与制作第二版?28n alignalign：指定图像的位置是靠左、靠右、居中、靠上或者是靠底。：指定图像的位置是靠左、靠右、居中、靠上或者是靠底。默认情况是靠上，即默认情况是靠上，即alignaligntoptop。 n classclass和和idid：分别指定图像所属的类型和图像的：分别指定图像所属的类型和图像的idid号。号。n namename：设定图像的名称。：设定图像的名称。n srcsrc：规定插入的图像的：规定插入的图像的URLURL地址，也就是含路径的图像文件名。地址，也就

30、是含路径的图像文件名。n titletitle：设定图像的标题。：设定图像的标题。n altalt：表示图像的替代字，主要用于在浏览器还没有装入图像或：表示图像的替代字，主要用于在浏览器还没有装入图像或关闭图像显示的时候，先显示有关此图像的信息。关闭图像显示的时候，先显示有关此图像的信息。 n borderborder：设定图片的边框。：设定图片的边框。n heightheight和和widthwidth：分别用于指定图像的高度和宽度，可以与图片原：分别用于指定图像的高度和宽度，可以与图片原来的宽度和高度不同。来的宽度和高度不同。n hspacehspace和和vspacevspace：分别用

31、于设定图像的左右边框大小和上下边框：分别用于设定图像的左右边框大小和上下边框大小，在图文混排时会用到。大小，在图文混排时会用到。n ismapismap和和usemapusemap：在应用图像地图时使用。：在应用图像地图时使用。ismapismap表示图像地图的表示图像地图的数据存放在效劳器中，当鼠标在图像上的某个区域上时，可以将数据存放在效劳器中，当鼠标在图像上的某个区域上时，可以将此区域的坐标传送给效劳器处理。此区域的坐标传送给效劳器处理。usemapusemap那么用于设定图像地图那么用于设定图像地图的名称。的名称。 2022-4-14?网页设计与制作第二版?29nOnloadOnloa

32、d，onabortonabort和和onerroronerror对应于设定的子程序，分对应于设定的子程序，分别用在图像被载入、取消载入和载入出错的情况下各别用在图像被载入、取消载入和载入出错的情况下各自对应的子程序。自对应的子程序。ndynsrcdynsrc：指定要下载的影像片断的：指定要下载的影像片断的URLURL地址。地址。ncontrolscontrols：设定影像播放的控制接钮。：设定影像播放的控制接钮。nlooploop：指定影像片断的播放次数，当：指定影像片断的播放次数，当loop=loop=1 1时，影像时，影像片断将循环播放直至页面更新。片断将循环播放直至页面更新。 nstar

33、tstart：设定何时开始播放影像片断，有：设定何时开始播放影像片断，有3 3种选择，种选择，start=fileopenstart=fileopen表示页面载入后即开始播放，默认的表示页面载入后即开始播放，默认的就是这种状态；就是这种状态；start=mouseoverstart=mouseover表示当鼠标移到影像表示当鼠标移到影像上即开始播放；上即开始播放；start=fileopen,mouseoverstart=fileopen,mouseover表示当有表示当有上面两种情况之一发生时就开始播放。上面两种情况之一发生时就开始播放。 2022-4-14?网页设计与制作第二版?306.4

34、.2 6.4.2 图像标记应用技巧图像标记应用技巧 1 1给图片加边框给图片加边框 边框的颜色默认的是黑色，不美观，而边框的颜色默认的是黑色，不美观，而标记标记也没有设置边框颜色的参数，我们可以通过设置也没有设置边框颜色的参数，我们可以通过设置classclass参数调用参数调用CSSCSS到达改变边框颜色的目的。到达改变边框颜色的目的。2 2给图片加动态说明和替代文字给图片加动态说明和替代文字假设想制作当鼠标移到图片上出现一行简短说明文假设想制作当鼠标移到图片上出现一行简短说明文字的效果，不必去使用图层技术特殊效果的说字的效果，不必去使用图层技术特殊效果的说明除外，设定明除外，设定title

35、title参数即可。参数即可。2022-4-14?网页设计与制作第二版?313 3图像与文字混排图像与文字混排 图文混排主要是设置图文混排主要是设置alignalign参数。参数。1 1toptop，middlemiddle，centercenter和和bottombottom所产生的效果只是一行文字，所产生的效果只是一行文字，在多行文本与图像对齐时要用在多行文本与图像对齐时要用leftleft和和rightright参数值。参数值。 2 2中的对齐参数中的对齐参数alignalign所产生的效果是指图片与周围文字的所产生的效果是指图片与周围文字的位置关系，而图片在页面中的位置对齐是在图片所在

36、的页面元素位置关系，而图片在页面中的位置对齐是在图片所在的页面元素中设置的。例如下面这段代码：中设置的。例如下面这段代码：img src=image/yks2.jpg width=59 class=style1图文混排例如图文混排例如其中，标记其中，标记中的中的align=leftalign=left表示图片的位置在窗口的左端；而表示图片的位置在窗口的左端；而中的中的align=topalign=top那么表示图片旁边的文字与图片的顶端对那么表示图片旁边的文字与图片的顶端对齐。齐。3 3为了防止图片与旁边文字靠得太近不便阅读，可以通过设置为了防止图片与旁边文字靠得太近不便阅读，可以通过设置hs

37、pacehspace参数来控制图片与文字间的距离，一般设置参数来控制图片与文字间的距离，一般设置hspace=10hspace=10表示图片的左右有表示图片的左右有1010个像素的空白就能到达较好的效果。个像素的空白就能到达较好的效果。 2022-4-14?网页设计与制作第二版?324 4动态替换图像动态替换图像动态替换图像就是当用户的鼠标放在图片上时，图片会动态替换图像就是当用户的鼠标放在图片上时，图片会自动更换，鼠标离开之后，图片又会恢复原来的样子。自动更换，鼠标离开之后，图片又会恢复原来的样子。 2022-4-14?网页设计与制作第二版?336.4.3 6.4.3 声音标记声音标记 1

38、1网上播放音乐网上播放音乐 将音乐做成一个链接，只需用鼠标在上面单击，就将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：可以听到动人的音乐了，这样做的方法很简单：a乐曲名乐曲名例如，播放一段例如，播放一段MIDIMIDI音乐：音乐：aMIDIhref=midi.midMIDI音乐音乐 MIDI MIDI音乐音乐播放一段播放一段AUAU格式音乐：格式音乐：a 同桌同桌的你的你-AU-AU音乐音乐同桌的你同桌的你-AU-AU音乐音乐2022-4-14?网页设计与制作第二版?342 2自动载入音乐自动载入音乐其根本语法为：其根本语法为：embed src=其属性

39、如下：其属性如下： src=FILENAME src=FILENAME：用于设定音乐文件的路径。：用于设定音乐文件的路径。 autostart=true/false autostart=true/false：用于设定音乐文件传送完后是否自动播放，：用于设定音乐文件传送完后是否自动播放，truetrue表示播放，表示播放，falsefalse表示不播放，表示不播放，falsefalse为默认值。为默认值。 loop=true/false loop=true/false：用于设定播放重复次数。：用于设定播放重复次数。loop=6loop=6重复重复6 6次，次，truetrue表示无限次，表示无限

40、次，falsefalse表示一次即停止。表示一次即停止。 startime= startime=分分: :秒秒 ：用于设定乐曲的开始播放时间，例如：用于设定乐曲的开始播放时间，例如20s20s后播后播放写为放写为startime=00:20startime=00:20。 volume=0-100 volume=0-100：用于设定音量的大小。如果没有设定就用系统的音：用于设定音量的大小。如果没有设定就用系统的音量。量。 width height width height：用于设定控制面板的大小。：用于设定控制面板的大小。 hidden=true hidden=true：隐藏控制面板。：隐藏控制

41、面板。 controls=console/smallconsole controls=console/smallconsole：用于设定控制面板的样子。：用于设定控制面板的样子。 2022-4-14?网页设计与制作第二版?35例：例：播放音乐播放音乐作为背景音乐来播放。作为背景音乐来播放。例：例：播放音乐播放音乐出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。 3 3IEIE中的背景音乐中的背景音乐 2022-4-14?网页设计与制作第二版?366.4.4 6.4.4 视频标记视频标记用浏览器可以播放的格式有：用浏览器可以

42、播放的格式有：MOVMOV，AVIAVI。将视频文件做成一个链接的方法为将视频文件做成一个链接的方法为视频名称视频名称例如，播放一段视频：例如，播放一段视频：Windows 95Windows 95n 自动载入视频与音乐的播放一样，可以使用自动载入视频与音乐的播放一样，可以使用embedembed标记播放视频：标记播放视频：embed src=其属性如下：其属性如下：psrc=FILENAME：用于设定文件的路径。：用于设定文件的路径。pautostart=true/false：用于设定文件传送完后是否自动播放，：用于设定文件传送完后是否自动播放，true表表示播放，示播放，false表示不播

43、放，默认为表示不播放，默认为false。ploop=true/false：用于设定播放重复次数，：用于设定播放重复次数，loop=6表示重复表示重复6次，次，true表示无限次播放，表示无限次播放，false表示播放一次即停止。表示播放一次即停止。pstartime=分秒：用于设定开始播放时间，例如分秒：用于设定开始播放时间，例如20s后播放写为后播放写为STARTIME=00:20。pVOLUME=0-100：用于设定音量的大小。如果没有设定就用系统的：用于设定音量的大小。如果没有设定就用系统的音量。音量。pWIDTH HEIGHT：用于设定控制面板的大小。：用于设定控制面板的大小。 202

44、2-4-14?网页设计与制作第二版?37例：例：播放视频播放视频播放视频播放视频Windows Windows 9595embed src=welcome.avi autostart=false loop=false width=350 height=250 2022-4-14?网页设计与制作第二版?386.5 超链接标记超链接标记 6.5.1 6.5.1 链接类型链接类型1 1文件之间的链接文件之间的链接a href=链接文字链接文字 标记标记表示一个链接的开始，表示一个链接的开始，表示链接表示链接的结束；的结束； 属性属性“href“href定义了这个链接所指的地方；定义了这个链接所指的地

45、方； 通过单击通过单击“链接文字可以到达指定的文件。链接文字可以到达指定的文件。链接分为本地链接、链接分为本地链接、URLURL链接和目录链接。在各种链链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路接的各个要素中，资源地址是最重要的，一旦路径上出现过失，该资源就无法从用户端取得。径上出现过失，该资源就无法从用户端取得。 2022-4-14?网页设计与制作第二版?392 2本地链接本地链接对同一台机器上的不同文件进行的链接称为本地链接，对同一台机器上的不同文件进行的链接称为本地链接，它使用它使用UNIXUNIX或或DOSDOS系统中文件路径的表示方法，采用绝系统中文件路径的表

46、示方法，采用绝对路径或相对路径来指示一个文件。对路径或相对路径来指示一个文件。例如，我们现在正在浏览的这一页的绝对路径是：例如，我们现在正在浏览的这一页的绝对路径是：k:studyHTMLk:studyHTML教程。教程。p以绝对路径表示：以绝对路径表示：文件的链接文件的链接。p以相对路径表示：以相对路径表示：文件的链接文件的链接。p链接上一目录中的文件：链接上一目录中的文件：IP地址地址 2022-4-14?网页设计与制作第二版?40一般情况下是不使用绝对路径的，因为我们的资源常常一般情况下是不使用绝对路径的，因为我们的资源常常是放在网上供其他人浏览的，写成绝对路径，当把整是放在网上供其他人

47、浏览的，写成绝对路径，当把整个目录中的所有文件移植到效劳器上时，带有个目录中的所有文件移植到效劳器上时，带有C:C:的资的资源地址用户将无法访问到。所以我们最好写成相对路源地址用户将无法访问到。所以我们最好写成相对路径，从而防止了重新修改文件资源路径的麻烦。径，从而防止了重新修改文件资源路径的麻烦。 2022-4-14?网页设计与制作第二版?413 3URLURL链接链接如果链接的文件在其他效劳器上，就要弄清我们所指向的文件采用如果链接的文件在其他效劳器上，就要弄清我们所指向的文件采用的是哪一种的是哪一种URLURL地址。地址。URLURL即统一资源定位器，通过它可以以多种即统一资源定位器，通

48、过它可以以多种通信协议与外界沟通来存取信息。通信协议与外界沟通来存取信息。URLURL链接的形式是：协议名：链接的形式是：协议名：/主机主机. .域名域名/ /路径路径/ /文件名。文件名。 其中协议主要如下。其中协议主要如下。FileFile本地系统文件本地系统文件HTTPWWWHTTPWWW效劳器效劳器FTPFTPFTPFTP效劳器效劳器TelnetTelnet基于基于TelnetTelnet的协议的协议MailtoMailto电子邮件电子邮件NewsUsenetNewsUsenet新闻组新闻组GopherGopherGopherGopher效劳器效劳器WaisWaisWaisWais效劳

49、器效劳器例如这样来表达一个例如这样来表达一个URLURL地址：地址：写在写在HTMLHTML文件中，链接其他主机上的文件时，格式如下：文件中，链接其他主机上的文件时，格式如下：迪曼工作室迪曼工作室 2022-4-14?网页设计与制作第二版?424 4目录链接目录链接前面所谈的资源地址，只是单纯地指向一份文件；但是，前面所谈的资源地址，只是单纯地指向一份文件；但是，对于直接指到某文件上部、下部或是中央局部，以上对于直接指到某文件上部、下部或是中央局部，以上方法却是无法做到的。这时可以使用目录链接。方法却是无法做到的。这时可以使用目录链接。制作目录链接方法是：制作目录链接方法是：1 1首先把把某段

50、落设置为链接位置，格式是：首先把把某段落设置为链接位置，格式是：a 。2 2再调用此链接局部的文件，定义链接：再调用此链接局部的文件，定义链接：a href=链接文字链接文字。 2022-4-14?网页设计与制作第二版?436.5.2 6.5.2 应用技巧应用技巧1 1提供下载文件提供下载文件2 2在新窗口中翻开链接的网页在新窗口中翻开链接的网页 3 3鼠标移到链接，显示一行说明文字鼠标移到链接，显示一行说明文字 4 4鼠标移到一个链接上弹出一个窗口鼠标移到一个链接上弹出一个窗口 5 5链接到本页的指定内容链接到本页的指定内容 6 6链接到其他页面的指定内容位置链接到其他页面的指定内容位置 7

51、 7链接到链接到E-mail E-mail 2022-4-14?网页设计与制作第二版?446.6 表表 单单 标标 记记 6.6.1 6.6.1 表单中主要包括的元素表单中主要包括的元素ButtonButton普通按钮普通按钮RadioRadio单项选择钮单项选择钮CheckboxCheckbox复选框复选框SelectSelect下拉式菜单下拉式菜单Text Text 单行文本框单行文本框 TextareaTextarea多行文本框多行文本框SubmitSubmit提交按钮提交按钮TesetTeset重填按钮重填按钮用用HTMLHTML设计表单常用的标记是：设计表单常用的标记是：，等。等。

52、2022-4-14?网页设计与制作第二版?451 1表单标记表单标记 该标记的主要作用是设定表单的起止位置，并指定处理该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的表单数据程序的URLURL地址。其根本语法结构如下：地址。其根本语法结构如下：form actionwindow其中，其中，actionaction用于设定处理表单数据程序用于设定处理表单数据程序URLURL的地址。的地址。method.method.用于指定数据传送到效劳器的方式。有两种主要用于指定数据传送到效劳器的方式。有两种主要的方式，当的方式，当method=getmethod=get时，将输入数据加在时，将

53、输入数据加在actionaction指指定的地址后面传送到效劳器；当定的地址后面传送到效劳器；当method=postmethod=post时，那么时，那么将输入数据按照将输入数据按照HTTPHTTP中的中的postpost传输方式传送到效劳器，传输方式传送到效劳器，用电子邮件接收用户信息采用这种方式。用电子邮件接收用户信息采用这种方式。 2022-4-14?网页设计与制作第二版?46nnamename用于设定表单的名称。用于设定表单的名称。nonrestonrest和和onsubmitonsubmit主要是针对主要是针对“reset“reset和和“submit“submit按钮的，它们分别

54、设定了在单击相应的按钮之后要执按钮的，它们分别设定了在单击相应的按钮之后要执行的子程序。行的子程序。 ntargettarget用于指定输入数据结果显示在哪个窗口，这需用于指定输入数据结果显示在哪个窗口，这需要与要与标记配合使用。标记配合使用。 2022-4-14?网页设计与制作第二版?472 2表单输入标记表单输入标记 其语法结构如下：其语法结构如下： input aligh=left|righ|top|middle|bottom name=value maxlength=n size=n onclick=function onselect=function其中，其中，alignalign用

55、于设定表单的位置是靠左用于设定表单的位置是靠左LeftLeft、靠右、靠右RightRight、居中居中MiddleMiddle、靠上、靠上 (Top (Top还是靠底还是靠底BottomBname用于设定当前变量名称。用于设定当前变量名称。typetype设定输入数据的类型。设定输入数据的类型。type=texttype=text表示输入单行文本；表示输入单行文本；typet=textareatypet=textarea表示输入多行文本；表示输入多行文本；type=passwordtype=password表示输入数据表示输入数据为密码，用星号表示；为密码，用星号表示；t

56、ype=radiotype=radio表示单项选择框；表示单项选择框；type=submittype=submit表示提交按钮，数据将被送到效劳器；表示提交按钮，数据将被送到效劳器；tyPe=resettyPe=reset表示去除表单表示去除表单数据，以便重新输入；数据，以便重新输入；type=filetype=file表示插入一个文件；表示插入一个文件；type=hiddentype=hidden表示隐藏按钮；表示隐藏按钮；typetypeimageimage表示插入一个图像；表示插入一个图像；type=buttontype=button表示普通按钮。表示普通按钮。 2022-4-14?网页

57、设计与制作第二版?48ncheckedchecked：在选择框中，此项被默认选中。：在选择框中，此项被默认选中。nvaluevalue用于设定输入默认值，即如果用户不输入的话，用于设定输入默认值，即如果用户不输入的话，就采用此默认值。就采用此默认值。nsrcsrc是针对是针对type=imagetype=image的情况来说的，用于设定图像文的情况来说的，用于设定图像文件的地址。件的地址。nmaxlengthmaxlength用于设定在输入单行文本时的最大输入字符用于设定在输入单行文本时的最大输入字符个数。个数。nsizesize用于设定在输入多行文本时的最大输入字符数，用于设定在输入多行文本

58、时的最大输入字符数，采用采用widthwidth，heightheight方式。方式。nonclickonclick用于设定按下输入时调用指定的子程序。用于设定按下输入时调用指定的子程序。nonselectonselect用于设定当前项被选择时调用指定的子程序。用于设定当前项被选择时调用指定的子程序。 2022-4-14?网页设计与制作第二版?493 3下拉菜单标记下拉菜单标记 用用标记可以在表间中插入一个下拉菜单，它需标记可以在表间中插入一个下拉菜单，它需与与标记联用，因为下拉菜单中的每个选项要标记联用，因为下拉菜单中的每个选项要用用标记来定义。其语法结构如下：标记来定义。其语法结构如下：

59、其中，其中，namename用于设定下拉式菜单的名称。用于设定下拉式菜单的名称。sizesize用于设定菜单框的高度，也就是一次显示几个菜单用于设定菜单框的高度，也就是一次显示几个菜单项，一般取默认值项，一般取默认值size=1size=1。multiplemultiple用于设定可以进行多项选择。用于设定可以进行多项选择。2022-4-14?网页设计与制作第二版?504 4选项标记选项标记该标记为下拉菜单中一个选项。其语法结构如下：该标记为下拉菜单中一个选项。其语法结构如下：其中，其中，selectedselected用于表示当前项被默认选中。用于表示当前项被默认选中。valuevalue用

60、于表示该项对应的值，在该项被中之后，该项的值就会被送用于表示该项对应的值，在该项被中之后，该项的值就会被送到效劳器进行处理。到效劳器进行处理。5 5多行文本输入标记多行文本输入标记其语法结构如下：其语法结构如下：其中，其中，namename用于设定文本框名称。用于设定文本框名称。closclos用于设定宽度。用于设定宽度。rowsrows用于设定高度。用于设定高度。wrapwrap用于设定换行控制。用于设定换行控制。offoff用于设定不自动换行。用于设定不自动换行。hardhard用于设定自动硬回车换行，换行标记一同被传送到效劳器中去。用于设定自动硬回车换行，换行标记一同被传送到效劳器中去。softsoft用于设定自动软回车换行，换行标记不会传送到效劳器中去。用于设定自动软回车换行，换行标记不会传送到效劳