《JavaScript动态网页编程》课件.ppt

《《JavaScript动态网页编程》课件.ppt》由会员分享，可在线阅读，更多相关《《JavaScript动态网页编程》课件.ppt（190页珍藏版）》请在三一办公上搜索。

1、JavaScript动态网页编程,2,目录,第1章 JavaScript入门,第2章 HTML语言,第3章 CSS样式表,第4章 JavaScript语言基础,第5章 流程控制语句,第6章 面向对象编程,第7章 浏览器对象模型,第8章 文档对象模型,第9章 事件处理,第10章 表单与表单域,第11章 XMLHttpRequest对象,3,第1章 JavaScript入门,1.1 JavaScript概述,1.2 编写JavaScript代码,4,1.1 JavaScript概述,第1章目录,1.1.1 JavaScript是什么JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语

2、言，它是通过嵌入或导入到标准的HTML文档中实现的。JavaScript脚本语言与HTML、CSS结合起来，可以在一个网页中链接多个对象，实现与网络客户的交互作用。JavaScript与Java的区别它们分别是两个公司开发的不同产品。JavaScript是Netscape公司的产品，其设计目的旨在扩展Netscape Navigator浏览器的功能，是一种可以嵌入网页中的基于对象和事件驱动的解释性语言；而Java则是Sun公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发。JavaScript是一种基于对象的脚本语言，它可以嵌入HTML文档中，用来实现用户与浏览器的

3、交互以及浏览器与服务器的异步通信。Java则是一种真正的面向对象的程序设计语言，即使是开发简单的程序，也必须基于类来创建对象。,5,1.1 JavaScript概述,1.1.2 JavaScript的特点简单性。JavaScript是一种脚本编写语言，它采用小程序段的方式实现程序设计。JavaScript是一种解释性语言，在程序运行过程中一边解释一边执行。JavaScript与HTML、CSS结合在一起，可以实现用户的交互式操作。JavaScript脚本语句的解释执行由Web浏览器负责，不需要额外的开发环境。动态性。JavaScript是动态的，它可以直接对用户操作做出响应，不需要经过Web服

4、务器程序处理。跨平台性。JavaScript语言依赖于Web浏览器本身，而与操作环境无关，只要在计算机上能运行支持JavaScript的浏览器，就可以正确地执行JavaScript程序。基于对象。在JavaScript脚本代码中，可以调用其自身提供的对象或其他语言创建的对象，并采用面向对象的编程方法来设置对象的属性、调用对象的方法，以完成所需功能。事件驱动。JavaScript对用户操作的响应是采用以事件驱动的方式进行的。所谓事件，通常是指在网页中执行了某种操作所产生的动作，例如单击鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起事件响应，响应的具体内容则需要通过编写事件处理

5、程序来实现。节省与服务器端的交互时间。,第1章目录,6,1.2 编写JavaScript代码,1.2.1 设置脚本语言编写HTML网页时，可以使用script标记提供一个容器，用于包含使用任何可由浏览器解释的脚本语言编写的代码行，以创建一个脚本代码块，语法如下。一个或多个脚本语句其中language属性指定script标记内代码行所使用的脚本语言，常用的值有javascript、jscript和vbscript。对于javascript，还可以指定脚本语言的版本，例如javascript1.1、javascript1.2、javascript1.3、javascript1.4、javascri

6、pt1.5。language属性不再是HTML 4规范的一部分，如果编写JavaScript代码时需要进行W3C验证，则在HTML 4.01或XHTML 1.0中不验证此属性。type指定脚本语句的内容类型，以通知浏览器使用哪个脚本引擎来解释脚本语句。type属性值为不区分大小写的MIME类型，常用值有：text/javascript、text/jscript、text/vbscript。当定义编写脚本语句所使用的脚本语言时，type属性最终将代替language属性。由于早期浏览器忽略type属性，为了向前和向后兼容，建议同时包含language属性和type属性。,第1章目录,7,1.2

