第7章网站的静态网页实现技术

《第7章网站的静态网页实现技术》由会员分享，可在线阅读，更多相关《第7章网站的静态网页实现技术（158页珍藏版）》请在装配图网上搜索。

1、第7章 网站的静态网页实现技术 n网站的静态网页主要是通过HTML实现的，即静态网页是用HTML制作的。nHTML（Hyper Text Markup Language）语言是超文本标识语言，目前最新的版本是HTML 4.0。nHTML语言是一种描述文档结构的语言，使用描述性的标识符（称为标签）来指明文档的不同内容。n标签是区分文本各个组成部分的分界符，用来把HTML文档划分成不同的逻辑部分（或结构），如段落、标题和表格等。一般来说，HTML文件是以“.htm”或“.html”作为文件的扩展名。7.1 HTML基础知识 qHTML是专门在Internet上进行传输，可以让设计者建立并能让所有W

2、eb的使用者读出的页面。qHTML是一种标识语言，用来创建与系统平台无关的文档。q也就是说，HTML不是编程语言而是一种描述性标识语言。qHTML是把一些信息根据需要链接起来的信息管理技术。q人们可以通过超文本中的链接打开另外一个相关的文件，用鼠标点击文本中的高亮度或带下划线的文字，即可打开与之相链接的文本，获得所需的信息。7.1 HTML基础知识q超文本由若干互联的文本块组成，这些信息块可以是若干屏、窗口、文件或更小的块信息，这样的信息单元称为节点（Node）。q不管节点有多大，每个节点都有若干指针指向其他节点或从其他节点指向该节点的指针，这些指针称为链接（Link）。q超文本文件亦称为锚点

3、（Anchor），或称为锚标。1.超文本的节点q超文本中信息网络的每个节点都包含一个特定的主题信息，节点的大小视主题而定。按照节点的功能可以分为表现型节点、组织型节点和推理型节点三类。7.1 HTML基础知识q（1）表现型节点是一般性超文本节点，主要包括：由文本段组成的文本节点：图形图像节点；由声音或合成语音构成的声音节点：用于执行一个过程的按钮节点。q（2）组织科节点是组织节点的节点，主要包括：目录节点，它以条目形式给出信息的索引指针，指向索引节点：索引节点，由索引项组成，索引项用指针指向目标节点或相关索引项。q（3）推理型节点只有在智能超文本中才有，主要包括对象节点和规则节点。超文本中的“

4、超”体现在它不仅能包含文本，而且还可以包含图像、音频和视频等多媒体信息，即将文本的概念扩展到超文本。因此超文本也称为超媒体（Hypermedia）。7.1 HTML基础知识 2.超文本的链接超文本的链接q链接是超文本的灵魂，它定义了超文本的结构。超文本的链接主要包括以下三类：q（1）基本链接：用于建立节点之间的基本顺序，类似文章的章、节这样的层次结构。q（2）索引链接：可以从一个索引点引到该节点的索引入口。q（3）执行链接：将一种执行活动与按钮节点相连，使超文本成为高层程序的界面。q在浏览器的显示中，链接表现为带下划线的彩色字符或图案。如果链接被访问，颜色会改变，以便提示用户。链接的颜色可以通

5、过HTML参数来改变。7.1 HTML基础知识 3.锚点锚点q锚点是链接的指针，它指向同一文档的不同部分或其他不同的文档。在HTML语言中有两种锚点：q（1）NAME锚点：属于标记锚点，用来将文档中的某个或某些段落标识为节点，供用户通过链接查找信息。q（2）HREF锚点：属于执行锚点，用来指向其他超文本节点，或引用本文档中用NAME锚点标记了的段落，或执行某个URL命令（如发送电子邮件、执行FTP或HTTP命令）。因此HREF锚点又可分为URL命令锚点和内部锚点两种。7.1 HTML基础知识q锚点在浏览器中的显示就是链接，所以有一些HTML文献直接称锚点为链接，即认为锚点就是链接。通过HREF

6、锚点执行的链接称为超链接（Hyperlink）。不过，在大多数情况下并没有严格区分链接与超链接，例如Web页面中的链接也可以称为超链接。7.1 HTML基础知识4.HTML的标签qHTML定义标签用于描述页面的整体结构，以及浏览器和HTML工具对页面的确认；n还有一种标签即页面结构标签不影响页面的显示效果，帮助工具对文件进行解释和过滤。n这些标签是可选的，如果页面不包含标签，浏览器通常也能够读取页面。q下面介绍HTML的四个最重要的标签。（1）：标签放在HTML文件的最开始处，用以告诉浏览器这个文件为HTML文件，而在文件的最后，当然足的结束标签了，虽然这个标签可以省略不用，但希望读者还是要养

7、好使用该标签的习惯。（2）：标签一般放在标签的后面，用来标明文件题目或定义。7.1 HTML基础知识（3）：标签用来设定文件的标题，一般用来注释这个文件的内容，浏览器通常会将文件标题显示在浏览器窗口的左上角。（4）：标签一般用来指明HTML文档里的主要文字，例如标题、段落和列表等，也可以用来定义主页背景颜色。当然，HTML远没有如此简单，每个标签后面可定义各种各样的特性，这需要读者逐步掌握。当看到一个优秀的页面时，可以看看它的源文件，这样对提高制作水平很有帮助。下面请看一个最基本的HTML文件具有怎样的结构。7.1 HTML基础知识 这是测试文件 HTML文件的内容就写在这里 把它存为一个HT

