祁长兴《ASP.NETweb程序设计教程》PPT第二章

1、ASP.NET WebASP.NET Web程序设计程序设计 2HTMLHTML和和JavaScriptJavaScript 第章本章内容本章内容2.1 HTML 2.1 HTML 2.2 JavaScript2.2 JavaScript 2.3 2.3 案例：使用案例：使用HTMLHTML和和JavaScriptJavaScript实现实现表单注册表单注册 2.4 2.4 习题习题 2.1 HTMLv HTML是一种用来制作超文本文档的简单标记语言，是一种用来制作超文本文档的简单标记语言，v Web浏览器能够自动解释超文本文件并且按照一定的格式浏览器能够自动解释超文本文件并且按照一定的格式显

2、示出来。显示出来。 v 只能实现静态页面的设计。只能实现静态页面的设计。v 2.1.1 HTML基本语法基本语法 v 2.1.2 文字段落标记文字段落标记 v 2.1.3 图像标记图像标记 v 2.1.4 超级链接标记超级链接标记 v 2.1.5 表格标记表格标记 v 2.1.6 表单与控件表单与控件 v 2.1.7 框架的使用框架的使用 v HTML文件扩展名是文件扩展名是.html或或.htm，它们是可供浏览器解，它们是可供浏览器解释浏览的文件格式。释浏览的文件格式。 v HTML语言使用标记编写文件，标记符必须用语言使用标记编写文件，标记符必须用“”括起来，一般以括起来，一般以“”开始，

3、以开始，以“”结束，结束，即成对的使用标记，也称之为双标记。即成对的使用标记，也称之为双标记。v HTML的标记是不区分大小写的。的标记是不区分大小写的。 2.1.1 HTML基本语法基本语法 文档内容文档内容/ 2 文档内容文档内容/ 例如：例如：2.1.1 HTML基本语法基本语法 重点内容重点内容我的第一个网页我的第一个网页表格的内容表格的内容表示文字表示文字“重点内容重点内容”用带下划线的样式显示用带下划线的样式显示 表示当前页面的标题为表示当前页面的标题为“我的第一个网页我的第一个网页” 表示在浏览器上显示一个表格，表格的边框表示在浏览器上显示一个表格，表格的边框线粗细为线粗细为1

4、1，表格的宽度为，表格的宽度为300px 300px v 但也有些标记只需单独使用就能完整的表达意思，称之为但也有些标记只需单独使用就能完整的表达意思，称之为单标记。常用的单标记主要有换行标记单标记。常用的单标记主要有换行标记、水平线标记、水平线标记等。等。2.1.1 HTML基本语法基本语法 2 v HTML文档分文档头和文档体两部分，在文档头里，对这文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。一个完整的种文档信息。一个完整的HTML文件的基本格式如下：文件的基本格式如下： 2.1

5、.1 HTML基本语法基本语法 网页的标题网页的标题 文档主体，正文部分文档主体，正文部分 2.1.1 HTML基本语法基本语法 例例2-1 创建一个简单的创建一个简单的HTMLHTML网页文件网页文件 meta http-equiv=Content-Type content=text/html;charset=gb2312创建一个创建一个HTMLHTML网页文件网页文件body background=backimage.jpg text=red leftmargin=50px topmargin=20px 我喜欢学习我喜欢学习HTMLHTML！例例2-1 创建一个简单的创建一个简单的HTML

6、HTML网页文件网页文件 步骤如下：步骤如下：1) 1) 新建一个记事本文件，并输入如上新建一个记事本文件，并输入如上HTMLHTML语句。语句。2) 2) 执行记事本执行记事本“文件文件”菜单下的菜单下的“另存另存为为”命令，将命令，将“保存类型保存类型”设置为设置为“所所有文件有文件”，将文件的扩展名改为，将文件的扩展名改为.htm.htm或或.html.html。单击。单击“保存保存”按钮。按钮。3) 3) 打开保存成功的打开保存成功的.htm.htm文件，即可以看文件，即可以看到浏览器中页面的显示效果。到浏览器中页面的显示效果。 2.1.1 HTML基本语法基本语法 例例2-1 运行效

7、果运行效果 2.1.1 HTML基本语法基本语法 1. 文字样式标记：包括文字的字体、字号和颜色，一般使用文字样式标记：包括文字的字体、字号和颜色，一般使用标记来实现。具体格式如下：标记来实现。具体格式如下：2.1.2 文字段落标记文字段落标记 font size= 文字内容文字内容 v “size”表示字号，表示字号，“数字数字”表示字号的大小，最大为表示字号的大小，最大为7，最小为最小为1，默认字号为，默认字号为3。v “face”表示字体，默认字体为宋体。表示字体，默认字体为宋体。v “color”表示文字的颜色，默认颜色为黑色。表示文字的颜色，默认颜色为黑色。 HTML常用颜色设置值常