7、编写JavaScript代码,1.2.2 绑定对象事件使用Internet Explorer浏览器的事件模型时，允许通过script标记的event和for属性把某个对象与指定事件起来，语法如下。事件处理程序代码其中for属性的值为某个页面元素的ID，event属性的值则是该元素的事件名称，该元素必须支持event属性指定的事件。当加载页面时，浏览器注册每个script标记并将其event属性指定的事件与for属性指定的页面元素绑定起来。因此，当页面元素产生该事件时，将执行script标记中的脚本语句，不必对该对象编写事件处理程序，或者把脚本语句包括在函数定义中。,第1章目录,8,1.2 编写

8、JavaScript代码,1.2.3 调用外部脚本库通过把script标记的src属性设置为一个扩展名为.js的外部脚本文件（称为脚本库）的路径，可以从外部文件中导入脚本语句。语法如下：其中src属性指定外部JavaScript脚本文件的URL。一旦加载外部语句，浏览器便对这些语句进行处理，就像把它们嵌入到HTML文档中一样。在实际开发中，常常把一些通用功能编写为JavaScript函数，并且保存为扩展名为.js的脚本库，然后在各个HTML文档顶部的head元素中导入该脚本库。当需要修改所有HTML文档中的函数定义时，对脚本库进行修改即可。这样十分便于实现网站的模块化设计。注意：在JavaSc

9、ript脚本文件中，可以直接编写JavaScript语句，不需要把这些语句包含在script标记中。此外，当script标记包含src属性时，不要其他脚本语句放在首尾标记之间。,第1章目录,9,1.2 编写JavaScript代码,1.2.4 通过属性调用脚本JavaScript对标准HTML进行了扩展，为HTML标记增加了各种事件属性，通过设置这些事件属性可以调用JavaScript脚本。例如，对于表单元素，可以将其onclick属性设置为一段JavaScript代码，例如一个函数调用或一些JavaScript语句。当用户单击该按钮时，浏览器将解释执行由onclick属性指定的JavaScr

10、ipt代码。若要通过a标记的href属性调用JavaScript代码，则必须在用作URL的JavaScript代码之前添加“javascript:”。也可以将href属性设置为“#”，而在事件属性onclick中设置要执行的JavaScript代码，此时不需要在代码之前添加“javascript:”，通过在JavaScript代码中添加一个“return false;”语句，则可以取消这个超链接的跳转作用。,第1章目录,10,1.2 编写JavaScript代码,1.2.5 处理不支持脚本的情况某些浏览器不能很好地支持JavaScript，会把JavaScript代码与网页中的其他HTML内容

11、一起显示在浏览器窗口中。在这种场合，可以使用HTML注释标记（）把脚本块中的JavaScript语句括起来，以避免显示这些脚本代码，语法如下：支持script标记的浏览器将忽略包含与之间的HTML注释标记，而不会影响脚本语句的解释执行。对于不支持或禁止运行JavaScript脚本的浏览器，可以使用noscript标记指定要显示的HTML内容，语法如下：要显示的HTML内容,第1章目录,11,第2章 HTML语言,2.1 HTML语言概述,2.2 设置文本格式,2.3 使用图像,2.4 添加媒体效果,2.5 创建表格,2.6 用框架分割窗口,2.7 用超链接实现导航,2.8 用表单实现交互,12

12、,2.1 HTML语言概述,第2章目录,2.1.1 HTML工作原理HTML标记有以下两种格式：要控制的内容在HTML语言中，所有标记都必须用一对尖括号括起来，这对尖括号由小于号“”组成，它们是HTML语言的定界符。例如，、等都是HTML标记。大多数HTML标记都包含一个开始标记和一个结束标记，用于定义该标记所影响的范围，例如，和、和等。也有一些HTML标记只要求单一标记，通常应当在这些标记的大于号之前放置一个斜线符号“/”，例如、水平线标记、换行标记就是这样。通过HTML标记可以定义一个页面元素，称为HTML元素。大多数HTML元素都拥有一个属性集，通过这些属性可以对该元素进行更多的控制。在

13、HTML语言中，所有属性都放置在开始标记的尖括号内。大多数HTML元素都具有以下通用属性。id：为HTML元素指定一个独一无二的标识符。class：把一个元素指定为一个或多个类的成员。style：为一个单独出现的元素指定CSS样式。title：为元素指定一个标题，通常以工具提示形式显示出来。,13,2.1 HTML语言概述,第2章目录,2.1.2 HTML网页基本结构基本结构网页标题在这里添加网页的内容，包括文本、图像、声音、视频以及动画等。顶级元素。html元素。.称为文档标记，可以视为是全部HTML文档内容的容器，html元素包含HTML文档。head元素。.称为文档首部标记，用于提供与文