8、ML文件，然后用浏览器打开它，其显示效果如图7-1所示。下面分别对这些标志进行介绍。图图7-1 浏览器显示效果浏览器显示效果 7.2 HTML基本标识与使用 7.2.1 HEAD中的标识qHEAD出现在HTML文档的起始处，用来标明当前文档的有关信息（如文档标题），检索引擎可用的关键词以及不属于文档内容的其他数据。qHEAD元素的起始和结束标识都是可选的。q在HEAD的起始标识和结束标识之间最重要的两个元素是TITLE和META。1.TITLE元素元素qTITLE元素通常不被视为文本的部分，其内容能够被显示，但会显示为文档标题或窗口标题。n每个HTML只能有一个标题，也就是说，每个HTML文档

9、的HEAD部分只能有个TITLE元素。nTITLE元素的起始标识和结束标识都是必需的。7.2 HTML基本标识与使用 2.INDEX元素qINDEX元素主要定义用来查询的表单，表单应该允许用户通过提供关键字的方式来查找索引内容。在阅读文件时，不论用户采用什么样的方式，当前文件所描述的数据均可采用索引查询方式进行搜索。3.q设定链接的基准路径，使用这个标识，可以大大地简化网页内超链接的编写工作。用户可以不用为每个标识编写完整的全路径，而只需指定它相对于base所指定的基准路径的相对路径即可。7.2 HTML基本标识与使用 4.META元素元素qMETA元 素 被 用 来 描 述 HTML文 档

10、的 元 信 息（Meta Information），即关于文档的自身信息。n这些信息可以被Web检索引擎、Web服务器或其他程序利用。nMETA元素是HTML 3.0以后版本中定义的元素。qMETA元素需要标识，但不能有结束标识。nMETA元素定义元信息时，可以用NAME属性指出信息的类型，用Content属性指出它的定义。例如：q使用上述语句可以产生关于文档作者和关键词的元信息。7.2 HTML基本标识与使用 q还可以用来产生特殊的HTTP头标，送给Web服务器，用来激活客户端的特殊功能。n可以使用HTTPEQUIV属性指明头标名，用Content属性指明其内容。n例如：q上面的语句将产生如

11、下的HTTP头标：empires:Mon,10 Sep 2000 09:42:05 GMT 7.2 HTML基本标识与使用 q但是不能用META元素来描述其他元素处理好的HTML文档的任何部分，如不能用它给出文档的标题，因为这是TITLE元素所做的事。n也不应用META元素替换Web服务器已经产生的标题（例如Content-type或Date），否则会扰乱服务器或客户端，或者两者都会被扰乱。5.LINK元素元素qLINK元素在当前的HTML文档与另一个对象之间建立一种链接关系，以指明与当前文档的有关属性、词汇表、版本、相关资源、文档作者和其他信息。nLINK元素支持与其元素相同的属性。7.2.

12、2 文本标识 1.标题元素标题元素q正如传统的书本一样，HTML中也规定了标题格式。qHTMI中的标题元素使用格式为：q它一共支持六级标题，其元素内容分别为：h1、h2、h3、h4、h5和h6。q标题字体支持ALIGN属性，用它可以指定对象的排版格式，其属性值有LEFT、RIGHT和CENTER等。q请看下面的例子，其浏览器的显示效果如图7-2所示。n显示上述效果图的HTML原代码为：How to make Webs标题元素显示效果标题元素显示效果1标题元素显示效果标题元素显示效果2标题元素显示效果标题元素显示效果3标题元素显示效果标题元素显示效果4标题元素显示效果标题元素显示效果5标题元素显

13、示效果标题元素显示效果6 7.2.2 文本标识图7-2 浏览器显示效果 7.2.2 文本标识2.字体元素字体元素q字体元素FONT用来设置文档的字体，通过改变其属性可以对字体进行不同的设置。q其常用的属性有三个：SIZE、COLOR和FACE。nSIZE用来指定字体大小，COLOR指定字体颜色，FACE用宋指定一种字体名或一种字体列表。（1）SIZE的使用格式为：其中，#=1,2,3,4,5,6,7（2）COLOR的使用格式为：（3）FACE的使用格式为：7.2.2 文本标识（4）字体元素的综合应用实例下面是一个FONT元素应用的综合例子，其浏览器显示效果如图7-3。New Document

14、FONT的的综综合合应应用用1/font FONT的综合应用的综合应用2/font FONT的综合应用的综合应用3/font FONT的综合应用的综合应用4/font 图图7-3 浏览器显示效果浏览器显示效果7.2.2 文本标识3.字符修饰元素字符修饰元素qHTML中规定了大量的字符修饰处理元素，它们能够在不改变字体、字号的基础上对字形进行改变。q这些元素分为物理样式和逻辑样式两大类，它们一般不支持任何属性。（1）物理样式）物理样式 B元素：指定一段文本，使浏览器将该段文本以粗体显示。I元素：指定一段文本，使浏览器将该段文本以斜体显示。u元素：指定一段文本，使浏览器将其显示为带下划线的文字。T

15、T元素：指定一段文本，使浏览器将它显示为固定大小的字体字符。SUP元素：指定一段文本，使浏览器用较小的字体将具显示为上标。S元素：指定段文本，使浏览器将它显示为带删除线的文字。STRIKE元素：指定一段文本，使浏览器将它显示为带删除线的文字。7.2.2 文本标识（2）逻辑样式逻辑样式 EM元素：对文档中的某段文本进行强调，通常用斜体字显示出来。STRONG元素：对文档中的某段文本进行强调，通常用粗体字显示出来。CODE元素：将程序代码（如JAVE、C+源程序等）显示成等宽字体。SAMP元素：指定一个样本名称，浏览器一般用等宽字体显示它。4.分行控制元素分行控制元素n浏览器是忽略HTML文档中的