8、用颜色设置值 2.1.2 文字段落标记文字段落标记 颜色颜色英文名英文名RRGGBB颜色颜色英文名英文名RRGGBB黑色黑色Black#000000橙色橙色Orange#FFA500银色银色Silver#C0C0C0浅绿色浅绿色Aqua#00FFFF灰色灰色Gray#808080深蓝色深蓝色Navy#000080粉色粉色Pink#FFC8CB黄色黄色Yellow#FFFF00红色红色Red#FF0000绿色绿色Green#008000紫色紫色Purple#FF00FF橄榄色橄榄色olive#8080002. 字型标记：字型标记：HTML中字型标记有很多，常用的字型标记可中字型标记有很多，常用的

9、字型标记可参见下表参见下表2.1.2 文字段落标记文字段落标记 首标记首标记尾标记尾标记含义含义首标记首标记尾标记尾标记含义含义加粗加粗斜体斜体加下划线加下划线加删除线加删除线缩小缩小放大放大上标上标下标下标特别强调特别强调显示邮件地显示邮件地址址3. 段落标记有两种，分别是换段标记段落标记有两种，分别是换段标记和换行标记和换行标记。其中。其中属于单标记。属于单标记。2.1.2 文字段落标记文字段落标记 p align= 段落内容段落内容 v align指段落的对齐方式，取值为：指段落的对齐方式，取值为：Left(左对齐，默认左对齐，默认)、Center(居中居中)和和Right(右对齐右对齐

10、)三个值中的任何一个。三个值中的任何一个。 静夜思静夜思床前明月光，疑是地上霜。举头望明月，低头思故乡。床前明月光，疑是地上霜。举头望明月，低头思故乡。2.1.2 文字段落标记文字段落标记 v 当需要结束一行，并且不想开始新段落时，使用当需要结束一行，并且不想开始新段落时，使用标标记。记。标记不管放在什么位置，都能够强制换行。标记不管放在什么位置，都能够强制换行。v 一个一个标记可以看成是两个换行标记标记可以看成是两个换行标记。静夜思静夜思床前明月光，疑是地上霜。床前明月光，疑是地上霜。举头望明月，低头思故乡。举头望明月，低头思故乡。4. 水平线标记：单标记水平线标记：单标记表示在文档当前位置

11、画一条水平表示在文档当前位置画一条水平线，一般从窗口中当前行的最左端一直画到最右端；其线，一般从窗口中当前行的最左端一直画到最右端；其格式为：格式为：2.1.2 文字段落标记文字段落标记 hr size=noshade v size属性设置水平线的粗细，默认值为属性设置水平线的粗细，默认值为1；v color属性设置水平线的颜色；属性设置水平线的颜色；v width属性设定水平线的长度，默认值是属性设定水平线的长度，默认值是100%；v align属性表示对齐方式；属性表示对齐方式；v noshade属性不用赋值，而是直接加入标志即可使用，属性不用赋值，而是直接加入标志即可使用，它是用来加入一

12、条没有阴影的水平线。它是用来加入一条没有阴影的水平线。2.1.2 文字段落标记文字段落标记 5. 标题标记标题标记：其中：其中n为标题的等级，为标题的等级，HTML总共提供六总共提供六个等级的标题，个等级的标题，n越小，标题字号就越大。越小，标题字号就越大。这是一行普通文字这是一行普通文字用用1 1级标题样式显示文字级标题样式显示文字用用2 2级标题样式显示文字级标题样式显示文字用用3 3级标题样式显示文字级标题样式显示文字用用4 4级标题样式显示文字级标题样式显示文字用用5 5级标题样式显示文字级标题样式显示文字用用6 6级标题样式显示文字级标题样式显示文字演示演示 运行效果运行效果 2.1

13、.2 文字段落标记文字段落标记 例例2-2 文字段落标记的使用文字段落标记的使用 文字段落标记的使用文字段落标记的使用 第一章第一章 诗词歌赋诗词歌赋 第一节第一节 宋词宋词 作品原文作品原文 2.1.2 文字段落标记文字段落标记 2.1.2 文字段落标记文字段落标记 font size=5 face= _GB2312 color=green水调歌头水调歌头··明月几时有明月几时有 丙辰中秋，欢饮达旦丙辰中秋，欢饮达旦11，大醉，作，大醉，作此篇，兼怀子由。此篇，兼怀子由。 明月几时有？把酒问青天。明月几时有？把酒问青天。不知天不知天上宫阙，今夕是何

14、年。上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。起舞弄清影，何似在人间。 转朱阁，低绮户，照无眠。转朱阁，低绮户，照无眠。不应有恨，不应有恨，何事长向别时圆？何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。但愿人长久，千里共婵娟。 注释：注释： 2.1.2 文字段落标记文字段落标记 11达旦：至早晨；到清晨。达旦：至早晨；到清晨。如有学习上的问题，请联系如有学习上的问题，请联系例例2-2 运行效果运行效果2.1.2 文字段落标记文字段落标记 2