14、档有关的各种信息。body元素。.称为文档主体标记，指明文档主体的开始和结束，用于定义HTML文档的主要部分，给出要在网页上显示的内容及其显示格式。,14,2.1 HTML语言概述,第2章目录,2.1.2 HTML网页基本结构body元素的常用属性bgcolor：指定网页的背景颜色。颜色值用16进制的#RRGGBB格式表示，其中RR、GG和BB分别表示红、绿、蓝三基色的值。例如，红色用#FF0000表示，蓝色用#0000FF表示。text：指定网页中的默认文本颜色。link：指定超链接文本的颜色。alink：指定活动链接文本的颜色。vlink：指定已访问过的链接文本的颜色。background

15、：指定网页的背景图像，该属性值为图像文件的路径。leftmargin：指定网页的左边距，取值为整数。topmargin：指定网页的上边距，取值为整数。,15,2.1 HTML语言概述,第2章目录,2.1.3 添加注释内容注释是网页设计者自己看的、不希望在浏览器中显示的内容。在HTML文档中，可以通过以下语法格式来添加注释内容：适当的注释可以帮助人们更好地了解网页的内容和各模块的划分，也有助于以后对网页代码的检查和维护。当在Web浏览器加载网页时，注释将被忽略，其内容不会呈现出来。,16,2.2 设置文本格式,第2章目录,2.2.1 分段与换行在HTML语言中，段落是用标记来定义的。p元素是一个

16、块级元素，在不同段落的文本之间会以一个空行来分隔。标记的语法格式如下：段落文本内容除了通用属性之外，p元素具有align属性，用于设置段落的对齐方式，取值可以是left（默认值）、center、right或justify，分别表示左对齐、居中对齐、右对齐和两端对齐。如果只是想让文本换到下一行显示，而不希望在网页中产生新的段落，可通过添加一个换行标记来插入一个换行符，语法格式如下：文本内容在HTML中，标记没有结束标记；在XHTML中，标记必须被正确地关闭，应写成。,17,2.2 设置文本格式,第2章目录,2.2.2 div与span标记div标记指定一个呈现HTML内容的通用块级容器，呈现时另

17、起一行，其内容可以是内嵌元素和块级元素。语法如下：要控制的文档内容（文本、段落、表格或图像等）span标记用于定义一个内嵌的文本容器，语法如下：文档内容,18,2.2 设置文本格式,第2章目录,2.2.3 设置字体、字号和颜色在HTML中，使用font标记来设置文本的字体、字号和颜色，语法如下：文本内容其中face：指定一种字体或一个字体列表，字体名称之间用半角逗号分隔，浏览器将使用用户计算机系统上安装的字体组合中的第一种字体；如果该字体未安装，则使用第二种字体，以此类推；如果用户计算机上未安装字体列表中的任何一种，则会使用系统默认字体。size：指定字体的大小，取值从1到7，数值越大，字体越

18、大；也可以使用“+”或“”来指定相对大小。color：指定文本的颜色，可以使用颜色名称或十六进制颜色值。,19,2.2 设置文本格式,第2章目录,2.2.4 设置字符样式,20,2.2 设置文本格式,第2章目录,2.2.5 插入特殊字符,21,2.2 设置文本格式,第2章目录,2.2.6 设置标题格式在HTML语言中，可以使用h1h6标记在页面中设置各级标题，语法如下：标题文本标题文本标题文本h1标记定义最大的标题，h6标记定义最小的标题。h1h6元素均为块级元素。除了通用属性之外，它们都有一个align属性，用于指定标题的对齐方式，属性值与p标记中相同。默认情况下标题总是用粗体字来显示。,2