16、自然行与段落的，分行和段落设置必须通过HTML标识来实现。（1）分段元素q分段元素p用来定义文档中的个段落，段落的缩进、第一个字符前面的空格及其他特性通常由浏览器确定。q标识是段落的开始，是段落的结尾，单独一个，会添加一个空行。qp元素的结束标记，经常可以不写。（2）换行元素q换行元素在HTML文档中增加一个换行，指示浏览器执行个断行动作，与p元素不同，它只是用来换行，其他字符和段落格式保持不变。q元素没有结束标志。5.预格式化文本元素预格式化文本元素预格式化文本元素PRE使文本块以等宽字体显示，并保留预排列的格式。（1）预格式化文本元素使用规则q在预格式化文本内：文本中的分行会予以保留，从下

17、一行显示文本。不应该使用标记，如果使用此标记，会处理为换行。可以使用超链接和突出显示字符元素。不应该使用定义段落格式化元素（如标题、地址等）。（2）预格式化文本使用格式）预格式化文本使用格式q预格式化文本使用格式为：7.2.2 文本标识 6.地址元素地址元素 qHTML规定了用地址元素ADDRESS来指定作者的所有权、名字、地址（常规地址和E-mail）、电话和传真等。ADDRESS元素常放在文档结束处，浏览器多以斜体字显示ADDRESS的内容，并在其后加一个换行。该元素不支持任何属性。其使用格式如下例所示：Newsletter Newsletter editor:cooleditor:coo

18、l TEL:(0731)6688575 TEL:(0731)6688575 E_Mail: E_Mail: 7.文字块引用元素文字块引用元素n文字块引用元素BLOCKQUOTE用来在文档中引用来自其他资源的文字，浏览器显示其内容时，会将相应的文字缩进，并在其上下各加一个窄行，有的浏览器还用斜体字显示其内容。q其使用格式为：8.分隔线元素分隔线元素 q分隔线元素HR是文本之间的分界，通常是一个全宽的水平线。q其使用格式为：7.2.3 超链接标识 1.建立与另一个页面的链接建立与另一个页面的链接q为了在HTML中建立一个链接，需要以下两个部分内容：待链接文件的名称或URL。作为热区的文本，即在浏览

19、器中被显示为高亮且能被选中从而实现链接的部分。能够建立起链接的HTML标签是链接标签或称为锚标签的“”。n标签有许多扩展属性，称这种扩展属性为标签的属性。7.2.3 超链接标识n标签在HTML源代码中的形式如下：热点文本其中，“URL”是一个统一资源定位符号，它指向一个资源地址。“热点文本”将用高亮度方式在浏览器页面中加以显示。标签可以链接到另一个页面，也可链接到Web上的文档，还可链接到文档的指定位置。在其他标签中使用标签时，即在标签嵌套的情况下，结束标签与起始标签应在同一层上。例如：7.2.3 超链接标识qHREF属性域指定了待链接文件的路径名。q使用相对路径时，以链接所在文件为基准，可以

20、包含上层目录名（用“”）；q也可以使用绝对路径，通过文件在文件系统中的绝对位置进行描述（用竖线“|”代替“：”，并用正斜杠“/”分隔）。例如：HREf/C|/temp/Oontent/index.htmlq 当链接到另一个页面时，在HREF参数中写入要链接的文件名路径，在文件名和HREF之间写上等号。例如：7.2.3 超链接标识 如何使用锚标签如何使用锚标签热点文本热点文本1热点文本热点文本2 热热 点点 文文 本本37.2.3 超链接标识 2.建立与远端建立与远端Web的链接的链接q与远端Web上的文件建立链接时，在HREF参数中写入要链接的文件名和路径，其中文件名要用双引号，并在文件名和H

21、REF之间写上等号，而它的文件名是远端文件的URL。例如要想让网页链接到英文雅虎、中文搜狐、263在线等站点上，需要加入如下链接到远端文件的超链接。7.2.3 超链接标识 如何使用锚标签如何使用锚标签 英英 文文 雅雅 虎虎 中中 文文 搜搜 狐狐 263在在 线线 7.2.4 图像标识 1.图像标识的基本用法图像标识的基本用法q图像元素IMG用来将图像插入到HTML文档中。IMG的两个基本属性为SRC和ALT，SRC属性用来指定图像的URL。此处的URL只能嵌入图像，不能嵌入HTML文本，但URL的写法是标准的。ALT指定对图像进行说明的一段文字，也就当浏览器没有完全读入图像，或浏览器不支持

22、内联图像，或用户将图像设置为不显示时，在图像位置显示的文字。还可以用BORDER元素给图像加上边框，当图像建有与另一文档的超链接时，通常使用边框进行提示。7.2.4 图像标识q下面的示例说明了IMG的基本用法：7.2.4 图像标识 2.图像对齐与布局图像对齐与布局qIMG支持的另个重要属性是ALIGN，用以指定图像的对齐与布局方式。ALIGNleft和ALIGN=right使图像浮动，并向页面窗口左边或者右边对齐，此时图像附近的文本则相应地在图像的右侧或左侧环绕。q其他属性值则指定图像与文本的相对对齐方式（垂直方向）：7.2.4 图像标识 ALIGN=top：使图像与本行的最高点对齐。ALIG

23、N=texttop：使图像与本行的最高文本对齐。ALIGN=middle：使当前行的基准线与图像的中线对齐。ALIGN=absmiddle：使当前的中线与图像的中线对齐。ALIGN=baseline：使图像的基准线与当前的基准线对齐。ALIGN=bottom：使图像的底部与当前基准线对齐。ALIGN=absbottom：使图像的底部与当前的底部对齐。7.3 高级HTML标识的使用 7.3.1 表格（表格（Table）q表格用Table元素定义。表格的开始是标题（可以省略不写），后面是一个或多个表行。表格的每一行由若干表元组成，浏览器将它们分成名称表元和数据表元。在默认的情况下，名称表元居中显示

