《第二讲 用HTML设置文本和图像.ppt》由会员分享，可在线阅读，更多相关《第二讲 用HTML设置文本和图像.ppt（96页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第2 2讲讲 一、文字版面的编辑一、文字版面的编辑 2.1 2.1 页面布局页面布局2.2 2.2 字体属性字体属性2.1.1 2.1.1 换行标签换行标签brbr2.1.2 2.1.2 强制不换行标签强制不换行标签nobrnobr2.1.3 2.1.3 分段控制标签分段控制标签p p2.1.4 2.1.4 原样显示文字标签原样显示文字标签prepre2.1.5 2.1.5 居中对齐标签居中对齐标签centercenter2.1 页面布局2.1.6 2.1.6 引文标签引文标签blockquoteblockquote2.1.7 2.1.7 水平分隔线标签水平分隔线标签hrhr2.1.8 2.
2、1.8 特殊字符特殊字符2.1.9 2.1.9 注释标签注释标签2.1.10 2.1.10 设定网页背景和文字的颜色设定网页背景和文字的颜色2.1 页面布局2.1.1 2.1.1 换行标签换行标签brbr 换行标签换行标签:用于在文档中强制断行，标用于在文档中强制断行，标记为一个单独的记为一个单独的。在在HTMLHTML文件中任何位置只要使用了文件中任何位置只要使用了标签标签，当文件显示在浏览器中时，该位置之后的，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。文字将显示于下一行。v标签：把标签：把语句强行放在一行中语句强行放在一行中。在在标签中包含的文本不管有多长，总是放在标签中包含
3、的文本不管有多长，总是放在一行中进行显示。一行中进行显示。v主要用于把那些不适于分开的词和短语放在主要用于把那些不适于分开的词和短语放在一行中一行中v如果一行文本如果一行文本长度超过一定的限度，可能会突破右长度超过一定的限度，可能会突破右边边框跑到屏幕外面去边边框跑到屏幕外面去2.1.2 2.1.2 强制不换行标签强制不换行标签nobrnobrv作用：用于将文档划分为段落，标记作用：用于将文档划分为段落，标记为为，其中结束标记符通常可省，其中结束标记符通常可省略。略。v效果：在浏览器中，不同段落文字间效果：在浏览器中，不同段落文字间除了换行外，还会以一个空白行加以除了换行外，还会以一个空白行加
4、以间隔，以便区别出文字的不同段落。间隔，以便区别出文字的不同段落。2.1.3 2.1.3 分段控制标签分段控制标签p p1 1格式：格式：文字文字 文字文字 p align=文字文字 2 2说明：说明：其中其中alignalign属性有属性有leftleft、centercenter和和rightright三三个参数，这三个设置值将依次把段落文字的水个参数，这三个设置值将依次把段落文字的水平对齐方式设为左对齐、居中对齐和右对齐。平对齐方式设为左对齐、居中对齐和右对齐。2.1.3 2.1.3 分段控制标签分段控制标签p pv和和标签标签：可保留：可保留HTMLHTML文件文件原始的文件排版方式，
5、直接在浏览器中原始的文件排版方式，直接在浏览器中显示出来。显示出来。v方法是把制作好的那段文本前后分别方法是把制作好的那段文本前后分别加上加上和和标签。标签。v在预排格式中，仍可以用在预排格式中，仍可以用HTMLHTML语言对语言对文字的格式进行设置，如文字的颜色、文字的格式进行设置，如文字的颜色、大小等。大小等。2.1.4 2.1.4 原样显示文字标签原样显示文字标签prepre2.1.5 2.1.5 居中对齐标签居中对齐标签centercenter文本在页面上中使用文本在页面上中使用标签标签进行居中控制。进行居中控制。是一个成对标签，在想居是一个成对标签，在想居中的文本部分开头处加中的文本
6、部分开头处加，结，结尾处加尾处加即可。即可。v标签标签可以用来建立可以用来建立一个引文，它特别适合于较长文本一个引文，它特别适合于较长文本的引用。的引用。v引文显示时将会自动右移，左边引文显示时将会自动右移，左边空出几个格，以示区别。空出几个格，以示区别。2.1.6 2.1.6 引文标签引文标签blockquoteblockquote2.1.7 2.1.7 水平分隔线标签水平分隔线标签hrhr作用：添加水平线作用：添加水平线，以将不同的内容信息分，以将不同的内容信息分开，使文字看起来清晰、明确。开，使文字看起来清晰、明确。说明说明：标签标签是单独使用的标签是单独使用的标签，它的作，它的作用是用
7、是换行并在该行下画一条横线换行并在该行下画一条横线，横线的上，横线的上下两端都会留出一定的空白。下两端都会留出一定的空白。属性：见下表属性：见下表标签属性说明标签属性说明属性属性 参参 数数 功功 能能 单单 位位 默认值默认值size size 设置水平分隔设置水平分隔线的粗细线的粗细 PixelPixel（像素）（像素）2 2 width width 设置水平分隔设置水平分隔线的宽度线的宽度 Pixel(Pixel(像素像素)、百分比、百分比 100%100%align align leftleft、centercenter、right right 设置水平分隔设置水平分隔线的对齐方式线的
8、对齐方式 centercentercolor color 设置水平分隔设置水平分隔线的颜色线的颜色 black black noshade noshade 水平分隔线不水平分隔线不显示显示3D3D阴影阴影 v键盘上没有的字符键盘上没有的字符：在：在HTMLHTML文件中，有些文件中，有些字符没办法直接显示出来，比如说字符没办法直接显示出来，比如说“”。使用特殊字符可以将键盘上没有的字符表达使用特殊字符可以将键盘上没有的字符表达出来出来v键盘上有但有特殊意义的字符键盘上有但有特殊意义的字符：有些字符：有些字符在键盘上虽然可以得到，但在在键盘上虽然可以得到，但在HTMLHTML中有其特中有其特殊的
9、含义，如殊的含义，如“”等等，也必须用一些代等等，也必须用一些代码表示它们，以免发生混淆。码表示它们，以免发生混淆。2.1.8 2.1.8 特殊字符特殊字符v空格空格：在建立：在建立HTMLHTML文件时，若您利用键盘文件时，若您利用键盘上的空格键，输入数个空格，不论输入的空上的空格键，输入数个空格，不论输入的空格有多少个，都将视为一个。因此，如果您格有多少个，都将视为一个。因此，如果您想要输入多个空格时，必须利用想要输入多个空格时，必须利用空格符号空格符号 。2.1.8 2.1.8 特殊字符特殊字符HTML常见特殊字符及其代码表常见特殊字符及其代码表特殊或专用字符特殊或
10、专用字符 数字代码数字代码 字符代码字符代码>>>>&&&&""""!!!©©©©;;®®®®空格空格 2.1.9 2.1.9 注释标签注释标签注释标签：只起注释作用，不显示在页注释标签：只起注释作用，不显示在页面上面上 注释标签的格式有两种：注释标签的格式有两种：-2.1.10 2.1.10 设定网页背景设定网页背景和文字的颜色和文字的颜色设置设置标签内的属性，可控制整
11、个标签内的属性，可控制整个页面的显示方式。页面的显示方式。1 1格式：格式：body bgcolor=32 2说明：说明：（1 1）通过）通过bgcolorbgcolor属性可以改变网页属性可以改变网页的背景颜色的背景颜色，其格式如下：，其格式如下：或或 body bgcolor=2.1.10 2.1.10 设定网页背景设定网页背景和文字的颜色和文字的颜色（A A）其中其中#nnnnnnnnnnnn代表代表六位六位十六进制数，十六进制数，每两每两位的取值均是从位的取值均是从0000FFFF，代表，代表ASCIIASCII码的码的0000255255，前两位设置前两位设置红色红色的深浅，中间两位
12、设置的深浅，中间两位设置绿色绿色的深浅，最后两位设置的深浅，最后两位设置蓝色蓝色的深浅的深浅。（B B）在指定文字的颜色时，在指定文字的颜色时，也可以直接使用也可以直接使用该颜色对应的英文单词该颜色对应的英文单词，例如，我们指定背景，例如，我们指定背景的颜色为红色，可以表示为：的颜色为红色，可以表示为：body bgcolor=也可以表示为也可以表示为body bgcolor=。暗蓝绿暗蓝绿(#006666)(#006666)TealTeal白白 色色White(#FFFFFF)White(#FFFFFF)紫红色紫红色(#993333)(#993333)FuchsiaFuchsia绿绿 色色G
13、reen(#66FF00)Green(#66FF00)蓝蓝 色色(#00FFFF)(#00FFFF)BlueBlue浅蓝绿浅蓝绿Aqua(#0066FF)Aqua(#0066FF)黄黄 色色(#FFFF00)(#FFFF00)YellowYellow紫紫 色色Purple(#660000)Purple(#660000)橄榄绿橄榄绿(#336633)(#336633)OliveOlive海军蓝海军蓝Navy(#0033CC)Navy(#0033CC)银白色银白色(#CCCCCC)(#CCCCCC)SilverSilver灰灰 色色 Gray(#999999)Gray(#999999)栗栗 色色(
14、#993300)(#993300)Maroon Maroon 石灰色石灰色 Lime(#666666)Lime(#666666)红红 色色(#FF3300)(#FF3300)Red Red 黑黑 色色 Black(#000000)Black(#000000)颜颜 色色 名名 称称 颜颜 色色 名名 称称 （C C）bgcolorbgcolor属性的参数值可以是下表所示属性的参数值可以是下表所示1616种颜色中的任何一种。种颜色中的任何一种。（2）background属性指定网页的背景图像。属性指定网页的背景图像。格式：格式：示例：示例：（3 3）text属性用于指定网页内文字的颜色属性用于指定
15、网页内文字的颜色。格式：格式：示例：示例：2.1.10 2.1.10 设定网页背景设定网页背景和文字的颜色和文字的颜色设置网页背景声音在在HEAD中添加：中添加：2.2.1 2.2.1 标题文字标签标题文字标签HnHn2.2.2 2.2.2 文字格式控制标签文字格式控制标签FontFont2.2.3 2.2.3 特定文字样式标签特定文字样式标签2.2 2.2 字体属性字体属性标签用于设置网页中的标题文字，标签用于设置网页中的标题文字，被设置的文字将以被设置的文字将以黑体、粗体黑体、粗体的方式显的方式显示在网页中。示在网页中。1 1格式：格式：Hn align=标题文字标题文字 2.2.1 2.
16、2.1 标题文字标签标题文字标签HnHn2 2说明：说明：标签是成对出现标签是成对出现的，在的，在和和之间的文字就是文档中的标题。之间的文字就是文档中的标题。标签共分六级标签共分六级，其中，其中标签所标签所括起的文字是第一级标题，最大最粗；括起的文字是第一级标题，最大最粗；标签所括起的文字是最后一级标题，最小最细。标签所括起的文字是最后一级标题，最小最细。align属性用于设置标题的位置属性用于设置标题的位置。align属性属性的参数值为的参数值为left、center或或right之一之一标签本身具有换行的作用标签本身具有换行的作用，标题总是，标题总是从新一行开始。从新一行开始。使用标题样式
17、时，必须使用结束标记符。使用标题样式时，必须使用结束标记符。vfontfont标签标签用于控制文字的字体、大小与颜色用于控制文字的字体、大小与颜色。v控制的方式是控制的方式是利用属性设置实现利用属性设置实现的，各属性的，各属性的使用功能说明见下表。的使用功能说明见下表。2.2.2 2.2.2 文字格式控制标签文字格式控制标签FontFont控制文字的颜色控制文字的颜色color color 控制文字的大小控制文字的大小size size 控制文字的字体控制文字的字体 face face 使用功能使用功能 属属 性性 271 1格式：格式：文字文字2 2说明：说明：faceface属性的格式为：
18、属性的格式为：文字文字face属性是字体标记符，用来指定字体样式。字体属性是字体标记符，用来指定字体样式。字体样式也就是通常所说的样式也就是通常所说的“字体字体”。例如，常用的英。例如，常用的英文字体有文字体有“Times New Roman”、“Arial”等；等；常用的中文字体有常用的中文字体有“宋体宋体”、“楷体楷体”等。在编写等。在编写网页时，通过在网页时，通过在FONT标记符中指定标记符中指定face属性，用属性，用户可以指定一个或几个字体名称户可以指定一个或几个字体名称(用逗号隔开用逗号隔开)。282 2说明：说明：size属性的取值为属性的取值为17，默认值为，默认值为3；也可以
19、用也可以用“+”或或“-”来设定字号的相对值。来设定字号的相对值。examplecolor属性的格式为：属性的格式为：或或29v用来用来产生一定的强调、突出、区别以产生一定的强调、突出、区别以及提示等效果及提示等效果的标签。的标签。vHTMLHTML中用于这种功能的标签可以分为中用于这种功能的标签可以分为两类：两类：物理类型和逻辑类型物理类型和逻辑类型。2.2.3 2.2.3 特定文字样式标签特定文字样式标签301 1物理类型物理类型 粗体粗体b b标签标签放在放在与与标签之间的文字将以粗体方式标签之间的文字将以粗体方式显示。显示。斜体斜体i i标签标签放在放在与与标签之间的文字将以斜体方式标
20、签之间的文字将以斜体方式显示。显示。下划线下划线u u标签标签放在放在与与标签之间的文字将以加下划线标签之间的文字将以加下划线的方式显示。的方式显示。31 2 2逻辑类型逻辑类型v逻辑类型逻辑类型:指使用一些标签来改变字体指使用一些标签来改变字体的形态和式样，以便的形态和式样，以便产生一些公众习惯产生一些公众习惯的或约定俗成的显示效果。的或约定俗成的显示效果。v常用的逻辑类型标签有八种，这些标签常用的逻辑类型标签有八种，这些标签均有首标签和尾标签均有首标签和尾标签，放在首标签和尾，放在首标签和尾标签之间的文本受其控制：标签之间的文本受其控制：32 2 2逻辑类型逻辑类型（Emphasis）标签
21、）标签：用于强调的文本，：用于强调的文本，以区别于其他文本，一般显示斜体字以区别于其他文本，一般显示斜体字,与与相相似；似；标签：用于特别强调的文本，显示标签：用于特别强调的文本，显示粗体字，与粗体字，与相似；相似；（Citation）标签：用于引证、举例，）标签：用于引证、举例，通常是斜体字；通常是斜体字；33 2 2逻辑类型逻辑类型 标签标签：用来指出这是一组代码；：用来指出这是一组代码；标签标签：规定文本以小号字显示；：规定文本以小号字显示；标签标签：规定文本以大号字显示；：规定文本以大号字显示；（Sample）标签）标签：显示一段计：显示一段计算机常用的字体，即算机常用的字体，即宽度相
22、等的字体宽度相等的字体；34 2 2逻辑类型逻辑类型标签标签：用来表示带有：用来表示带有下标下标的变的变量；量；标签标签：用来表示带有：用来表示带有上标上标的变的变量。量。第第2 2讲讲 二、图像的处理二、图像的处理 学习目标理解矢量图和位图的区别，了解常用理解矢量图和位图的区别，了解常用的的Web图像格式。图像格式。理解理解Web图像的处理流程，初步掌握图像的处理流程，初步掌握基本的基本的Web图像处理操作。图像处理操作。掌握在网页中插入图像的方法，理解掌握在网页中插入图像的方法，理解图像在网页中的作用和图像在网页中的作用和Web图像的基图像的基本使用原则。本使用原则。矢量图矢量图形是指用线
23、条和填充色等矢量图形是指用线条和填充色等数学信数学信息息来描述图像的一种图像类型。来描述图像的一种图像类型。制作矢量格式图像的软件有制作矢量格式图像的软件有Freehand、Illustrator、CorelDraw、AutoCAD。位图位图是指用位图是指用像素一点一点像素一点一点地描述图地描述图像的一种图像类型。像的一种图像类型。常用的位图编辑软件有常用的位图编辑软件有Fireworks、Photoshop、ImageReady、PhotoImpact等等常用Web图像格式 GIF JPEG PNGGIFGIF（GraphicsInterchangeFormat，图，图形交换格式）格式的特点
24、：形交换格式）格式的特点：无损压缩无损压缩最多最多256色色能够使用透明色能够使用透明色有所占存储空间小、下载速度快、支持有所占存储空间小、下载速度快、支持动画等特点动画等特点JPEGJPEG（JointPhotographicExpertGroup，联合图形专家组）格式的特点：，联合图形专家组）格式的特点：有损压缩有损压缩24位颜色位颜色可以控制压缩比可以控制压缩比图像质量好，对具有连续色调的图像有图像质量好，对具有连续色调的图像有最佳效果最佳效果PNGPNG（PortableNetworkGraphics，可，可移植的网络图形）格式的特点：移植的网络图形）格式的特点：无损压缩无损压缩24位
25、颜色位颜色支持透明度支持透明度BMP图像文件因为存储空间大，传输不够图像文件因为存储空间大，传输不够快，所以并不常用快，所以并不常用,常用的是常用的是jpg文件和文件和gif文文件。件。对于徽标、公司厂标等在每一主页显示，对于徽标、公司厂标等在每一主页显示，要求能快速下载并能在低配置的系统中查询要求能快速下载并能在低配置的系统中查询的图像的图像,应采用应采用GIF格式格式而对于扫描图片、艺术作品这种而对于扫描图片、艺术作品这种对显示质对显示质量要求很高的图像则应采用量要求很高的图像则应采用JPEG格式格式。图像使用说明图像使用说明背景图案的设定在网页中可以用图像平铺的方法制作背在网页中可以用图
26、像平铺的方法制作背景。景。定义背景图像的语法格式如下：定义背景图像的语法格式如下：其中，其中，“image-URL”指图像的位置。指图像的位置。说明：说明：注意平铺的效果注意平铺的效果：在建立这种形式的背景：在建立这种形式的背景之前，首先要确定所选定的图案能否看上去之前，首先要确定所选定的图案能否看上去无痕迹地连接在一起无痕迹地连接在一起，或者能否产生一种较，或者能否产生一种较好的背景效果。好的背景效果。尽量不用尽量不用：用平铺图像作背景，将极明显：用平铺图像作背景，将极明显地降低网页的显示速度。唯一的解决办法就地降低网页的显示速度。唯一的解决办法就是尽量使用小的图像文件，如果可能的话则是尽量
27、使用小的图像文件，如果可能的话则不用。不用。是用于导入图像文件的标签，使用此是用于导入图像文件的标签，使用此标签可将图像文件导入到标签可将图像文件导入到HTML文件中显示。文件中显示。没有结束标签，因为当浏览器只有读没有结束标签，因为当浏览器只有读取到取到标签时，会直接显示此标签所代标签时，会直接显示此标签所代表的图像。表的图像。1格式：格式：网页中插入图形网页中插入图形 2 2说明：说明：src属性是用来指出一个图像的文件名，或属性是用来指出一个图像的文件名，或是指出是指出URL的路径名。的路径名。如果图像的显示有问题，应该检查以下内容：如果图像的显示有问题，应该检查以下内容：文件名是否书写
28、正确；文件名是否书写正确；图像文件是否是图像文件是否是BMP、GIF或或JPG格式；格式；是否已经打开了浏览器的图像下载功能。是否已经打开了浏览器的图像下载功能。若上述几项全部正确，图像就能够显示出来。若上述几项全部正确，图像就能够显示出来。小技巧：小技巧：如果在同一个文件中需要反复使用一个相如果在同一个文件中需要反复使用一个相同的图像文件时，同的图像文件时，最好在最好在标签中使标签中使用相对路径名用相对路径名，而不是使用绝对路径名或，而不是使用绝对路径名或URL。因为。因为使用相对路径名，浏览器只须使用相对路径名，浏览器只须将图像文件下载一次将图像文件下载一次，再次使用这个图像，再次使用这个
29、图像时，只要重新显示一遍即可。如果时，只要重新显示一遍即可。如果使用的使用的是绝对路径名，每次显示图像时，都要下是绝对路径名，每次显示图像时，都要下载一次图像载一次图像，这将会大大降低图像的显示，这将会大大降低图像的显示速度。速度。img标签属性的使用 v图像的取代文字图像的取代文字v设定图像的高度和宽度设定图像的高度和宽度v设定图像的边框设定图像的边框v设定图像的对齐方式设定图像的对齐方式v设定图像与文本之间的距离设定图像与文本之间的距离标签中的标签中的alt属性：属性：当浏览器不能显示当浏览器不能显示图像或找不到图像时，它可以将图像或找不到图像时，它可以将alt引导的文引导的文本显示在屏幕
30、上，从而替代看不到的图像。本显示在屏幕上，从而替代看不到的图像。图像的取代文字alt标签中还提供了两个属性：标签中还提供了两个属性：height和和width，用来设定图像的高度和宽度，二者可，用来设定图像的高度和宽度，二者可取像素值或百分比（相对窗口）。取像素值或百分比（相对窗口）。示例：示例：设定图像的高度和宽度设定图像的边框border标签的标签的border属性可以给图像属性可以给图像加一个边框。若加一个边框。若border项默认或取值为项默认或取值为0时，图像没有边框。时，图像没有边框。在在标签中使用标签中使用align属性，可控制图属性，可控制图像相对于文字基准线（文字中线）的水平
31、像相对于文字基准线（文字中线）的水平对齐方式，其语法如下：对齐方式，其语法如下：各属性的设置值意义如下表所示：各属性的设置值意义如下表所示：设定图像的对齐方式设定图像的对齐方式alignalignalign属性的设置值属性的设置值图像居右图像居右right图像居左图像居左left下对齐下对齐 bottom居中对齐居中对齐 middle上对齐上对齐 top对齐方式对齐方式 设设 置置 值值 把文本排到图像下面如果文本还没有填满图像周围的空间时，就如果文本还没有填满图像周围的空间时，就希望从图像下面重新开始另一行文本，这时，希望从图像下面重新开始另一行文本，这时，普通的换行标签普通的换行标签就不起
32、作用了，它只能在就不起作用了，它只能在图像旁边另起一行，而不能把文本排到图像下图像旁边另起一行，而不能把文本排到图像下面去，这就需要在面去，这就需要在标签中使用标签中使用clear属性属性来满足这一要求来满足这一要求：图像使用原则在使用图像的问题上，网页的制作者可能会在使用图像的问题上，网页的制作者可能会与浏览者产生一些矛盾。比如，制作者往往希与浏览者产生一些矛盾。比如，制作者往往希望在自己的网页上有一些漂亮的图像，使网页望在自己的网页上有一些漂亮的图像，使网页充满艺术的魅力；而浏览者常常因为网页下载充满艺术的魅力；而浏览者常常因为网页下载时间太长而不耐烦，甚至不愿等着下载全部内时间太长而不耐
33、烦，甚至不愿等着下载全部内容。因此，我们可以采用以下的方法来缓解这容。因此，我们可以采用以下的方法来缓解这个矛盾：个矛盾：1在设计网页时，应该反复斟酌哪些图像在设计网页时，应该反复斟酌哪些图像必须要，哪些图像可有可无，对于那些不是必必须要，哪些图像可有可无，对于那些不是必需的图像，要舍得忍痛割爱；需的图像，要舍得忍痛割爱；2把图像尽量做得小一点，小图像在网上把图像尽量做得小一点，小图像在网上的传输速度比较快，这对于网络传输速度较慢的传输速度比较快，这对于网络传输速度较慢的用户更为重要。较小的图像可以是尺寸比较的用户更为重要。较小的图像可以是尺寸比较小，也可通过减少图像颜色使图像文件减小；小，也
34、可通过减少图像颜色使图像文件减小；3为了使不支持图像的浏览器能看到文本，为了使不支持图像的浏览器能看到文本，可以同时使用图像和可以同时使用图像和ALT的纯文本格式，这样，的纯文本格式，这样，能使更多的用户看全这个网页；能使更多的用户看全这个网页；列表项目列表项目列表项目 1无序列表ul2有序列表ol3 嵌套列表4 描述性列表dl/dt/dd 无序列表（无序列表（Unorderedlist）也称强）也称强调式列表，它是一种在表的各项前显调式列表，它是一种在表的各项前显示有特殊项目符号的列表。示有特殊项目符号的列表。定义无序列表需要使用无序列表标记定义无序列表需要使用无序列表标记符符和列表项（和列
35、表项（Listitem）标记符）标记符（结束标记（结束标记符可省略）符可省略）1 无序列表ul1格式：格式：项目符号项目符号项目符号项目符号2说明：说明：使用使用type属性来控制标号的类型，见表属性来控制标号的类型，见表1在同一个无序列表中，下一个在同一个无序列表中，下一个的出的出现，就表明上一个列表项的结束。现，就表明上一个列表项的结束。无序列表语法无序列表语法无序列表的无序列表的typetype属性表属性表设定一个方形实心的行标号设定一个方形实心的行标号type=square设定一个空心圆点的行标号设定一个空心圆点的行标号type=circle设定一个实心圆点的行标号设定一个实心圆点的行
36、标号，默认项，默认项type=disc含义含义type取值取值2 2 有序列表有序列表olol有序列表（有序列表（Orderedlist）：也称）：也称数字式列表数字式列表，它是一种在表的各项前，它是一种在表的各项前显示有数字或字母的缩排列表。显示有数字或字母的缩排列表。定义有序列表需要使用有序列表标记符定义有序列表需要使用有序列表标记符和列表项（和列表项（Listitem）标记）标记符符/（结束标记符可省略），（结束标记符可省略），语法如下：语法如下：项目符号项目符号项目符号项目符号有序列表的定义有序列表的定义2说明：说明：在同一个有序列表中，下一个在同一个有序列表中，下一个的出的出现，就表
37、明上一个列表项的结束。现，就表明上一个列表项的结束。顺序编号是由属性顺序编号是由属性type和和start来设置的。来设置的。type表示标号的类型，比如数字、字母以及表示标号的类型，比如数字、字母以及罗马字母；罗马字母；start属性表示列表清单的标号从属性表示列表清单的标号从第几项开始第几项开始表表2列出了列出了type属性的取值及含义。属性的取值及含义。有序列表的有序列表的TYPETYPE属性表属性表表示列表项用小写罗马字母标号（表示列表项用小写罗马字母标号（I，II，III）type=I表示列表项用大写罗马字母标号（表示列表项用大写罗马字母标号（i，ii，iii）type=i表示列表项
38、用小写字母标号（表示列表项用小写字母标号（a,b,c）type=a表示列表项用大写字母标号（表示列表项用大写字母标号（A，B，C）type=A表示列表项用数字标号（表示列表项用数字标号（1，2，3），默认项），默认项type=1含义含义type取值取值窗口框架窗口框架1 1 窗口框架简介窗口框架简介 1.1 1.1 什么是窗口框架什么是窗口框架窗口框架可用于窗口框架可用于将窗口画面分割成多将窗口画面分割成多个小窗口个小窗口，且每个小窗口中，可以显，且每个小窗口中，可以显示不同的网页，示不同的网页，达到在浏览器中同时达到在浏览器中同时浏览多个不同网页的效果浏览多个不同网页的效果。在介绍窗口框架文
39、档之前，先来看看其在介绍窗口框架文档之前，先来看看其应用实例，有一个感性认识，见下图。应用实例，有一个感性认识，见下图。1.2 1.2 窗口框架的基本结构窗口框架的基本结构Frameset结构的基本格式结构的基本格式.包含Frameset结构的HTML文件 文件文件framePage.htm的源代码的源代码窗口框架文档窗口框架文档你的浏览器不支持带框架的网页你的浏览器不支持带框架的网页说明说明v标签用于定义一个窗口框架标签用于定义一个窗口框架v则用于定义窗口框架中的子窗口则用于定义窗口框架中的子窗口v窗口框架文档的书写格式与一般的窗口框架文档的书写格式与一般的HTML文文档的书写格式相同，只是
40、档的书写格式相同，只是用用代替代替标签标签，是一个成对标签，是一个成对标签，有开始和结束标签，在有开始和结束标签，在标签内使用标签内使用了另一个标签了另一个标签，用它来指定每一个窗，用它来指定每一个窗口的内容。口的内容。1.3 1.3 窗口框架的分割方式窗口框架的分割方式窗口框架的分割方式可分为两种，一窗口框架的分割方式可分为两种，一种是水平分割种是水平分割(rows属性属性)，另一种是垂，另一种是垂直分割直分割(cols属性属性)。2 2 窗口框架控制窗口框架控制 v是成对标签是成对标签，首标签，首标签和尾标签和尾标签之间的内容是之间的内容是HTML文文档主体部分。档主体部分。v使用框架的使
41、用框架的HTML文档中不能出现文档中不能出现标签标签，否则会导致，否则会导致web浏览器忽略所有的框架浏览器忽略所有的框架定义而只显示定义而只显示和和之间的内容。之间的内容。v标签主要有标签主要有rows、cols、border、bordercolor和和frameborder五个属性五个属性。2.1 2.1 框架设置标签框架设置标签framesetframeset1格式：格式：2说明：说明：rows说明窗口横向分隔情况，说明窗口横向分隔情况，cols说明纵说明纵向分隔。向分隔。各参数值之间用各参数值之间用逗号逗号分隔，依次表示各个分隔，依次表示各个子窗口的高度（宽度）。子窗口的高度（宽度）。
42、一、水平一、水平/垂直分割垂直分割窗口属性窗口属性rows/colsrows和和cols可以用可以用数字、百分比或剩余值数字、百分比或剩余值以及这三种方式的混合以及这三种方式的混合来表示：来表示：数字：数字：表示子窗口高度（宽度）所占的表示子窗口高度（宽度）所占的像素点数。像素点数。百分比百分比“%”：表示子窗口高度（宽度）：表示子窗口高度（宽度）占整个浏览器窗口高度（宽度）的百分比。占整个浏览器窗口高度（宽度）的百分比。一、水平一、水平/垂直分割垂直分割窗口属性窗口属性rows/colsrows和和cols可以用可以用数字、百分比或剩余值以及这数字、百分比或剩余值以及这三种方式的混合三种方式
43、的混合来表示：来表示：剩余值剩余值“*”。表示当前所有窗口设定之后的剩余。表示当前所有窗口设定之后的剩余部分。当符号部分。当符号*只出现一次，即其他子窗口的大小都只出现一次，即其他子窗口的大小都有明确定义时，表示该子窗口的大小将根据浏览器有明确定义时，表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号窗口的大小而自动调整。当符号*出现一次以上时，出现一次以上时，表示表示按比例按比例分割浏览器窗口的剩余空间。分割浏览器窗口的剩余空间。一、水平一、水平/垂直分割垂直分割窗口属性窗口属性rows/cols例如例如1：表示将浏览器窗口分割为表示将浏览器窗口分割为3列：列：第一个子窗口在第一列，
44、窗口宽度为整第一个子窗口在第一列，窗口宽度为整个浏览器窗口宽度的个浏览器窗口宽度的40%；第二个子窗口在第二列，占浏览器窗口第二个子窗口在第二列，占浏览器窗口剩余空间的剩余空间的2/3，即其宽度为整个浏览器，即其宽度为整个浏览器窗口宽度的窗口宽度的40%；第三个子窗口占剩余空间的第三个子窗口占剩余空间的1/3，宽度为，宽度为整个浏览器窗口宽度的整个浏览器窗口宽度的20%。例例2 2：横向与纵向同时分割：横向与纵向同时分割 Simple FRAMESET 例例3：嵌套分割：嵌套分割在在标签中，可运用标签中，可运用border属性属性控制分割窗口的框架的宽度控制分割窗口的框架的宽度，其语法如下所，
45、其语法如下所示：示：其中的数值代表此窗口框架的宽度，单位其中的数值代表此窗口框架的宽度，单位为像素。为像素。二、设置窗口框架二、设置窗口框架宽度属性宽度属性borderborder在在标签中，可运用标签中，可运用bordercolor属性属性设置边框的颜色设置边框的颜色，其语法如下所示：，其语法如下所示：其中的其中的#代表此边框的颜色，取值可为代表此边框的颜色，取值可为RGB代码。代码。三、设置边框三、设置边框颜色属性颜色属性bordercolorbordercolorframeborder属性用于属性用于控制窗口框架四周，控制窗口框架四周，是否显示框架是否显示框架。此属性可使用在。此属性可使
46、用在标标签与签与标签中，使用在标签中，使用在标签内标签内时，可控制窗口框架的所有子窗口。使用在时，可控制窗口框架的所有子窗口。使用在标签时，则仅能控制该标签所代表的子标签时，则仅能控制该标签所代表的子窗口，其语法为：窗口，其语法为：0代表不显示框线，代表不显示框线，1代表显示框线，其默代表显示框线，其默认值为认值为1。四、设置框架四、设置框架隐藏属性隐藏属性frameborderframeborder2.2 2.2 子窗口设置标签子窗口设置标签frameframev每个子窗口均由每个子窗口均由标签定义标签定义v是单个的标签，使用时，将它是单个的标签，使用时，将它写在写在的开始和结束标签之间，的
47、开始和结束标签之间，它它主要有六个属性：主要有六个属性：src、name、marginwidth、marginheight、scrolling和和noresize。src属性是用于属性是用于指定要导入到该子窗口的指定要导入到该子窗口的HTML文件文件，其语法如下所示：，其语法如下所示：如果一个如果一个标签中没有标签中没有src属性，则该属性，则该窗口显示为空。窗口显示为空。1 1 srcsrc属性属性name属性是用来属性是用来指定窗口的名称指定窗口的名称，此属，此属性是可选的。当完成定义子窗口的名称后，性是可选的。当完成定义子窗口的名称后，我们便可在超链接中，指定显示网页的子我们便可在超链接
48、中，指定显示网页的子窗口。其语法如下所示：窗口。其语法如下所示：2 2 namename属性属性scrolling属性用于描述该窗口属性用于描述该窗口是否有滚动条是否有滚动条。该属性是可选的。其设置语法如下：该属性是可选的。其设置语法如下：各设置值所代表的意义依序为显示、不显各设置值所代表的意义依序为显示、不显示、自动设置，默认值是示、自动设置，默认值是auto。3 3 scrollingscrolling属性属性noresize属性是一个标志，没有取值。它属性是一个标志，没有取值。它说明浏览者说明浏览者是否可以自行用鼠标调整窗口是否可以自行用鼠标调整窗口的大小的大小。如果设定了。如果设定了n
49、oresize属性，则窗属性，则窗口不能调整。如果默认，则可以自行调整口不能调整。如果默认，则可以自行调整窗口的大小。窗口的大小。4 4 noresizenoresize属性属性marginwidth属性：属性：用来控制窗口内显示的用来控制窗口内显示的内容与窗口左右边缘的距离内容与窗口左右边缘的距离，该属性是取一，该属性是取一个像素值，默认为个像素值，默认为1，该属性是可选的。，该属性是可选的。marginaheight属性：属性：用来控制窗口内显示用来控制窗口内显示的内容与上下边缘的距离的内容与上下边缘的距离，该属性是取一个，该属性是取一个像素值，默认为像素值，默认为1，该属性是可选的。，该
50、属性是可选的。5 5设置边距属性设置边距属性marginwidth/marginheightmarginwidth/marginheight对于框架网页中的超链接，可用对于框架网页中的超链接，可用target属性指定该链接的内容在哪个属性指定该链接的内容在哪个窗口显示。窗口显示。3 FRAME3 FRAME间的链接间的链接93用用target属性指定的目标属性指定的目标窗口名称，必须窗口名称，必须使用字母使用字母/数字字符，否则窗口名将被忽略数字字符，否则窗口名将被忽略。有几个有几个特定的窗口特定的窗口名例外，这几个窗口名名例外，这几个窗口名有特殊含义，它们是有特殊含义，它们是_blank、_