19、2,2.2 设置文本格式,第2章目录,2.2.7 设置列表格式有序列表用ol和li标记定义，语法如下：条目1 条目2.其中type属性指定序号的类型，有以下取值：“1”表示数字（默认值），“A”表示大写字母，“a”表示小写字母，“I”表示大写罗马数字，“i”表示小写罗马数字；start属性的值是一个整数，用于指定列表条目的起始序号。无序列表用ul和li标记定义，语法如下：条目1 条目2 ul元素的type属性，用于指定项目符号的类型，有以下取值：“disc”表示实心圆（），“circle”表示空心圆（），“square”表示方块（）。定义列表用dl、dt和dd标记创建，语法如下：术语1 定义1

20、 术语2 定义2,23,2.3 使用图像,第2章目录,2.3.1 在网页中插入图像在HTML语言中，标记用于在网页中插入一个图像文件，语法如下：img元素的属性src：指定图像文件的URL，图像可以是JPEG、GIF或PNG格式。alt：指定替代图像的文本信息，在浏览器不能显示图像或图像加载时间过长时先显示出来。当鼠标指针悬停在图像上时，也会显示文本信息。height和width：分别指定图像的高度和宽度，以像素或百分比（基于父元素的高度或宽度）为单位。若只给出高度或宽度，则图像将按比例进行缩放。border：指定图像的边框宽度，以像素为单位。若将该属性设置为0，则不显示边框。hspace和v

21、space：分别指定图像与文本之间的在水平方向和垂直方向上的间距，以像素为单位。align：指定图像与文本的对齐方式或绕排方式。有以下取值：“left”表示图像居左、文本居右，“center”表示图像居中，“right”表示图像居右、文本居左，“top”表示图像顶部与文本对齐，“middle”表示图像中央与文本对齐，“bottom”表示图像底部与文本对齐。,24,2.3 使用图像,第2章目录,2.3.2 播放视频在HTML语言中，标记通常用于在网页中插入一幅内嵌图像。不过，也可以利用该标记在网页中播放视频，为此把其dynsrc属性设置为视频文件的URL即可，语法如下：设置属性dynsrc：设置

22、视频来源的URL，视频文件可以是AVI（.avi）、MOV（.mov）或MPEG（.mpg、.mpeg）格式。loop：设置视频激活后的循环次数，有以下三个取值：1表示无限循环，0表示仅播放一次，正整数表示循环指定的次数。start：指定何时播放视频文件，其值是一个字符串，有以下两个取值：fileopen（默认值）表示加载后立即播放，mouseover 表示用户用鼠标指向视频时开始播放。,25,2.3 使用图像,第2章目录,2.3.3 插入水平分隔线在HTML语言中，可以使用标记在网页中插入一条水平分隔线，并使后面的文本在此处换行，从而可以起到分隔文档内容的作用。标记的语法格式如下：hr元素为

23、块级元素，该元素具有以下属性。align：指定水平线的对齐方式，取值可以是left、center或right，分别表示左对齐、居中对齐和右对齐。默认值为center。size：指定水平线的粗细（以像素为单位），默认值为2。width：指定水平线的宽度，单位为像素或百分比（相对于当前窗口），默认值为100%。color：指定水平线的颜色，默认值为灰色。noshade：为可选项，用于取消水平线的阴影效果。默认情况下水平线显示阴影。,26,2.4 添加媒体效果,第2章目录,2.4.1 插入滚动字幕语法要滚动显示的内容（可以是文本、表格、图像等）marquee元素的属性align：指定字幕与周围文本的

24、对齐方式，其值可以是top、middle或bottom。behavior：指定字幕中的文本如何滚动，其值是一个字符串，可以是scroll、slide和alternate。scroll表示字幕沿direction属性指定的方向滚动，文本在末端离去，然后从起点处开始；slide表示字幕沿direction属性指定的方向滚动，文本滚动到末端即停止；alternate表示字幕到达容器边缘时反转其滚动方向。默认值为scroll。bgcolor：指定字幕的背景颜色。direction：指定文本的移动方向，其值是一个字符串，可以是down、left、right和up，分别表示向下、向左、向右和向上。默认值为

25、left。height：指定字幕的高度，以像素或百分比为单位。hspace：指定字幕的外部边缘与浏览器窗口之间的左右边距，以像素为单位。loop：指定字幕的滚动次数，其取值是一个整数，0或1表示无限循环，正整数表示循环次数。scrollamount：指定字幕文本每次移动的距离，以像素为单位。crolldealy：指定与前段字幕文本延迟多少毫秒后重新开始移动文本，可用于设置字幕移动的速度。vspace：指定字幕的外边缘与浏览器窗口之间的上下边距，以像素为单位。,27,2.4 添加媒体效果,第2章目录,2.4.2 插入声音效果1.利用bgsound标记添加声音其中src：指定要播放的声音文件的UR