24、，数据表元居左显示。1.命令格式命令格式其主要命令格式为：定义表格；定义表格；定义表行；定义表行；定义表头；定义表头；定义表元：定义表元：用来给表格提供一个标题。用来给表格提供一个标题。7.3 高级HTML标识的使用 2.创建有边框的表格创建有边框的表格q用上述命令创建的表格是没有边框的，可以通过TABLE的BORDER属性来加上边框。下面创建一个有边框的表格：FoodOrinkSweet 7.3 高级HTML标识的使用 3.创建不规则的表格创建不规则的表格qHTML的表格也可以是不规则的表格，也就是说，表元可以跨 多 列 或 多 行，跨 列 用 属 性 COLSPAN实 现，跨 行 用ROW

25、SPAN实现，其属性值为所跨的行数或列数。q例1：表元跨三列的实例。考试成绩考试成绩 计计 算算 机机 英英 语语 数数 学学 788082 7.3 高级HTML标识的使用例2：表元跨三行的实例。考考试试成成绩绩计计算算机机78 英语英语80 数学数学82 7.3.2 表单（Form）1.表单的概念表单的概念表单的作用是从用户方收集信息，当用户填好表单上所需信息并将表单提交后，服务器就可以得到表单中包含的信息，并经公共网关接口程序进行处理。表单中使用的主要元素包括：FORM 在文档中产生表单。INPUT 输入字段。SELECT 定义可选择的若干选项，实际上般为列表框。OPTION SELECT

26、选项中的选项。TEXTAREA 多行文本的输入字段 7.3.2 表单（Form）q每 一 个 可 变 的 字 段 都 要 由 INPUT、TEXTAREA和OPTION元素来定义，并且必须用NAME属性来标识其值。2.Form标识标识qFORM在包含文件结构性标识的同时，还有一系列输入标记，其中属性包括：ACTION 用于设定互动式表单的处理方式，通常指明一个处理函数的URL地址。METHOD 用于设定互动式表单的资料传输方式，如POST或GET方式。ENCTYPE 用于以编码方式来传送表单的资料。7.3.2 表单（Form）3.输入域输入域qINPUT元素用来定义一个用户可以在表单上输入信息

27、的输入域，每一个输入域给特定名称及资料类型的变量分配个值。INPUT元素有很多属性，可使用的参数组取决于TYPE属性，一般命令格式为：7.3.2 表单（Form）（1）文字和密码输入）文字和密码输入q希望用户输入文字时，应将TYPE属性设置为TEXT；希望用户输入密码时，应将TYPE属性设置为PASSWORD，表单将不显示用户输入的字符。q规定TYPE=TEXT时，还可以使用以下三个INPUT的属性：MAXLENGTH：限定用户能够输入的字符数，默认值为无限。SIZE：定义输入区域分配的显示空间大小，默认值由浏览器决定。VALUE：提供输入区域的初始值。7.3.2 表单（Form）q下面的例子

28、说明了文字与密码属性的使用。您您的的姓姓名名:您您 的的 主主 页页 的的 网网 址址:密密码码:7.3.2 表单（Form）（2）复选框与单选框）复选框与单选框qINPUT元素支持的另外两个TYPE属性就是复选框（Checkbox）和单选框（Radio Button），其对应的TYPE属性值为CHECKBOX和RADIO。如果要将复选框或单选框初始化为己选中，则可以在INPUT元素中使用CHECKED属性。例1：复选框。7.3.2 表单（Form）柠檬柠檬苹果苹果香蕉香蕉橘子橘子 7.3.2 表单（Form）例2：单选框。宁檬宁檬苹果苹果香蕉香蕉橘子橘子 7.3.2 表单（Form）（3）隐

29、藏表单组件）隐藏表单组件q有时由于某种需要，可能希望将表单组件中的一个或多个组件隐藏起来。INPUT元素的TYPE属性值为HIDDEN时就提供了这个功能。q下面是隐藏表单的一个实例。这里有隐藏的表单这里有隐藏的表单 7.3.2 表单（Form）（4）提交与重置组件）提交与重置组件qTYPE属性的另外两个可选值分别是SUBMIT和RESET，它们分别用来提交表单数据和重新初始化表单域，在前面的例子中已经使用了这两种TYPE值。4文本框文本框q当用户的输入文本超过一行时，可以使用文本框。文本框由TEXTAREA元素定义，其常用属性有三个：（1）NAME 规定文本框的名字。（2）ROWS 定义文本框

30、的行数。（3）COLS 定义文本框的列数。7.3.2 表单（Form）q其使用格式为：文文本本框框中中的的内容内容.q对于文本框中较长的行，可以设置文本是否进行换行。文本换行由WRAP属性规定，WRAP=OFF时，表示不换行；WRAP=ON时，表示软换行（即显示时换行，但实际发送时不换行）；WRAP=HARD时，表示硬换行（即插入回车符）。7.3.2 表单（Form）q下面的实例设计了一个10行、30列、采用硬换行的文本框。7.3.2 表单（Form）5.列表框列表框qHTML还允许使用列表框，包括下拉式列表框和滚动式列表框两种。列表框用SELECT和OPTION两种元素实现。SELECT元素

31、用来定义列表框，支持NAME、SIZE和MULTIPLE三种属性。NAME属性指定SELECT元素的名字，SIZE属性定义列表框的大小，即用户次可以看到的列表项的数目，使用MULTIPLE属性时，表示允许用户进行多项选择。OPTION元素定义列表框的各选项，可以使用属性SELECTED来表示预先已经选定，还可以使用属性VALUE来指定用户选择某项后的返回值。q具基本使用格式为：7.3.2 表单（Form）q请看下面实例，一个是下拉式列表，只允许用户进行单项选择；另个是滚动式列表，允许用户进行多项选择。q例1：下拉式列表。狮子狮子大象大象老虎老虎 7.3.2 表单（Form）q例2：滚动式列表。