15、.1.3 图像标记图像标记 v 如果希望将一幅图片插入到网页中，可以使用图片标记如果希望将一幅图片插入到网页中，可以使用图片标记。图片标记是一个单标记。其基本格式为：。图片标记是一个单标记。其基本格式为：img src=img src=图片文件名图片文件名 alt=alt=简要说明简要说明 width=width=图片的宽度图片的宽度 height=height=图片的高度图片的高度 border=border=边框宽度边框宽度 hspace=hspace=水平方向水平方向空白空白 vspace=vspace=垂直方向空白垂直方向空白/ / 2.1.3 图像标记图像标记 v 例如：下面是一段在

16、页面中插入图片的代码。代码中用例如：下面是一段在页面中插入图片的代码。代码中用到了到了标记和标记和标记来设置图片水平方向的对标记来设置图片水平方向的对齐方式。齐方式。 插入图片插入图片img src=1.jpg width=200 height=190 alt=1border=1/img src=2.jpg width=182 height=194 alt=2/演示演示 运行效果运行效果 2.1.3 图像标记图像标记 2.1.4 超级链接标记超级链接标记 v 超链接是指从一个网页指向一个目标的连接关系。它包超链接是指从一个网页指向一个目标的连接关系。它包含两部分内容：含两部分内容：链接目标可以

17、是另一个网页，也可以是相同网页上的不同链接目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个电子邮件地址。位置，还可以是一个电子邮件地址。超链接的对象，可以是一段文本或者是一个图片。超链接的对象，可以是一段文本或者是一个图片。 1. 文字链接：指的是超链接的对象是一段文本，跳转的目标文字链接：指的是超链接的对象是一段文本，跳转的目标是当前网站的另外一个网页或者另一个网站的网址。其是当前网站的另外一个网页或者另一个网站的网址。其格式为：格式为： a href=url target= 热点文本热点文本 v href：是超链接引用，：是超链接引用，url为链接要转到的目标网页。为链接要

18、转到的目标网页。v target：定义链接到目标资源时，打开窗口的方式。：定义链接到目标资源时，打开窗口的方式。 2.1.4 超级链接标记超级链接标记 v 对于超链接的文字的颜色也可以通过一些属性来设置，对于超链接的文字的颜色也可以通过一些属性来设置，具体为：具体为：link：表示尚未被访问过的超链接的颜色，默认为蓝色。：表示尚未被访问过的超链接的颜色，默认为蓝色。vlink：表示曾经访问过的超链接的颜色，默认为棕红色。：表示曾经访问过的超链接的颜色，默认为棕红色。alink：表示超文本链接被访问瞬间的颜色，默认为蓝色。：表示超文本链接被访问瞬间的颜色，默认为蓝色。2.1.4 超级链接标记超级

19、链接标记 首页首页 百度百度 2. 图像链接：如果希望使用图片作为超链接的对象，格式图像链接：如果希望使用图片作为超链接的对象，格式为：为： a href=url target= v url：点击链接后要转到的目标网页。：点击链接后要转到的目标网页。v target：打开窗口的方式。：打开窗口的方式。v scr:：包括路径在内的图片的文件名。：包括路径在内的图片的文件名。 2.1.4 超级链接标记超级链接标记 3. 电子邮件链接的格式为：电子邮件链接的格式为： 文字文字 v email：为接收邮件的邮箱：为接收邮件的邮箱 。2.1.4 超级链接标记超级链接标记 联系我们联系我们 4. 锚点链接

20、：如果一个页面的内容过多，导致页面过长，锚点链接：如果一个页面的内容过多，导致页面过长，用户需要不停地拖动滚动条来查看文档中的内容，为了用户需要不停地拖动滚动条来查看文档中的内容，为了方便用户阅读过长的页面内容，可以使用锚点链接。方便用户阅读过长的页面内容，可以使用锚点链接。a name=” 文字文字 v name属性用来创建一个命名的锚。属性用来创建一个命名的锚。v 锚名相当于文章中的一个标记。锚名相当于文章中的一个标记。 2.1.4 超级链接标记超级链接标记 a href=” # 文字文字 v 锚点创建好后，就可以在其他位置进行超链接了。如果锚点创建好后，就可以在其他位置进行超链接了。如果

21、超链接到本文档的锚点，格式为：超链接到本文档的锚点，格式为： 2.1.4 超级链接标记超级链接标记 v 如果超链接到其他页面的锚点，格式为：如果超链接到其他页面的锚点，格式为：a href=” 文字文字 table border=value bordercolor=value width=value caption align= 标题标题表头表头11表头表头22表头表头33表头表头nn表项表项11表项表项22表项表项33表项表项nn表项表项11表项表项22表项表项33表项表项nnv 在在HTML网页中，表格一般由网页中，表格一般由标记开始，以标记开始，以标记结束。表的内容由标记结束。表的内容由