26、L。常用声音文件类型有波形文件（.wav）、MIDI文件（.mid）及MP3文件（*.mp3）等。loop：指定声音播放的次数。若设置为0，则播放一次；若设置为大于0的整数，则播放指定的次数；若设置为1，则声音反复播放，直到页面卸载。volume：指定音量的高低，取值为10 0000，默认值为0。balance：设置把将声音分成左声道和右声道两部分，取值为10 000+10 000，默认值为0。bgsound元素是Microsoft对HTML的一个扩展。该元素可以放在网页的任何位置，在浏览器中加载网页时bgsound元素不会呈现出来。,28,2.4 添加媒体效果,第2章目录,2.4.2 插入声

27、音效果2.通过插件添加声音其中src：指定要播放的声音文件的URL。pluginspage：指定用户可以从中下载插件的网站的完整URL。若用户未安装该插件，则浏览器尝试从此网站下载它。autostart：设置声音文件上传之后是否自动开始播放，默认值为false。loop：指定声音播放的次数。若设置为true，则反复播放；若设置为false，则仅播放一次；若设置为某个正整数，则播放指定的次数。volume：指定音量高低，取值为0100，默认值为当前系统音量。starttime和endtime：分别指定声音开始播放和结束播放的时间。例如starttime=00:20为从第20秒开始播放。heigh

28、和width：分别指定播放器插件的高度和宽度，以像素或百分比为单位（相对于父元素的高度或宽度）。hidden：设置是否隐藏播放器插件，默认值为false。type：设置embed元素的MIME属性，例如，在网页中播放MIDI音乐时，可把type属性设置为audio/x-midi。,29,2.4 添加媒体效果,第2章目录,2.4.3 插入视频片段使用embed标记不仅可以在网页中嵌入声音文件，也可以嵌入视频文件，为此应将src属性设置为视频文件的URL，并通过height和width属性设置视频播放器插件的高度和宽度，根据需要也可以对插件的其他属性进行设置。2.4.4 插入Flash动画使用em

29、bed标记不仅可以在网页中嵌入声音文件和嵌入视频文件，也可以嵌入Flash动画文件（*.swf），为此应将src属性设置为视频文件的URL，并通过height和width属性设置Flash插件的高度和宽度。根据需要也可以对插件的其他属性进行设置，例如，通过quality属性设置动画的品质，通过pluginspage属性设置下载Flash播放器插件的网站的完整URL，通过type属性设置embed元素的MIME类型，等等。,30,2.4 添加媒体效果,第2章目录,2.4.5 插入AppletApplet是用Java语言编写的小应用程序。它们可以直接嵌入到网页中，并能够产生特殊的效果。在HTML语

30、言中，可以使用applet标记在网页中插入Applet，语法如下：.applet元素是内嵌元素，用于在页面上放置可执行内容；code属性指定已编译的Java类文件（.class）的URL，height和width属性分别指定Applet组件高度和宽度，以像素为单位。param元素用于设置向Applet传递的参数，name和value属性分别指定参数名和参数值。要使用由applet元素指定的可执行内容，用户计算机上必须安装Java运行环境（JRE）。,31,2.5 创建表格,第2章目录,2.5.1 创建基本表格基本语法 表格标题 数据项.其中标记定义表格；标记定义一行；或标记定义一个单元格，标记

31、用于定义普通数据单元格，标记用于定义标题单元格，其中的文字用粗体显示并且水平居中；标记用于定义表格的标题。,32,2.5 创建表格,第2章目录,2.5.2 设置表格（table）的属性align：指定表格的对齐方式。有以下取值：left表示左对齐（默认值）、center表示居中对齐，right表示右对齐。background：指定用作表格背景图片的URL地址。bgcolor：指定表格的背景颜色。border：指定表格边框的宽度，以像素为单位。默认值为0，不显示表格边框。bordercolor：指定表格边框颜色，此属性与border属性一起使用。bordercolordark：指定3D边框的阴影