32、大象大象狮子狮子水牛水牛老虎老虎猎豹猎豹 7.3.2 表单（Form）6.选项选项qHTML用户对表单的处理是从给文件提供初始状态的域开始的，用户可以修改被域类型限制的域。当用户通过提交按键或图形输入来指示提交表单时，则根据METHOD、ACTION URL及ENCTYPE来处理表单数据组。q如果表单中仅有一个单行文本输入域，浏览器则应在此域中接受Enter作为提交表单请求。7.3.2 表单（Form）（1）表单）表单URL编码类型编码类型q所有表单的默认编码是application/x-www-form-urlencoded。表单数据组的表示方法如下：避免表单域的名及值用“”符号来替代空格，

33、而保留字符用URL来避开。换句话说，就是用HH来替换非字母及数字字符。这里，一个百分号和两个十六进制数表示该字符的ASC码。7.3.2 表单（Form）q按照在文件中的显示顺序对域进行排列使用“=”符号把名从值中隔开，而域之间是用&隔开的。可以省略掉零值域。特别要注意的是，不应该在编码数据中出现没有选择的Radio Button及Check Box，但应出现VALUE参数的隐藏域。（2）表单查询）表单查询METHOD=GETq如果表单处理很简单，所提交的数据很少并且该数据的安全性并不重要，那么采用GET方式比较好，该方式可以实现用最简单的方法从客户端向服务器传输数据。7.3.2 表单（F

34、orm）（3）表单提交）表单提交METHOD=POSTqPOST方式输入的请求串长度不受限制，并且在浏览器的请求地址内也看不到用户的输入信息。7.3.3 框架（Frame）1.框架的概念框架的概念qHTML支持框架（Frame）功能，Frame可以将浏览器分隔为多个部分，每一部分可以保持相对独立的操作。简单她说，Frame的功能是把窗口划分为几块，每块称为一个框架，所有框架称为框架集（总框架），因此，在HTML文档中首先要定义个框架集，然后逐个定义框架，并应保证支持框架功能的浏览器能够正常用来浏览。2.生成框架生成框架q（1）设计框架的三个主要元素7.3.3 框架（Frame）q设计框架的三个

35、主要元素是：FRAMESET元素：定义框架集（总框架）。FRAME元素：定义每一个框架。NOFRAMES元素：用来显示没有框架时的信息（由于有的浏览器不支持框架功能）。（2）基本命令语句）基本命令语句q基本命令语句是：7.3.3 框架（Frame）q由于框架从根本上改变了HTML文档的结构，所以有如下规定：在出现FRAMESET元素的文档中，不要再使用BODY元素。框架文档的基本结构如以下代码所示：7.3.3 框架（Frame）7.3.3 框架（Frame）3.使用框架使用框架qFRAMESET元素有以下两个重要属性：COLS属性：规定按纵向将窗口划分为若干框架。ROWS属性：规定按横向将窗口

36、划分为若下框架。q其属性值可以按窗口尺寸的百分比给定，通常几个百分比之和应该等于100；也可以按照框架尺寸的实际像素值给定。两种情况下都可以只给定需要严格限定的值，而将其余值以“*”号表示。7.4 JavaScript实现技术 qJavaScript是一种描述语言，它可以被嵌入到HTML的文件之中。通过JavaScript脚本程序可以做到回应使用者的需求事件，而不用通过任何的网络来回传输入的信息，所以用户输入的信息不用经过服务器（Server）处理，而直接可以被客户端（Client）的脚本所处理。本节主要讲述使用JavaScript技术进行网络编程，实现静态网页。7.4.1 JavaScrip

37、t基本数据结构 qJavaScript脚本语言与C+语言非常相似，只是去掉了C语言中有关指针等容易产生错误的部分，并提供了功能强大的类库。对于已经具备C+或C语言的入来说，学习JavaScript脚本语言是一件非常轻松愉快的事。1.JavaScript代码的格式代码的格式qJavaScript脚本语言包括在HTML中，并成为HTML文档的一部分。与HTML标识相结合，构成了一个功能强大的Internet网上编程语言。JavaScript脚本程序加入HTML文档的格式如下：7.4.1 JavaScript基本数据结构 JavaScript语言代码语言代码:q将JavaScript脚本程序包括在H

38、TML中非常简单，只需将要加入的脚本程序放在标识之间，并用Language项说明使用的语言为JavaScript 即可。q请看一个简单的使用JavaScript的例子，其程序代码如下所示：7.4.1 JavaScript基本数据结构 7.4.1 JavaScript基本数据结构q该段程序的运行结果为一个简单的包含一行文本的欢迎界面。q“Document.Write()”是JavaScript的Document对象的输出函数，其功能是将括号中的字符或变量值输出到窗口上。q可将JavaScript标识放置“”中，使其在主页和其余部分代码之前就被装载，从而使代码实现的功能更强大。将JavaScrip

39、t标识放置在“”中，可以实现某些部分动态地创建文档。7.4.1 JavaScript基本数据结构 2.基本数据类型基本数据类型qJavaScript脚本语言同其他语言一样，有其自身的基本数据类型、表达式、算术运算符以及程序的基本框架结构。JavaScript提供的基本数据类型用来处理数字和文字，变量用来存放信息，表达式则用来处理较复杂的信息。q在JavaScript中有四种基本的数据类型：数值（整数和实数）、字符串型（用“”或括起来表示的字符或数值）、布尔型（用Tree或False表示）和空值，其数据可以是常量，也可以是变量。由于JavaScript采用的是弱类型（变量的数据类型根据需要可以改