22、、组成。具体格式如下：组成。具体格式如下：2.1.4 表格标记表格标记 v border：定义表格边框线的宽度，单位为象素。若省略：定义表格边框线的宽度，单位为象素。若省略则表格没有边框。则表格没有边框。v bordercolor：定义表格边框线的颜色值。：定义表格边框线的颜色值。 v width：定义表格的宽度，单位为象素或百分比。：定义表格的宽度，单位为象素或百分比。v height：定义表格的高度，单位为像素或百分比，单位：定义表格的高度，单位为像素或百分比，单位为百分比时与为百分比时与width相同。相同。v cellspacing：定义单元格与单元格之间的间距，单位为：定义单元格与单

23、元格之间的间距，单位为像素。像素。v cellpadding：定义单元格内容与边框之间的间距，单位：定义单元格内容与边框之间的间距，单位为像素。为像素。v align：定义表格的水平对齐方式，其值可为：定义表格的水平对齐方式，其值可为left、center、right。默认值为。默认值为center。2.1.4 表格标记表格标记 例例2-3 在在HTMLHTML中插入一个表格中插入一个表格 插入一个表格插入一个表格table border=1px bordercolor=black width=400px cellspacing=1px cellpadding=3px align=center

24、表格示例表格示例2.1.4 表格标记表格标记 例例2-3 在在HTMLHTML中插入一个表格中插入一个表格 横向通栏示例横向通栏示例纵向通栏示例纵向通栏示例格式单词格式单词含义含义widthwidth宽度宽度heightheight高度高度 2.1.4 表格标记表格标记 例例2-3 运行效果运行效果 2.1.4 表格标记表格标记 v 表单的基本语法格式为：表单的基本语法格式为：2.1.6 表单与控件表单与控件 form name= v name：设置表单的名称。：设置表单的名称。v action：设置表单的处理方式，通常为一个：设置表单的处理方式，通常为一个URL，指出处，指出处理表单数据的程

25、序文件名（包括网络路径、网址或相对路理表单数据的程序文件名（包括网络路径、网址或相对路径），也可以为一个电子邮件地址。径），也可以为一个电子邮件地址。v method：提交表单的方法，有：提交表单的方法，有GET和和POST两种。两种。 在在HTML中，常用表单控件主要有：中，常用表单控件主要有：1. 文本框：一种让用户自己输入内容的表单控件，通常被用文本框：一种让用户自己输入内容的表单控件，通常被用来填写简短的字符，如姓名、地址等。其格式为：来填写简短的字符，如姓名、地址等。其格式为： 2.1.6 表单与控件表单与控件 input type=text name=input type=text

26、 name=名称名称 size=size=宽度宽度 maxlength=maxlength=字符数字符数 value=value=初始值初始值 v type=text：定义控件类型为单行文本框。：定义控件类型为单行文本框。v name：定义文本框的名称，是唯一的。：定义文本框的名称，是唯一的。v size：定义文本框的宽度，以单个字符为单位。：定义文本框的宽度，以单个字符为单位。v maxlength：定义允许输入的最大字符数。：定义允许输入的最大字符数。v value：定义文本框的初始值，为可选属性。：定义文本框的初始值，为可选属性。 2. 密码框：一种特殊的文本框，用于输入密码。当用户输入

27、密码框：一种特殊的文本框，用于输入密码。当用户输入文字时，文字会被星号或其他符号代替，而输入的文字文字时，文字会被星号或其他符号代替，而输入的文字会被隐藏。其格式为：会被隐藏。其格式为： 2.1.6 表单与控件表单与控件 input type=password name=input type=password name=名称名称 size=size=宽度宽度maxlength=maxlength=字符数字符数 value=value=初始值初始值 v type=password定义控件类型为密码框，其他属性含义定义控件类型为密码框，其他属性含义同文本框。例如：同文本框。例如： 3. 复选框：允

28、许在待选项中选中一项以上的选项。每个复选复选框：允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。其框都是一个独立的元素，都必须有一个唯一的名称。其格式为：格式为： 2.1.6 表单与控件表单与控件 input type=checkbox name=input type=checkbox name=名称名称 v type= checkbox：定义控件类型为复选框。：定义控件类型为复选框。v name：定义复选框的名称，名称唯一。：定义复选框的名称，名称唯一。 4. 单选框：是指在待选答案中只能选中一项而且必须选中一单选框：是指在待选答案中只能选中一项而且必

29、须选中一项。其格式为：项。其格式为： 2.1.6 表单与控件表单与控件 input type=radio name=input type=radio name=名称名称 checkedchecked v type=radio：定义控件类型为单选框。：定义控件类型为单选框。v name：定义单选框的名称。：定义单选框的名称。v checked：定义单选框的选中状态，不需要设置值。：定义单选框的选中状态，不需要设置值。input type=radio name=checked 男男 input 女女 5. 文件上传控件：文件上传控件和文本框差不多，只是还包文件上传控件：文件上传控件和文本框差不多，