32、颜色，此属性与border属性一起使用。bordercolorlight：指定3D边框的高亮显示颜色，此属性与border属性一起使用。cellpadding：指定单元格内容与单元格边框之间的间距，以像素为单位。cellspacing：指定单元格之间的间距，以像素为单位。frame：指定表格外框线的显示方式。该属性有以下取值：above表示只显示上边框；below表示只显示下边框；border和box都表示显示所有4个边框（默认值）；hsides表示只显示上边框和下边框；lhs表示只显示左边框；rhs表示只显示左边框；void表示不显示所有边框；vsides表示只显示左边框和右边框。heigh

33、t：指定表格的高度，以像素或相对于浏览器窗口高度的百分比为单位。rules：指定表格内部分隔线的显示方式。该属性有以下取值：all表示同时显示水平方向和垂直方向的分隔线（默认值）；cols表示只显示列与列之间的垂直分隔线；groups表示显示组与组之间的分隔线；rows表示只显示行与行之间的水平分隔线；none表示不显示所有分隔线。width属性：指定表格的宽度，以像素或相对于浏览器窗口宽度的百分比为单位。,33,2.5 创建表格,第2章目录,2.5.3 设置行（tr）的属性align：指定一行中所有单元格内容的水平对齐方式。该属性有以下取值：left表示左对齐（默认值），center表示居中

34、对齐，right表示右对齐。background：指定图像文件的路径，该图像用作指定行的背景。bgcolor：指定行的背景颜色。bordercolor：指定行的边框颜色，该属性仅当table标记的border属性取非零值时才起作用。bordercolordark：指定行的3D边框的阴影颜色，该属性仅当table标记的border属性取非零值时才起作用。bordercolorlight：指定行的3D边框的高亮颜色，该属性仅当table标记的border属性取非零值时才起作用valign：指定行中所有单元格内容的垂直对齐方式。该属性有以下取值：top表示顶端对齐，middle表示居中对齐，bott

35、om表示底端对齐，baseline表示基线对齐。,34,2.5 创建表格,第2章目录,2.5.4 设置单元格（td）的属性align：指定单元格内文本的水平对齐方式。该属性有以下取值：left表示左对齐（默认值），center表示居中对齐，right表示右对齐。background：指定图像文件的路径，该图像用作单元格的背景。bgcolor：指定单元格的背景颜色。bordercolor：指定单元格的边框颜色，该属性仅当table标记的border属性取非零值时才起作用。bordercolordark：指定单元格的3D边框的阴影颜色，该属性仅当table标记的border属性取非零值时才起作用。

36、bordercolorlight：指定单元格的3D边框的高亮颜色，该属性仅当table标记的border属性取非零值时才起作用。colspan：指定合并单元格时一个单元格跨越的表格列数。nowrap：若指定该属性，则避免Web浏览器将单元格里的文本换行。rowspan：指定合并单元格时一个单元格跨越的表格行数。valign：指定单元格中文本的垂直对齐方式。该属性有以下取值：top表示顶端对齐，middle表示居中对齐，bottom表示底端对齐，baseline表示基线对齐。对表格、行和单元格属性设置时，若对同名属性设置了不同值，则按以下优先顺序发生作用：单元格属性设置优先级别最高，行属性设置次

37、之，表格属性设最低。,35,2.6 用框架分割窗口,第2章目录,2.6.1 框架网页的基本结构框架网页的基本结构如下：框架网页标题此网页使用了框架，但您的浏览器不支持框架。其中frameset标记定义一个框架集，用于组织多个框架和嵌套框架集。在框架网页中，应将frameset标记置于head标记之后，以取代body标记的位置。frameset标记的cols和rows属性指定如何将浏览器窗口分割成不同的框架，这些属性的取值可以是像素数（n）、相对于浏览器窗口的百分比（n%）和相对尺寸（n*）。rows属性不能与cols属性同时使用。,36,2.6 用框架分割窗口,第2章目录,2.6.2 设置框架