40、变）的形式，因而不必事先声明一个数据的类型，而是在使用或赋值时才需确定其类型。当然也可以先声明该数据的类型，这是在赋值时通过自动说明来进行的。阿7.4.1 JavaScript基本数据结构 （1）常量）常量 整型常量：又称字面常量，是不能改变的数据，可以用十六进制、八进制和十进制数来表示其值。实型常量：由整数部分加小数部分表示，如12.32、193.98等，也可以使用科学记数法或标准方法表示，如5E7、4e5等。布尔常量：只有两种状态，即Tree或False，主要用来说明或代表一种状态或标志，以说明操作流程。它与C+中的布尔常量是不一样的，C+中可以用1或0表示其状态，而在JavaScript

41、中只能用Tree或False表示其状态。7.4.1 JavaScript基本数据结构 字符型常量：使用单引号或双引号括起来表示的一个或几个字符，如“3245”、“ewn234234”等。空值：JavaScript中有个空值Null，表示什么也没有。如试图引用一个没有定义的变量，则该变量返回一个Null值。特殊字符：同C语言一样，JavaScript中同样有些以反斜杠（/）开头的不可显示的特殊字符，通常称这些特殊字符为控制字符。7.4.1 JavaScript基本数据结构（2）变量）变量q变量的主要作用是存取数据、提供存放信息的容器。对于变量，编程者必须明确变量的命名、变量的类型、变量的声明及变

42、量的作用域。变量的命名：JavaScript中的变量命名同其他计算机语言非常相似，不过要注意以下两点。必须是一个有效的变量，即变量以字母开头，中间可以出现数字，如a1、a2等，除下划线（_）外，变量名称中不能含有“空格”、“+”、“-”、“，”或其他符号。不能使用JavaScript中的关键字作为变量。7.4.1 JavaScript基本数据结构q在JavaScript中定义了40多个关键字，这些关键宁是在JavaScript内部使用的，不能作为变量的名称，如var、int、double、true等不能作为变量的名称。变量的类型：在JavaScript中，可以不对变量类型进行声明，而在使用时再

43、根据数据的类型来确定变量的类型。例如：x=10 y=”12”xy=True xyz=1.5 其中x为整数，y为字符串，xy为布尔型，xyz为实型。7.4.1 JavaScript基本数据结构q变量的声明及变量的作用域：JavaScript中变量可以在使用前先对其进行声明，并可以对其赋值。通过使用关键宁var对变量进行声明，对变量进行声明的最大好处就是能及时发现程序代码中的错误。JavaScript采用动态编译，这种编译方式的缺点是不易发现代码中的错误，特别是不易发现变量命名方面的错误。q对于变量还有一个重要特点，即变量的作用域。在JavaScript中，同样有全局变量和局部变量。全局变量是定义

44、在所有函数体之外的，其作用范围是整个函数；而局部变量定义在某函数体之内的，只对该函数是可见的，而对其他函数则是不可见的。7.4.1 JavaScript基本数据结构 3.表达式和运算符表达式和运算符 （1）表达式）表达式q定义变量后，就可以对其进行赋值、改变、计算等一系列操作，这一过程通常由一个表达式来完成，表达式是变量、常量、布尔值及运算符的集合，因此表达式可以分为算术表达式、字符串表达式、赋值表达式以及布尔表达式等。（2）运算符）运算符q运算符是完成操作的系列符号。在JavaScript中有以下几类运算符：7.4.1 JavaScript基本数据结构 算术运算符算术运算符分为单目运算符和双

45、目运算符。双目运算符包括以下符号：+（加）、一（减）、*（乘）、/（除）、（取模）、|（按位或）、&（按位与）、+（右移）、（右移，零填充）。单目运算符包括以下符号：-（取反）、（取补）、+（递加1）、-（递减1）。7.4.1 JavaScript基本数据结构 比较运算符比较运算符包括以下符号：（大于）、=（大于等于）、=（等于）、!=（不等于）。比较运算符的基本操作过程是：首先对它的操作数进行比较，尔后再返回个Tree或False值。逻辑运算符在JavaScript中增加了几个逻辑运算符。逻辑运算符包括以下符号：!（取反）、&=（与后赋值）、&（逻辑与）、|=（或后赋值）、|（逻辑或）、=（

46、异或后赋值）、（逻辑异或）、?:（三目操作符）、|（或）、=（等于）、!=（不等于）。7.4.1 JavaScript基本数据结构q其中三目操作符的主要格式如下：操作数?结果1:结果2三目操作符的意义为：若操作数的结果为真，则表达式的结果为1，否则为2。4.JavaScript循环控制循环控制（1）IFE1se条件语句条件语句 IFElse条件语句用于实现有条件地运行一段代码，If条件语句的基本格式如下：7.4.1 JavaScript基本数据结构IF(表达式)语句段1:else语句段2:q在上述代码中，若表达式为Tree，则运行语句段1；否则运行语句段2。IFElse语句是JavaScrip

47、t中最基本的控制语句，通过它可以改变语句的执行顺序。表达式中必须要使用关系语句实现判断，它是作为一个布尔值进行计算的，将零和非零的数分别转化成False和Tree。7.4.1 JavaScript基本数据结构q在上述代码中，若表达式为Tree，则运行语句段1；否则运行语句段2。IFElse语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。表达式中必须要使用关系语句实现判断，它是作为一个布尔值进行计算的，将零和非零的数分别转化成False和Tree。（2）While循环循环qWhile循环语句通常用于在某个条件为True时运行一段代码。While语句的基本格式如下：Wh

48、ile(条件)语句集;q在上述代码中，当条件为真时，重复运行语句集，直到条件为假时才终止，并退出循环。7.4.1 JavaScript基本数据结构qWhile语句和If语句的最大区别在于While语句块可能要运行许多次，也可能一次都不运行，而IFElse语句块最多可运行一次。（3）For循环语句循环语句qFor循环语句是另一种循环语句，类似于While循环语句。两者比较起来，For循环语句更加适合于数字循环，而While循环语句虽然也可以用于数字循环，但更适合于其他方面的循环处理。For循环语句的基本格式如下：For(初始化;条件;增量)语句集:7.4.1 JavaScript基本数据结构q在