30、只是还包含了一个浏览按钮。用户可以通过在文本框输入或者点含了一个浏览按钮。用户可以通过在文本框输入或者点击浏览按钮选择需要上传的文件。其格式为：击浏览按钮选择需要上传的文件。其格式为：2.1.6 表单与控件表单与控件 input type=file name=input type=file name=名称名称 size=size=宽度宽度maxlength=maxlength=字符数字符数 v type=file定义控件类型为文件上传控件，其它属性含义与定义控件类型为文件上传控件，其它属性含义与单行文本框相同。单行文本框相同。 6. 提交按钮：是用来将输入的信息提交到服务器。其代码格提交按钮：

31、是用来将输入的信息提交到服务器。其代码格式为：式为： 2.1.6 表单与控件表单与控件 input type=submit name= v type=submit：定义控件类型为提交按钮。：定义控件类型为提交按钮。v name：定义提交按钮的名称。：定义提交按钮的名称。v value：定义按钮的显示文字。：定义按钮的显示文字。input type=submit value= 7. 重置按钮：也叫复位按钮，用来重置表单。其代码格式为重置按钮：也叫复位按钮，用来重置表单。其代码格式为：2.1.6 表单与控件表单与控件 input type=reset name= v type=reset定义控件类

32、型为重置按钮。其它属性含义与提定义控件类型为重置按钮。其它属性含义与提交按钮相同。交按钮相同。input type=reset value= 8. 一般按钮：用来控制其他定义了处理脚本的处理工作。其一般按钮：用来控制其他定义了处理脚本的处理工作。其代码格式为：代码格式为： 2.1.6 表单与控件表单与控件 input type=button name=input type=button name=名称名称value=value=文字文字 v type=button定义了控件类型为一般按钮，其他属性含义定义了控件类型为一般按钮，其他属性含义与提交按钮相同。与提交按钮相同。 9. 下拉列表框：允许

33、在一个有限的空间内设置多种选项。其下拉列表框：允许在一个有限的空间内设置多种选项。其代码格式为：代码格式为： 2.1.6 表单与控件表单与控件 select name=multiple 选项一选项一 选项二选项二 选项三选项三2.1.6 表单与控件表单与控件 v name：定义下拉列表框的名称。：定义下拉列表框的名称。v size：定义同时显示在菜单中的选项条数，如果没有该属：定义同时显示在菜单中的选项条数，如果没有该属性，则缺省为性，则缺省为1。v multiple：定义是否允许用户一次选多个选项，缺省为一：定义是否允许用户一次选多个选项，缺省为一次只能选一项。次只能选一项。v 可带属性可带

34、属性selected，表示该项已预选。，表示该项已预选。 上海上海 天津天津 北京北京10. 多行文本框：是一种让用户自己输入内容的表单控件，多行文本框：是一种让用户自己输入内容的表单控件，只不过能让用户输入较长的内容。其代码格式为：只不过能让用户输入较长的内容。其代码格式为： 2.1.6 表单与控件表单与控件 textarea name= . . v name：定义多行文本框的名称。：定义多行文本框的名称。v rows：定义多行文本框的行数。：定义多行文本框的行数。v Cols：定义多行文本框的列数。：定义多行文本框的列数。 例例2-4 表单与控件的使用：运行效果表单与控件的使用：运行效果

35、2.1.6 表单与控件表单与控件 2.1.7 框架的使用框架的使用 v框架框架也可以称之为窗口，可以把浏览器窗口切割成若干个也可以称之为窗口，可以把浏览器窗口切割成若干个独立的窗口，每个窗口可以显示不同的网页，使用框架网独立的窗口，每个窗口可以显示不同的网页，使用框架网页的最主要的目的是创建链接的结构。页的最主要的目的是创建链接的结构。 v 设计网页的框架结构，使用设计网页的框架结构，使用标记和标记和标记。其基本结构为：标记。其基本结构为： 2.1.7 框架的使用框架的使用 1. 框架集标记框架集标记v 框架集用于定义窗口的分割方式。它是一对双标记，有两框架集用于定义窗口的分割方式。它是一对双

36、标记，有两个常用属性：个常用属性：cols和和rows。v cols是把页面纵向分割成若干个窗口。是把页面纵向分割成若干个窗口。v rows是把页面横向分割成几个窗口。是把页面横向分割成几个窗口。v 主要的分割方式有三种：主要的分割方式有三种： 纵向分割纵向分割 横向分割横向分割 嵌套分割嵌套分割2.1.7 框架的使用框架的使用 2. 框架标记框架标记v 框架标记是单标记，用来指定在每一个窗口要打开的文件框架标记是单标记，用来指定在每一个窗口要打开的文件。把页面分割成窗口后，若没有使用。把页面分割成窗口后，若没有使用，则窗口显，则窗口显示为空。示为空。常和常和配合使用。其代码格配合使用。其代码

