《网络建设基础..课件》由会员分享，可在线阅读，更多相关《网络建设基础..课件（83页珍藏版）》请在金锄头文库上搜索。
1、静态网页设计静态网页设计HTML表示超文本标记语言（表示超文本标记语言（HyperTextMarkupLanguage）。）。HTML文件是一个包含标记的文本文件。文件是一个包含标记的文本文件。这些标记保证浏览器怎样显示这个页面。这些标记保证浏览器怎样显示这个页面。HTML文件必须有文件必须有htm或者或者html扩展名。扩展名。HTML文件可以用一个简单的文本编辑器创文件可以用一个简单的文本编辑器创建。建。HTML文件是什么？文件是什么？1.HTML编辑器编辑器关于关于HTML编辑器：编辑器：用一些所见即所得的编辑器，比如用一些所见即所得的编辑器，比如frontpage，dreamweave
2、r，你可以很容易创建一个页面，而，你可以很容易创建一个页面，而不需要在纯文本中编写代码。不需要在纯文本中编写代码。但是假如你想成为一名熟练的网络开发者，我们但是假如你想成为一名熟练的网络开发者，我们强烈推荐你用纯文本编辑器编写代码，这有助于强烈推荐你用纯文本编辑器编写代码，这有助于学习学习HTML基础。基础。2. HTML文件结构的格式文件结构的格式2.1HTML的基本语法的基本语法1 1 了解了解HTMLHTML的标记的标记HTML文件是由文件是由标记标记和和文本文本组成组成格式为：格式为：标记受标记影响的文本标记标记受标记影响的文本标记标记的属性。标记需要通过属性制作各标记的属性。标记需要
3、通过属性制作各种效果。格式为：种效果。格式为： 标记标记 属性属性1 1属性值属性值 属性属性2 2属性值属性值受影响的文本标记受影响的文本标记 属性示例属性示例 注意：注意：1.1.使用时属性之间没有顺序。对同一段文使用时属性之间没有顺序。对同一段文本，可以用多个标记来共同作用，产生本，可以用多个标记来共同作用，产生一定的效果。一定的效果。2.HTML也有注释标记。也有注释标记。“”之间的部分为注释内容之间的部分为注释内容, ,可以插入文可以插入文本的任何地方。本的任何地方。3.3.标记和属性标记和属性不区分大小写不区分大小写。2 2 HTMLHTML的基本结构的基本结构HTMLHTML文件
4、以文件以开头开头, ,以以结尾。结尾。HTMLHTML文件包括头部文件包括头部和主体和主体。基本结构为：基本结构为： 网页标题网页标题 网页内容网页内容 【例【例1 1】简单的】简单的HTMLHTML文件文件 网页设计网页设计 我的第一个网页！我的第一个网页！2.2 文件结构的格式标记文件结构的格式标记1 1、 HTMLHTML文档标记文档标记HTMLHTML文档标记的格式为文档标记的格式为: : HTML HTML文档内容文档内容 处处于于文文档档的的最最前前面面，表表示示HTMLHTML文文档档的的开开始始，即即浏浏览览器器从从开开始始解解释释，直直到到遇遇到到为为止止。每每个个HTMLH
5、TML文文件件均均以以开始，以开始，以结束。结束。 2 2、HTMLHTML文件头标记文件头标记.HTMLHTML文件头标记的格式为：文件头标记的格式为： 头部内容头部内容 文文件件头头部部在在文文件件标标记记之之后后，其其内内容容可可以以是是标标题题名名，文文本本文文件件地地址址、创创作作信信息息等等网网页页信信息息说说明明，对对应应于于相相应应的的标标记。如标题标记记。如标题标记。3 3 HTMLHTML文件标题标记文件标题标记 标题名标题名 title【例例2 2】如如果果没没有有使使用用标标记记，而而单单独独使使用用，标记仍可设定。标记仍可设定。 网页设计网页设计 无无<head
6、>时，时，<title>；标记仍起作用；标记仍起作用 显示结果描述实体不可拆分的空格 大于>&and符号&“引号"单引号想要在HTML中显示一个小于号“”，需要用到字符实体。一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）注意：实体名是大小写敏感的。4HTML文件主体标记文件主体标记格式为：格式为： background=”文文件件名名” text=”颜颜色色” link=”颜颜色色值值” vlink=”颜颜色色值值” alink=”颜颜色色值值”background background 设置网页的
7、背景图像：设置网页的背景图像：bgcolor bgcolor 设置网页的背景色；设置网页的背景色；text text 设置文本的颜色：设置文本的颜色：link link 设置未被访问过的超文本链接的颜色，默设置未被访问过的超文本链接的颜色，默 认为蓝色；认为蓝色；vlink vlink 设置已被访问过的超文本链接的颜色，默设置已被访问过的超文本链接的颜色，默 认为蓝色；认为蓝色；alink 设置超文本链接在被访问瞬间的颜色，设置超文本链接在被访问瞬间的颜色， 默认为蓝色默认为蓝色 3 HTML文字格式与页面格式文字格式与页面格式3.1设置标题格式设置标题格式设置标题格式的格式为：设置标题格式的
8、格式为： 标题标题 属属性性alignalign用用来来设设置置标标题题在在页页面面中中的的对对齐齐方方式式：leftleft( (左对齐左对齐) )、center(center(居中居中) )或或right(right(右对齐右对齐) )。属属性性n n用用来来指指定定标标题题文文字字的的大大小小。n n可可以以取取1 16 6的的整整数数值，取值，取1 1时文字最大，时文字最大，6 6时文字最小，时文字最小，默认时为默认时为。这些标记显示宋体字。这些标记显示宋体字。标记会自动插入一个空行，不必用标记会自动插入一个空行，不必用标记再加空行。标记再加空行。在一个标题行中无法使用不同大小的字体。
9、在一个标题行中无法使用不同大小的字体。【例【例3 3】用】用设置标题的大小。设置标题的大小。网页设计网页设计今天天气真好今天天气真好!今天天气真好今天天气真好!今天天气真好今天天气真好!今天天气真好今天天气真好!今天天气真好今天天气真好!今天天气真好今天天气真好!今天天气真好今天天气真好!3.2设置强制换行标记设置强制换行标记放放在在一一行行的的末末尾尾，可可使使后后面面的的文文字字换换到到下下一一行行，而而又又不不会会在在行行与与行行之之间间留留下空行。下空行。强制换行标记的格式为：强制换行标记的格式为：文字文字 换换行行标标记记单单独独使使用用，可可使使页页面面清清晰晰、整整齐。齐。【例【
10、例4 4】强制换行标记的使用，】强制换行标记的使用， 强制换行标记的使用强制换行标记的使用欢迎进入牡丹园欢迎进入牡丹园!新闻新闻 影视影视聊聊 天天 室室3.3设置文字格式设置文字格式1 1 设置文字的大小设置文字的大小设置文字的大小的格式为：设置文字的大小的格式为：font 被被设设置的文字置的文字 font标记可设定文字的字体、字号和颜色。标记可设定文字的字体、字号和颜色。sizesize用用来来设设置置文文字字的的大大小小。数数字字的的取取值值范范围围从从1 17 7，sizesize取取1 1时最小，取时最小，取7 7时最大。时最大。fac
11、eface用用来来设设置置字字体体。如如黑黑体体、宋宋体体、楷楷体体GB2312GB2312、仿仿宋宋GB2312GB2312、隶书、隶书、Times New RomanTimes New Roman等。等。colorcolor用来设置文字颜色。用来设置文字颜色。和和标标记记都都可可以以设设置置文文字字的的大大小小，当当中中的的size取取7时的文字比时的文字比要大。要大。【例【例5 5】用】用设置文字的大小。设置文字的大小。用用设置文字的大小设置文字的大小文字的大小文字的大小!文字的大小文字的大小 size=1文字的大小文字的大小 size=2文字的大小文字的大小 size=3文字的大小文字
12、的大小 size=4文字的大小文字的大小 size=5文字的大小文字的大小 size=6文字的大小文字的大小 size=72 2 设置字体设置字体当文字是汉字时，格式中的当文字是汉字时，格式中的“字体名字体名”可以为：宋体、幼圆、隶书、楷体可以为：宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋、黑体、仿宋_GB2312等。当文等。当文字为英文时，字体名可以为字为英文时，字体名可以为TimesNewRoman等约等约50种字体。种字体。【例【例6 6】设置字体】设置字体 设置字体设置字体 幼圆幼圆 隶书隶书黑体黑体 楷体楷体_GB2312 仿宋仿宋_GB2312 3 3 设置字型设置字型字形就
13、是文字的风格，如加粗、斜体、带下划字形就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型的控制标记见表线、上标、下标等。字型的控制标记见表2-3【例【例7 7】设置字型】设置字型 设置字型设置字型 设置字体设置字体 黑体黑体设置字体设置字体 斜体斜体设置字体设置字体 带下划线带下划线设置字体设置字体 带删除线带删除线设置字体设置字体 下标下标4 4 设置文字颜色设置文字颜色(a) (a) 标记中的标记中的texttext属性属性利利用用标标记记的的texttext属属性性，可可以以设设定定整整个个网网页页文字的颜色。文字的颜色。格式：格式：body text= 受影响的文字受影响的文字
14、 与与标记所含的内容是标记所含的内容是HTML文件文件的主体，所以它带来的参数对整个文件起作用。的主体，所以它带来的参数对整个文件起作用。颜色可以用相应英文单词或以颜色可以用相应英文单词或以“#”引导的一个引导的一个十六进制代码表示，十六进制代码表示，【例【例8 8】用】用标记设定文字的颜色标记设定文字的颜色 用用<body>标标记记设设定定文文字字的的颜颜色色 静夜思静夜思 李李 白白 床前明月光，疑是地上霜，床前明月光，疑是地上霜， 举头望明月，低头思故乡。举头望明月，低头思故乡。 (b(b）标记中的标记中的colorcolor属性属性利利用用标标记记中中的的colorcolo
15、r属属性性，可可以以设设定定段段落、短语、词或字的颜色。落、短语、词或字的颜色。格式为格式为: : 受影响的文字受影响的文字 颜色的取值与颜色的取值与标记的取值方法相同。标记的取值方法相同。【例【例9】用】用标记设定文字的颜色。标记设定文字的颜色。 用用<font>标记设定文本的颜色标记设定文本的颜色 黑黑 色色 蓝蓝 色色 棕棕 色色 青青 色色 白白 色色 绿绿 色色 红红 色色 黄黄 色色 c c）与与的优先级的优先级当当与与同时对文字颜色进行同时对文字颜色进行定义时，定义时，标记优先。标记优先。3.4设置段落格式设置段落格式1 1 强制换段标记强制换段标记强制换段标记的格式
16、为：强制换段标记的格式为：文字文字 段段落落标标记记放放在在这这段段文文字字的的末末尾尾，就就定定义义了了一一个个新新段段落落的的开开始始。标标记记不不但但能能使使后后面面的的文文字字换换到到下下一一行行，还还可可以以使使两两段段之间留一空行之间留一空行。强强制制换换段段标标记记可可以以看看作作强强制制换换行行标标记记和加一行空行。和加一行空行。【例【例2-102-10】 强制换段标记强制换段标记 欢迎访问吉林大学主页欢迎访问吉林大学主页学校概貌学校概貌美丽校园美丽校园吉大简报吉大简报 2 2 设置段落标记设置段落标记设置段落标记的格式为：设置段落标记的格式为：p align= 文字文字 其中
17、属性其中属性align用来设置段落的对齐方式，用来设置段落的对齐方式，可以为可以为left、center或或right，分别表示居，分别表示居左、居中、居右。默认时为左、居中、居右。默认时为left。3 3 显示预排格式标记显示预排格式标记 pre 当当用用其其他他编编辑辑工工具具编编排排好好了了一一段段文文字字后后，其其中中很很可可能能有有一一些些HTMLHTML文文件件不不支支持持的的控控制制符符号号，如如回回车车、多多个个空空格格、TabTab键键等等。如如果果希希望望在在浏浏览览网网页页时时仍仍保保留留在在编编辑辑工工具具中中已已经经排排好好的的段段落落格格式式，可可以以使使用用标记将
18、预先排好的格式保留下来。标记将预先排好的格式保留下来。显示预排格式标记的格式为：显示预排格式标记的格式为： 预先排好的格式预先排好的格式 pre【例【例2-112-11】预排格式标记的使用。】预排格式标记的使用。 显示预排格式显示预排格式 唐诗二首唐诗二首 赋得古原草送别赋得古原草送别 长长 相相 思思 唐唐白居易白居易 唐唐白居易白居易 离离原上草，一岁一枯荣。离离原上草，一岁一枯荣。 汴水流，泗水流，汴水流，泗水流， 野火烧不尽，春风吹又生。野火烧不尽，春风吹又生。 流到瓜洲古渡头。流到瓜洲古渡头。 远芳侵古道，晴翠接荒城。远芳侵古道，晴翠接荒城。 吴山点点愁。吴山点点愁。 又送王孙去，萋
19、萋满别情。又送王孙去，萋萋满别情。 思悠悠，恨悠悠，思悠悠，恨悠悠， 恨到归时方始休。恨到归时方始休。 月明人依楼。月明人依楼。 4设置超级链接、列表和表格设置超级链接、列表和表格4.1设置超级链接设置超级链接1 1锚点标记锚点标记 a锚点锚点(anchor)标记由标记由定义，它在网页定义，它在网页上建立超文本链接。通过单击一个词、上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资句或图片，可从此处转到另一个链接资源源(目标资源目标资源)，这个目标资源有唯一的，这个目标资源有唯一的地址地址(URL)。以上特点的词、句或图片就以上特点的词、句或图片就称为称为热点热点。标记的格式
20、为：标记的格式为： 热点热点 属属性性hrefhref为为超超文文本本引引用用，它它的的值值为为一一个个URLURL，是目标资源的有效地址。，是目标资源的有效地址。属属性性namename指指定定当当前前文文档档内内的的一一个个字字符符串串，作作为为链链接接时时可可以以使使用用的的有有效效的的目目标标资资源源的的地址。地址。热点可以根据需要设置颜色，利用热点可以根据需要设置颜色，利用标记中相关的属性。标记中相关的属性。2 2 建立指向其他页面的链接建立指向其他页面的链接其格式为：其格式为： 热点文本热点文本 根根据据目目标标文文件件与与当当前前文文件件的的目目录录关关系系，有有如如以以下下4
21、4种写法。种写法。1 1）链接到链接到同一目录内同一目录内的网页文件的网页文件链接到同链接到同目录内的网页文件的格式为：目录内的网页文件的格式为： 热热点点文文本本 2 2）链接到链接到下一级目录下一级目录中的网页文件中的网页文件链接到下一级目录中的网页文件的格式为：链接到下一级目录中的网页文件的格式为： 热点文本热点文本 3 3）链接到）链接到上一级目录上一级目录中的网页文件中的网页文件链接到上一级目录中的网页文件的格式为：链接到上一级目录中的网页文件的格式为： 热热点点文本文本 其中其中“”表示退到上一级目录中。表示退到上一级目录中。4 4）链接到）链接到同级目录同级目录中的网页文件中的网
22、页文件链接到同级目录中的网页文件的格式为：链接到同级目录中的网页文件的格式为： 热点文本热点文本 5 5） 创建创建指向本页指向本页中的链接中的链接 要要在在当当前前页页面面内内实实现现超超链链接接，需需要要定定义义两两个个标标记记：一一个个为为超超链链接接标标记记，另另一一个个为为书书签签标标记记。超链接标记的格式为：超链接标记的格式为： 热点文本热点文本 即即单单击击热热点点文文本本，将将跳跳转转到到“记记号号名名”开开始始的的文本。文本。 书书签签就就是是用用标标记记对对该该文文本本做做一一个个记记号号。若若有有多多个个链链接接的的书书签签名名，书书签签名名在在的的namename属属性
23、中定义。性中定义。格式为：格式为： 目目标标文文本本附附近近的的字字符串符串 【例【例2-14】链接本页中的文本】链接本页中的文本链接本页中的文本链接本页中的文本学院概况学院概况1专业课专业课2实验室实验室3资料室资料室1专业设置专业设置2实验室实验室3资料室资料室6. 6. 创建指向电子邮件的链接创建指向电子邮件的链接若若要要创创建建指指向向电电子子邮邮件件的的链链接接，在在标标记记的的hrefhref属性中加入属性中加入mailtomailto，其格式为：，其格式为：热点文本热点文本例如例如：E-mailE-mail地址是地址是，建立如下链接，建立如下链接：信箱信箱： 4.2 设置列表设
24、置列表列表分为无序列表和有序列表两类。列表分为无序列表和有序列表两类。带序号标志带序号标志(如数字、字母等如数字、字母等)的表项就的表项就组成有序列表，否则为无序列表。组成有序列表，否则为无序列表。1 1、无序列表无序列表无无序序列列表表中中每每一一个个表表项项的的前前面面是是项项目目符符号号（如如、等等）。建建立立无无序序列列表表使使用用标记和标记和表项标记。格式为：表项标记。格式为： 第一个列表项第一个列表项 第二个列表项第二个列表项注意注意:是单标记是单标记, ,即一个一个表项的开即一个一个表项的开始始, ,就是前一个表项的结束就是前一个表项的结束. .无序列表的特点：无序列表的特点：列
25、表项目作为一个整体列表项目作为一个整体,与上下段文本间各与上下段文本间各有一行空白有一行空白;表项向右缩进并左对齐表项向右缩进并左对齐,每行前每行前面有项目符号。每个表项左端的项目符号可面有项目符号。每个表项左端的项目符号可为为disc（实心圆点）、（实心圆点）、circle（空心圆点）、（空心圆点）、square（方块），也可为图像。（方块），也可为图像。例如例如【例【例15】无序列表应用示例】无序列表应用示例无序列表无序列表专业设置专业设置计算机应用计算机应用计算机软件计算机软件计算机图形学计算机图形学2 2、创建有序列表创建有序列表通通过过带带序序号号的的列列表表可可以以更更清清楚楚地地
26、表表达达信信息息的的顺顺序序。使使用用标标记记可可以以建建立立有有序序列列表表，表表项项的的标标记记为为，格式为：，格式为： 第一个列表项第一个列表项 第二个列表项第二个列表项 在浏览器中显示时，有序列表整个表项与上下段在浏览器中显示时，有序列表整个表项与上下段之间各有一行空白，列表项目向右缩进并左对齐，之间各有一行空白，列表项目向右缩进并左对齐，各表项前带序号。各表项前带序号。【例【例2-172-17】有序列表应用示例】有序列表应用示例有序列表有序列表专业设置专业设置计算机应用计算机应用计算机软件计算机软件计算机图形学计算机图形学列表的嵌套列表的嵌套列表嵌套把主页分为多个层次，例如书的列表嵌
27、套把主页分为多个层次，例如书的目录，给人以很强的层次感。有序列表和目录，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且可以相无序列表不仅可以自身嵌套，而且可以相互嵌套。互嵌套。1、无序列表中套无序列表、无序列表中套无序列表【例【例2-19】无序列表中套无序列表】无序列表中套无序列表无序列表中套无序列表无序列表中套无序列表第一层无序列表第一层无序列表1第二层无序列表第二层无序列表第二层无序列表第二层无序列表第一层无序列表第一层无序列表2第二层无序列表第二层无序列表第二层无序列表第二层无序列表第二层无序列表第二层无序列表(2)无序列表嵌套有序列表无序列表嵌套有序列表【例【例2-20】
28、无序列表中套有序列表】无序列表中套有序列表无序列表中套有序列表无序列表中套有序列表 第一层序列表第一层序列表1第二层有序列表第二层有序列表第二层有序列表第二层有序列表第一层无序列表第一层无序列表2第二层有序列表第二层有序列表第二层有序列表第二层有序列表第二层有序列表第二层有序列表4.3设置表格设置表格1建立简单表格建立简单表格最最简简单单的的表表格格仅仅包包括括行行和和列列.表表格格的的标标记记为为,行行的的标标记记为为,表表头头的的标标记记为为，表表项项的的标标记记为为。其其中中，是是单单标标记记。表表项项内内容容写写在在与与之之间间。则必须成对使用。其格式为：则必须成对使用。其格式为：表头
29、表头1表头表头2表头表头n表项表项1表项表项2表项表项n表项表项1表项表项2表项表项n在在浏浏览览器器中中显显示示时时，标标记记的的文文字字按按粗粗体体显显示示，标标记记的的文文字字按按正正常常字字体体显显示示。表表格格的的整整体体外观由外观由标记的属性决定：标记的属性决定：border定义表格边框的粗细，定义表格边框的粗细，n取整数，取整数，单位是像素单位是像素(如果省略，则不带边框如果省略，则不带边框)width定义表格的宽度，定义表格的宽度，x为像素数或占窗为像素数或占窗口的百分比口的百分比height定义表格的高度，定义表格的高度，y为像素数或占窗为像素数或占窗口的百分比口的百分比ce
30、llspacing定义表项间隙，单位是像素定义表项间隙，单位是像素cellpadding定义表项内部空白，单位是像素。定义表项内部空白，单位是像素。【例【例2-21】建立有框线和无框线简单表格。】建立有框线和无框线简单表格。 建立有框线和无框线简单表格建立有框线和无框线简单表格 学号学号姓名姓名语文语文数学数学平均分数平均分数 0001张三张三9298.595.3 0002李四李四888285 0006王麻子王麻子68.59079.3 2. 2. 给表格加上标题给表格加上标题用用标记给表格加标题，其格式为：标记给表格加标题，其格式为：标题标题 其中：其中：valignvalign设设置置标标题
31、题放放在在表表的的上上部部toptop（默默认认），还还是下部是下部bottom;bottom;alignalign设设置置标标题题放放在在表表的的上上部部toptop或或下下部部的的中中间间（缺生），左边（缺生），左边leftleft，还是右边，还是右边rightright；3 跨多行多列的表项跨多行多列的表项使使用用、标标记记的的colspan和和rowspan属属性性，可可以以分分别别制制作作跨跨多多行行（合合并并行行）和和跨跨多多列列（何何并并列列）的的表格。表格。跨多列的表元跨多列的表元例如：例如： Morning Menu Morning Menu Food Food Drink
32、Drink SweetSweet ABC ABC 跨多行的表元跨多行的表元 Morning Menu Morning Menu Food A Food A Drink B Drink B Sweet C Sweet C 【例【例2-222-22】建立多重表头的格式】建立多重表头的格式 建立多重表头的格式建立多重表头的格式 成绩表成绩表 学号学号姓名姓名成绩成绩 语文语文数学数学总分数总分数 1张三张三8565150 2李四李四7697173 3王武王武8778165 4 4、表格在页面中的属性、表格在页面中的属性 （1 1）设定表格在页面中的位置）设定表格在页面中的位置表表格格浏浏览览器器窗窗
33、口口的的位位置置也也有有三三种种：居居左左、居居中中和和居居右右。使使用用标标记记的的alignalign属性，格式为：属性，格式为： leftleft表表示示居居左左，centercenter表表示示居居中中，rightright表表示示居居右右。当当表表格格位位于于页页面面的的左左侧侧或或右右侧侧时时，文文本本填填充充在在另另一一侧侧。当当表表格格居居中中时时，表表格格两两边边没没有有文文本本。当当alignalign属属性性默默认时，文本在表格的下面。认时，文本在表格的下面。（2 2）表格的图像背景）表格的图像背景可以在可以在、标记中使用下面属性：标记中使用下面属性：background
34、=”图像文件名图像文件名” 设置背景图像；设置背景图像；bordercolor=”颜色颜色”设定表格边框颜色；设定表格边框颜色；bordercolorlight=”颜色颜色”设定表格边框亮部颜色；设定表格边框亮部颜色；rules=”row,cols或或none”设定表内线的显示方法；设定表内线的显示方法；另外，还可以用另外，还可以用标记中标记中bgcolorbgcolor属性给表格的每个属性给表格的每个单元设置背景色：单元设置背景色：td bgcolor=”颜色或颜色值颜色或颜色值”【例【例2-23】设定表格在页面中的位置和图像背景】设定表格在页面中的位置和图像背景设定表格在页面中的位置和图像
35、背设定表格在页面中的位置和图像背成绩表成绩表学号学号姓名姓名语文语文数学数学平均分数平均分数0001张三张三9298.595.30002李四李四8882850006王武王武68.59079.35.1设置图像标记设置图像标记Img标签和标签和src属性属性在在HTML里面，图像是由里面，图像是由标签定义标签定义的。的。是空标签，意思是说，它只拥有属是空标签，意思是说，它只拥有属性，而没有结束标签。性，而没有结束标签。想要在页面上显示一个图像，需要使用想要在页面上显示一个图像，需要使用src属性。属性。“src”表示表示“源源”的意思。的意思。“src”属性的值是所要显示图像的属性的值是所要显示图
36、像的URL。插入图像的语法：插入图像的语法：5设置多媒体与框架设置多媒体与框架 标记中的属性说明如下：标记中的属性说明如下：srcsrc属属性性 指指出出想想要要加加入入图图像像的的文文件件名名，即即“图像文件的路径图像文件名图像文件的路径图像文件名”：altalt属属性性 在在浏浏览览器器尚尚未未完完全全读读入入图图像像时时，在图像位置显示的文字：在图像位置显示的文字：widthwidth属性属性 图像的宽度图像的宽度( (像素数或百分数像素数或百分数) )heightheight属性属性 图像的高度图像的高度( (像素数或百分数像素数或百分数) )hspacehspace属性属性 水平方向
37、空白像素数：水平方向空白像素数：vspacevspace属性属性 垂直方向空白像素数：垂直方向空白像素数：alignalign属属性性 图图像像在在页页面面中中的的对对齐齐布布局局方方式式，或图像与文字的对齐方式。或图像与文字的对齐方式。【例【例2-242-24】设置图像的尺寸。】设置图像的尺寸。 设定定图像的尺寸像的尺寸 img src=p1.jpg alt= 原始大小原始大小 img src=p1.jpg alt= height=100宽6060高高100100 img src=p1.jpg alt= height=40%宽15%15%高高40%40% 5.4设置网页的背景设置网页的背景1
38、 1设置背景色设置背景色格式为：格式为： “颜颜色色值值”可可以以为为颜颜色色的的英英文文名名或或相相应应十十六进制值。六进制值。2 2用图像作为背景用图像作为背景其格式为其格式为“图像文件名图像文件名”中包括图像文件的路径可中包括图像文件的路径可以是相对路经也可以是绝对路径。图像以是相对路经也可以是绝对路径。图像文件可为文件可为GIF格式或格式或JPEG格式的文件。格式的文件。图像文件要做得很小，以便加快下载速图像文件要做得很小，以便加快下载速度。度。【例【例2-252-25】图像作背景。】图像作背景。 用图像作为背景用图像作为背景 用图像作为背景用图像作为背景3 3 用图像作为超链接用图像
39、作为超链接图图像像也也可可以以作作为为热热点点，可可以以为为图图像像设设置置超连接，格式为：超连接，格式为：链链接接到到的的文文件件名名和和图图像像文文件件名名中中均均须须写写出所需的路径。出所需的路径。5.5设置框架设置框架1.建立框架建立框架框框架架的的建建立立使使用用、两两个个标标记记。它它与与一一般般的的HTMl文文件件并并无无大大的的区区别别，只只是是将将标标记记取取代代标标记记，用用来来声声明明框框架架的的定定义义。标标记记用用来来声声明明其其中中框框架页面的内容。其基本结构为：架页面的内容。其基本结构为：1)标记标记标标记记用用来来定定义义个个框框架架组组的的属属性性，格式为：格
40、式为： 其中属性：其中属性：row设定横向分割的框架数日：设定横向分割的框架数日：cols设定纵向分割的框架数日：设定纵向分割的框架数日：border设定边框的宽度；设定边框的宽度；bordercolor设定边框的颜色：设定边框的颜色：frameborder设定有无边框；设定有无边框；framespacing设置各窗口间的空白。设置各窗口间的空白。2)2)标记标记标标记记用用于于给给各各个个框框架架指指定定页页面面的的内内容容，也也就就是是，它它将将各各个个框框架架和和包包含含内内容容的的那那个个文文件件联联系系在在一一起起。是是一一个单标记，格式为：个单标记，格式为：auto noresiz
41、e属性：属性：src src 表示该框架对应的源文件：表示该框架对应的源文件： name name 指指定定框框架架名名。框框架架名名由由字字母母开开头头，下下划划线线开开头头的的名名字字无无效，例如效，例如flame src=“aaal”flame src=”./webl/page.html”name=”sub1”frame src=”http/”，也就是说，源文件可以是某个网址上的文件，只需写上也就是说，源文件可以是某个网址上的文件，只需写上URLURL；border border 设定边框的宽度；设定边框的宽度；bordercolor bordercolor 设定边框的颜色；设定边框的颜
42、色；frameborder frameborder 设定有设定有(yes)(yes)无无(no)(no)边框：边框：marginwidth marginwidth 设置框架内容与左右边框的空白设置框架内容与左右边框的空白marginheight marginheight 设置框架内容与上下边框的空白设置框架内容与上下边框的空白scrolling scrolling 设置是设置是(yes)/(yes)/否否no/no/自动自动(auto)(auto)加入滚动条；加入滚动条；noresize noresize 设设置置不不允允许许窗窗口口改改变变大大小小，默默认认设设置置是是允允许许窗窗口改变大小
43、口改变大小; ;【例【例2-272-27】建立横向排列的框架】建立横向排列的框架建立横向排列的框架建立横向排列的框架【例例2-282-28】建建立立纵纵横横排排列列的的框框架架( (本本例例题题中中的的网网页文件为本章中的例题页文件为本章中的例题) )建立纵横排列的框架建立纵横排列的框架2.设置框架属性设置框架属性1 1）设定框架的有无和颜色设定框架的有无和颜色利利用用和和标标记记可可以以设设置置边边框框的的外外观观，如如大大小小、颜颜色色。两两个个标标记记所所不不同同的的是是，标标记记设设置置的的是是整整个个框框架架的的属属性性，而而只能设置它所控制的框架。只能设置它所控制的框架。设定无边框
44、设定无边框格式为：格式为： frameset frameborder= yes 0 或或frame frameborder= yes0其中取值其中取值yes或或1（默认）表示生成立体的边框，（默认）表示生成立体的边框，no或或0表示无边框。表示无边框。【例例2-292-29】将将【例例2-282-28】纵纵向向框框架架设设置置为为有有表框，其他设为无边框。表框，其他设为无边框。 建立纵横排列的框架建立纵横排列的框架 2）设定边框颜色设定边框颜色利利用用和和标标记记的的bordercolorbordercolor属属性性给给边边框框着色。格式为：着色。格式为： 或或 颜色可取颜色名或十六进制颜色
45、值。颜色可取颜色名或十六进制颜色值。3 3）固定边框固定边框在在默默认认情情况况下下，浏浏览览者者可可以以用用鼠鼠标标拖拖动动边边框框改改变变页页面面大大小小。使使用用的的noresizenoresize属属性性可可以以固固定定边边框框的的位位置置。格格式式为为5.6设置框架的链接设置框架的链接使使用用的的target属属性性就就可可以以控控制制目目标标文文件件在在那那个个框框架架内内显显示示。当当单单击击热热点点文文本本时时，目目标标文文件件就就会会出出现现在在target指指定定的的框框架架内内。Target属属性性的的值值可可以以为为框框架架名名，格格式为：式为： 热点文本热点文本框架名
46、有四个特殊值，分别实现如下特殊的框架名有四个特殊值，分别实现如下特殊的4类操作。类操作。_blank热点文本热点文本链接的目标文件被载入一个新的没有名字的浏览器窗口。链接的目标文件被载入一个新的没有名字的浏览器窗口。_self热点文本热点文本链接的目标文件被载入当前框架窗口中，代替正在显示的链接的目标文件被载入当前框架窗口中，代替正在显示的热点文本所在的那个文件。热点文本所在的那个文件。_top热点文本热点文本链接的目标文件被载入整个浏览器窗口。链接的目标文件被载入整个浏览器窗口。_parent热点文本热点文本【例【例2-312-31】框架间的链接】框架间的链接index.htmindex.h
47、tm文件内容文件内容框架间的链接框架间的链接e1.htm内容为内容为：打开一个新窗口显示打开一个新窗口显示当前框架窗口显示当前框架窗口显示整个窗口显示整个窗口显示a1.htma1.htm内容为：内容为：框架间的链接框架间的链接2.6 设置表单设置表单(FORM)标记标记表单是一个能够包含表单元素的区域。表单是一个能够包含表单元素的区域。表单元素是能够让用户在表单中输入信息表单元素是能够让用户在表单中输入信息的元素（比如文本框，密码框，下拉菜单，的元素（比如文本框，密码框，下拉菜单，单选框，复选框等等）。单选框，复选框等等）。表单是用表单是用元素定义的。元素定义的。Input最常用的表单标签是最
48、常用的表单标签是标签。标签。Input的类型用的类型用type属性指定。最常用的属性指定。最常用的input类型解释如下：类型解释如下：文本框文本框在表单中，文本框用来让用户输入字母、数字等等。在表单中，文本框用来让用户输入字母、数字等等。Firstname:Lastname:单选按钮单选按钮当需要用户从有限个选项中选择一个时，使用单选按当需要用户从有限个选项中选择一个时，使用单选按钮。钮。MaleFemale复选框复选框当需要用户从有限个选项中选择一个或多当需要用户从有限个选项中选择一个或多个时，使用复选框。个时，使用复选框。IhaveabikeIhaveacar表单的表单的action属性和提交按钮属性和提交按钮当用户点击提交按钮的时候，表单的内容当用户点击提交按钮的时候，表单的内容会被提交到其他文件。表单的会被提交到其他文件。表单的action属性属性定义了所要提交到的目的文件，该目的文定义了所要提交到的目的文件，该目的文件收到信息后通常进行相关的处理。件收到信息后通常进行相关的处理。Username:
