《网站规划与网页设计》由会员分享，可在线阅读，更多相关《网站规划与网页设计（55页珍藏版）》请在金锄头文库上搜索。
1、网站规划与网页设计4.1 XHTML4.1 XHTML简介简介简介简介4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构4.3 4.3 网页文件的创建过程网页文件的创建过程网页文件的创建过程网页文件的创建过程4.4 4.4 段落标记段落标记段落标记段落标记4.5 4.5 文字标记文字标记文字标记文字标记4.6 4.6 超链接超链接超链接超链接4.7 4.7 图像图像图像图像4.8 4.8 表格表格表格表格4.9 4.9 框架（多窗口页面）框架（多窗口页面）框架（多窗口页面）框架（多窗口页面） 4.10 4.10 表单表单表单表单 第第4章章 XHTML
2、 基础基础4.1.1 XHTML4.1.1 XHTML4.1.1 XHTML4.1.1 XHTML的产生的产生的产生的产生 l l HTMLHTML语言依然有缺陷和不足，人们仍在不断的改进它，语言依然有缺陷和不足，人们仍在不断的改进它，语言依然有缺陷和不足，人们仍在不断的改进它，语言依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上的应用需求。使它更加便于控制和有弹性，以适应网络上的应用需求。使它更加便于控制和有弹性，以适应网络上的应用需求。使它更加便于控制和有弹性，以适应网络上的应用需求。l l 20002000年，年，年，年，W3CW3C组织公布发行了组织公布发
3、行了组织公布发行了组织公布发行了XHTML 1.0XHTML 1.0版本。版本。版本。版本。l l XHTML 1.0XHTML 1.0是一种在是一种在是一种在是一种在HTML 4.0HTML 4.0基础上优化和改进的新语基础上优化和改进的新语基础上优化和改进的新语基础上优化和改进的新语言，目的是基于言，目的是基于言，目的是基于言，目的是基于XMLXML应用。应用。应用。应用。l l XHTMLXHTML是一种增强了的是一种增强了的是一种增强了的是一种增强了的HTMLHTML，它的可扩展性和灵活性它的可扩展性和灵活性它的可扩展性和灵活性它的可扩展性和灵活性将适应未来网络应用更多的需求。将适应未
4、来网络应用更多的需求。将适应未来网络应用更多的需求。将适应未来网络应用更多的需求。 4.1 XHTML4.1 XHTML简介简介简介简介4.1.2 XHTML4.1.2 XHTML4.1.2 XHTML4.1.2 XHTML的优点的优点的优点的优点 XHTML XHTML 内容既符合内容既符合内容既符合内容既符合XMLXML，并且如果依照一些简单的指，并且如果依照一些简单的指，并且如果依照一些简单的指，并且如果依照一些简单的指导方针，也能被导方针，也能被导方针，也能被导方针，也能被HTML 4.0HTML 4.0用户代理程序识别。用户代理程序识别。用户代理程序识别。用户代理程序识别。 1 1X
5、HTMLXHTML文档遵从文档遵从文档遵从文档遵从XMLXML标准标准标准标准 用标准的用标准的用标准的用标准的XMLXML工具很容易查看、编辑和检验它们工具很容易查看、编辑和检验它们工具很容易查看、编辑和检验它们工具很容易查看、编辑和检验它们. .在现有的在现有的在现有的在现有的HTML 4.0HTML 4.0代理用户程序中使用，也可以在新的代理用户程序中使用，也可以在新的代理用户程序中使用，也可以在新的代理用户程序中使用，也可以在新的XHTMLXHTML用户用户用户用户代理程序中使用，在后者中使用可以达到与前者同样或更好代理程序中使用，在后者中使用可以达到与前者同样或更好代理程序中使用，在
6、后者中使用可以达到与前者同样或更好代理程序中使用，在后者中使用可以达到与前者同样或更好的效果。的效果。的效果。的效果。 2 2在在在在XHTMLXHTML文档中可使用更多的应用程序文档中可使用更多的应用程序文档中可使用更多的应用程序文档中可使用更多的应用程序 XHTML XHTML文档中使用的应用程序（如文档中使用的应用程序（如文档中使用的应用程序（如文档中使用的应用程序（如ScriptScript和和和和AppletApplet）可以是可以是可以是可以是HTMLHTML的文档对象模型的文档对象模型的文档对象模型的文档对象模型DOMDOM，也可以是，也可以是，也可以是，也可以是XMLXML的的
7、的的DOMDOM。4.1 XHTML4.1 XHTML简介简介简介简介4.1.3 XHTML4.1.3 XHTML代码规范代码规范代码规范代码规范 1 1所有的标记都必须有一个相应的结束标记所有的标记都必须有一个相应的结束标记所有的标记都必须有一个相应的结束标记所有的标记都必须有一个相应的结束标记单独不成对的标签，则在标签最后加一个单独不成对的标签，则在标签最后加一个单独不成对的标签，则在标签最后加一个单独不成对的标签，则在标签最后加一个“/”“/”来关闭它来关闭它来关闭它来关闭它 一定写对应的一定写对应的一定写对应的一定写对应的 img/ 2 2所有标签的元素和属性的名字都必须使用小写所有标
8、签的元素和属性的名字都必须使用小写所有标签的元素和属性的名字都必须使用小写所有标签的元素和属性的名字都必须使用小写 XHTML XHTML对大小写是敏感的。对大小写是敏感的。对大小写是敏感的。对大小写是敏感的。XHTMLXHTML要求所有的标签和要求所有的标签和要求所有的标签和要求所有的标签和属性的名字都必须使用小写字母。属性的名字都必须使用小写字母。属性的名字都必须使用小写字母。属性的名字都必须使用小写字母。4.1 XHTML4.1 XHTML简介简介简介简介4.1.3 XHTML4.1.3 XHTML代码规范代码规范代码规范代码规范 3 3所有的标记都必须合理嵌套所有的标记都必须合理嵌套所
9、有的标记都必须合理嵌套所有的标记都必须合理嵌套 错误错误错误错误 按照按照按照按照XHTMLXHTML要求必须修改为：要求必须修改为：要求必须修改为：要求必须修改为： /p/p 4 4所有的属性必须用引号括起来所有的属性必须用引号括起来所有的属性必须用引号括起来所有的属性必须用引号括起来在在在在HTMLHTML中可写为：中可写为：中可写为：中可写为：而按照而按照而按照而按照XHTMLXHTML要求必须修改为：要求必须修改为：要求必须修改为：要求必须修改为：4.1 XHTML4.1 XHTML简介简介简介简介4.1.3 XHTML4.1.3 XHTML代码规范代码规范代码规范代码规范 5 5特殊
10、符号特殊符号特殊符号特殊符号“”“”“”和和和和“&”“&”用编码表示用编码表示用编码表示用编码表示 小于（小于（小于（小于（）号，不是标签一部分的，必须被编码为）号，不是标签一部分的，必须被编码为）号，不是标签一部分的，必须被编码为）号，不是标签一部分的，必须被编码为>>； （&）号，不是实体的一部分的，必须被编码为）号，不是实体的一部分的，必须被编码为）号，不是实体的一部分的，必须被编码为）号，不是实体的一部分的，必须被编码为&&。 6 6每个属性必须赋值每个属性必须赋值每个属性必须赋值每个属性必须赋值 XHTMLXHTML规定所有属性都必须有一个值，没有值的就重复规定
11、所有属性都必须有一个值，没有值的就重复规定所有属性都必须有一个值，没有值的就重复规定所有属性都必须有一个值，没有值的就重复本身。例如：本身。例如：本身。例如：本身。例如：td 按照按照按照按照XHTMLXHTML要求必须修改为：要求必须修改为：要求必须修改为：要求必须修改为：td nowrap=nowrap input type=checkbox name=shirt value=medium checked=checked / 7 7不要在注释内容中使用不要在注释内容中使用不要在注释内容中使用不要在注释内容中使用“-”“-” “-”“-”只能出现在只能出现在只能出现在只能出现在XHTMLXH
12、TML注释的开头和结束位置。注释的开头和结束位置。注释的开头和结束位置。注释的开头和结束位置。4.1 XHTML4.1 XHTML简介简介简介简介 1.1.标记标记标记标记 XHTML XHTML文档由标记和被标记的内容组成。格式为：文档由标记和被标记的内容组成。格式为：文档由标记和被标记的内容组成。格式为：文档由标记和被标记的内容组成。格式为： 受标记影响的内容受标记影响的内容受标记影响的内容受标记影响的内容 / 我的第一个网页我的第一个网页我的第一个网页我的第一个网页 需要注意需要注意需要注意需要注意: : 每个标记都要用每个标记都要用每个标记都要用每个标记都要用“”“”“”（大于号）（大
13、于号）（大于号）（大于号）括起来，如括起来，如括起来，如括起来，如，以表示这是，以表示这是，以表示这是，以表示这是XHTMLXHTML代码而非代码而非代码而非代码而非普通文本。普通文本。普通文本。普通文本。 “” “”“”与标记名之间不能留有空格或其他与标记名之间不能留有空格或其他与标记名之间不能留有空格或其他与标记名之间不能留有空格或其他字符。字符。字符。字符。 在标记名前加上符号在标记名前加上符号在标记名前加上符号在标记名前加上符号“/”“/”便是其结束标记，表示该便是其结束标记，表示该便是其结束标记，表示该便是其结束标记，表示该标记内容的结束，如标记内容的结束，如标记内容的结束，如标记内
14、容的结束，如。标记也有不用。标记也有不用。标记也有不用。标记也有不用/结尾结尾结尾结尾的，称之为单标记。的，称之为单标记。的，称之为单标记。的，称之为单标记。 4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构4.2.1 4.2.1 标记及其属性标记及其属性标记及其属性标记及其属性2. 2. 标记的属性标记的属性 标记只是规定这是什么信息，或是文本，标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每需要在标记后面加上相关的属性来表示，每个标记有一系列的属
15、性。格式为：个标记有一系列的属性。格式为： 2 受影响的内容受影响的内容 / 欢迎！欢迎！欢迎！欢迎！4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构4.2.1 4.2.1 标记及其属性标记及其属性标记及其属性标记及其属性 XHTMLXHTML文档是一种纯文本格式的文件，文档是一种纯文本格式的文件，文档是一种纯文本格式的文件，文档是一种纯文本格式的文件，XHTMLXHTML文文文文档的基本结构为：档的基本结构为：档的基本结构为：档的基本结构为：xhtml1/DTD/xhtml1-transitional.dtdxhtml1/DTD/xhtml1-tr
16、ansitional.dtdxhtml1/DTD/xhtml1-transitional.dtdxhtml1/DTD/xhtml1-transitional.dtd meta http-equiv=Content-Type content=text/html; meta http-equiv=Content-Type content=text/html; meta http-equiv=Content-Type content=text/html; charset=gb2312 /charset=gb2312 /charset=gb2312 / 网页的标题网页的标题网页的标题网页的标题 网页的
17、内容网页的内容网页的内容网页的内容 【例【例【例【例4-14-1】 4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构 4.2.2 XHTML4.2.2 XHTML的基本结构的基本结构的基本结构的基本结构 【说明】【说明】【说明】【说明】 DOCTYPEDOCTYPE必须为大写。必须为大写。必须为大写。必须为大写。 DTD DTD叫做文档类型定义，里面包含了文档的规则。浏叫做文档类型定义，里面包含了文档的规则。浏叫做文档类型定义，里面包含了文档的规则。浏叫做文档类型定义，里面包含了文档的规则。浏览器根据定义的览器根据定义的览器根据定义的览器根据定义的D
18、TDDTD来解释页面的标记，并显示出来。要建来解释页面的标记，并显示出来。要建来解释页面的标记，并显示出来。要建来解释页面的标记，并显示出来。要建立符合标准的网页，立符合标准的网页，立符合标准的网页，立符合标准的网页，DOCTYPEDOCTYPE声明是必不可少的关键组成声明是必不可少的关键组成声明是必不可少的关键组成声明是必不可少的关键组成部分。部分。部分。部分。 DOCTYPEDOCTYPE声明必须放在每一个声明必须放在每一个声明必须放在每一个声明必须放在每一个XHTMLXHTML文档的最顶文档的最顶文档的最顶文档的最顶部，在所有代码和标记之前。部，在所有代码和标记之前。部，在所有代码和标记
19、之前。部，在所有代码和标记之前。4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构 4.2.2 XHTML4.2.2 XHTML的基本结构的基本结构的基本结构的基本结构 【说明】【说明】【说明】【说明】 “xmlns” “xmlns”是是是是XHTML namespaceXHTML namespace的缩写，称为的缩写，称为的缩写，称为的缩写，称为“ “名名名名字空间字空间字空间字空间” ”。由于。由于。由于。由于XHTMLXHTML是是是是HTMLHTML向向向向XMLXML过渡的标记语言，过渡的标记语言，过渡的标记语言，过渡的标记语言，它需要符合它
20、需要符合它需要符合它需要符合XMLXML文档规则，因此也需要定义名字空间。又因文档规则，因此也需要定义名字空间。又因文档规则，因此也需要定义名字空间。又因文档规则，因此也需要定义名字空间。又因为为为为XHTML1.0XHTML1.0不能自定义标记，所以它的名字空间都相同，不能自定义标记，所以它的名字空间都相同，不能自定义标记，所以它的名字空间都相同，不能自定义标记，所以它的名字空间都相同，就是。就是。就是。就是。 第第第第5 5行定义语言编码。为了被浏览器正确解释和通过行定义语言编码。为了被浏览器正确解释和通过行定义语言编码。为了被浏览器正确解释和通过行定义语言编码。为了被浏览器正确解释和通过
21、W3CW3C代码校验，所有的代码校验，所有的代码校验，所有的代码校验，所有的XHTMLXHTML文档都必须声明它们所使用文档都必须声明它们所使用文档都必须声明它们所使用文档都必须声明它们所使用的编码语言。一般使用的编码语言。一般使用的编码语言。一般使用的编码语言。一般使用gb2312gb2312（简体中文）。（简体中文）。（简体中文）。（简体中文）。4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构 4.2.2 XHTML4.2.2 XHTML的基本结构的基本结构的基本结构的基本结构 用最简单的用最简单的用最简单的用最简单的“ “记事本记事本记事本记事
22、本” ”来编辑网页。来编辑网页。来编辑网页。来编辑网页。 打开记事本。单击打开记事本。单击打开记事本。单击打开记事本。单击WindowsWindows的的的的“ “开始开始开始开始” ”按钮，在按钮，在按钮，在按钮，在“ “程序程序程序程序” ”菜单中的菜单中的菜单中的菜单中的“ “附件附件附件附件” ”子菜单中单击子菜单中单击子菜单中单击子菜单中单击“ “记事本记事本记事本记事本” ”。 创建新文件，并按创建新文件，并按创建新文件，并按创建新文件，并按HTMLHTML语言规则编辑。在语言规则编辑。在语言规则编辑。在语言规则编辑。在“ “记事本记事本记事本记事本” ”窗口中输入窗口中输入窗口中
23、输入窗口中输入HTMLHTML语言，输入的内容。语言，输入的内容。语言，输入的内容。语言，输入的内容。 保存网页。打开保存网页。打开保存网页。打开保存网页。打开“ “记事本记事本记事本记事本” ”的的的的“ “文件文件文件文件” ”菜单，选择菜单，选择菜单，选择菜单，选择“ “保存保存保存保存” ”。此时将出现。此时将出现。此时将出现。此时将出现“ “另存为另存为另存为另存为” ”对话框，在对话框，在对话框，在对话框，在“ “保存在保存在保存在保存在” ”下下下下拉列表框中选择文件要存放的路径；在拉列表框中选择文件要存放的路径；在拉列表框中选择文件要存放的路径；在拉列表框中选择文件要存放的路径
24、；在“ “文件名文件名文件名文件名” ”文本框输文本框输文本框输文本框输入以入以入以入以.html.html或或或或.htm.htm为后缀的文件名，如为后缀的文件名，如为后缀的文件名，如为后缀的文件名，如welcome.htmlwelcome.html；在；在；在；在“ “保存类型保存类型保存类型保存类型” ”下拉列表框中选择下拉列表框中选择下拉列表框中选择下拉列表框中选择“ “文本文档文本文档文本文档文本文档” ”。最后单击。最后单击。最后单击。最后单击“ “保存保存保存保存” ”按钮，将记事本中的内容保存在磁盘中。按钮，将记事本中的内容保存在磁盘中。按钮，将记事本中的内容保存在磁盘中。按钮
25、，将记事本中的内容保存在磁盘中。 如果希望这一页是网站的首页（主页），想让浏览者输如果希望这一页是网站的首页（主页），想让浏览者输如果希望这一页是网站的首页（主页），想让浏览者输如果希望这一页是网站的首页（主页），想让浏览者输入网址后，就显示这一页的内容，可以把这个文件设为默认入网址后，就显示这一页的内容，可以把这个文件设为默认入网址后，就显示这一页的内容，可以把这个文件设为默认入网址后，就显示这一页的内容，可以把这个文件设为默认文档，文件名为文档，文件名为文档，文件名为文档，文件名为index.htmlindex.html或或或或index.htmindex.htm。 4.3 4.3 网页文
26、件的创建过程网页文件的创建过程网页文件的创建过程网页文件的创建过程 4.3.1 4.3.1 编辑和保存网页编辑和保存网页编辑和保存网页编辑和保存网页 1. 1. 用浏览器打开用浏览器打开用浏览器打开用浏览器打开 2. 2. 在在在在“Windows“Windows资源管理器资源管理器资源管理器资源管理器” ”或或或或“ “我的电脑我的电脑我的电脑我的电脑” ”中打开中打开中打开中打开 在在在在“Windows“Windows资源管理器资源管理器资源管理器资源管理器” ”或或或或“ “我的电脑我的电脑我的电脑我的电脑” ”中双击要打中双击要打中双击要打中双击要打开的开的开的开的.html.htm
27、l文件，这时将直接在默认的浏览器中打开该文件，这时将直接在默认的浏览器中打开该文件，这时将直接在默认的浏览器中打开该文件，这时将直接在默认的浏览器中打开该.html.html文件。文件。文件。文件。 4.3 4.3 网页文件的创建过程网页文件的创建过程网页文件的创建过程网页文件的创建过程 4.3.2 4.3.2 预览网页预览网页预览网页预览网页 !- - 2 2 强制换行和不换行标记强制换行和不换行标记强制换行和不换行标记强制换行和不换行标记、. 放在一行的末尾，可以使后面的文字、图片、表格等显放在一行的末尾，可以使后面的文字、图片、表格等显放在一行的末尾，可以使后面的文字、图片、表格等显放在
28、一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换示于下一行，而又不会在行与行之间留下空行，即强制文本换示于下一行，而又不会在行与行之间留下空行，即强制文本换示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为：行。强制换行标记的格式为：行。强制换行标记的格式为：行。强制换行标记的格式为： 文字文字 不换行标记可令文字不能因太长使浏览器无法显示而换行，不换行标记可令文字不能因太长使浏览器无法显示而换行，不换行标记可令文字不能因太长使浏览器无法显示而换行，不换行标记可令文字不能因太长使浏览器无法显示而换行，它对住址、数学公
29、式、一行数字等尤其有用。其格式为：它对住址、数学公式、一行数字等尤其有用。其格式为：它对住址、数学公式、一行数字等尤其有用。其格式为：它对住址、数学公式、一行数字等尤其有用。其格式为： 文字文字 4.4 4.4 段落标记段落标记段落标记段落标记 1 1 注释标记注释标记注释标记注释标记 段落标记放在一个段落的头尾，用于定义一个段落。段落标记放在一个段落的头尾，用于定义一个段落。段落标记放在一个段落的头尾，用于定义一个段落。段落标记放在一个段落的头尾，用于定义一个段落。.标记不但能使后面的文字换到下一行，还可标记不但能使后面的文字换到下一行，还可标记不但能使后面的文字换到下一行，还可标记不但能使
30、后面的文字换到下一行，还可以使两段之间多一空行。段落标记的格式为：以使两段之间多一空行。段落标记的格式为：以使两段之间多一空行。段落标记的格式为：以使两段之间多一空行。段落标记的格式为： 文字文字文字文字 一个段落标记一个段落标记一个段落标记一个段落标记可以看作是两个可以看作是两个可以看作是两个可以看作是两个标记，即标记，即标记，即标记，即。 4.4 4.4 段落标记段落标记段落标记段落标记 3 3 段落标记段落标记段落标记段落标记. 设定文字、图像、表格的摆放位置。当在许多段落中设定文字、图像、表格的摆放位置。当在许多段落中设定文字、图像、表格的摆放位置。当在许多段落中设定文字、图像、表格的
31、摆放位置。当在许多段落中设置对齐方式时，常使用设置对齐方式时，常使用设置对齐方式时，常使用设置对齐方式时，常使用标记。定位标记标记。定位标记标记。定位标记标记。定位标记的格式为：的格式为：的格式为：的格式为： 文本、图像或表文本、图像或表文本、图像或表文本、图像或表格格格格 缺省时默认为缺省时默认为缺省时默认为缺省时默认为leftleft。4.4 4.4 段落标记段落标记段落标记段落标记 4 4 定位标记定位标记定位标记定位标记 当浏览器解释到当浏览器解释到当浏览器解释到当浏览器解释到HTMLHTML文档中的文档中的文档中的文档中的标记时，会在此处标记时，会在此处标记时，会在此处标记时，会在此
32、处换行，并加入一条水平线段。换行，并加入一条水平线段。换行，并加入一条水平线段。换行，并加入一条水平线段。 水平线标记的格式为：水平线标记的格式为：水平线标记的格式为：水平线标记的格式为： hr align=left|center|right size= / sizesize设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为2 2。 width width设定线段长度，可以是绝对值（以像素为单位）设定线段长度，可以是绝对值（以像素为单位）设定线段长度，可以是绝对值（以像素为单位）设定线段长度，可以是绝对值（以
33、像素为单位）或相对值（相对于当前窗口的百分比）。或相对值（相对于当前窗口的百分比）。或相对值（相对于当前窗口的百分比）。或相对值（相对于当前窗口的百分比）。 colorcolor设定线条色彩，默认为黑色。可以采用色彩的名设定线条色彩，默认为黑色。可以采用色彩的名设定线条色彩，默认为黑色。可以采用色彩的名设定线条色彩，默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以称。色彩可以用相应英文单词或以称。色彩可以用相应英文单词或以称。色彩可以用相应英文单词或以“#”“#”引导的一个十六进引导的一个十六进引导的一个十六进引导的一个十六进制数代码来表示。制数代码来表示。制数代码来表示。制数代码来
34、表示。4.4 4.4 段落标记段落标记段落标记段落标记 5 5 水平线标记水平线标记水平线标记水平线标记 【例【例【例【例4-24-2】本例文件】本例文件】本例文件】本例文件ex4-2.htmex4-2.htm在浏览器中的显示效果如图在浏览器中的显示效果如图在浏览器中的显示效果如图在浏览器中的显示效果如图4-44-4所示。所示。所示。所示。4.4 4.4 段落标记段落标记段落标记段落标记 6 6段落标记综合实例段落标记综合实例段落标记综合实例段落标记综合实例图4-4 段落标记综合实例【例4-2】 标题文字标题文字标题文字标题文字 l l # #用来指定标题文字的大小，用来指定标题文字的大小，用
35、来指定标题文字的大小，用来指定标题文字的大小，#取取取取1 16 6的整数值，取的整数值，取的整数值，取的整数值，取1 1时时时时文字最大，文字最大，文字最大，文字最大，6 6时文字最小。时文字最小。时文字最小。时文字最小。l l 属性属性属性属性alignalign设置标题在页面中的对齐方式：设置标题在页面中的对齐方式：设置标题在页面中的对齐方式：设置标题在页面中的对齐方式：leftleft、centercenter或或或或rightright。缺省时默认为缺省时默认为缺省时默认为缺省时默认为leftleft。l l 标记缺省显示宋体，在一个标题行中标记缺省显示宋体，在一个标题行中标记缺省显
36、示宋体，在一个标题行中标记缺省显示宋体，在一个标题行中无法使用不同大小的字体。无法使用不同大小的字体。无法使用不同大小的字体。无法使用不同大小的字体。l l 与用与用与用与用定义的网页标题不同，标题格定义的网页标题不同，标题格定义的网页标题不同，标题格定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。式显示在浏览器窗口内，而不显示在浏览器的标题栏中。式显示在浏览器窗口内，而不显示在浏览器的标题栏中。式显示在浏览器窗口内，而不显示在浏览器的标题栏中。4.5 4.5 文字标记文字标记文字标记文字标记 1 1 标题文字标记标题文字标记标题文字标记标题文字标记 【例【例【例【
37、例4-34-3】设置文字的标题。本例文件】设置文字的标题。本例文件】设置文字的标题。本例文件】设置文字的标题。本例文件ex4-3.htmex4-3.htm在浏览在浏览在浏览在浏览器中的显示效果如图器中的显示效果如图器中的显示效果如图器中的显示效果如图4-54-5所示。所示。所示。所示。4.5 4.5 文字标记文字标记文字标记文字标记 2 2文字标记实例文字标记实例文字标记实例文字标记实例图4-5 文字标记综合实例 【例4-3】 l l 超链接从当前网页定义的位置跳转到其他位置，包括当前超链接从当前网页定义的位置跳转到其他位置，包括当前超链接从当前网页定义的位置跳转到其他位置，包括当前超链接从当
38、前网页定义的位置跳转到其他位置，包括当前页的某个位置、页的某个位置、页的某个位置、页的某个位置、InternetInternet或本地硬盘或局域网上的其他文或本地硬盘或局域网上的其他文或本地硬盘或局域网上的其他文或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。件，甚至跳转到声音、图片等多媒体文件。件，甚至跳转到声音、图片等多媒体文件。件，甚至跳转到声音、图片等多媒体文件。l l 通过超链接还可以获得不同形态的服务，如文件传输、资通过超链接还可以获得不同形态的服务，如文件传输、资通过超链接还可以获得不同形态的服务，如文件传输、资通过超链接还可以获得不同形态的服务，如文件传输、资
39、料查询、电子邮件、远程访问等。料查询、电子邮件、远程访问等。料查询、电子邮件、远程访问等。料查询、电子邮件、远程访问等。l l 当网页包含超链接时，网页中的外观形式为彩色（一般为当网页包含超链接时，网页中的外观形式为彩色（一般为当网页包含超链接时，网页中的外观形式为彩色（一般为当网页包含超链接时，网页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可蓝色）且带下划线的文字或图片。单击这些文本或图片，可蓝色）且带下划线的文字或图片。单击这些文本或图片，可蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。跳转到相应位置。跳转到相应位置。跳转到相应位置。
40、l l 超文本链接使用锚点标记超文本链接使用锚点标记超文本链接使用锚点标记超文本链接使用锚点标记来定义。来定义。来定义。来定义。 4.6 4.6 超链接超链接超链接超链接 l 锚点（锚点（锚点（锚点（anchoranchor）标记由标记由标记由标记由定义，它在网页上建立超文定义，它在网页上建立超文定义，它在网页上建立超文定义，它在网页上建立超文本链接。本链接。本链接。本链接。l l 通过单击一个词、句或图片，可从此处转到另一个链接通过单击一个词、句或图片，可从此处转到另一个链接通过单击一个词、句或图片，可从此处转到另一个链接通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个
41、目标资源有惟一的资源（目标资源），这个目标资源有惟一的资源（目标资源），这个目标资源有惟一的资源（目标资源），这个目标资源有惟一的URLURL。具有以。具有以。具有以。具有以上特点的词、句或图片就称为热点。上特点的词、句或图片就称为热点。上特点的词、句或图片就称为热点。上特点的词、句或图片就称为热点。 标记的格式为：标记的格式为：标记的格式为：标记的格式为： a href=URL target= 热点热点热点热点 l l hrefhref属性为超文本引用，它的值为一个属性为超文本引用，它的值为一个属性为超文本引用，它的值为一个属性为超文本引用，它的值为一个URLURL，是目标是目标是目标是目标
42、资源的有效地址。资源的有效地址。资源的有效地址。资源的有效地址。l l 如果要创建一个不链接到其他位置的空超链接，可用如果要创建一个不链接到其他位置的空超链接，可用如果要创建一个不链接到其他位置的空超链接，可用如果要创建一个不链接到其他位置的空超链接，可用“ “#”#”代替代替代替代替URLURL，即，即，即，即a =# 热点热点热点热点 。 4.6 4.6 超链接超链接超链接超链接 1 1 锚点标记锚点标记锚点标记锚点标记. target属性属性targettarget设定链接被单击后结果所要开始窗口的方设定链接被单击后结果所要开始窗口的方设定链接被单击后结果所要开始窗口的方设定链接被单击后
43、结果所要开始窗口的方式。可选值为：式。可选值为：式。可选值为：式。可选值为：_blank_blank，_parent_parent，_self_self，_top_top。l_blank:空白视窗，保留原来的窗口，新开启一个窗口浏览所链接的文件内容；l_parent:上一层页框视窗，若网页使用框架，则所链接的网页回到上一层的框架所在窗口；l_self:本身视窗，默认链接显示方式，所链接的内容取代原来窗口的内容；l_top:全视窗，以全窗口的方式出现所链接的网页，取代所有窗口内容。 (1) (1) 链接到同一目录内的网页文件链接到同一目录内的网页文件链接到同一目录内的网页文件链接到同一目录内的网
44、页文件 链接到同一目录内的网页文件的格式为：链接到同一目录内的网页文件的格式为：链接到同一目录内的网页文件的格式为：链接到同一目录内的网页文件的格式为： a href= .html 热点文本热点文本热点文本热点文本 (2) (2) 链接到下一级目录中的网页文件链接到下一级目录中的网页文件链接到下一级目录中的网页文件链接到下一级目录中的网页文件 链接到下一级目录中网页文件的格式为：链接到下一级目录中网页文件的格式为：链接到下一级目录中网页文件的格式为：链接到下一级目录中网页文件的格式为： a href= .html 热点文本热点文本热点文本热点文本 (3) (3) 链接到上一级目录中的网页文件链
45、接到上一级目录中的网页文件链接到上一级目录中的网页文件链接到上一级目录中的网页文件 链接到上一级目录中网页文件的格式为：链接到上一级目录中网页文件的格式为：链接到上一级目录中网页文件的格式为：链接到上一级目录中网页文件的格式为： a href=./ .html 热点文本热点文本热点文本热点文本 其中其中其中其中“. . /“. . /表示退到上一级目录中。表示退到上一级目录中。表示退到上一级目录中。表示退到上一级目录中。 (4) (4) 链接到同级目录中的网页文件链接到同级目录中的网页文件链接到同级目录中的网页文件链接到同级目录中的网页文件 链接到同级目录中网页文件的格式为：链接到同级目录中网
46、页文件的格式为：链接到同级目录中网页文件的格式为：链接到同级目录中网页文件的格式为：a href=./ .html 热点文本热点文本热点文本热点文本 4.6 4.6 超链接超链接超链接超链接 2 2 指向其他页面的链接指向其他页面的链接指向其他页面的链接指向其他页面的链接 要在当前页面内实现超链接，需要定义两个标记：一个为要在当前页面内实现超链接，需要定义两个标记：一个为要在当前页面内实现超链接，需要定义两个标记：一个为要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：超链接标记，另一个为书签标记。超链接标记的格式为：超链接标记，另一个为书签标
47、记。超链接标记的格式为：超链接标记，另一个为书签标记。超链接标记的格式为： a href=# 热点文本热点文本热点文本热点文本 书签就是用书签就是用书签就是用书签就是用标记对该文本作一个记号。格式为：标记对该文本作一个记号。格式为：标记对该文本作一个记号。格式为：标记对该文本作一个记号。格式为： a name= 目标文本附近的字符串目标文本附近的字符串目标文本附近的字符串目标文本附近的字符串 4.6 4.6 超链接超链接超链接超链接 3 3 指向本页中的链接指向本页中的链接指向本页中的链接指向本页中的链接建立指向其他页面某处的文本建立指向其他页面某处的文本n n格式为：格式为：格式为：格式为：
48、n n a href=URL# 热点文本热点文本热点文本热点文本 n n要在跳转到的位置处加上链接标记：要在跳转到的位置处加上链接标记：要在跳转到的位置处加上链接标记：要在跳转到的位置处加上链接标记：n n a name= 文字串文字串文字串文字串 n n如果链接指向其他文件的某一部分，格式为：如果链接指向其他文件的某一部分，格式为：如果链接指向其他文件的某一部分，格式为：如果链接指向其他文件的某一部分，格式为：n n a href= 热热热热点文本点文本点文本点文本 如果链接到的文件不是如果链接到的文件不是如果链接到的文件不是如果链接到的文件不是HTMLHTML文件，则该文件将作为下载文件，
49、则该文件将作为下载文件，则该文件将作为下载文件，则该文件将作为下载文件，其格式为：文件，其格式为：文件，其格式为：文件，其格式为： a href= 热点文本热点文本热点文本热点文本 5 5 指向电子邮件的链接指向电子邮件的链接指向电子邮件的链接指向电子邮件的链接 单击指向电子邮件的链接，将打开缺省的电子邮件程序，单击指向电子邮件的链接，将打开缺省的电子邮件程序，单击指向电子邮件的链接，将打开缺省的电子邮件程序，单击指向电子邮件的链接，将打开缺省的电子邮件程序，如如如如FoxMailFoxMail、Outlook ExpressOutlook Express，并自动填写邮件地址。指向，并自动填写
50、邮件地址。指向，并自动填写邮件地址。指向，并自动填写邮件地址。指向电子邮件链接的格式为：电子邮件链接的格式为：电子邮件链接的格式为：电子邮件链接的格式为： 热点文本热点文本 4.6 4.6 超链接超链接超链接超链接 4 4 指向下载文件的链接指向下载文件的链接指向下载文件的链接指向下载文件的链接 【例【例【例【例4-44-4】超链接综合实例。在浏览器中的显示效果如图】超链接综合实例。在浏览器中的显示效果如图】超链接综合实例。在浏览器中的显示效果如图】超链接综合实例。在浏览器中的显示效果如图4-64-6所示。所示。所示。所示。4.6 4.6 超链接超链接超链接超链接 6 6超链接综合实例超链接综
51、合实例超链接综合实例超链接综合实例图4-6 超链接综合实例 【例4-4】 （1 1） 设置背景色设置背景色设置背景色设置背景色 body bgcolor= “ “色彩值色彩值色彩值色彩值” ”可以为色彩的英文名或相应十六进制值。可以为色彩的英文名或相应十六进制值。可以为色彩的英文名或相应十六进制值。可以为色彩的英文名或相应十六进制值。 （2 2） 用图片作为背景用图片作为背景用图片作为背景用图片作为背景 body background= background background取值为一个图片文件名，并且要指出文件取值为一个图片文件名，并且要指出文件取值为一个图片文件名，并且要指出文件取值为一
52、个图片文件名，并且要指出文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件可为可为可为可为GIFGIF格式或格式或格式或格式或JPEGJPEG格式的文件。格式的文件。格式的文件。格式的文件。 在浏览器中，作为背景的图片将按原来的大小复制，重复在浏览器中，作为背景的图片将按原来的大小复制，重复在浏览器中，作为背景的图片将按原来的大小复制，重复在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。铺满整个网页。铺满整个网
53、页。铺满整个网页。4.7 4.7 图像图像图像图像 1 1 网页的背景网页的背景网页的背景网页的背景 img src= “ / 如果不设定图片的尺寸，图片将按照其本身的大小显示。如果不设定图片的尺寸，图片将按照其本身的大小显示。如果不设定图片的尺寸，图片将按照其本身的大小显示。如果不设定图片的尺寸，图片将按照其本身的大小显示。可使用可使用可使用可使用标记的标记的标记的标记的widthwidth和和和和heightheight属性来设置图片的大小。属性来设置图片的大小。属性来设置图片的大小。属性来设置图片的大小。widthwidth和和和和heightheight属性的属性值可取像素数，也可取百
54、分数。属性的属性值可取像素数，也可取百分数。属性的属性值可取像素数，也可取百分数。属性的属性值可取像素数，也可取百分数。4.7 4.7 图片图片图片图片 2 2 图片标记图片标记图片标记图片标记 图片也可作为热点，单击图片则跳转到被链接的文本或其图片也可作为热点，单击图片则跳转到被链接的文本或其图片也可作为热点，单击图片则跳转到被链接的文本或其图片也可作为热点，单击图片则跳转到被链接的文本或其他文件。格式为：他文件。格式为：他文件。格式为：他文件。格式为： img src= 例如，下面代码：例如，下面代码：例如，下面代码：例如，下面代码： img src=vb.jpg hspace=10 vs
55、pace=5“ / 4.7 4.7 图片图片图片图片用图片作为热点用图片作为热点用图片作为热点用图片作为热点 【例【例【例【例4-54-5】图像应用综合实例。本例文件】图像应用综合实例。本例文件】图像应用综合实例。本例文件】图像应用综合实例。本例文件ex4-5.htmex4-5.htm在浏在浏在浏在浏览器中的显示效果如图览器中的显示效果如图览器中的显示效果如图览器中的显示效果如图4-74-7所示。所示。所示。所示。4.7 4.7 图片图片图片图片 4 4图像应用综合实例图像应用综合实例图像应用综合实例图像应用综合实例图4-7 图像应用综合实例 【例4-5】 表格的标记为表格的标记为表格的标记为
56、表格的标记为，行的标记为，行的标记为，行的标记为，行的标记为，表项的标记为，表项的标记为，表项的标记为，表项的标记为。格式为：。格式为：。格式为：。格式为： table border=n width=x|x% height=y|y% cellspacing=i cellpadding=j 表头表头表头表头1 1 表头表头表头表头2 2 表头表头表头表头nn 表项表项表项表项1 1 表项表项表项表项2 2 表项表项表项表项nn 表项表项表项表项1 1 表项表项表项表项2 2 表项表项表项表项nn4.8 4.8 表格表格表格表格 1 1 简单表格简单表格简单表格简单表格 在缺省下，表项居于单元格的
57、左端。在缺省下，表项居于单元格的左端。在缺省下，表项居于单元格的左端。在缺省下，表项居于单元格的左端。 (1) (1) 水平对齐水平对齐水平对齐水平对齐 表项数据的水平对齐用标记表项数据的水平对齐用标记表项数据的水平对齐用标记表项数据的水平对齐用标记、和和和和的的的的alignalign属性。属性。属性。属性。alignalign的属性值分别为：的属性值分别为：的属性值分别为：的属性值分别为：centercenter（表项数据的居中（表项数据的居中（表项数据的居中（表项数据的居中）、）、）、）、leftleft（左对齐）、（左对齐）、（左对齐）、（左对齐）、rightright（右对齐）或（右
58、对齐）或（右对齐）或（右对齐）或justifyjustify（左右调整）。（左右调整）。（左右调整）。（左右调整）。 (2) (2) 垂直对齐垂直对齐垂直对齐垂直对齐 valign valign的属性值分别为：的属性值分别为：的属性值分别为：的属性值分别为：toptop（靠单元格顶）、（靠单元格顶）、（靠单元格顶）、（靠单元格顶）、bottombottom（靠（靠（靠（靠单元格底）、单元格底）、单元格底）、单元格底）、middlemiddle（靠单元格中）或（靠单元格中）或（靠单元格中）或（靠单元格中）或baselinebaseline（同行单元（同行单元（同行单元（同行单元数据项位置一致）。
59、数据项位置一致）。数据项位置一致）。数据项位置一致）。 4.8 4.8 表格表格表格表格 2 2 表格内文字的对齐方式表格内文字的对齐方式表格内文字的对齐方式表格内文字的对齐方式 表格在浏览器窗口中的位置有三种：居左、居中和居右。表格在浏览器窗口中的位置有三种：居左、居中和居右。表格在浏览器窗口中的位置有三种：居左、居中和居右。表格在浏览器窗口中的位置有三种：居左、居中和居右。使用使用使用使用标记的标记的标记的标记的alignalign属性。格式为：属性。格式为：属性。格式为：属性。格式为： l l 当表格位于页面的左侧或右侧时，文本填充在另一侧。当表格位于页面的左侧或右侧时，文本填充在另一侧
60、。当表格位于页面的左侧或右侧时，文本填充在另一侧。当表格位于页面的左侧或右侧时，文本填充在另一侧。l l 当表格居中时，表格两边没有文本。当表格居中时，表格两边没有文本。当表格居中时，表格两边没有文本。当表格居中时，表格两边没有文本。l l 当当当当alignalign属性缺省时，文本在表格的下面。属性缺省时，文本在表格的下面。属性缺省时，文本在表格的下面。属性缺省时，文本在表格的下面。4.8 4.8 表格表格表格表格 3 3 表格在页面中的对齐方式表格在页面中的对齐方式表格在页面中的对齐方式表格在页面中的对齐方式 在在在在、标记中，属性可以改标记中，属性可以改标记中，属性可以改标记中，属性可
61、以改变表格的背景和边框的色彩、添加背景图片，也可以为行和单变表格的背景和边框的色彩、添加背景图片，也可以为行和单变表格的背景和边框的色彩、添加背景图片，也可以为行和单变表格的背景和边框的色彩、添加背景图片，也可以为行和单元格改变色彩、添加背景图片。元格改变色彩、添加背景图片。元格改变色彩、添加背景图片。元格改变色彩、添加背景图片。 bgcolor= bgcolor=色彩或色彩值色彩或色彩值色彩或色彩值色彩或色彩值 设置背景色彩设置背景色彩设置背景色彩设置背景色彩 background= background=图片文件名图片文件名图片文件名图片文件名“ “ 设置背景图片设置背景图片设置背景图片设
62、置背景图片 bordercolor= bordercolor=色彩色彩色彩色彩 设置表格边框的色彩设置表格边框的色彩设置表格边框的色彩设置表格边框的色彩 bordercolorlight= bordercolorlight=色彩色彩色彩色彩 设置表格边框亮部的色彩设置表格边框亮部的色彩设置表格边框亮部的色彩设置表格边框亮部的色彩 rules=row,cols rules=row,cols或或或或none none 设置表内线的显示方法，设置表内线的显示方法，设置表内线的显示方法，设置表内线的显示方法，nonenone为无内线为无内线为无内线为无内线 4.8 4.8 表格表格表格表格 4 4 表
63、格的色彩和图片背景表格的色彩和图片背景表格的色彩和图片背景表格的色彩和图片背景 【例【例【例【例4-64-6】表格应用综合实例。本例文件】表格应用综合实例。本例文件】表格应用综合实例。本例文件】表格应用综合实例。本例文件ex4-6.htmex4-6.htm在浏在浏在浏在浏览器中的显示效果如图览器中的显示效果如图览器中的显示效果如图览器中的显示效果如图4-84-8所示。所示。所示。所示。4.8 4.8 表格表格表格表格 5 5表格应用综合实例表格应用综合实例表格应用综合实例表格应用综合实例图4-8 表格应用综合实例【例4-6】 框架（框架（框架（框架（FramesFrames）也称多窗口页面或帧
64、，是在同一浏览器）也称多窗口页面或帧，是在同一浏览器）也称多窗口页面或帧，是在同一浏览器）也称多窗口页面或帧，是在同一浏览器窗口中显示多个相互隔离的窗口中显示多个相互隔离的窗口中显示多个相互隔离的窗口中显示多个相互隔离的XHTMLXHTML页的结构，每个区域显示页的结构，每个区域显示页的结构，每个区域显示页的结构，每个区域显示一个一个一个一个XHTMLXHTML文件。文件。文件。文件。 1 1 建立框架建立框架建立框架建立框架 框架的建立使用框架的建立使用框架的建立使用框架的建立使用、两个标记。两个标记。两个标记。两个标记。用来划分窗格，用来划分窗格，用来划分窗格，用来划分窗格，标记用来声明其
65、中框标记用来声明其中框标记用来声明其中框标记用来声明其中框架页面的内容。架页面的内容。架页面的内容。架页面的内容。框架的基本结构为：框架的基本结构为：框架的基本结构为：框架的基本结构为： . 4.9 4.9 框架（多窗口页面）框架（多窗口页面）框架（多窗口页面）框架（多窗口页面） (1) (1) 标记标记标记标记 标记用来定义一个框架组的属性，格式为：标记用来定义一个框架组的属性，格式为：标记用来定义一个框架组的属性，格式为：标记用来定义一个框架组的属性，格式为： frameset row= “ 其中属性：其中属性：其中属性：其中属性： row row 设定横向分割的框架数目设定横向分割的框架
66、数目设定横向分割的框架数目设定横向分割的框架数目 cols cols 设定纵向分割的框架数目设定纵向分割的框架数目设定纵向分割的框架数目设定纵向分割的框架数目 border border 设定边框的宽度设定边框的宽度设定边框的宽度设定边框的宽度 bordercolor bordercolor 设定边框的色彩设定边框的色彩设定边框的色彩设定边框的色彩 frameborder frameborder 设定有设定有设定有设定有 无边框无边框无边框无边框 framespacing framespacing 设置各窗格间的空白设置各窗格间的空白设置各窗格间的空白设置各窗格间的空白 4.9 4.9 框架（
67、多窗口页面）框架（多窗口页面）框架（多窗口页面）框架（多窗口页面） 框架有横向和纵向之分。对一个框架来说，其大小是很框架有横向和纵向之分。对一个框架来说，其大小是很框架有横向和纵向之分。对一个框架来说，其大小是很框架有横向和纵向之分。对一个框架来说，其大小是很重要的。重要的。重要的。重要的。的的的的rowsrows和和和和colscols属性用于设定横向分割属性用于设定横向分割属性用于设定横向分割属性用于设定横向分割和纵向分割的框架数目。例如，要建立有三个横向框架的页面，和纵向分割的框架数目。例如，要建立有三个横向框架的页面，和纵向分割的框架数目。例如，要建立有三个横向框架的页面，和纵向分割的
68、框架数目。例如，要建立有三个横向框架的页面，可写为：可写为：可写为：可写为： frameset row=x1|y1%|z1*, x2|y2%|z2*, x3|y3%|z3*4.9 4.9 框架（多窗口页面）框架（多窗口页面）框架（多窗口页面）框架（多窗口页面） (2) (2) 标记标记标记标记 标记用于给各个框架指定页面的内容，也就是，标记用于给各个框架指定页面的内容，也就是，标记用于给各个框架指定页面的内容，也就是，标记用于给各个框架指定页面的内容，也就是，它将各个框架和包含其内容的那个文件联系在一起。它将各个框架和包含其内容的那个文件联系在一起。它将各个框架和包含其内容的那个文件联系在一起
69、。它将各个框架和包含其内容的那个文件联系在一起。是一个单标记，格式为：是一个单标记，格式为：是一个单标记，格式为：是一个单标记，格式为： frame src= noresize/ 标记的个数应等于在标记的个数应等于在标记的个数应等于在标记的个数应等于在标记中所定标记中所定标记中所定标记中所定义的框架数，并按在文件中出现的次序按先行后列对框架进行义的框架数，并按在文件中出现的次序按先行后列对框架进行义的框架数，并按在文件中出现的次序按先行后列对框架进行义的框架数，并按在文件中出现的次序按先行后列对框架进行初始化。如果初始化。如果初始化。如果初始化。如果标记数目少于标记数目少于标记数目少于标记数目
70、少于中定义的中定义的中定义的中定义的框架数量，则多余的框架为空。框架数量，则多余的框架为空。框架数量，则多余的框架为空。框架数量，则多余的框架为空。 4.9 4.9 框架（多窗口页面）框架（多窗口页面）框架（多窗口页面）框架（多窗口页面） 【例【例【例【例4-74-7】纵向排列多个窗格。本例中用到的其他】纵向排列多个窗格。本例中用到的其他】纵向排列多个窗格。本例中用到的其他】纵向排列多个窗格。本例中用到的其他HTMHTM文文文文件是在前面例题中建立的文件。本例文件件是在前面例题中建立的文件。本例文件件是在前面例题中建立的文件。本例文件件是在前面例题中建立的文件。本例文件ex4-7.htmex4
71、-7.htm在浏览在浏览在浏览在浏览器中显示的效果如图器中显示的效果如图器中显示的效果如图器中显示的效果如图4-94-9所示。所示。所示。所示。框架的嵌套框架的嵌套框架的嵌套框架的嵌套4.9 4.9 框架（多窗口页面）框架（多窗口页面）框架（多窗口页面）框架（多窗口页面）图4-9 纵向排列多个窗格 【例4-7】 在一个框架中显示一个所有网页内容的目录，而通过单击其在一个框架中显示一个所有网页内容的目录，而通过单击其在一个框架中显示一个所有网页内容的目录，而通过单击其在一个框架中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应内容。这些目录是热点文中的某项，在另一个框架中
72、显示相应内容。这些目录是热点文中的某项，在另一个框架中显示相应内容。这些目录是热点文中的某项，在另一个框架中显示相应内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示的目标文件的框本，需要在框架之间建立超链接，并指明显示的目标文件的框本，需要在框架之间建立超链接，并指明显示的目标文件的框本，需要在框架之间建立超链接，并指明显示的目标文件的框架。架。架。架。 使用使用使用使用的的的的targettarget属性就可以控制目标文件在那个框架属性就可以控制目标文件在那个框架属性就可以控制目标文件在那个框架属性就可以控制目标文件在那个框架内显示。当单击热点文本时，目标文件就会出现在有内显示
73、。当单击热点文本时，目标文件就会出现在有内显示。当单击热点文本时，目标文件就会出现在有内显示。当单击热点文本时，目标文件就会出现在有targettarget指指指指定的框架内。定的框架内。定的框架内。定的框架内。targettarget属性的值可以为框架名，使用格式为：属性的值可以为框架名，使用格式为：属性的值可以为框架名，使用格式为：属性的值可以为框架名，使用格式为： a href= 热点文热点文热点文热点文本本本本 4.9 4.9 框架（多窗口页面）框架（多窗口页面）框架（多窗口页面）框架（多窗口页面） 2 2 框架间的链接框架间的链接框架间的链接框架间的链接 另外，另外，另外，另外，“
74、“框架名框架名框架名框架名” ”有有有有4 4个特殊的值，分别实现个特殊的值，分别实现个特殊的值，分别实现个特殊的值，分别实现4 4类特殊的类特殊的类特殊的类特殊的操作：操作：操作：操作： target=_blank target=_blank：链接的目标文件被显示在一个新的：链接的目标文件被显示在一个新的：链接的目标文件被显示在一个新的：链接的目标文件被显示在一个新的没有名字的浏览器窗口中。没有名字的浏览器窗口中。没有名字的浏览器窗口中。没有名字的浏览器窗口中。 target=_self target=_self：链接的目标文件被显示在当前框架窗：链接的目标文件被显示在当前框架窗：链接的目标
75、文件被显示在当前框架窗：链接的目标文件被显示在当前框架窗口中，代替正在显示的热点文本所在的那个文件，是省略口中，代替正在显示的热点文本所在的那个文件，是省略口中，代替正在显示的热点文本所在的那个文件，是省略口中，代替正在显示的热点文本所在的那个文件，是省略targettarget属性的默认值。属性的默认值。属性的默认值。属性的默认值。 target=_top target=_top：链接的目标文件被显示在整个浏览器：链接的目标文件被显示在整个浏览器：链接的目标文件被显示在整个浏览器：链接的目标文件被显示在整个浏览器窗口（取消了框架）。窗口（取消了框架）。窗口（取消了框架）。窗口（取消了框架）。
76、 target=“_parent” target=“_parent”：当框架嵌套时，链接的目标文件被：当框架嵌套时，链接的目标文件被：当框架嵌套时，链接的目标文件被：当框架嵌套时，链接的目标文件被显示在父框架中；否则，被显示在整个浏览器窗口中。显示在父框架中；否则，被显示在整个浏览器窗口中。显示在父框架中；否则，被显示在整个浏览器窗口中。显示在父框架中；否则，被显示在整个浏览器窗口中。4.9 4.9 框架（多窗口页面）框架（多窗口页面）框架（多窗口页面）框架（多窗口页面） 2 2 框架间的链接框架间的链接框架间的链接框架间的链接 4.9 4.9 框架（多窗口页面）框架（多窗口页面）框架（多窗口
77、页面）框架（多窗口页面）3 3框架应用综合实例框架应用综合实例框架应用综合实例框架应用综合实例【例4-9】 【例【例【例【例4-94-9】制作一个框架集，包含上、下框架，下框架又】制作一个框架集，包含上、下框架，下框架又】制作一个框架集，包含上、下框架，下框架又】制作一个框架集，包含上、下框架，下框架又分为左、右两部分，并实现框架间的链接。本例文件分为左、右两部分，并实现框架间的链接。本例文件分为左、右两部分，并实现框架间的链接。本例文件分为左、右两部分，并实现框架间的链接。本例文件ex4-ex4-9.htm9.htm在浏览器中显示的效果如图在浏览器中显示的效果如图在浏览器中显示的效果如图在浏
78、览器中显示的效果如图4-114-11所示。所示。所示。所示。 图4-11 框架应用综合实例 网页上具有可输入表项及项目选择等控制所组成的栏目称网页上具有可输入表项及项目选择等控制所组成的栏目称网页上具有可输入表项及项目选择等控制所组成的栏目称网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。在网页中，通过表单交流和反馈信息。格式为：为表单。在网页中，通过表单交流和反馈信息。格式为：为表单。在网页中，通过表单交流和反馈信息。格式为：为表单。在网页中，通过表单交流和反馈信息。格式为： form name= method=get|post input type= size=x maxleng
79、th=y“ / name name属性属性属性属性 : :表单的名字，在一个网页中用于惟一识别一表单的名字，在一个网页中用于惟一识别一表单的名字，在一个网页中用于惟一识别一表单的名字，在一个网页中用于惟一识别一个表单个表单个表单个表单 action action属性属性属性属性 : :表单处理的方式，往往是表单处理的方式，往往是表单处理的方式，往往是表单处理的方式，往往是E-mailE-mail地址或网地址或网地址或网地址或网址址址址 method method属性属性属性属性: :表单数据的传送方向，是获得（表单数据的传送方向，是获得（表单数据的传送方向，是获得（表单数据的传送方向，是获得（
80、GETGET）表）表）表）表单还是送出（单还是送出（单还是送出（单还是送出（POSTPOST）表单）表单）表单）表单4.10 4.10 表单表单表单表单 1 1 表单的标记表单的标记表单的标记表单的标记. n ntypetype属性值为属性值为属性值为属性值为texttext，则输入的文本以标准的字符显示；则输入的文本以标准的字符显示；则输入的文本以标准的字符显示；则输入的文本以标准的字符显示；n ntypetype属性值为属性值为属性值为属性值为passwordpassword，则输入的文本显示为则输入的文本显示为则输入的文本显示为则输入的文本显示为“*”“*”。n n在表项前应加入表项的名
81、称，如在表项前应加入表项的名称，如在表项前应加入表项的名称，如在表项前应加入表项的名称，如“ “您的姓名您的姓名您的姓名您的姓名” ”等，以告诉浏等，以告诉浏等，以告诉浏等，以告诉浏览者在随后的表项中输入的内容。览者在随后的表项中输入的内容。览者在随后的表项中输入的内容。览者在随后的表项中输入的内容。4.10 4.10 表单表单表单表单 2 2 文字和密码的输入文字和密码的输入文字和密码的输入文字和密码的输入 如果浏览者想清除输入到表单中的全部内容，可以使用如果浏览者想清除输入到表单中的全部内容，可以使用如果浏览者想清除输入到表单中的全部内容，可以使用如果浏览者想清除输入到表单中的全部内容，可
82、以使用标记中的标记中的标记中的标记中的typetype属性所设的重置（属性所设的重置（属性所设的重置（属性所设的重置（resetreset）按钮，当浏）按钮，当浏）按钮，当浏）按钮，当浏览者完成表单的填写，想要发送时，可使用览者完成表单的填写，想要发送时，可使用览者完成表单的填写，想要发送时，可使用览者完成表单的填写，想要发送时，可使用标记的标记的标记的标记的属性属性属性属性typetype所设的提交（所设的提交（所设的提交（所设的提交（submitsubmit）按钮，将表单内容送给）按钮，将表单内容送给）按钮，将表单内容送给）按钮，将表单内容送给actionaction中的网址或函件信箱。格
83、式为：中的网址或函件信箱。格式为：中的网址或函件信箱。格式为：中的网址或函件信箱。格式为： input type=reset value= “ / input type=submit value= “ / 当缺省当缺省当缺省当缺省valuevalue的设置值时，重置和提交的按钮分别显示为的设置值时，重置和提交的按钮分别显示为的设置值时，重置和提交的按钮分别显示为的设置值时，重置和提交的按钮分别显示为“ “重置重置重置重置” ”和和和和“ “提交查询内容提交查询内容提交查询内容提交查询内容” ”。4.10 4.10 表单表单表单表单 3 3 重置和提交重置和提交重置和提交重置和提交 l l选择钮
84、可以是复选框（选择钮可以是复选框（选择钮可以是复选框（选择钮可以是复选框（checkboxcheckbox）或单选钮（或单选钮（或单选钮（或单选钮（radioradio）。）。）。）。l l用用用用标记的标记的标记的标记的typetype属性可设置选择钮的类型属性可设置选择钮的类型属性可设置选择钮的类型属性可设置选择钮的类型l l属性属性属性属性valuevalue可设置该选择钮的控制初值，用以告诉表单制作可设置该选择钮的控制初值，用以告诉表单制作可设置该选择钮的控制初值，用以告诉表单制作可设置该选择钮的控制初值，用以告诉表单制作者选择结果。者选择结果。者选择结果。者选择结果。l l用用用用c
85、heckedchecked表示是否为缺省选中项。表示是否为缺省选中项。表示是否为缺省选中项。表示是否为缺省选中项。l lnamename属性是控制名，属性是控制名，属性是控制名，属性是控制名，同一组的选择钮的控制名是一样的同一组的选择钮的控制名是一样的同一组的选择钮的控制名是一样的同一组的选择钮的控制名是一样的。 4.10 4.10 表单表单表单表单 4 4 复选框和单选钮复选框和单选钮复选框和单选钮复选框和单选钮 当浏览者选择的项目较多时，如果用选择钮来选择，占当浏览者选择的项目较多时，如果用选择钮来选择，占当浏览者选择的项目较多时，如果用选择钮来选择，占当浏览者选择的项目较多时，如果用选择
86、钮来选择，占页面的区域就会较多。可以用页面的区域就会较多。可以用页面的区域就会较多。可以用页面的区域就会较多。可以用标记和标记和标记和标记和标标标标记来设置选择栏。选择栏可分为两种，即弹出式和字段式。记来设置选择栏。选择栏可分为两种，即弹出式和字段式。记来设置选择栏。选择栏可分为两种，即弹出式和字段式。记来设置选择栏。选择栏可分为两种，即弹出式和字段式。标记的格式为：标记的格式为：标记的格式为：标记的格式为： select size=x name= multiple 4.10 4.10 表单表单表单表单 5 5 选择栏选择栏选择栏选择栏 其中：其中：其中：其中： size: size:取数字，
87、表示在带滚动条的选择栏中一次可见的列取数字，表示在带滚动条的选择栏中一次可见的列取数字，表示在带滚动条的选择栏中一次可见的列取数字，表示在带滚动条的选择栏中一次可见的列表项数表项数表项数表项数 name: name: 控制操作名控制操作名控制操作名控制操作名 multiple: multiple:不带值，加上本项表示可选多个选项，否则只不带值，加上本项表示可选多个选项，否则只不带值，加上本项表示可选多个选项，否则只不带值，加上本项表示可选多个选项，否则只能单选能单选能单选能单选 标记的格式为：标记的格式为：标记的格式为：标记的格式为： option select value= 其中：其中：其中
88、：其中： select select 不带值，加上本项表示该项是预置的不带值，加上本项表示该项是预置的不带值，加上本项表示该项是预置的不带值，加上本项表示该项是预置的 value value 指定控制操作的初始值，缺省时初值为指定控制操作的初始值，缺省时初值为指定控制操作的初始值，缺省时初值为指定控制操作的初始值，缺省时初值为optionoption中的内容表示选项值中的内容表示选项值中的内容表示选项值中的内容表示选项值 4.10 4.10 表单表单表单表单 5 5 选择栏选择栏选择栏选择栏 标记可以设置允许成段文字的输入。格式为：标记可以设置允许成段文字的输入。格式为： 多行文本多行文本 其
89、中的行数和列数是指不用滚动条就可看到的部分。其中的行数和列数是指不用滚动条就可看到的部分。 4.10 4.10 表单表单表单表单 6 6 多行文字的输入多行文字的输入多行文字的输入多行文字的输入textarea.textarea. 【例【例4-10】制作一个】制作一个“职员调查表职员调查表”，收集职员的个人资，收集职员的个人资料。为了显得整洁，在表单中使用了无边框表格。本例文件料。为了显得整洁，在表单中使用了无边框表格。本例文件ex4-10.htm在浏览器中显示的效果如图在浏览器中显示的效果如图4-12所示。所示。4.10 4.10 表单表单表单表单 7 7表单应用综合实例表单应用综合实例表单
90、应用综合实例表单应用综合实例图4-12 表单应用综合实例【例4-10】 1制作如图制作如图4-13所示的网页，要求章标题的级别为标题所示的网页，要求章标题的级别为标题h2，居中，黑体，红色；节标题的级别为标题，居中，黑体，红色；节标题的级别为标题h3，居左，楷，居左，楷体，绿色；正文为宋体，蓝色。整个网页背景色为乳白色。体，绿色；正文为宋体，蓝色。整个网页背景色为乳白色。 2制作如图制作如图4-14所示的网页，单击软件名称，则下载该所示的网页，单击软件名称，则下载该软件。软件。 3分别制作如图分别制作如图4-15（a）、（）、（b）所示的网页，单击）所示的网页，单击小图像，将显示放大的图像。小图像，将显示放大的图像。 4练习表格在页面中的应用，分别制作如图练习表格在页面中的应用，分别制作如图4-16（a）、）、（b）所示的网页。在图）所示的网页。在图4-16（a）中单击）中单击“详细详细”超文本则超文本则打开新的浏览器窗口，显示详细内容，如图打开新的浏览器窗口，显示详细内容，如图4-16（b）所示。）所示。 5制作一个制作一个“网友推荐网友推荐”表单，如图表单，如图4-17所示。所示。 6制作如图制作如图4-18所示的框架网页。在左框架中单击项目，所示的框架网页。在左框架中单击项目，在右框架中显示相应的内容。在右框架中显示相应的内容。 习题习题习题习题4 4
