设置图像、列表、多媒体

1、授课教师：黄彩霞授课教师：黄彩霞E-MAIL：复习网页是网页是HTMLHTML文档。文档。HTMLHTML（Hypertext Markup LanguageHypertext Markup Language）超文本）超文本标记语言是一种专门用于网页制作的描述性的标记语言是一种专门用于网页制作的描述性的标记语言。标记语言。HTMLHTML文档的结构。文档的结构。文本标记文本标记 (1)(1)标题标记标题标记 n n的取值为的取值为1616 (2) (2)段落相关标记段落相关标记 段落标记段落标记 强制换行标记强制换行标记复习文本标记文本标记 (3)(3)文字的修饰标记文字的修饰标记 font

2、face=“ 为文本设置字体、字号、颜色标记为文本设置字体、字号、颜色标记 与与 加粗标记加粗标记 与与 斜体标记斜体标记复习文本标记文本标记 (4)(4)插入特殊字符插入特殊字符 复习水平分隔线标记水平分隔线标记 居中对齐标记居中对齐标记 注释标记注释标记 !- - 2.4.2 图像标记图像标记n图片是网页中不可缺少的元素，巧妙地在网图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色。页中使用图片可以为网页增色。n目前在网页中使用的图片格式主要有目前在网页中使用的图片格式主要有GIF和和JPG两种。两种。nGIF图像仅有图像仅有256中颜色，但占用空间小，下中颜色，但占用空间小

3、，下载速度快，支持载速度快，支持动画效果动画效果及背景色透明，适及背景色透明，适合于线条构成的，颜色种类比较少的图像。合于线条构成的，颜色种类比较少的图像。nJPG图像支持图像支持1670万种颜色，适合色彩比较万种颜色，适合色彩比较细腻的图像细腻的图像(照片等照片等)。n首选首选GIF格式。格式。2.4.2 图像标记图像标记nHTML语言用语言用标记在网页中插入图片。标记在网页中插入图片。n用法：用法：n计算机中的文件都是按照层次结构保存在一级计算机中的文件都是按照层次结构保存在一级一级的文件夹中的，这就好像是学校分为若干一级的文件夹中的，这就好像是学校分为若干个年级，每个年级又分为若干个班级

4、。个年级，每个年级又分为若干个班级。n相对路径：即从自己的位置出发，依次说明到相对路径：即从自己的位置出发，依次说明到达目标文件的路径。达目标文件的路径。n绝对路径：即先指明最高级的层次，然后依次绝对路径：即先指明最高级的层次，然后依次向下说明到达目标文件的路径。向下说明到达目标文件的路径。2.4.2 使用图像使用图像n文件路径：举例说明文件路径：举例说明2.4.2 使用图像使用图像n(1)如果图像文件在本网站内部，通常采用相对如果图像文件在本网站内部，通常采用相对路径。路径。2.4.2 使用图像使用图像n(a)如果在如果在f-01文件夹中的文件夹中的a.htm需要显示同一个文件夹需要显示同一

5、个文件夹中的中的cup.gif文件。文件。 n(b)如果在如果在f-04文件夹中的文件夹中的02文件夹中的文件夹中的b.htm需要显示需要显示同一个文件夹中的同一个文件夹中的cap.gif文件。文件。 n(c)如果在如果在f-04文件夹中的文件夹中的c.htm需要显示需要显示02文件夹中的文件夹中的cap.gif文件。文件。 n(d)如果在如果在f-04文件夹中的文件夹中的02文件夹中的文件夹中的b.htm需要显示需要显示01文件夹中的文件夹中的hat.gif文件。文件。 2.4.2 使用图像使用图像n(e)如果在如果在f-04文件夹中的文件夹中的02文件夹中的文件夹中的b.htm需要显示需要

