第3章网页开发语言基础

时间:2022-06-17 14:24:02 来源:网友投稿

  第 3 章

 网页开发语言基础

  要想自己动手建立网站,掌握一门网页编程语言是必需的,因为无论多么绚丽的网页,都要由语言编程去实现。本章主要介绍常见的几种网页语言,重点介绍HTML 和 ASP 语言网页编程常用知识点。

  学习目标 ( 已掌握的在方框中打钩 )

 熟悉 HTML 语言的基本概念

 熟悉 VBScript 语言的基本概念

 掌握 ASP 语言的基本知识

 3.1

 熟悉 HTML HTML(Hypertext Markup Language)即超文本标记语言或超文本链接标记语言,文件后缀名为.htm 或.html,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML 的结构包括头部(head)、主体(body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。

 3.1.1

 第一个 HTML 网页 制作 HTML 页面,可以使用记事本、写字板、Word、FrontPage、Dreamweaver 及其他具有文字编排功能的工具,只要把最后生成的文件以.html 为后缀名保存即可。但不同的开发工具具有不同的开发效率,这里推荐使用 Dreamweaver。

 Dreamweaver 提供了页面和 HTML 代码之间相互转换的功能。如编写出 HTML 代码后,通过 Dreamweaver 就可以马上看到相应的页面是什么样子;反之亦然,当看到一个漂亮的页面时,通过 Dreamweaver 即可知道它的 HTML 代码。

 下面用 Dreamweaver CS6 创建一个空白 HTML 文件,如图 3-1 所示。

 图 3-1

 新建立的 HTML 页面 在“标题”文本框中输入“第一个 HTML 网页”,单击 按钮,在设计视图中输入文本“这是我制作的第一个页面”,如图 3-2 所示。

 把代码视图的代码复制出来进行分析,代码如下:

 <!doctype html> <html> <head>

 <meta charset="utf-8"> <title>第一个 HTML 网页</title> </head>

 <body> 这是我制作的第一个页面 </body> </html>

  图 3-2

 标题及输入文字说明 上面的代码有以下几个最基本的特点。

  在代码中有很多用“< >”括起的代码,这就是 HTML 语言的标记符号。

  代码主要由 head 和 body 两部分组成。

  代码中有很多成对出现的标记,如出现<html>后,在后面会出现与之对应的</html>;如前面出现<head>后,在后面会出现与之对应的</head>。在成对出现的标记中,第一个表示开始,第二个表示结束,并且结束的标记要多一个斜杠。

 接下来看看这些标注所代表的意义。

  html:表示被 <html> 及 </html> 所包围起来的内容是一份 HTML 文件,不过本标注也可以省略。

  head:此标注用来注明此份文件的作者等信息,除了 <title> 会显示在浏览器的标题列之外,其他并不会显示出来,故 <meta> 可以省略。

  meta:表示一个 meta 变量,其作用是声明信息或向 Web 浏览器提供具体的指令。

  title:表示该页面的标题,这两个标记中间的字符将会显示在浏览器的标题栏上,如上面实例的“第一个 HTML 网页”就会显示在浏览器的标题栏上。

  body:被此标注所围起来的数据,即表示是 HTML 文件的内容,会被浏览器显示在窗口中。不过本标注也可以省略。

 3.1.2

 HTML 元素的属性 HTML 元素用 Tag 表示,它可以拥有属性,属性用来扩展 HTML 元素的能力。

 比如,可以使用一个 bgcolor 属性,使得页面的背景色成为红色,代码如下:

 <body bgcolor="red">

 属性通常由属性名和值成对出现,例如:name="value"。上面例子中的 bgcolor 就是name,red 就是 value。属性值一般用双引号标记。

 属性通常是附加给 HTML 的开始标记,而不是结束标记。

 3.1.3

 body 属性的设置 body 标记作为网页的主体部分,有很多内置属性,这些属性用于设置网页的总体风格。主要属性如表 3-1 所示。

 表 3-1

 body 的主要属性 属

 性 功

 能 background 指定文档背景图像的 url 地址 bgcolor 指定文档的背景颜色 text 指定文档中文本的颜色 link 指定文档中未访问过的超链接的颜色 vlink 指定文档中已被访问过的超链接的颜色 alink 指定文档中正被选中的超链接的颜色 leftmargin 设置网页左边留出空白间距的像素个数 topmargin 设置网页上方留出空白间距的像素个数

 在上述属性中,各个颜色属性的值有两种表示方法:一种是使用颜色名称来指定,例如红色、绿色和蓝色分别用 red、breen 和 blue 表示;另一种是使用十六进制 RGB 格式表示,表示形式为 color="#RRGGBB"或 color="RRGGBB",其中 RR 是红色、GG 是绿色、BB 是蓝色,各颜色分量的取值范围为 00~FF。例如,#00FF00 表示绿色,#FFFFFF 表示白色。

 背景图片属性值是一个相对路径的图片文件名,如<body backgroud="bg.gif">中 bg.gif 是背景图片的名字,实际是带相对路径的图片文件名字。比如,页面放在 d:\myweb\,而背景图片放在 c:\myweb\images\,那么就需要写成<body backgroud="images\bg.gif">。

 3.1.4

 字体属性的应用 网页主要是由文字及图片组成,在网页中那些千变万化的文字效果又是由哪些常用的标签进行控制呢?本节主要介绍文字的大小、字体、样式及颜色控制。

 1. 文字的大小 提供字号大小的是 font,font 有一个属性 size,通过指定 size 属性就能设置字号大小,而size 属性的有效值范围为 1~7,其中默认值为 3。可以在 size 属性值之前加上“+”、“-”字符,来指定相对于字号默认值的增量或减量。

 例 【例 3.1 】

 设置网页文字大小 (实例文件:ch03\3.1.html)

 <html> <head> <title>字号大小</title> </head> <body> <font size=7>这是 size=7 的字体</font><P> <font size=6>这是 size=6 的字体</font><P> <font size=5>这是 size=5 的字体</font><P> <font size=4>这是 size=4 的字体</font><P> <font size=3>这是 size=3 的字体</font><P> <font size=2>这是 size=2 的字体</font><P> <font size=1>这是 size=1 的字体</font><P> <font size=-1>这是 size=-1 的字体</font><P> </body> </html>

 预览效果如图 3-3 所示。

 图 3-3

 文字不同大小样式 2. 文字的字体与样式 HTML 4.0 以上的版本提供了定义字体的功能,用 FACE 属性来完成这个工作,FACE 的属性值可以是本机上的任一字体类型。但有一点需要注意,只有对方的电脑中装有相同的字体才可以在该浏览器中出现预先设计的风格。格式如下:

 <font face="字体">

 例 【例 3.2 】

 设置文字的字体 (实例文件:ch03\3.2.html)

  <HTML> <HEAD>

 <TITLE>字体</TITLE> </HEAD> <BODY> <CENTER> <FONT face="楷体_GB2312">欢迎光临</FONT><P> <FONT face="宋体">欢迎光临</FONT><P> <FONT face="仿宋_GB2312">欢迎光临</FONT><P> <FONT face="黑体">欢迎光临</FONT><P> <FONT face="Arial">Welcome my homepage.</FONT><P> <FONT face="Comic Sans MS">Welcome my homepage.</FONT><P> </CENTER> </BODY> </HTML>

 预览效果如图 3-4 所示。

 图 3-4

 不同的字体设置后效果 HTML 还提供了一些标签,产生文字的加粗、斜体、加下划线等效果,现将常用的标签列举如下:

  <B>…</B>:粗体。

  <I>…</I>:斜体。

  <U>…</U>:加下划线。

  <TT>…<TT>:打字机字体。

  <BIG>…</BIG>:大型字体。

  <SMALL>…</SMALL>:小型字体。

  <BLINK>…</BLINK>:闪烁效果。

  <EM>…</EM>:表示强调,一般为斜体。

  <STRONG>…</STRONG>:表示特别强调,一般为粗体。

  <CITE>…</CITE>:用于引证、举例,一般为斜体。

 例 【例 3.3 】

 设置文字的样式(实例文件:ch03\3.3.html)

 <html> <head> <title>字体样式</title> </head> <body>

 <B>黑体字</B> <P> <I>斜体字</I> <P> <U>加下划线</U> <P> <BIG>大型字体</BIG> <P> <SMALL>小型字体</SMALL> <P> <BLINK>闪烁效果</BLINK> <P> <EM>Welcome</EM> <P> <STRONG>Welcome</STRONG> <P> <CITE>Welcome</CITE></P> </body> </html>

 预览效果如图 3-5 所示。

 图 3-5

 不同字体效果 3. 文字的颜色 文字颜色设置格式如下:

 <font color=color_value>…</font>

 这里的颜色值可以是一个十六进制数(用#作为前缀),也可以是 16 种常用颜色名称,如表 3-2 所示。

 表 3-2

 常用颜色值表 黑色 Black = "#000000" 深绿色 Green = "#008000" 银色 Silver = "#C0C0C0" 浅绿色 Lime = "#00FF00" 灰色 Gray = "#808080" 橄榄绿 Olive = "#808000" 白色 White = "#FFFFFF" 黄色 Yellow = "#FFFF00" 棕色 Maroon = "#800000" 深蓝色 Navy = "#000080" 红色 Red = "#FF0000" 蓝色 Blue = "#0000FF" 深紫色 Purple = "#800080" 蓝绿色 Teal = "#008080" 紫色 Fuchsia = "#FF00FF" 浅蓝色 Aqua = "#00FFFF"

 例 【例 3.4 】

 设置文字的颜色 (实例文件:ch03\3.4.html)

  <HTML> <HEAD> <TITLE>文字的颜色</TITLE> </HEAD> <BODY BGCOLOR=000080> <CENTER> <FONT COLOR=WHITE>七彩网络</FONT><BR> <FONT COLOR=RED>七彩网络</FONT> <BR> <FONT COLOR=#00FFFF>七彩网络</FONT><BR> <FONT COLOR=#FFFF00>七彩网络</FONT><BR> <FONT COLOR=#FFFFFF>七彩网络</FONT> <BR> <FONT COLOR=#00FF00>七彩网络</FONT><BR> <FONT COLOR=#C0C0C0>七彩网络</FONT><BR> </CENTER> </BODY> </HTML>

 预览效果如图 3-6 所示。

 图 3-6

 不同的文字颜色效果 4. 位置控制 通过 align 属性可以选择文字或图片的对齐方式,left 表示向左对齐,right 表示向右对齐,center 表示居中。

 例 【例 3.5 】

 设置文字的位置 (实例文件:ch03\3.5.html)

  <html> <head> <title>位置控制</title> </head> <body> <div> <div align="left">你好!<br> </div> <div align="center">你好!<br> </div> <div align="right">你好!<br> </div> </div> </body>

 </html>

 预览效果如图 3-7 所示。

 图 3-7

 文字的位置控制效果 另外,align 属性也常常用在其他标签中,引起其内容位置的变动。

 如:

 <P align=#> <HR align=#>

 #=left/right/center <H1 align=#> 5. 无序号列表 无序列表使用的一对标签是<UL>和</UL>,每一个列表项前使用<LI>。其结构如下所示:

 <UL> <LI>第一项 <LI>第二项 <LI>第三项 </UL>

 例 【例 3.6 】

 设置无序列表 (实例文件:ch03\3.6.html)

  <html> <head> <title>无序列表</title> </head> <body> 这是一个无序列表:<P> <UL> 国际互联网提供的服务有:

 <LI>WWW 服务 <LI>文件传输服务 <LI>电子邮件服务 <LI>远程登录服务 <LI>其他服务 </UL> </body> </html>

 预览效果如图 3-8 所示。

  图 3-8

 无序列表的文字排版效果 6. 有序列表 有序列表和无序列表的使用方法基本相同,使用标签<OL>和</OL>,每一个列表项前使用<LI>。每个项目都有前后顺序之分,多数用数字表示。其结构如下所示:

 <OL> <LI>第一项 <LI>第二项 <LI>第三项 </OL>

 例 【例 3.7 】

 设置有序列表 (实例文件:ch03\3.7.html)

  <html> <head> <title>有序列表</title> </head> <body> 这是一个有序列表:<P> <OL> 国际互联网提供的服务有:

 <LI>WWW 服务 <LI>文件传输服务 <LI>电子邮件服务 <LI>远程登录服务 <LI>其他服务 </OL> </body> </html>

 预览效果如图 3-9 所示。

 图 3-9

 有序列表的效果

  3.1.5

 在网页中插入图像 图像可以美化网页,插入图像使用单标记<img>。img 标记的属性及描述如表 3-3 所示。

 表 3-3

 img 标记的属性 属

 性 值 描

 述 alt text 定义有关图像的短的描述 src URL 要显示图像的 URL height pixels % 定义图像的高度 ismap URL 把图像定义为服务器端的图像映射 usemap URL 定义作为客户端图像映射的一幅图像。可参阅 <map>和<area>标签,了解其工作原理 vspace pixels 定义图像顶部和底部的空白 width pixels % 设置图像的宽度

 src 属性用于指定图片源文件的路径,它是 img 标记必不可少的属性。语法格式如下。

 <img src="图片路径">

 图片的路径可以是绝对路径,也可以是相对路径。下面的实例是在网页中插入图片。

 例 【例 3.8 】

 在网页中插入图像(实例文件:ch03\3.8.html)

 <html> <head> <title>插入图片</title> </head> <body> <img src="images/01.jpg"> </body> </html>

 在 IE 中预览效果如图 3-10 所示。

 图 3-10

 插入图片效果

 3.1.6

 表格的使用 在网页中,表格是搭建网页结构框架的主要工具之一,因此掌握好表格常用的标签也是非常重要的。

 1. 表格的基本结构 表格主要是嵌套在<tabel>和</tabel>标签里面,一对<tabel>标签表示组成一个表格,下面列出表格的基本结构。

  <table>...</table>:定义表格。

  <caption>...</caption>:定义表格标题。

  <tr>:定义表行。

  <th>:定义表头。

  <td>:定义表元(表格的具体数据)。

 示例:

 <table border=1> <tr><th>姓名</th><th>性别</th><th>年龄</th> <tr><td>李睦芳</td><td>男</td><td>22</td>

  </table>

 预览效果如图 3-11 所示。

 图 3-11

 表格效果 2. 表格的标题 表格标题的位置,可由 align 属性来设置,其位置可以在表格上方和表格下方。下面为表格标题位置的设置格式。

 (1) 设置标题位于表格上方:

 <caption align=top> ... </caption>

 (2) 设置标题位于表格下方:

 <caption align=bottom> ... </caption>

  示例:

 <table border=1>

 <caption align=top>用户</caption>

 <tr><th>姓名</th><th>性别</th><th>年龄</th> <tr><td>李睦芳</td><td>男</td><td>22</td>

  </table>

 预览效果如图 3-12 所示。

 图 3-12

 表格标题效果 3. 边框尺寸 边框是用 border 属性来体现的,它表示表格的边框边厚度和框线。将 border 设成不同的值,有不同的效果。

 1) 格间线宽度 格与格之间的线为格间线,它的宽度可以使用<table>中的 cellspacing 属性加以调节。格式为(#表示要取用的像素值):

 <table cellspacing=#>

  2) 内容与格线之间的宽度 还可以在<table>中设置 cellpadding 属性,用来规定内容与格线之间的宽度。格式为(#表示要取用的像素值):

 <table cellpadding=#>

  例 【例 3.9 】

 创建不同边框类型的表格(实例文件:ch03\3.9.html)

 <html> <body> <h4>普通边框</h4>

  <table border="1"> <tr>

  <td>First</td>

  <td>Row</td> </tr>

 <tr>

  <td>Second</td>

  <td>Row</td> </tr> </table> <h4>加粗边框</h4>

  <table border="8">

 <tr>

  <td>First</td>

  <td>Row</td> </tr>

 <tr>

  <td>Second</td>

  <td>Row</td> </tr> </table> </body> </html>

 在 IE 9.0 中预览网页效果如图 3-13 所示。

 图 3-13

 程序运行结果 4. 表格内文字的对齐与布局 表格中数据的排列方式有两种,分别是左右排列和上下排列。左右排列是以 align 属性来设置,而上下排列则由 valign 属性来设置。其中左右排列的位置可分为三种:居左(left)、居右(right)和居中(center);而上下排列比较常用的有四种:上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。

 例 【例 3.10 】

 使用 align 属性可以排列单元格内容(实例文件:ch03\3.10.html)

 <html> <body> <table width="400" border="1">

 <tr>

  <th align="left">项目</th>

  <th align="right">一月</th>

  <th align="right">二月</th>

 </tr>

 <tr>

  <td align="left">衣服</td>

  <td align="right">$241.10</td>

  <td align="right">$50.20</td>

 </tr>

 <tr>

  <td align="left">化妆品</td>

  <td align="right">$30.00</td>

 <td align="right">$44.45</td>

 </tr>

 <tr>

  <td align="left">食物</td>

  <td align="right">$730.40</td>

  <td align="right">$650.00</td>

 </tr>

 <tr>

  <th align="left">总计</th>

  <th align="right">$1001.50</th>

  <th align="right">$744.65</th>

 </tr> </table> </body> </html>

 在 IE 9.0 中预览网页效果如图 3-14 所示。

 图 3-14

 程序运行结果 5. 合并与拆分单元格 要合并与拆分单元格,只需在<th>或<td>中加入 colspan 或 rowspan 属性,这两个属性的值,表明了单元格中要跨越的行或列的个数。

 1)

 用 colspan 属性合并左右单元格 左右单元格的合并需要使用 td 标记的 colspan 属性完成,格式如下。

 <td colspan="数值">单元格内容</td>

 其中,colspan 属性的取值为数值型整数数据,代表几个单元格进行左右合并。

 例如,若将 A1 和 B1 单元格合并成一个单元格,可为第一行的第一个<td>标记增加colspan="2"属性,并且将 B1 单元格的<td>标记删除。

 例 【例 3.11 】

 合并左右单元格(实例文件:ch03\3.11.html)

 <html> <head> <title>单元格左右合并</title> </head> <body> <table border="1">

 <tr>

  <td colspan="2">A1 B1</td>

  <td>C1</td>

  </tr>

  <tr>

  <td>A2</td>

  <td>B2</td>

  <td>C2</td>

  </tr>

  <tr>

  <td>A3</td>

  <td>B3</td>

  <td>C3</td>

  </tr>

  <tr>

  <td>A4</td>

  <td>B4</td>

  <td>C4</td>

  </tr> </table> </body> </html>

 在 IE 9.0 中预览网页效果如图 3-15 所示。

  图 3-15

 将单元格左右合并 从预览图中可以看到,A1 和 B1 单元格合并成一个单元格,C1 还在原来的位置上。

  合并单元格以后,相应的单元格标记就应该减少。例如,A1 和 B1 合并后,B1 单元格的<td></td>标记就应该丢掉,否则就会多出一个单元格,并且后面单元格会依次向右位移。

 2) 用 rowspan 属性合并上下单元格 上下单元格的合并需要为<td>标记增加 rowspan 属性,格式如下。

 <td rowspan="数值">单元格内容</td>

 其中,rowspan 属性的取值为数值型整数数据,代表几个单元格进行上下合并。

 例如,在上面的表格的基础上,若将 A1 和 A2 单元格合并成一个单元格,可为第一行的

 第一个<td>标记增加 rowspan="2"属性,并且将 A2 单元格的<td>标记删除。

 例 【例 3.12 】

 合并上下单元格(实例文件:ch03\3.12.html)

 <html> <head> <title>单元格上下合并</title> </head> <body> <table border="1">

  <tr>

  <td rowspan="2">A1</td>

  <td>B1</td>

  <td>C1</td>

  </tr>

  <tr>

  <td>B2</td>

  <td>C2</td>

  </tr>

  <tr>

  <td>A3</td>

  <td>B3</td>

  <td>C3</td>

  </tr>

  <tr>

  <td>A4</td>

  <td>B4</td>

  <td>C4</td>

  </tr> </table> </body> </html>

 在 IE 9.0 中预览网页效果如图 3-16 所示。

  单元格上下合并 单元格上下合并

  图 3-16

 将单元格上下合并 从预览图中可以看到,A1 和 A2 单元格合并成一个单元格。

 通过上面对左右单元格合并和上下单元格合并的操作,可以发现,合并单元格就是“丢掉”某些单元格。对于左右合并,就是以左侧为准,将右侧要合并的单元格“丢掉”;对于上下合并,就是以上侧为准,将下侧要合并的单元格“丢掉”。如果一个单元格既要向右合

 并,又要向下合并,该如何实现呢? 例 【例 3.13 】

 向右并向下合并(实例文件:ch03\3.13.html)

 <html> <head> <title>单元格左右合并</title> </head> <body> <table border="1">

  <tr>

  <td colspan="2" rowspan="2">A1B1<br>A2B2</td>

  <td>C1</td>

  </tr>

  <tr>

  <td>C2</td>

  </tr>

  <tr>

  <td>A3</td>

  <td>B3</td>

  <td>C3</td>

  </tr>

  <tr>

  <td>A4</td>

  <td>B4</td>

  <td>C4</td>

  </tr> </table> </body> </html>

 在 IE 9.0 中预览网页效果如图 3-17 所示。

 图 3-17

 两个方向合并单元格 从上面的代码可以看到,A1 单元格向右合并 B1 单元格,向下合并 A2 单元格,并且 A2单元格向右合并 B2 单元格。

 6. 表格的颜色 在表格中,既可以对整个表格填入底色,也可以对任何一行、一个单元格使用背景色。

  表格的背景色彩格式:<table bgcolor=#>。

  行的背景色彩格式:<tr bgcolor=#>。

  单元格的背景色彩格式:<th bgcolor=#>或<td bgcolor=#>。

 例 【例 3.14 】

 为表格添加背景颜色(实例文件:ch03\3.14.html)

 <!DOCTYPE html> <html> <body> <h4>背景颜色:</h4> <table border="1" bgcolor="green"> <tr>

  <td>100</td>

  <td>200</td> </tr>

 <tr>

  <td>300</td>

  <td>400</td> </tr> </table> </body> </html>

 在 IE 9.0 中预览网页效果如图 3-18 所示。

 图 3-18

 为表格添加背景颜色 例 【例 3.15 】为单元格添加背景颜色(实例文件:ch03\3.15.html)

 <!DOCTYPE html> <html> <body> <h4>单元格背景</h4> <table border="1"> <tr>

  <td bgcolor="red">100000</td>

  <td>200000</td> </tr> <tr>

  <td>200000</td>

  <td>300000</td> </tr>

 </table> </body> </html>

 在 IE 9.0 中预览网页效果如图 3-19 所示。

 图 3-19

 为单元格添加背景颜色 3.1.7

 表单的使用 留言板就是一个表单运用得很好的例子。表单通常必须配合脚本或后台程序来运行才有意义,本节以介绍各式表单为主,在后面章节将介绍如何将表单与程序相结合。

 常用表单及属性的代码示例及显示效果,如表 3-4 所示。

 表 3-4

 常用表单及属性的代码示例及显示效果 名

 称 代码示例 显示效果 文字输入框 <INPUT TYPE="TEXT" NAME="NAME" SIZE="20">

 单选按钮 男<INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY"> 女<INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">

 复选框 <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">电影 <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看书

 密码输入框 <INPUT TYPE="PASSWORD" NAME="INPUT">

 【提交资料】按钮 <INPUT TYPE="SUBMIT" VALUE="提交资料">

 【重新填写】按钮 <INPUT TYPE="RESET" VALUE="重新填写">

 【我同意】按钮 <INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">

 多行输入框 <TEXTAREA NAME="TALK" COLS="15" ROWS="3"></TEXTAREA>

 下拉列表 <SELECT NAME="LIKE"> <OPTION VALUE="喜欢">非常喜欢 <OPTION VALUE="不喜欢">不喜欢 <OPTION VALUE="讨厌">讨厌 </SELECT>

 3.1.8

 超链接的使用 没有链接,WWW 将失去存在的意义。文件链接是超链接中最常用的一种情形,基本语法格式如下:

 <a href="字符串" target="字符串" title="字符串">文本</a>

 其中各属性描述如下。

 (1) href:该属性是必选项,用于指定目标端点的 URL 地址。

 (2) target:该属性是可选项,用于指定一个窗口或框架的名称,目标文档将在指定窗口或框架中打开。如果省略该属性,则在超链所处的窗体或框架中打开目标文档。

 (3) title:该属性也是可选项,用于指定鼠标移到超链接所显示的标题文字。

 例如,建立一个搜狐的超链接,代码如下:

 <a href="">搜狐</a> 3.2

 VBScript 语言 VBScript 是 Microsoft 公司推出的一种脚本语言,其目的是为了加强 HTML 的表达能力,提高网页的交互性,增进客户端网页上处理数据与运算的能力。

 3.2.1

 VBScript 概述 VBScript 一般情况是和 HTML 结合在一起使用,融入 HTML 或 ASP 文件当中。在HTML 代码中,必须使用<script>标签,才能使用脚本语言,格式如下:

 <script>

 语言主体信息 </script>

 例如,可以用一个 VBScript 语句将一段欢迎词写入 HTML 页面中,代码如下:

 <script language="VBscript">

 Window.Document.Write("你好!欢迎你开始学习 VBScript 语言") </script>

 从上面的代码可以看出,VBScript 代码是成双成对地出现在<Script > 标记当中,也就是说代码从<Script >开始到</Script >结束。其中 language 属性代表的是脚本语言。

 Script 语言可以出现在 HTML 中任何位置。上述代码中的 Document 是 Window 中的子对象,Write 是 Document 对象中的方法。

 3.2.2

 VBScript 数据类型 VBScript 只有一种数据类型,称为 Variant。Variant 是一种特殊的数据类型,根据使用的方式,它可以包含不同类别的信息。因为 Variant 是 VBScript 中唯一的数据类型,所以它也

 是 VBScript 中所有函数的返回值的数据类型。

 最简单的 Variant 可以包含数字或字符串信息。Variant 用于数字上下文中时,作为数字处理;用于字符串上下文中时,作为字符串处理。这就是说,如果使用看起来像是数字的数据,则 VBScript 会假定其为数字并以适用于数字的方式处理。与此类似,如果使用的数据只可能是字符串,则 VBScript 将按字符串处理。也可以将数字包含在引号("")中,使其成为字符串。

 除简单的数字或字符串以外,还可以进一步区分数值信息的特定含义。例如,使用数值信息表示日期或时间。此类数据在与其他日期或时间数据一起使用时,结果也总是表示为日期或时间;而且也会按照最适用于其包含的数据的方式进行操作。也可以使用转换数据的子类型。

 下面是几种在 VBScript 中通用的常数。

  True/False:表示布尔值。

  Empty:表示没有初始化的变量。

  Null:表示没有有效的数据。

  Nothing:表示不应用的变量。

 在程序设计中,可以利用 VarType 返回数据的 Variant 子类型。

 3.2.3

 VBScript 变量 1. 声明变量 可以使用 Dim 语句、Public 语句和 Private 语句在脚本中显式声明变量。例如声明一个abc 的变量:

 Dim abc

  声明多个变量时,使用逗号分隔变量。例如:

 Dim abc,def,hij

 也可以通过直接在脚本中使用变量名这一简单方式隐式声明变量。但这通常不是一个好习惯,因为这样有时会由于变量名被拼错而导致在运行脚本时出现意外的结果。因此,最好使用 Option Explicit 语句显式声明所有变量,并将<%Option Explicit%>作为脚本的第一条语句,放在页面代码的第一行。

 2. 变量命名规则 变量命名必须遵循 VBScript 的标准命名规则。

  第一个字符必须是字母。

  不能包含嵌入的句点。

  长度不能超过 255 个字符。

  在被声明的作用域内必须唯一。

 3. 变量的作用域与存活期 变量的作用域由声明它的位置决定。如果在过程中声明变量,则只有该过程中的代码可以访问或更改变量值,此时变量具有局部作用域并被称为过程级变量。如果在过程之外声明变量,则该变量可以被脚本中所有过程所识别,称为 Script 级变量,具有脚本级作用域。

 变量存在的时间称为存活期。Script 级变量的存活期从被声明的一刻起,直到脚本运行结束。对于过程级变量,其存活期仅是该过程运行的时间,该项过程结束后,变量随之消失。在执行过程时,局部变量是理想的临时存储空间。可以在不同过程中使用同名的局部变量,这是因为每个局部变量只被声明它的过程识别。

 4. 给变量赋值 给变量赋值的方法为:变量在表达式左边,要赋的值则在表达式右边,如:Abc=100。

 5. 标量变量和数组变量 多数情况下,只需为声明的变量赋一个值,只包含一个值的变量被称为标量变量。有时,将多个相关值赋给一个变量更为方便,因此可以创建包含一系列值的变量,称为数组变量。数组变量和标量变量是以相同的方式声明的,唯一的区别是声明数组变量时变量名后面带有括号()。例如声明一个包含 5 个元素的一维数组:

 Dim abc(4)

 虽然括号中显示的数字是 4,但由于在 VBScript 中所有数组都是基于 0 的,所以这个数组实际上包含 5 个元素。在基于 0 的数组中,数组元素的数目是括号中显示的数目加 10 这种数组被称为固定大小的数组。

 在数组中,使用索引为数组的每个元素赋值。从 0~4,将数据赋给数组的元素,代码如下所示:

 Dim abc(0)=10 Dim abc(1)=20 Dim abc(2)=30 Dim abc(3)=40 Dim abc(4)=50

 同样,使用索引可以检索到所需的数组元素的数据。例如:

 … MyVariable = abc(3) …

 数组并不仅限于一维。数组的维数最大可以为 60 (尽管大多数人不能理解超过 3 或 4 的维数)。声明多维数组时,用逗号分隔括号中每个表示数组大小的数字。在下例中,MyVariable 变量是一个有 5 行和 10 列的二维数组:

 Dim MyVariable(4,9)

 在二维数组中,括号中第一个数字表示行的数目,第二个数字表示列的数目。

 也可以声明动态数组,即在运行脚本时大小发生变化的数组,最初声明时使用 Dim 语句

 或 ReDim 语句,但括号中不包含量任何数字。例如:

 Dim MyVariable() ReDim AnotherArray()

 要使用动态数组,必须随后使用 ReDim 确定维数和每一维的大小。在下例中,ReDim 将动态数组的初始大小设置为 10,而后面的 ReDim 语句将数组的大小重新调整为 15,同时使用 Preserve 关键字在重新调整大小时保留数组的内容。

 ReDim MyVariable(10) … ReDim Preserve MyVariable(15)

 重新调整动态数组大小的次数没有任何限制,但将数组从大调小时,将会丢失被删除元素的数据。

 3.2.4

 VBScript 运算符 VBScript 有一套完整的运算符,包括算术运算符、比较运算符、连接运算符和逻辑运算符。

 运算符具有优先级:首先计算算术运算符,然后计算比较运算符,最后计算逻辑运算符。所有比较运算符的优先级相同,则按照从左到右的顺序计算比较运算符。运算符如表 3-5所示。

 表 3-5

 VBScript 运算符 算术运算符 比较运算符 逻辑运算符 描述 符号 描述 符号 描述 符号 求幂 ^ 等于 = 逻辑非 Not 负号 - 不等于 <> 逻辑与 And 乘 * 小于 < 逻辑或 Or 除 / 大于 > 逻辑异或 Xor 整除 \ 小于等于 <= 逻辑等价 Eqv 求余 Mod 大于等于 >= 逻辑隐含 Imp 加 + 对象引用比较 Is

  减 -

  3.2.5

 使用条件语句 使用条件语句可以编写进行判断和重复操作的 VBScript 代码。在 VBScript 中,使用以下条件语句。

 1. If„Then„Else 语句 If„Then„Else 语句用于计算条件是否为 True 或 False,并且根据计算结果指定要运行的

 语句。通常,条件是使用比较运算符对值或变量进行比较的表达式。If„Then„Else 语句可以按照需要进行嵌套。例如:

 Sub AlertUser(Value) If Value = 0 then

 Alertlabel.ForeColor =vbRed

 Alertlabel.Font.bold = True

 Alertlabel..Font..Italic =True

 Else

  Alertlabel.ForeColor =vbBlack

 Alertlabel.Font.bold = False

 Alertlabel..Font..Italic= False End if

 End Sub

 If 语句执行体执行完后,必须用 End if 结束。

 If„Then„Else 语句可以采用一种变形,允许从多个条件中选择,即添加 Elseif 子句以扩充 If„Then„Else 语句的功能,使用户可以控制基于多种可能的程序流程。例如:

 Sub GetMyValue(Value) If Value = 0 then

 Msgbox Value Elseif Value =1 then

  Msgbox Value Elseif Value =2 then

 Msgbox Value Else

 Msgbox"数值超出了范围" End if End Sub

  用法如下:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>If„Then„Else 语句运用</title> </head> <body> <Script Language=VBScript> <!-- dim hour hour=15 if hour<8 then

  document.write "早上好!" elseif hour>=8 and hour<12 then

  document.write "上午好!" elseif hour>=12 and hour<18 then

  document.write "下午好!" else

  document.write "晚上好!"

 end if

 --> </Script > </body> </html>

 这段代码显示了时间,主体意思是 Dim 定义一个变量,名为 hour,给这个变量赋值为15。当 hour 的值少于 8 的时候,显示“早上好”;当 hour 的值大于或等于 8 而少于 12 的时候,显示“上午好”;当 hour 的值大于或等于 12 而少于 18 的时候,显示“下午好”;其他值则显示“晚上好”,执行效果如图 3-20 所示。

 图 3-20

 If…Then…Else 语句 2. Select Case 语句 在上面的 If„Then„Else 语句中可以添加任意多个 Elseif 子句以提供多种选择,但这样使用经常会很烦琐。在 VBScript 语言中对多个条件进行选择时,建议使用 Select Case 语句。

 使用 Select Case 结构进行判断,可以从多个语句块中选择执行其中的一个。Select Case语句使用的功能与 If„Then„Else 语句类似,表达式的结果将与结构中每个 Case 的值比较。如果匹配,则执行与该 Case 关联的语句块。

 示例代码如下:

 <html> <head> <title>select case 示例</title> </HEAD> <body> <Script Language=VBScript> <!-- dim Number

 Number = 3 select case Number

  Case 1

 msgbox "弹出窗口 A"

 Case 2

 msgbox "弹出窗口 B"

 Case 3

  msgbox "弹出窗口 C"

 Case else

 msgbox "弹出窗口 D"

 end select --> </Script > </body> </html>

 执行效果如图 3-21 所示。

 图 3-21

 Select Case 语句 从上述代码中可知,Select Case 只计算开始处的一个表达式(只计算一次)。而 If„Then„Else 语句结构计算每个 Elseif 语句的表达式,这些表达式可以各不相同。只有当每个 Elseif 语句计算的表达式都相同时,才可以使用 Select Case 结构代替 If„Then„Else 语句。

 3.2.6

 使用循环语句 循环用于重复执行一组语句。循环可分为三类:一类在条件变为 False 之前重复执行语句;一类在条件变为 True 之前重复执行语句;另一类则按照指定的次数重复执行语句。

 在 VBScript 中可使用下列循环语句:

  Do„LOOP:当(或直到) 条件为 True 时循环。如计算 1+2+„+100 的总和,其代码如下:

 <% Dim I Sum Sum=0 i=0 Do I=i+1 Sum=Sum+1 Loop Until i=100 Response.Write(1+2+…+100= & Sum) %>

  While„Wend:当条件为 True 时循环。其语法形式为:

 While (条件语句)

 执行语句 Wend

   For„Next:指定循环次数,使用计数器重复运行语句。其语法形式为:

 For counter=start to end step n

 执行语句 Next

  For Each„Next:对于集合中的每项或数组中的每个元素,重复执行一组语句。

 3.2.7

 VBScript 过程 在 VBScript 中,过程被分为两类:Sub 过程和 Function 过程。

 1. Sub 过程 Sub 过程是包含在 Sub 和 End Sub 语句之间的一组 VBScript 语句,执行操作但不返回值。过程可以使用参数(由调用过程传递的常数、变量或表达式)。如果 Sub 过程无任何参数,则 Sub 语句必须包含空括号()。

 例如,下面的 Sub 过程使用两个应有的(或内置的)函数,即 InputBox 和 MsgBox 来提示用户输入信息,然后显示结果。代码如下:

 Sub ShowDialog() Temp = InputBox("请输入你的名字") MsgBox "你好" &CStr(temp) & "! " End Sub

  2. Function 过程 Function 过程是包含在 Function 和 End Function 语句之间的一组 VBScript 语句。Function过程与 Sub 过程类似,但是 Function 过程可以返回值。Function 过程可以使用参数(由调用过程传递的常数、变量或表达式)。如果 Function 过程无任何参数,则 Function 语句必须包含空括号()。Function 过程通过函数名返回一个值,这个值是在过程的语句中赋给函数名的。Function 返回值的数据类型为 Variant。

 在下面的示例中,ShowInputName 函数将返回一个组合字符串,并利用 Sub 过程输出结果。代码如下:

 Sub ShowDialog() Temp = InputBox("请输入你的名字") MsgBox AVGMYScore(temp) End Sub Function ShowInputName (inputName)

 AVGMYScore="你好:" & CStr(inputName) & "!" End Function

 在代码中使用 Sub 过程和 Function 过程时,需要注意以下两点。

 (1) 调用 Function 过程时,函数名必须用在变量赋值语句的右端或表达式中。例如:

 Showinfo=showInputName(temp) Msgbox AVGMyScore(temp)

 (2) 调用 Sub 过程时,只需输入过程名及所有参数值,参数值之间使用逗号分隔。无须使用 Call 语句。但如果使用了此语句,则必须将所有参数包含在括号之中。例如:

 Call MyProc(firstarg,secondarg) MyProc firstarg,secondarg

 3.3

 ASP 基本知识 ASP 是 Active Server Pages 的简称,是解释型的脚本语言环境。ASP 的运行需要Windows 操作系统,并需要安装 Internet Information Server (IIS)。ASP 是目前最流行的开放式Web 服务器应用程序开发技术,它能很好地将脚本语言、HTML 标记语言和数据库结合在一起,可以通过网页程序来操控数据库。

 3.3.1

 ASP 能做什么 ASP 有以下几个功能。

 (1) 动态地编辑、改变或者添加页面的任何内容。

 (2) 对由用户从 HTML 表单提交的查询或者数据做出响应、访问数据或者数据库,并向浏览器返回结果。

 (3) 为不同的用户定制网页。

 (4) 由于 ASP 代码无法从浏览器端查看,确保了站点的安全性。

 ASP 有以下特点。

 (1) ASP 不需要进行编译就可以直接执行,并整合于 HTML 标记语言中。

 (2) ASP 不需要特定的编辑软件,使用一般的编辑器就可以设计,如记事本。

 (3) 使用一些简单的脚本语言,如 Javascrpt、VBScript,再结合 HTML 标记语言,就可以制作出完美的网站。

 (4) 兼容各种 IE 浏览器。

 (5) 使用 ASP 编辑的程序安全性比较高。

 (6) ASP 采用了面向对象技术。

 3.3.2

 ASP 的工作原理 ASP 的工作原理如图 3-22 所示。

 图 3-22

 ASP 工作原理 (1) 客户端输入网页地址(URL),通过网络向服务器端发送一个 ASP 的文件请求。

 (2) 服务器端开始运行 ASP 文件代码,从数据库中取需要的数据或写数据。

 (3) 服务器端把数据库反馈的数据发送到客户端上显示。

 3.3.3

 ASP 基本语法 ASP 语句书写格式为<%语句„%>。

 1. if 条件语句

 <%

 If 条件 1 then 语句 1 elseif 条件 2 then 语句 2 else 语句 3 Endif %>

 if 语句完成了程序流程块中的分支功能:如果其中的条件成立,则程序执行紧接着条件的语句或语句块;否则程序执行 else 中的语句或语句块。

 2. while 循环语句

 <% while 条件 语句 Wend %>

 while 语句所控制的循环不断地测试条件,如果条件始终成立,则一直循环,直到条件不再成立。

 3. for 循环语句

 <% for count=1 to n step m 语句 1 exit for 语句 2 Next %>

 只要循环条件成立,for 语句便一直执行,直到条件不再成立。

 ASP 还有其他语句,但常用的、必须掌握的就是这些。

 3.3.4

 ASP 常用内建对象 在 ASP 中,提供的对象以及组件都可以用来实现和扩展 ASP 应用程序的功能。每个对象都有其各自的属性、集合和方法,并且可以响应有关事件。用户不必了解对象内部复杂的数据传递与执行机制,而只需在程序中设置或调用某个对象特定的属性、集合或方法,即可实现该对象所提供的特定功能。

 ASP 内建对象是 ASP 的核心,ASP 的主要功能都建立在某些内建对象的基础之上,常用ASP 对象有 Application 对象、Request 对象、Response 对象、Server 对象、Session 对象,下面将一一进行介绍。

 1. Application 对象 Application 对象在应用程序的所有访问者间共享信息,并可以在 Web 应用程序运行期间持久地保持数据。如果不加以限制,所有的客户都可以访问这个对象。Application 对象通常用来实现存储应用程序级全局变量、锁定与解锁全局变量以及网站计数器等功能。Application对象包含的集合、方法和事件如表 3-6 所示。

 表 3-6

 Application 对象 类

 型 名

 称 说

 明 集合 Contents 存储在 Application 对象中的所有变量及值的集合 StaticObjects 使用<Object>元素定义的存储于 Application 对象中的所有变量的集合 方法 Contents.Remove 通过传入变量名来删除指定的存储于 Contents 中的变量 Contents.Remove All 删除全部存于 Contents 中的变量 Lock 锁定在 Application 中存储的变量,不允许其他客户端修改。调用Unlock 方法或本页面执行完毕后解锁 Unlock 手动解除对 Application 变量的锁定 事件 Application_OnStart

 当事件应用程序启动时触发 Application_OnEnd 当事件应用程序结束时触发

 Lock 方法禁止其他用户修改 Application 对象的属性,以确保在同一时刻仅有一个客户可修改和存取 Application 变量。如果用户没有明确调用 Unlock 方法,则服务器将会在 ASP 文件结束或超时后即解除对 Application 对象的锁定。最简单的就是进行页面记数的例子:

 <%

 application.lock

 application("numvisits") = application("numvisits") + 1

 application.unlock

 %>

  以上代码表示“你是本页的第<%=application("numvisits")%>位访问者”。当然,如果需要记数的初始值,那就该加个判断语句了:

 <%

 if application("numvisits")<9999 then

 application("numvisits")=10000

 end if

 application.lock

 application("numvisits") = application("numvisits") + 1

 application.unlock

 %>

 以上代码表示“你是本页的第<%=application("numvisits")%>位访问者”。而且每刷新一

 次,都会记数累加。如按 IP 值访问来记数的话,则可建立一个 session:

 <%

 if session("visitnum")="" then

 application.lock

 application("numvisits") = application("numvisits") + 1

 application.unlock

 session("visitnum")="visited"

 end if

 %>

 以上代码表示“你是本页的第<%=application("numvisits")%>位访问者”。

 2. Request 对象 Request 对象用来获取客户端传来的任何信息,包括 POST 方法或 GET 方法、Cookies 以及客户端证书从 HTML 表单传递的参数。通过 Request 对象,也可以访问发送到服务器的二进制数据。Request 对象通常用来实现读取网址参数、读取表单传递的数据信息、读取Cookie 数据、读取服务器的环境变量以及文件上传的功能。Request 对象包含的集合、属性和方法如表 3-7 所示。

 表 3-7

 Request 对象 类

 型 名

 称 说

 明 集合 ClientCertificate 客户证书集合 Cookies 客户发送的所有 Cookies 值的集合 Form 客户提交的表单(Form)元素的值,变量名与表单中元素的 name 属性一致 QueryString URL 参数中的值,如果 Form 的 Method 属性设为 GET,则会把所有的 Form 元素名称和值自动添加到 URL 参数中 ServerVariables 预定义的服务器变量 属性 TotalBytes 客户端发送的 HTTP 请求中 body 部分的总字节数 方法 BinaryRead(count) 从客户端提交的数据中获取 count 字节的数据,返回一个无符号型的数组

 Request 对象的主要作用就是:在服务器端接收从客户端浏览器提交或上传的信息。Request 对象可以访问任何基于 HTTP 请求传递的所有信息,包括从 Form 表单用 post 方法或get 方法传递的参数、Cookie 等。下面是一个表单从提交到接收数据的案例:

 <form id="form1" name="form1" method="post" action="b.asp"> <table width="340" border="0" align="center"> <tr> <td width="124">姓名:</td> <td width="206"><label> <input type="text" name="name" id="name" /> </label></td> </tr> <tr> <td>工作单位:</td> <td><input name="gzdw" ...

推荐访问:语言 网页 基础

版权所有:天海范文网 2010-2024 未经授权禁止复制或建立镜像[天海范文网]所有资源完全免费共享

Powered by 天海范文网 © All Rights Reserved.。鲁ICP备10209932号