网页制作之HTML标记语言篇.doc

第八章 HTML标记语言 李思章老师 QQ：413142184通过本章的学习，读者可以理解创建网页的基本元素，可以利用各种基本的网页制作技术进行页面设计和排版，从而创作出包含列表、表格、图像、超级链接、其他对象及框架结构的网页。第一节 HTML概述1、HTML的定义HTML是Hypertext Markup Language的缩写，意思是超文本标记语言，用于描述网页文档。自从1990年首次用于网页编辑后，HTML迅速崛起成为网页编辑的主流语言。几乎所有的网页都是由HTML或以其他程序语言嵌套在HTML中编写的。HTML并不是一种程序语言，而是一种结构语言，它是一种规范，是一种标准，它是通过标记元素来实现网页内容的格式。HTML语言具有平台无关性，这种语言可以通过记事本、Microsoft Frontpage、Adobe Dreamweaver等工具来编写，保存文件格式为.htm或者.html为后缀名的文件，无论用户使用什么操作系统，只要有响应的浏览器程序，就可以运行HTML文档。虽然现在流行的浏览器能兼容早期结构不太严格的HTML文件，可以不按规则结构编写HTML文档，而且不同的浏览器对HTML标记元素及属性的解释也不完全一致，但是考虑到代码的可读性和纠错等方面因素，在此强烈建议大家按结构化方式编写HTML代码。我们平常所说的“WEB页面”实际上就是指HTML文档，也就是说每个WEB页对应于一个HTML文件。在浏览器中是按顺序阅读网页文件（HTML文件）的，然后根据内容周围的HTML标记元素及属性来解释和显示各种内容，这个过程叫做语法分析。2、HTML的结构HTML标记元素，绝大多数有起始标记和结尾标记，如：HTML语言的起始和结尾标记、头部标记的起始和结尾、页面标题标记的起始和结尾、页面内容标记的起始和结尾、表格标记的起始和结尾、表单标记的起始和结尾、框架集标记的起始和结尾、样式表定义标记的起始和结尾、脚本程序定义标记的起始和结尾等。在起始标记和结尾标记中间的部分是要标记的内容，此内容可以是文件或超文本。一般来说，HTML的标记元素有以下三种表示方法：（1）文件或超文本（2）文件或超文本（3）说明：（1）HTML的任何标元素记均由“”包围，如：。（2）标记元素字母不分大小写，如：、等是一样的。（3）标记元素名与“”之间不能留有空格。（4）标记元素有的需要加上若干属性及相应属性值，而有的则不必，如：文本内容（5）结尾标记是由“”构成。（6）HTML的注释标记符由“”结尾，这对标记之间的任何内容都将被浏览器解释为注释内容，不会在浏览器中显示。如以下代码和图：网页标题 这里是网页的内容部分！ 3、HTML中加入特殊字符用户有时要在网页中显示某些特殊字符，如：（大于号）、“（引号）等，则需要使用参考字符来表示，而不能直接输入。参考字符以“&”开始，以“；”结束，既可以使用数字代码，也可以使用代码名称。例如以下最常见的特殊字符：特殊字符数字代码代码名称“"&无断行空格 ×÷±更多的特殊字符请查阅相关资料。第二节 页面背景与颜色控制通过本节的学习，可以掌握如何使用body标记元素的bgcolor或background属性来设置页面的背景颜色或背景图案以及页面文本颜色整体控制和超级链接的颜色。1、页面背景的颜色控制在标记元素中使用bgcolor属性可以为网页设置背景颜色。颜色除了可以使用已有名称的颜色名也可以使用对应的十六进制数表示。例如，要把网页背景设置成黑色背景，可以使用以下HTML语句：或者 如下图所示：以下是常见的16种标准颜色的色彩名及对应的十六进制数：色彩名十六进制数色彩名十六进制数Red（红色）#FF0000Navy（藏青色）#000080Green（绿色）#00FF00Olive（茶青色）#808000Blue（蓝色）#0000FFPurple（紫色）#800080Yellow（黄色）#FFFF00Gray（灰色）#808080Black（黑色）#000000Lime（石灰色）#008000White（白色）#FFFFFFMaroon（褐红色）#800000Fuchsia（樱桃色）#FF00FFSilver（银色）#C0C0C0Aqua（水蓝色）#00FFFFTeal（茶色）#008080说明：色彩的十六进制数由六位09及AF的数字字符组成，按照RGB颜色模型排列，引用时用“#”开头，即#RRGGBB。六位数字的含义是：前面两位表示红色Red的颜色数，中间两位表示绿色Green的颜色数，最后两位表示蓝色Blue的颜色数。例如，FF表示包含满亮度的RGB原色，B0表示包含75%亮度的RGB原色，80表示包含50%亮度的RGB原色，40表示包含25%亮度的RGB原色，00则表示不包含RGB原色。所谓的RGB颜色模型就是使用3个0255颜色亮度对颜色进行描述；例如，255-0-0表示最大亮度的红色，0-255-0表示最大亮度的绿色，0-0-255表示最大亮度的蓝色，0-0-0表示不含颜色即为黑色，255-255-255表示含有所有颜色即为白色等。2、页面背景的图案控制页面背景除了用颜色表示之外，也可以选择一些浅色调的图案来表示，这时要使用Body标记元素的Background属性。HTML语句如下： Images_URL表示图像文件存在网站中的路径。例如，2.jpg图像在网站当前目录的Images子目录中，则可以使用以下语句将此图设置为网页的背景图案，如下所示：网页背景图案这里是网页的内容部分！ 网页的背景可以同时设置背景颜色和背景图案，以便在不能显示图像的浏览器上显示背景颜色。有的时候，为了加快网页的下载速度，常常将浏览器设置为不显示图像，此时可显示背景颜色。在浏览器的“工具”菜单下选择“Internet选项”的“高级”选项卡下的“多媒体”部分设置，如下图：3、页面字符及超级链接的颜色控制为了便于和页面背景相适应，往往需要对页面中的字符和链接设置适当的颜色，此时，可以使用Body标记元素的Text、Link、Vlink和Alink属性，说明如下：Text属性用于设置页面字符的颜色；Link属性用于设置未被访问的超级链接的颜色；Vlink属性用于设置已被访问过的超级链接的颜色；Alink属性用于设置当前选定正在访问的超级链接的颜色。例如以下HTML语句，是在黑色背景下显示白色字符，同时用不同程度的灰色来显示不同状态的超级链接。背景色、字符色、链接色这里是网页的内容部分！第三节 文本格式在FrontPage、Dreamweaver等所见即所得的网页制作软件中实现各种文本的字符格式和段落格式，就象使用Word文字处理软件一样简单，但时往往都会产生一些多余的软件支持代码，得不到纯净的HTML文档。本节将介绍如何使用HTML的相关标记元素及属性来设置文本的字符格式和段落格式。1、文本的字符格式我们在制作网页的过程中，往往需要为字符设置相关格式，来对相关内容进行分类强调，突出显示。在HTML中字符的格式可以分为：物理字符格式和逻辑字符格式；我们在使用的时候，不管选择哪种设置方式，都要注意格式的整体一致，不要过多地变化字符格式，以免给人一种眼花缭乱的感觉。（1）物理字符格式物理字符格式是指通过标记元素为某些字符设置特殊格式，如大字体、小字体、粗体、斜体、下划线等。常用的物理字符格式物理字符格式常用的标记元素有：粗体标记、斜体标记、下划线标记等。详见下表：标记元素功能说明标记元素功能说明粗体删除线斜体下标下划线上标大字体删除线小字体固定宽度字体例如，以下的HTML代码以及在浏览器中的显示效果：HTML中的物理字符格式此处是设置字符的粗体效果此处是设置字符的斜体效果此处是设置字符的下划线效果此处是设置字符的大字体效果此处是设置字符的小字体效果此处是设置字符的删除线效果此处是设置字符的下标效果：CO2、H2O此处是设置字符的上标效果：x2+ y2=1此处是设置字符的删除线效果此处是设置字符的固定宽度效果Font标记元素的使用 标记元素具有三个常用的属性：Face、Size和Color。相关说明如下：Face 属性Face属性是用来指定字符的字体类型的，属性的值就是对应字体的名称列表，字体名称之间用逗号隔开，浏览器在解析此属性时，总是按照该属性值列表的先后顺序来偿试，直到找到匹配的字体或到达列表尾部，如果找到了相关字体，就以该种字体显示，否则，浏览器将使用默认的字体代替。例好，常用的英文字体有：“Times New Roman”、“Arial”、“Verdana”等；常用的中文字体有：“宋体”、“黑体”、“楷体”、“隶书”等。以下是一些常见的中英文字体的示例：中英文字体示例以下是常见的中文字体：宋体黑体楷体方正姚体方正舒体隶书以下是常见的英文字体： Times New Roman ArialVerdanaColonna MT Comic Sans MS GeorgiaSize属性Size属性是用来指定字号控制字符大小的，其值越大，显示的字符就越大。字号属性的值为从1到7的整数，默认值是3。如果该属性值的前面有“+”、“-”，这是用来指定字符的相对字号。例如，以下代码分别表示增大一号的字、默认大小的字和减小一号的字，效果见下图：字符大小控制示例字符增大1号字符默认大小字符减小1号Color属性Color属性是用来控制字符的颜色的，属性值的表示方法与前文提到的Bgcolor相同，可以用颜色名称也可以用十六进制数值指定颜色。例如，以下代码是指定字符为红色，效果见下图：字符颜色控制示例字符颜色为(red)红色字符颜色为(#FF0000)红色Basefont标记元素的使用另有basefont标记元素可以更改字符的默认属性值，可以在需要更改字符默认属性的位置前使用语句：，其中n的值也为从1到7的整数，fontname为字体名称，color为颜色名称或十六进制数字；如果以结束，之后内容就不受此标记元素设置的相关属性控制了，又回到了浏览器默认设置，但如果只在和之间加，则可以控制全部正文字符的默认属性。例如，以下代码及所产生的效果图示：字符默认属性更改示例字符的默认属性更改情况！（2）逻辑字符格式逻辑字符格式既可以指定文档中字符的格式，也可以标出字符的含义，如正文标题样式、引用、强调等。正文标题样式在HTML中，我们可以用标记元素来标识文档中的标题级别，其中n的值为从1到6的整数，最大，最小；浏览器在解释标题标记元素时，会自动改变字符大小并将字体类型设置为黑体，同时换行并保持一定的行距。例如，网页中所有标题级别的代码及效果如下：网页正文的标题级别一级标题效果二级标题效果三级标题效果四级标题效果五级标题效果六级标题效果正常文档内容其他常用逻辑字符格式其他常用逻辑字符格式的标记元素有address、cite、code、strong等，具体如下表：标记元素功能说明用于指定网页创建、维护人员及地址等信息，常为斜体，字体随浏览器不同而不同。用于表示文本属性引用，常为斜体，浏览器不同，显示效果不尽相同。用于表示程序代码，常为固定宽度字体。用于表示定义了的术语，常为黑体或斜体，取决于浏览器。用于强调某些字词，大多数的浏览器把看作。用于表示用户的键盘输入，常为固定宽度字体。用于表示文本样本，常为固定宽度字体。用于特别强调某些字词，大多数的浏览器把看作。用于表示变量，常为斜体。例如以下HTML代码及图示效果：网页正文中的逻辑字符样式强调的内容特别强调的内容定义的术语代码内容引用的内容样本字符内容表示的变量键盘输入的内容地址信息内容3、文本的段落格式就如写字板、Word文档一样，HTML网页文档也可以使用相应的标记元素来设置分段、换行、对齐等段落格式。（1）段落控制分段的的标记元素为，是用来将文档内容划分出段落，结束标记通常可以省略，为了划分得准确，在此建议不要省略。（2）换行控制有时，我们需要在文档中某处强制换行，就要使用换行标记元素。此标记元素不需要结束标记。从以下HTML代码及图示，我们能看出、区别：<P>标记元素与<BR>标记元素的区别HTML网页文档第一段HTML网页文档第二段第一行HTML网页文档第二段第二行HTML网页文档中多个段落标记元素连用 HTML网页文档中多个换行标记元素连用 HTML网页文档结尾（3）分节控制为了便于文档的不同部分应用不同的段落格式，我们还可以使用分节标记元素，在网页设计中使用层叠样式表的时候，此标记元素显得尤其有用。说明：需要与ALIGN等属性一起使用，否则，此标记元素不会完成任何工作；ALIGN属性常见的值有：左对齐LEFT、右对齐RIGHT、居中对齐CENTER、两端对齐JUSTIFY等，其中CENTER还可以单独作为居中对齐标记元素来使用。例如以下代码及图示：<DIV>标记元素的使用HTML网页文档第一节HTML网页文档第二节HTML网页文档第三节HTML网页文档第四节HTML网页文档第五节（4）添加水平线为了文档的不同部分界线更分明，我们还可以使用添加水平线标记元素来进行分隔，此标记元素不需要结束标记。它包含以下常用属性：SIZE属性在HTML文档中，我们可以通过此属性来设置水平线的粗细程度。此属性的值为一个整数，表示以像素为单位的水平线的粗细程度，默认值为2。WIDTH属性在HTML文档中，我们可以通过此属性来设置水平线的长度。此属性的值为一个整数时，表示以像素为单位的水平线的长度；此属性的值为一个百分数时，表示水平线的长度所占浏览器窗口宽度的百分比。COLOR属性在HTML文档中，我们可以通过此属性来设置水平线的颜色。此属性的值可以使用颜色名称也可以使用6位十六进制数，同前文提到的相关颜色的原理。NOSHADE属性大多数的浏览器解释标记元素时，在HTML文档中都会显示带3D阴影水平线，此属性的应用即可取消水平线的3D阴影效果，以一条黑线显示。例如以下代码及图示：<HR>水平线标记元素的使用下面是无任何属性设置的水平线效果：下面是取消3D阴影的水平线效果：下面是SIZE属性值为6的水平线效果：下面是WIDTH属性值为200的水平线效果：下面是WIDTH属性值为60%的水平线效果：下面是COLOR属性值为BLUE的水平线效果：下面是COLOR属性值为#FF00FF的水平线效果：第四节 列表格式在HTML文档中，为了使内容显示得更有条理、清楚有序，我们可以使用列表格式进行进行标记；在HTML文档中常用的列表格式有三种：有序列表、无序列表和定义列表。1、有序列表有序列表（Ordered list）是一种在列表项前带有数字或者字母表示序号的缩排列表，序号可以使用阿拉伯数字、罗马数字（含大小写）和英文字母（含大小写）来表示。标记元素为，列表项的标记元素为（结束标记可以省略），标记元素结构如下：列表项一列表项二列表项三标记元素具有两个常用的属性：START（用来设置列表的序号起始值，可以是任意的整数）和TYPE（用来设置列表的序号类型，详见下表）。TYPE属性值含义1阿拉伯数字：1、2、3、4等，默认值A大写英文字母：A、B、C、D等a小写英文字母：a、b、c、d等I大写罗马数字：、等i小写罗马数字：、等标记元素也具有两个常用的属性：VALUE（用来指定列表新的序号起始值，可以是任意的整数）和TYPE（用来设置列表的序号类型，详见上表）。有序列表（Ordered list）的HTML文档综合实例如下：有序列表（Ordered list）实例南北OK王歌咏大赛合肥赛区15名：陈晓东吴大磊胡明宇郑小娇李明阳610名郭彬周明文赵军葛明丽邵文武芜湖赛区15名：宣小波李丽汤俊秀宋玲玲邹媛610名程琳高利施明华李红梅董武阳注：其中的标记元素表示列表的标题。2、无序列表无序列表（Unordered list）是一种在列表项前带有特殊项目符号的缩排列表，项目符号可以使用实心圆、空心圆、实心或空心（取决于浏览器）方块来表示。标记元素为，列表项的标记元素为（结束标记可以省略），标记元素结构如下：列表项一列表项二列表项三无序列表标记元素及列表项的标记元素为也都包含一个常用的TYPE属性，用于控制列表项前特殊符号的显示，TYPE属性的值及含义如下表所示：TYPE属性值值 的 含 义Disc实心圆，通常是非嵌套列表的默认值Circle空心圆，通常是嵌套列表的默认值Square实心或空心的方块，取决于浏览器无序列表（Unordered list）的HTML文档综合实例如下：无序列表（Unordered list）实例非嵌套的无序列表：非嵌套列表项一的项目符号非嵌套列表项二的项目符号嵌套的无序列表：嵌套列表项一的项目符号嵌套列表项二的项目符号指定项目符号的无序列表：指定列表项一的项目符号(UL 中的TYPE控制)指定列表项二的项目符号(UL 中的TYPE控制)指定列表项三的项目符号(LI 中的TYPE控制)指定列表项四的项目符号(UL 中的TYPE控制)指定列表项五的项目符号(LI 中的TYPE控制)指定列表项六的项目符号(UL 中的TYPE控制)注：其中的标记元素表示列表的标题。3、定义列表定义列表（Definition list）是一种用于定义术语及描述说明的缩排列表，描述说明内容相对于定义的术语有悬挂缩排的效果。定义列表标记元素为，定义术语标记元素为（结束标记可以省略），定义描述标记元素为（结束标记可以省略）。定义列表（Definition list）的HTML文档综合实例如下：使用定义列表对三种列表格式的定义示例以下为定义列表的效果：有序列表有序列表（Ordered list）也称为数字式列表，它是一种在列表的各个列表项前显示有数字或字母的缩排列表。使用OL标记元素和LI标记元素可以创建有序列表。无序列表无序列表（Unordered list）也称为强调式列表，它是一种在列表的各个列表项前显示有特殊项目符号的缩排列表。使用UL标记元素和LI标记元素可以创建无序列表。定义列表定义列表（Definition list）用于定义术语及描述说明，它是一种在列表的各个列表项前没有任何数字和符号的缩排列表，描述说明内容相对于定义的术语有悬挂缩排的效果。使用DL标记元素、DT标记元素和DD标记元素可以创建定义列表。 几种列表格式也可以彼此互相嵌套，也就是常说的混和嵌套列表。第五节 使用图像为了使HTML页面更加丰富多彩、更能吸引浏览者，我们在设计的过程中可以加入一些合理的图像。HTML页面中的图片有多种格式，常见的有GIF、JPG、PNG格式，另外还可以引入一些矢量格式。GIF格式GIF格式的图片是图形交换格式，最适合于线条图及使用大块纯色的图片，象剪贴画等颜色数最多为256色图片。GIF格式的图片使用无损压缩来减小图片文件的大小，此种格式的图片在保存时，可以保留图片的透明区域，也可以将相应的区域转化为纯色。JPG格式JPG格式的图片是联合图形专家组图片格式，最适合于图像分辨较高的真彩色或者平滑过渡色的照片和图片。JPG格式的使用有损压缩来减小图片文件的大小，所以我们能看到图片的质量会随着图片文件的大小而不同。此种格式的图片在保存时，不能保留图片的透明区域，图片的透明区域将被转化为纯色。PNG格式PNG格式的图片是可移植的网络图形格式，适合于任何类型、任何颜色深度的图片，也可保存为带调色板的图片。PNG格式的图片使用无损压缩来减小图片文件的大小，同时保留图片中的透明区域。现在的浏览器基本上都已经可以支持这种格式的图片，它将成为网络图片的主流格式。其他矢量格式除了以上这些标准的位图格式外，还可以使用一些矢量格式。例如Adobe Flash格式的动画图片，现在的浏览器基本上都有相应的插件支持它们的运行。矢量图形文件相比位图文件要小得多，这得益于矢量图形文件是用数学公式和编号来表示的。在矢量图形领域，特别是动画，文件大小会大大减小，更能节省网络资源。1、在HTML文档中加入图像在HTML文档中加入图像就使用IMG标记元素，此标记元素为独立标记，不需要结束标记，它的常用属性有：src（图像源）、dynsrc（视频源）、alt、border、width、height、align、hspace和vspace等。（1）使用IMG标记元素插入图片这里要用到SRC属性来引用包含文件路径的图像文件全名；用到ALT属性来说明图像的文字介绍，用于某些不能显示图像的浏览器、指定位置不存在指定的图像文件或者浏览器显示图像的时间过长时先显示及鼠标悬停于图片时显示，以作替代文本。例如：以下是指定位置不存在指定的图像文件的效果插入图像示例：指定位置不存在指定的图像（2）图像的规格与布局除了以上图像最基本的属性外，IMG标记元素还具有其他相关属性用于控制图像的规格和布局。指定图像的宽和高在设计HTML网页页面时，我们可以使用width、height属性来指定图像的宽度和高度，在打开网页时，浏览器进行解释的时候，在图像的实际下载之前会预留图像的空间以避免反复地重新绘制网页，从而加快网页的下载速度。详见如下示例：插入图像示例：控制图像的大小以上代码将插入的图片指定为宽300像素、高200像素。宽和高也可以设置为相对于浏览器窗口的百分比。设置图像的边框我们还可以使用border属性为图像添加边框效果，此属性的值的单位为像素。示例如下：插入图像示例：控制图像的边框设置图像和文本间的空白我们还可以使用hspace和vspace属性设置图像和文本或图像之间的空白。示例如下：插入图像示例：控制图像和文本间的空白无空白：有空白：设置图像的绕文方式及垂直对齐方式我们要在图像的左边或者右边环绕文本，可以使用img标记元素的align属性的left（表示图像居左，文本在图像右侧环绕）或者right（表示图像居右，文本在图像左侧环绕）值；如果要解除图像的绕文方式，我们可以使用标记元素及属性，其中left表示解除在图像左侧绕文，right表示解除在图像右侧绕文，all表示解除在图像左、右两侧绕文，自此行标记的下一行开始文本将转入正常显示。以下示例显示了图像的绕文效果：插入图像示例：控制图像的绕文效果这是图像居右，文本在图像左侧环绕的绕文效果，align属性的值为right。这是图像居右，文本在图像左侧环绕的绕文效果，align属性的值为right。这是图像居右，文本在图像左侧环绕的绕文效果，align属性的值为right。这是图像居左，文本在图像右侧环绕的绕文效果，align属性的值为left。这是图像居左，文本在图像右侧环绕的绕文效果，align属性的值为left。这是图像居左，文本在图像右侧环绕的绕文效果，align属性的值为left。 现在已经解除图像的绕文效果，br标记元素的clear属性值为all的效果。现在已经解除图像的绕文效果，br标记元素的clear属性值为all的效果。现在已经解除图像的绕文效果，br标记元素的clear属性值为all的效果。在HTML网页中进行图文混排时，图像和文本在垂直方向的对齐可以使用img标记元素的align属性，此时的属性值可以是：top（表示图像和文本顶部对齐）、middle（表示图像和文本垂直中央对齐）、bottom（表示图像和文本底部对齐），其中bottom为默认值。以下示例显示了图像和文本的垂直对齐效果：插入图像示例：控制图像和文本的垂直对齐这是图像和文本默认的底部对齐。这是图像和文本顶部对齐。这是图像和文本垂直中央对齐。这是图像和文本底部对齐。利用DIV标记元素及P标记元素设置图像的水平对齐在设计HTML页面时，也可以把图像置于节标记或段落标记内来设置在页面中的对齐。以下HTML语句将图像在页面中水平居中对齐：插入图像示例：控制图像的水平对齐这是图像的默认水平左对齐 这是图像的居中对齐 这是图像的右对齐 这是图像的左对齐 （3）网页中合理使用图像我们在设计HTML页面时，为了网页的更加美观、更能吸引浏览者，往往要插入一些图像以丰富网页内容，但是，我们在使用图像之前，通常需要考虑以下几个问题：v保持图像文件较小v保持图像的原始颜色v为联机显示设置图像分辨率保持图像文件较小我们在设计网页时需要考虑网页的下载速度。为了缩短页面下载时间，就应该减小图像文件的大小，图像文件越小，下载速度就越快。我们说的是图像文件的大小，而不是在网页中图像的尺寸。减小图像文件大小的一个简单方法就是将图像压缩，压缩图像文件有两种方法：数据压缩，也称为“无损”压缩，这种压缩方法在减小图像文件的大小的同时又不降低图像质量。通过这种压缩方法，通常可以将图像文件大小减小一半以上，GIF格式和PNG格式的图像文件均是使用无损压缩。图像压缩，也称为“有损”压缩，这种压缩方法将从图像中删除不必要的信息。当然，由于文件压缩，图像的质量会下降。通过这种压缩方法，通常可以将图像文件大小降低95%以上。例如，一个100MB的图像文件可压缩至2MB左右，JPG格式的图像文件使用的就是有损压缩。保持图像的原始颜色要保持图像的原始颜色，这里我们引入一概念：位深度就是指一个像素可能显示的颜色数。通过降低图像的位深度来降低其中的颜色数据量，从而减小图像文件的大小，特别是在网页上的图像，要减小其文件的大小，降低其位深度是一种好方法。通过下表我们可以了解位深度对应的每个像素可显示的颜色数：位深度每个像素可显示的颜色数1黑白416种颜色或灰度8256种颜色或灰度（也称为“索引颜色”）1616,536种颜色（也称为“增强色”）241,670万种颜色（也称为“真彩色”）321,670万种颜色加8位透明度信息为联机显示设置图像分辨率图像的分辨率以dpi（每英寸点数）为单位。我们在网页中使用图像时，应将图像的分辨率设置与计算机屏幕分辨率相匹配，现在标准的计算机显示器屏幕分辨率为96dpi。如果图像分辨率设置过高，会使图像文件更大、下载时间更长，也不会使图像的质量更高。图像的分辨率决定了图像包含的像素数，更改图像的分辨率就会改变图像包含的像素数，我们可以利用Photoshop等图形图像处理软件来进行操作，具体这里将不详述。第六节 使用超级链接HTML网页文档中最重要的应用之一就是超级链接，超级链接的应用可以说是HTML网页文档的灵魂，web上的网页是互相链接的，单击被称为超级链接的文本或图形就可以链接到其它页面从而实现网页内容的跳转或定向，有时也用于非页面显示类文件的资源下载。超文本具有的链接能力，可层层链接相关文件，这种具有超级链接能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们我们可享受丰富多采的多媒体世界。（1）URL统一资源定位器每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。HTML利用统一资源定位器即URL（Uniform / Universal Resource Locator 的缩写）来定位web上的文档信息。URL指的就是每一个站点都具有的地址，同一个站点下的每一个网页都属于同一个地址之下，在创建一个站点的网页时，不需要为每一个连接都输入完全的地址，我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。认识URL完整的URL应该包括三个部分，即：服务协议代码、远程服务器域名（远程计算机文件夹地址、电子邮件地址或者新闻组名称）、包含路径的文件名。例如，/index/about.asp这个URL的分析如下：服务协议表明使用哪种方法获得所需的信息，常用的主要协议有以下7种：FTPFTP文件传输协议HTTPHTTP超文本传输协议GOPHER网际GOPHER协议MAILTOEMAIL电子邮件协议NEWSUSENET新闻组协议TELNET远程登录协议WAIS广域信息服务器WAIS协议TENCENTTENCE