37、格式为：式为：frame src= scrolling=OPTION noresize 例例2-5 主页中的主页中的HTMLHTML代码为：代码为： 2.1.7 框架的使用框架的使用 frameset cols=200,例例2-5 lianjie.html lianjie.html文件中的代码为：文件中的代码为： 2.1.7 框架的使用框架的使用 a href=http:/ target=right沈阳师范大学沈阳师范大学a href=http:/ target=right吉林大学吉林大学 a href=http:/ target=right北京大学北京大学 例例2-5 top.htmtop.

38、htm文件中的代码为：文件中的代码为： 2.1.7 框架的使用框架的使用 font size=7 face=color=fuchsia欢迎光临欢迎光临例例2-5 bottom.htmbottom.htm文件中的代码为：文件中的代码为： 2.1.7 框架的使用框架的使用 谢谢光临谢谢光临例例2-5 运行效果运行效果 2.1.7 框架的使用框架的使用 2.1.7 框架的使用框架的使用 3. 不支持不支持框架标记框架标记v 早期版本的浏览器不支持框架结构，使用早期版本的浏览器不支持框架结构，使用 标标记可以使当浏览器不能加载框架时，会显示记可以使当浏览器不能加载框架时，会显示noframe 标标记中

39、的内容。例如：记中的内容。例如： framset cols=20%,frame src=b.html scrolling=AUTO对不起！您的浏览器不支持框架页面显对不起！您的浏览器不支持框架页面显示！示！2.1.7 框架的使用框架的使用 4. 浮动浮动框架框架v 又叫浮动窗口，可以用它将一个又叫浮动窗口，可以用它将一个HTML文档嵌入在一个文档嵌入在一个HTML中显示。如同中显示。如同“画中画画中画”电视。其格式为：电视。其格式为：iframe src=URL width=x height=y 2.1.7 框架的使用框架的使用 v 例如：将例如：将HTML文档文档shi.htm在另一在另一H

40、TML文档文档index.htm中显示出来。中显示出来。 首先创建首先创建shi.htm页面的代码：页面的代码： 静夜思静夜思 静夜思静夜思 床前明月光，疑床前明月光，疑是地上霜。是地上霜。举头望明月，低头思故举头望明月，低头思故乡。乡。演示演示 shi.htmshi.htm页面效果页面效果 2.1.7 框架的使用框架的使用 2.1.7 框架的使用框架的使用 v 然后创建然后创建index.htm页面的代码：页面的代码：浮动窗口浮动窗口 演示演示 index.htm index.htm页面的浮动窗口效果页面的浮动窗口效果 2.1.7 框架的使用框架的使用 2.2 JavaScriptv Jav

41、aScript 可以让静态的可以让静态的HTML网页实现动态的效果，常网页实现动态的效果，常用来实现表单验证、创建用来实现表单验证、创建cookies、记录用户状态等功能。、记录用户状态等功能。 v 2.2.1 概述概述 v 2.2.2 在网页中使用在网页中使用JavaScript v 2.2.3 浏览器对象浏览器对象 v 2.2.4 JavaSript在前端的应用在前端的应用 2.2.1 概述概述 v JavaScript的特点的特点 ： JavaScript是一种脚本编写语言。是一种脚本编写语言。 JavaScript是一种基于对象和事件驱动的程序语言。是一种基于对象和事件驱动的程序语言。

42、 JavaScript语法简单，结构松散。语法简单，结构松散。 JavaScript是一种具有安全性能的脚本语言。是一种具有安全性能的脚本语言。 JavaScript具有跨平台性。具有跨平台性。 2.2.1 概述概述 v JavaScript和和Java主要区别体现在以下几个方面：主要区别体现在以下几个方面： Java是一种真正的面向对象的编程语言；而是一种真正的面向对象的编程语言；而JavaScript 是是一种基于对象和事件驱动的脚本语言。一种基于对象和事件驱动的脚本语言。 Java是传统的编程语言，其源代码在执行之前必须经过编是传统的编程语言，其源代码在执行之前必须经过编译；而译；而Ja

43、vaScript是一种解释性编程语言，其源代码在执是一种解释性编程语言，其源代码在执行之前不需要经过编译。行之前不需要经过编译。 Java采用强类型变量检查；而采用强类型变量检查；而JavaScript中的变量声明采中的变量声明采用弱变量类型。用弱变量类型。 Java不能直接嵌入到网页中运行，只能编写出一个名为不能直接嵌入到网页中运行，只能编写出一个名为applet的独立于的独立于HTML的文件，由的文件，由HTML调用；调用；JavaScript可以直接嵌入到可以直接嵌入到HTML文档中，并且可以动态的装载。文档中，并且可以动态的装载。 Java多用于服务器端，多用于服务器端，JavaScr