49、上述代码中，当条件成立时，运行语句集，否则退出循环体。在For关键字后的括号中，有三个分别用分号隔开的参数部分：初始化参数确定了循环的开始位置及必须赋予变量的初值；条件参数用于判别循环停止的条件，若满足条件，则运行循环体，否则退出循环体；增量参数主要用于定义循环控制变量在每次循环时按多大步长变化。7.4.1 JavaScript基本数据结构 5.JavaScript函数函数q函数为程序设计人员提供了一个非常方便的途径。通常在进行一个复杂的程序设计时，程序设计人员总是要根据所要完成的功能，将程序划分为一些相对独立的部分，对每部分分别编写一个函数，从而使各部分充分独立，任务单一，使得程序清晰易懂。

50、JavaScript函数可以封装那些在程序中可能要被多次用到的模块，并可作为事件驱动的结果而调用。7.4.1 JavaScript基本数据结构 （1）函数定义和调用）函数定义和调用qJavaScript函数定义的格式如下：Function函数名(参数1,参数2,)函数体;Return表达式;q函数由关键字Function来定义，在定义函数时，每定义一个参数，就生成一个变量。当调用函数时，实际传递给函数的值被赋值给这些变量。在调用函数时，不但可以使用常量作为参数，还可使用变量或表达式作为参数。7.4.1 JavaScript基本数据结构q另外，并不是每个函数都需要参数，用户完全可以定义一个没有参

51、数的函数。例如：Function Hello()Statements q在调用时只需使用Hello()即可。7.4.1 JavaScript基本数据结构 （2）方法）方法q这里所指的方法是指作为JavaScript对象属性的函数，它与上面所介绍的函数的唯一区别在于它属于JavaScript对象，是对象的一个属性，而不是独立的函数。方法随着对象的产生而产生，其主要作用是操作其所在对象的属性和功能。（3）系统函数）系统函数q在面向对象的程序设计中，函数一般是作为对象的方法定义的。有些函数的定义由于应用的广泛性，可以作为独立的函数来定义，这些函数是JavaScript固有的，没有任何对象的相关性。这

52、些函数就是JavaScript的系统函数，可以在JavaScript程序的任何位置调用这些函数。7.4.1 JavaScript基本数据结构qJavaScript系统函数不是方法，与使用Function关键字创建的函数属于同一层次。JavaScript有五个系统函数：Escape(str)Eval(str)ParseFloat(str)ParseInt(str,radix)UnEscape(str)7.4.1 JavaScript基本数据结构 6.JavaScript事件事件qJavaScript是基于对象（Object-Based）的语言，Java是面向对象的语言，两者是不同的。基于对象的基

53、本特征就是采用事件驱动（Event-Driven），在有形界面的环境下使得一切输入变得简单化。通常将鼠标或热键的动作称为事件（Event），而将鼠标或热键引发的一连串程序的动作，称之为事件驱动。对事件进行处理的程序或函数称为事件处理程序（Event Handler）。7.4.1 JavaScript基本数据结构 （1）事件处理程序）事件处理程序q在JavaScript中，对象事件的处理通常由函数来完成，其基本格式与函数相同，可以将前面所介绍的所有函数作为事件处理程序。事件处理程序的格式如下：Function事件处理名(参数表)事件处理语句集;（2）事件驱动 7.4.1 JavaScript基本

54、数据结构 单击事件onClickq当用户单击鼠标按钮时，产生onClick事件，同时所指定的事件处理程序或代码将被调用运行。通常可在下列基本对象中产生单击事件onClick：Button（按钮对象）。Checkbox（复选框或检查列表框）。Radio（单选按钮）。ResetButtons（重设按钮）。SubmitButtons（提交按钮）7.4.1 JavaScript基本数据结构q例如，可通过下列按钮激活Change()文件：q在onClick后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中的内部函数，还可以直接使用JavaScript的代码等。例如：7.4.1

55、JavaScript基本数据结构 改变事件onChangeq当用户利用Text或Textarea元素输入的字符值改变时引发该事件。当Select表单项中一个选项状态改变时，也会产生该事件。例如：选中事件onSelect 当Text或Textarea对象中的文字被加亮时产生该事件。7.4.1 JavaScript基本数据结构 获得焦点事件onFocusq当用户单击Text或Textarea以及Select对象时，产生该事件，此时该对象成为前台对象。失去焦点事件onBlurq当Text对象或Textarea对象以及select对象不再拥有焦点事件而退到后台时，产生该事件，与onFocus事件具有对

56、应关系。7.4.1 JavaScript基本数据结构 载入文件事件onLoadq当文档载入时产生该事件，其作用就是在首次载入一个文档时检测Cookie的值，并用变量为其赋值，使它可以被源代码使用。卸载文件事件onUnloadq当Web页面退出时产生该事件，并可更新Cookie的状态。7.4.2 JavaScript对象 qJavaScript语言是基于对象（Object-Based）的，而不是面向对象（Object-Oriented）的。之所以说它是一门基于对象的语言，主要是因为它没有提供类似抽象、继承和重载等有关面向对象语言的许多功能，而是把其他语言所创建的复杂对象统一起来，形成一个非常强大

57、的对象系统。q虽然JavaScript语言是一门基于对象的语言，但它还是具有些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，编写功能强大的Web文档。7.4.2 JavaScript对象 1.对象的基础知识对象的基础知识 （1）对象的基本结构）对象的基本结构 qJavaScript中的对象是由属性Properties和方法Methods两个基本元素构成的。前者是对象在实施其所需行为的过程中，实现信息的装载单位，从而与变量相关联。后者是指对象能够按照设计者的意图被运行，从而与特定的函数相关联。（2）引用对象的方式 7.4.2 JavaScript