38、集和框架的属性frameset标记的属性border：指定边框的宽度，以像素为单位。bordercolor属性：指定边框的颜色。frameborder：指定框架周围是否显示三维边框，可取的值有：1、0、no、yes；若设置为1或yes，则在框架周围显示边框；若设置为0或no，则不在框架周围显示边框；默认值为1。framespacing：指定各框架之间的间距。frame标记的常用属性src：指定在框架中显示的网页。name：指定框架的名称。border：指定框架边框的宽度。bordercolor：指定框架边框的颜色。frameborder：指定框架周围是否显示边框，其取值可以是：1或yes（显示

39、边框）、0或no（不显示边框）。frameheight：指定框架内容与上下边框的间距。framewidth：指定框架内容与左右边框的间距。scrolling：指定是否为框架添加滚动条，其取值可以是：yes（添加）、no（不添加）或auto（需要时自动添加）。norisize：若指定了该选项，则不能调整框架的大小。,37,2.7 用超链接实现导航,第2章目录,2.7.1 超链接概述超链接通常是指从一个网页指向一个目标文档的连接关系，该目标文档可以是另一个网页，也可以是同一网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个Word文档、一段视频剪辑或一个Flash影片文件等，甚至可以是一个

40、应用程序。目标文档与源网页既可位于同一个网站中，也可位于不同网站中。在一个网页中用作超链接的对象，可以是一段文本、一个图片、一个Flash文本或Flash按钮等。链接路径是指作为链接起点的文档到作为链接目标的文档之间的文件路径，可分为绝对路径和文档相对路径。绝对路径。绝对路径给出要链接的目标文档的完整URL，而且包括访问该文档所使用的协议，对于网页通常使用http:/。如果要链接到位于其他Web服务器上的文档，就必须使用绝对路径。文档相对路径。文档相对路径的基本思想是省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。通常有以下几种情况。若要链接的目标文档与当前文档

41、位于同一文件夹中，可直接输入文件名。若要链接的目标文档位于子文件夹中，则应提供子文件夹的名称，后跟正斜杠“/”，然后输入文件名。若要链接的目标文件位于父文件夹中，可在文件名前添加“./”，其中“.”表示文件夹层次结构中向上提升一级。站点相对路径。站点相对路径提供从站点的根文件夹到文档的路径，这种路径以一个斜线符号（/）开始，该符号表示当前站点的根文件夹。还可以通过创建超链接来向指定地址发送电子邮件或执行JavaScript语句。在后面两种场合，分别需要在路径中包含协议名称“mailto:”或“javascript:”。,38,2.7 用超链接实现导航,第2章目录,2.7.2 创建超链接文本或图

42、像等href：指定要连接的目标资源的URL地址，可以使用绝对路径、文档相对路径或电子邮件地址等。name：指定a元素的名称，可用于标识网页中的某个位置（锚点）。target：指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开。title：指定指向链接时所显示的提示文本。1.创建各种形式的链接使用a标记可以创建以下几种形式的链接。创建到文件链接，可分为以下两种情况。若要链接到站点内的文件，应当把a元素的href属性设置为目标文件的文件相对路径或站点相对路径。若要链接到站点外的文件，应当把a元素的href属性设置为目标文件的绝对路径（包含协议）。创建命名锚记链接，应把a元素的href属性设置

43、为“path#anchor_name”，其中path表示目标文档的路径，anchor_name表示用a标记定义的锚记的名称（由name属性指定）。若命名锚记位于当前文档内，则path可以省略。创建邮件链接，应把a元素的href属性设置为“mailto:email?subject=主题”或“vbscript:”，并根据需要把a元素的onclick属性设置为要执行的JavaScript语句。,39,2.7 用超链接实现导航,第2章目录,2.7.2 创建超链接文本或图像等href：指定要连接的目标资源的URL地址，可以使用绝对路径、文档相对路径或电子邮件地址等。name：指定a元素的名称，可用于标识

44、网页中的某个位置（锚点）。target：指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开。title：指定指向链接时所显示的提示文本。1.创建各种形式的链接使用a标记可以创建以下几种形式的链接。创建到文件链接，可分为以下两种情况。若要链接到站点内的文件，应当把a元素的href属性设置为目标文件的文件相对路径或站点相对路径。若要链接到站点外的文件，应当把a元素的href属性设置为目标文件的绝对路径（包含协议）。创建命名锚记链接，应把a元素的href属性设置为“path#anchor_name”，其中path表示目标文档的路径，anchor_name表示用a标记定义的锚记的名称（由name