44、ipt多用于客户端。多用于客户端。 JavaScript与与Java的语法结构不同。的语法结构不同。2.2.2 在网页中使用在网页中使用JavaScript JavaScript v 标记是一个通用标记，它表明包含的语句是作为标记是一个通用标记，它表明包含的语句是作为可执行的脚本来解释的，而不是可显示的可执行的脚本来解释的，而不是可显示的HTML文本，该文本，该标记被设计来容纳浏览器支持的任何脚本语言。其基本格标记被设计来容纳浏览器支持的任何脚本语言。其基本格式为：式为：script language= !-/-2.2.2 在网页中使用在网页中使用JavaScript JavaScript v

45、 根据脚本语句在根据脚本语句在HTML中出现的位置，可以分为三种情况中出现的位置，可以分为三种情况： 放在放在标记之间；标记之间； 放在放在标记之间标记之间 ； 放在外部文件放在外部文件 2.2.3 浏览器对象浏览器对象 1. window对象对象v window对象代表的是打开的浏览器窗口，是对象代表的是打开的浏览器窗口，是Web浏览器浏览器所有内容的主容器，它处于整个对象链结构的最高层。所有内容的主容器，它处于整个对象链结构的最高层。v window对象是其他对象的父对象。对象是其他对象的父对象。v 在调用在调用window对象的方法和属性时，可以省略对象的方法和属性时，可以省略windo

46、w对象的引用。对象的引用。2.2.3 浏览器对象浏览器对象 v Window对象的属性和方法有很多，常用的属性和方法对象的属性和方法有很多，常用的属性和方法有以下几种：有以下几种： status属性属性 ：用来显示当前窗口状态栏中的信息。：用来显示当前窗口状态栏中的信息。 open（）方法（）方法 ：使用：使用JavaScript创建新窗口创建新窗口 。close（）方法：关闭窗口（）方法：关闭窗口 。alert（）方法：生成一个对话框，在对话框中显示传给参数的（）方法：生成一个对话框，在对话框中显示传给参数的文本，并附以一个确定按钮让用户关闭该对话框。文本，并附以一个确定按钮让用户关闭该对话

47、框。 confirm（）方法：生成一个有两个按钮的对话框。（）方法：生成一个有两个按钮的对话框。 prompt（）方法：生成一种提示对话框，它显示预先设置的文（）方法：生成一种提示对话框，它显示预先设置的文本信息，并且提供一个文本域供用户输入应答。本信息，并且提供一个文本域供用户输入应答。settimeout（）和（）和cleartimeout（）方法（）方法 2.2.3 浏览器对象浏览器对象 2. location对象对象v location对象描述的是当前打开窗口对象或者特定框架对象描述的是当前打开窗口对象或者特定框架的地址。的地址。v 一个多框架的窗口对象在一个多框架的窗口对象在loca

48、tion属性显示的是父窗口属性显示的是父窗口的地址，同时，每个框架也有一个与之相伴的的地址，同时，每个框架也有一个与之相伴的location对象。对象。 v location对象的属性都是可读写属性，可以通过修改对象的属性都是可读写属性，可以通过修改location对象的属性来加载另一个文档。对象的属性来加载另一个文档。 2.2.3 浏览器对象浏览器对象 v 例如：大部分网站的首页中都有例如：大部分网站的首页中都有“友情链接友情链接”功能。此功能。此功能可通过功能可通过location对象的对象的href属性来实现。代码如下：属性来实现。代码如下： 友情链接友情链接function frili

49、nk()function frilink()location.href=document.form1.friend.value;location.href=document.form1.friend.value; 演示演示 友情链接友情链接- -页面载入页面载入 2.2.3 浏览器对象浏览器对象 演示演示 友情链接友情链接- -页面跳转页面跳转 2.2.3 浏览器对象浏览器对象 2.2.3 浏览器对象浏览器对象 3. document对象对象v document对象代表浏览器窗口中装载的整个对象代表浏览器窗口中装载的整个HTML文档文档，包含从，包含从到到的内容，被用来访问一个页的内容，被用来

50、访问一个页面上的所有元素。面上的所有元素。v 该对象是该对象是window对象的一个属性，在引用时可以省略对象的一个属性，在引用时可以省略window，在程序中直接引用，在程序中直接引用document对象。对象。2.2.3 浏览器对象浏览器对象 3. document对象对象v document对象代表浏览器窗口中装载的整个对象代表浏览器窗口中装载的整个HTML文档文档，包含从，包含从到到的内容，被用来访问一个页的内容，被用来访问一个页面上的所有元素。面上的所有元素。v 该对象是该对象是window对象的一个属性，在引用时可以省略对象的一个属性，在引用时可以省略window，在程序中直接引用