6、显示f-01文件夹中的文件夹中的cup.gif文件。文件。 n(f)如果在如果在f-01文件夹中的文件夹中的a.htm需要显示需要显示f-04文件夹中文件夹中的的02文件夹中的文件夹中的cap.gif文件。文件。 2.4.2 使用图像使用图像(2)如果图像文件不在本网站内部，通常以如果图像文件不在本网站内部，通常以“http:/”开头来描述图像文件的路径。开头来描述图像文件的路径。 2.4.2 图像标记图像标记n在在HTML中可以设定图像的显示大小；中可以设定图像的显示大小；n通常情况下按照原本的大小显示，也可以根据通常情况下按照原本的大小显示，也可以根据情况来设置大小。情况来设置大小。n利用

7、利用width和和height属性属性来设置其宽度和高度。来设置其宽度和高度。n属性值可以是像素属性值可以是像素(绝对大小绝对大小)或百分比或百分比(相对相对大小大小)n注意：即使图像按照原始尺寸显示，在注意：即使图像按照原始尺寸显示，在HTML 中应指明图像的高度和宽度，这样会使网页的中应指明图像的高度和宽度，这样会使网页的显示速度更快。显示速度更快。2.4.2 图像标记图像标记n由于一些原因，图像无法正常显示，可以通过由于一些原因，图像无法正常显示，可以通过设置替换文本来告诉浏览者图像的内容；设置替换文本来告诉浏览者图像的内容；n利用利用alt属性属性来设置图像的替换文本。来设置图像的替换

8、文本。nalt属性值有利于搜索引擎的优化属性值有利于搜索引擎的优化(SEO)。2.4.4 列表标记列表标记n利用文字列表可以使文字内容更加结构化和条理化，利用文字列表可以使文字内容更加结构化和条理化，网页中常用的列表分为有序列表、无序列表和定义列网页中常用的列表分为有序列表、无序列表和定义列表三种。表三种。n(1)建立有序列表建立有序列表 有序列表标记：有序列表标记： 有序列表使用一对标记有序列表使用一对标记，其中每一，其中每一个列表项个列表项 苹果苹果 香蕉香蕉 葡萄葡萄 2.4.4 列表标记列表标记n(2)建立无序列表建立无序列表 有序列表标记：有序列表标记： 有序列表使用一对标记有序列表

9、使用一对标记，其中每一个列表项其中每一个列表项 苹果苹果 香蕉香蕉 葡萄葡萄 2.4.4 列表标记列表标记n(3)列表之间的嵌套列表之间的嵌套 华东地区华东地区 江苏部分江苏部分 浙江部分浙江部分 华北地区华北地区 北京部分北京部分天津部分天津部分 2.4.4 列表标记列表标记n(4)定义列表定义列表定义列表的语法格式如下：定义列表的语法格式如下： 名词名词1 解释解释1 解释解释2 解解释释3 名词名词2 解释解释1 解释解释2 解解释释3注意：注意：标记表示名词；标记表示名词；标记表示对名词的标记表示对名词的解释。解释。2.4.8 多媒体标记多媒体标记n网页中除了可以显示文本、图像、表格等

10、元素网页中除了可以显示文本、图像、表格等元素外，还可以添加音频、视频、动画和滚动文字外，还可以添加音频、视频、动画和滚动文字或图像，这些元素使网页内容更加丰富，更具或图像，这些元素使网页内容更加丰富，更具有表现力。有表现力。n标记标记 标记用于在网页中插入背景音乐，但此标记用于在网页中插入背景音乐，但此标记只标记只适用于适用于IE浏览器浏览器。例如：。例如： 2.4.8 多媒体标记多媒体标记n标记标记 标记用于在网页中插入多媒体对象，包括标记用于在网页中插入多媒体对象，包括 flash、音频、视频等。例如：、音频、视频等。例如： 2.4.8 多媒体标记多媒体标记n标记标记 标记用于在网页中插入滚动的文字或标记用于在网页中插入滚动的文字或图像。基本语法如下：图像。基本语法如下：滚动的文字或图像滚动的文字或图像2.4.8 多媒体