58、对象q一个对象要被真正地使用，可采用以下几种方式：引用JavaScript内部对象。由浏览器环境提供。创建新对象。q这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，并出现错误信息。从上面可以看出，JavaScript引用对象可通过三种方式获取，要么创建新的对象，要么利用现存的对象。7.4.2 JavaScript对象 （3）对象操作语句）对象操作语句qJavaScript不是一个纯面向对象的语言，它没有提供面向对象语言的许多功能，因此JavaScript设计者把它称为“基于对象”而不是“面向对象”的语言，在JavaScript中提供了几个用于操作对象的语句、关键字及运算符。

59、forin语句q该语句的功能是用于对己知对象的所有属性进行操作的控制循环。它是将个已知对象的所有属性反复赋给一个变量，而不是通过使用计数器来实现的。该语句的命令格式如下：for(对象属性名in已知对象名)7.4.2 JavaScript对象q不使用该语句的缺点是需要知道对象中属性的个数才可进行操作。例如：Function showData(Object)For(var x=0;X30;X+)Document.write(Objecti);q该函数的功能是显示数组中的内容，是通过数组下标顺序值来访问每个对象的属性的。使用这种方式时，首先必须知道数组的下标值，当数组下标超出范围时会发生错误。而使用

60、forin语句，就根本不需要知道对象属性的个数。例如：7.4.2 JavaScript对象 Function showData(Object)For(var prop in Object)Document.write(Objectprop);q使用该函数时，在循环体中for语句自动将其属性读取出来，直到最后为止。7.4.2 JavaScript对象 with语句q在该语句体内，任何对变量的引用均被认为是这个对象的属性，以节省一些代码，如下所示。with Object q所有在with语句后面的花括号中的语句，都是在Object对象的作用域之内。7.4.2 JavaScript对象 this语句

61、qthis语句用于实现对当前对象的引用。在JavaScript中，由于对象的引用是多层次、多方位的，往往一个对象的引用又需要引用另个对象，而另一个对象有可能又要引用另一个新对象，这样有可能造成混乱，最后自己也不知道现在引用的是哪一个对象。为此，JavaScript提供了一个用于将对象指定为当前对象的this语句。7.4.2 JavaScript对象 new语句qJavaScript中对象的功能非常强大，但设计人员可以按照需求来创建自己的功能更强大的对象，以满足某一特定的要求。使用new语句可以创建一个新的对象，其创建对象使用的命令格式如下所示：Newobject=new Object(Para

62、meters Table);q其中Newobject是要创建的新对象，Object是已经存在的对象，Parameters Table是参数表，new是JavaScript中的命令语句。7.4.2 JavaScript对象q例如，创建一个日期新对象的语句如下：newData=new Data();birthday=new Data(December 10.1999);之后就可将New Data、Birthday作为一个新的日期对象了。（4）对象属性的引用）对象属性的引用q对象属性的引用可由下列三种方式之一来实现。使用点“”运算符实现引用 Mycity.Name=广东省广东省 Mycity.Cit

63、y=广州市广州市 Mycity.Date=1999 7.4.2 JavaScript对象q其中Mycity是一个已经存在的对象，Name、City、Date是它的三个属性，并通过操作对其赋值。使用对象的下标实现引用 Mycity0=广东省 Mycity1=广州市 Mycity2=1999q以上语句是通过数组的形式访问属性的，还可以使用循环操作获取其值。例如：Function showcity(object)For(var j=0;j2;j+)Document.Write(Objectj);7.4.2 JavaScript对象q若采用forin语句，则可以在不知其属性个数的情况下就可以实现属性的

64、引用。例如：Function Showmy(Object)For(var prop in this)Docament.write(thisprop);通过字符串的形式实现引用 MycityName=广东省广东省;MycityCity=广州市广州市;MycityDate=1999;7.4.2 JavaScript对象 （5）对象方法的引用）对象方法的引用q在JavaScript中，对象方法的引用是非常简单的。例如：ObjectName.Methods()q其中，Methods()方法实质上是一个函数。如引用Mycity对象中的Showmy()方法，则可使用Document.Write(Mycit

65、y.Showmy()或Document.Write(Mycity)。q如引用Math内部对象中的COS()方法，则可使用：with(Math)、Document.Write(COS(35)或或 Document.Write(COS(80)q若不使用 With 语句引用时相对要复杂些，这时可使用：Document.Write(Math.cos(35)或Document.Write(Math.sin(80)7.4.2 JavaScript对象 2.使用窗口中的对象使用窗口中的对象qJavaScript的强大之处在于具有直接处理Web网页元素的能力。这可以通过JavaScript对象层次来进行控制，

66、该层次包括各种用于表示当前Web网页和当前浏览器窗口中数据的对象。这些对象组织成为一个父对象和子对象的层次，而子对象只是用于另一个父对象中的一个属性的对象而已。q层次中的每个对象都包括属性，而这些属性本身就是对象。此外，对象还包括用于操作对象的某种功能的方法和事件句柄，而事件句柄是在某个事件发生于那个对象上时调用函数或JavaScript语句。7.4.2 JavaScript对象 （1）JavaScript对象的层次对象的层次qJavaScript对象包括如下几个层次：浏览器对象（Navigator对象）：提供有关浏览器的信息。窗口对象（Window对象）：处于对象层次的最顶端，提供处理Navigator窗口的方法和属性。位置对象（Location对象）：提供与当前打开的URL一起工作的方法和属性，是一个静态的对象。历史对象（History对象）：提供与历史清单有关的信息。文档对象（Document对象）：包含与文档元素一起工作的对象，将这些元素封装起来供编程人员使用。7.4.2 JavaScript对象qWindow对象处于对象层次的最顶端，是其他大部分对象的父对象。每个打开的浏览器