51、，在程序中直接引用document对象。对象。2.2.3 浏览器对象浏览器对象 4. history对象对象v 提供了与历史清单有关的信息，包含有最近访问过的提供了与历史清单有关的信息，包含有最近访问过的10个网页的个网页的URL的地址。的地址。v history对象的常用的主要方法有：对象的常用的主要方法有：back（）方法（）方法 ：在浏览器中显示上一页，相当于：在浏览器中显示上一页，相当于go(-1)方方法。法。 forward（）方法（）方法 ：在浏览器中显示下一页，相当于：在浏览器中显示下一页，相当于go(1)方法。方法。 go（int）方法：在浏览器中载入从当前算起的第）方法：在浏

52、览器中载入从当前算起的第int个页个页面。面。 2.2.3 浏览器对象浏览器对象 5. external对象对象v 该对象有一个常用的方法，即该对象有一个常用的方法，即addfavorite（）方法，使（）方法，使用该方法，可以实现将指定的网页添加到收藏夹中。其用该方法，可以实现将指定的网页添加到收藏夹中。其格式为：格式为： window.external.addfavorite(“URL”，”title”)v 该方法包含两个参数：要收藏的网页的网址和在收藏夹该方法包含两个参数：要收藏的网页的网址和在收藏夹中的显示标题。中的显示标题。2.2.4 JavaSriptJavaSript在前端的应用

53、在前端的应用 1. 实现网页的特效实现网页的特效v HTML语言创建的网页都是静态页面，不能实现动态效果语言创建的网页都是静态页面，不能实现动态效果。v 使用使用JavaScript可以弥补可以弥补HTML的不足，从而在静态网的不足，从而在静态网页中实现动态效果。页中实现动态效果。v 该方法包含两个参数：要收藏的网页的网址和在收藏夹该方法包含两个参数：要收藏的网页的网址和在收藏夹中的显示标题。中的显示标题。例例2-7 鼠标跟随特效鼠标跟随特效 meta http-equiv=Content-Type content=text/html; charset=utf-8跟随鼠标的文字跟随鼠标的文字.

54、spanstyle.spanstyle2.2.4 JavaSriptJavaSript在前端的应用在前端的应用 position: absolute;position: absolute;visibility: visible;visibility: visible;top: -50px;top: -50px;font-size: 9pt;font-size: 9pt;color: #FF6600;color: #FF6600;font-weight: bold;font-weight: bold; 2.2.4 JavaSriptJavaSript在前端的应用在前端的应用 /设定参数设定参数v

55、ar x, y; /var x, y; /鼠标当前在页面上的位置鼠标当前在页面上的位置var step = 20 var flag = 0;var step = 20 var flag = 0;var message = javascriptvar message = javascript跟随鼠标的文字跟随鼠标的文字.; .; message= message.split(); /message= message.split(); /分割字符串分割字符串var xpos = new Array();var xpos = new Array();for(i=0; i=message.length

56、-1; i+) for(i=0; i=message.length-1; i+) xposi = -50;xposi = -50; 2.2.4 JavaSriptJavaSript在前端的应用在前端的应用 var ypos = new Array(); /var ypos = new Array(); /分割字符串分割字符串for(i=0; i=message.length-1; i+) for(i=0; i=1; i-) for(i=message.length-1; i=1; i-) xposi = xposi-1 + step; xposi = xposi-1 + step; yposi

57、 = yposi-1; yposi = yposi-1; xpos0 = x + step;xpos0 = x + step;ypos0 = y;ypos0 = y;2.2.4 JavaSriptJavaSript在前端的应用在前端的应用 for(i=0; imessage.length-1; i+) /for(i=0; i=1; i-) for(i=message.length-1; i=1; i-) xposi = xposi-1 + step;xposi = xposi-1 + step;yposi = yposi-1;yposi = yposi-1; 2.2.4 JavaSriptJa

58、vaSript在前端的应用在前端的应用 xpos0 = x + step;xpos0 = x + step;ypos0 = y;ypos0 = y;for(i=0; imessage.length-1; i+) for(i=0; imessage.length-1; i+) var thisspan = eval(document.span + i);var thisspan = eval(document.span + i);thisspan.left = xposi;thisspan.left = xposi;thisspan.top = yposi;thisspan.top = ypos

59、i; var timer = setTimeout(makesnake(), 30); /var timer = setTimeout(makesnake(), 30); /使用使用setTimeoutsetTimeout延时执行延时执行makesnakemakesnake函数函数 2.2.4 JavaSriptJavaSript在前端的应用在前端的应用 for(i=0; i=message.length-1; i+) for(i=0; i=message.length-1; i+) document.write(span id=span + i + document.write();clas

60、s=spanstyle);document.write(messagei);document.write(messagei);document.write();document.write(); if(document.layers) if(document.layers) document.captureEvents(Event.MOUSEMOVE);document.captureEvents(Event.MOUSEMOVE); document.onmousemove = handlerMM; /document.onmousemove = handlerMM; /给给documentdocument对