45、属性指定）。若命名锚记位于当前文档内，则path可以省略。创建邮件链接，应把a元素的href属性设置为“mailto:email?subject=主题”或“vbscript:”，并根据需要把a元素的onclick属性设置为要执行的JavaScript语句。,40,2.7 用超链接实现导航,第2章目录,2.7.2 创建超链接2.指定在何处加载文档通过target属性来指定将所链接的目标文档加载到哪个框架或窗口。该属性可以设置为一个窗口或框架的名称，也可以设置为以下保留目标名称。_blank：将目标文档加载到一个新的、未命名的浏览器窗口。_parent：将目标文档加载到该链接所在框架的父框架集或父

46、窗口中。如果包含链接的框架不是嵌套的，则目标文档加载到整个浏览器窗口中。_self：将目标文档加载到该链接所在的同一框架或窗口中。这是默认值，因此通常不需要指定它。_top：将目标文档加载到整个浏览器窗口，从而删除所有框架。,41,2.8 用表单实现交互,第2章目录,2.8.1 创建表单在HTML语言中，使用form标记在网页中定义一个交互式表单。语法如下：在这里添加各种表单域在一个网页中可以创建多个表单，每个表单都可以包含各种各样的表单域，例如文本框、单选按钮、复选框、下拉菜单以及按钮等。站点访问者通过表单和表单域向服务器传递信息。除了通用属性外，form元素还具有以下属性。name：指定表

47、单的名称，在客户端脚本中通过该名称引用表单。method：指定发送表单的HTTP方法，其取值为post或get，post表示在HTTP请求中嵌入表单数据，get表示将表单数据附加到请求页的URL。action：指定处理表单的服务器端程序或动态网页的URL地址。enctype：指定发送表单的内容属性。target：指定用来显示表单处理结果的目标框架。onsubmit：指定提交表单时执行的客户端事件处理函数。通过“return funname()”形式指定要执行的客户端JavaScript函数，可以对将要提交的表单数据进行验证，如果该函数返回false值，则取消表单提交。onreset：指定重置表

48、单时执行的客户端函数。,42,2.8 用表单实现交互,第2章目录,2.8.2 创建输入型表单域input标记的语法格式如下：其中type属性指定表单域的类型，name属性指定表单域的名称，value属性指定表单域的值。当type=text 时，将创建一个单行文本框。onblur：指定当文本框失去焦点时执行的脚本。当type=password 时，将创建一个密码框。当type=radio 时，将创建一个单选按钮。当type=checkbox 时，将创建一个复选框。当type=submit 时，将创建一个提交按钮。当type=reset 时，将创建一个重置按钮。当type=button 时，将创建

49、一个按钮。当type=image 时，将创建一个图像按钮。当type=hidden 时，将创建一个隐藏域。当type=file 时，将创建一个文件域，文件域由一个文本框和一个“浏览”按钮组成，可用于从磁盘上查找和选择文件。,43,2.8 用表单实现交互,第2章目录,2.8.3 创建其他表单域1.创建文本区域初始内容其中name指定文本区域的名称；rows指定文本区域的高度，以行为单位；cols指定文本区域的宽度，以字符为单位；readonly：若设置此属性，则文本区域内容为只读，不能被用户修改。2.创建列表框 选项文本 选项文本.其中name指定列表框的名称；size指定在列表框中显示的选项数

50、目，若不设置size属性，将得到下拉式列表框，若把该属性设置为大于1的整数，则得到普通列表框；multiple属性仅适用于普通列表框。若设置该属性，则列表框允许作多重选择；onchange指定选定项发生变化时执行的事件处理程序。3.创建字段集 字段集标题 字段集包含的表单域,44,第3章 CSS样式表,3.1 CSS样式表概述,3.2 设置CSS属性,45,3.1 CSS样式表概述,第3章目录,3.1.1 什么是CSSCSS是一组格式设置规则，用于控制网页元素的外观。通过使用CSS样式设置页面元素的格式，可以把页面内容与表示形式分离开。页面内容（即HTML代码）存放在HTML文件中，而用于定义