…

…

…

…

有一个属性align，它用来描述文字的对齐方式，一般值有center、left和right三种，分别表示居中、左对齐和右对齐。

面向大海 春暖花开
 
从明天起，做一个幸福的人
喂马，劈柴，周游世界
从明天起，关心粮食和蔬菜
我有一所房子，面向大海，春暖花开

…

猎人、猎狗

一条猎狗将兔子赶出了窝，一直追赶他，追了很久仍没有捉到。牧羊看到此种情景，讥笑猎狗说‘你们两个之间小的反而跑得快得多。‘猎狗回答说：‘你不知道我们两个的跑是完全不同的！我仅仅为了一顿饭而跑，他却是为了性命而跑呀！

这话被猎人听到了，猎人想:猎狗说的对啊，那我要想得到更多的猎物。就这样过了一段时间，问题又出现了，大兔子非常难捉到，小兔子好捉，但捉到大兔子得到的奖赏和捉到小兔子得到的骨头差不多，猎狗们善于观察发现了这个窍门，专门去捉小兔子。慢慢的，大家都发现了这个窍门。
猎人对猎狗说:最近你们捉的兔子越来越小了，为什么?
猎狗们说:反正没有什么大的区别，为什么费那么大的劲去捉那些大的呢?

面向大海 春暖花开
 
从明天起，做一个幸福的人
喂马，劈柴，周游世界
从明天起，关心粮食和蔬菜
我有一所房子，面向大海，春暖花开

、

、

、

、

和

，中的n表示标题级别，n值越小，标题字号越大。标题标签也是成对出现的。

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

正文非标题文字 【例2-6】标题标签的使用（headline.html）。

无序列表：

秋夕： 　 　
• 银烛秋光冷画屏， 　 　
• 轻罗小扇扑流萤。 　 　
• 天阶夜色凉如水， 　 　
• 坐看牵牛织女星。

有序列表：

秋夕： 　　
1. 银烛秋光冷画屏， 　　
2. 轻罗小扇扑流萤。 　　
3. 天阶夜色凉如水， 　　
4. 坐看牵牛织女星。

定义性列表：

　

银烛秋光冷画屏，

这是1行 　

轻罗小扇扑流萤。

这是2行

天阶夜色凉如水，

这是3行

坐看牵牛织女星。

这是4行

27. 2. 网页背景 网页背景颜色和背景图像都是页面属性，在标签中设置。 背景颜色 在标签中设置属性bgcolor即可，例如我们要将网页的背景颜色设置为“银色”，只需要在标签中加入一句代码bgcolor="sliver"或者bgcolor="#0c0c0c"。

28. 【例2-7】设置网页背景颜色（bgcolor.html）。

面向大海 春暖花开
 
从明天起，做一个幸福的人
喂马，劈柴，周游世界
从明天起，关心粮食和蔬菜
我有一所房子，面向大海，春暖花开

29. 图2-8 网页背景颜色设置

30. (2) 背景图像 要设置背景图像，首先我们选好一副图像bg001.jpg，接下来要把图像放入站点中。还记得我们先前创建的站点的路径是F:\myweb，现在在站点中新建一个文件夹images，用于存放图片，创建好以后将图像bg001.jpg置于其中。 设置背景图像的一般形式为： 图像路径一般使用相对路径，即它相对于html文档的路径，bg001.jpg相对于保存于F:\myweb路径下的网页文档background.html的路径为images/bg001.jpg。 在设置背景图像时，如果该图像的大小不能够占满整个浏览器页面，它们会自动进行拼接。

31. 【例2-8】设置页面背景图像（background.html）。 这天，小猪唏哩呼噜和小伙伴们，在商店买了许多鞭炮。因为今天是小白兔的生日。他们要放鞭炮来祝贺它的生日.小伙伴们高高兴兴的一起唱着歌，往小白兔的家走去。这时，小猪看见一只特别美丽的蝴蝶，就轻手轻脚的朝蝴蝶走去。小蝴蝶仿佛像看见小猪一样。挥动着美丽的翅膀，朝森林里飞去。小猪唏哩呼噜紧追不舍，一会就和大家走散了。小猪也没注意到前面是森林，结果和伙伴们越走越远。他迷了路。小猪赶忙往回走，可是怎么也找不到回去的路了。

32. 图2-9 设置网页背景图像

33. 3. 图像适当的应用图像可以使网页变得赏心悦目，充满吸引力，网页中可以加入的图像格式有jpeg、gif和png。 网页中插入图像的标签是，它是一个单标签。并不是真正的把图片加入到HTML文件中，而是通过一个路径告诉浏览器图像在哪里。其基本语法格式为： 这里图像路径一般也使用相对路径，即图像文件相对于html文档的路径，的常用属性见表2-2。

34. 属性说明src图像文件的路径，一般使用图像文件相对于网页文档的相对路径alt图像的说明文字，在网页不能正常显示时出现该文字，另外在浏览器中，当鼠标经过并短暂停留时，也会显示出该说明文字。width和height图像的高度和宽度，单位是像素，默认为图像的实际大小align图像与周围文字的环绕效果，它的值left和right分别表示在水平方向上图像左对齐和右对齐。值top、middle和bottom分别表示图像和文字在垂直方向上顶端对齐、居中对齐和底端对齐。border边框的宽度，单位是像素hspace和vspace图像在浏览器中显示的水平间距和垂直间距表2-2 标签的常用属性

35. 【例2-9】在网页中加入图像（image.html）。 在海边,我捡起一枚小小的贝壳。贝壳很小,却非常坚硬和精致。回旋的花纹中间有着色泽或深或浅的小点,如果仔细观察的话,在每个小点周围又有自成一圈的复杂图样。怪不得古时候的人要用贝壳来做钱币,在我手心里躺着实在是一件艺术品,是舍不得拿去和别人交换的宝贝啊! 在海边捡起这一枚贝壳的时候,里面曾经居住过的小小的柔软的肉体早已死去,在阳光,沙粒和海浪的淘洗之下,贝壳中生命所留下的痕迹已完全消失了。但是,为了这样一个短暂,微小的生命,为了这样一个脆弱,卑微的生命,上仓给它制作居所时却是多精致,多仔细,多么地一丝不苟啊! 比起贝壳里的生命来,我在这世间能停留的时间和空间是不是更长和更多一点呢?是不是也应该用我的能力把我所能做到的事情做得更精致,更仔细,更加一丝不苟呢?请让我也能留下一些令人珍惜,令人惊叹的东西吧。在千年之后,也许会有人对我留下的痕迹反复观看,反复把玩,并且会忍不住轻轻地叹息: "这是一颗怎样固执又怎样简单的心啊!" 下面，我们要在网页中加入图像shell.jpg。当然首先我们要将图像置入F:\html\images中，然后在网页中加入。

36. 图2-10 在网页中加入图像

37. 4. 超链接 超级链接（HyperLink）习惯上被称为超链接。给网页上的文本或图像设置超链接，可以使得从源点跳到目标点。 基本语法 文字或图像 语法说明 在HTML文件中，超链接目标可以分为内部链接和外部链接。所谓内部链接：指网站内部文件之间的链接，此类链接的地址一般使用相对地址，即链接目标文件相对于该网页文件的路径地址。所谓外部链接，指网站内的文件链接到站点外文件的链接，外部链接一般使用绝对地址，比如链接到新浪，地址就是http://www.sina.com.cn）。 链接的源点可以是文字或者图像。 另外，比较特殊是在网页上添加一个电子邮件链接。添加电子邮件链接，只需要在希望链接的电子邮件地址的文字前后分别加上和即可。在浏览网页时，点击链接文字就可以打开本机上默认的电子邮件收发软件。

38. 【例2-10】超链接（link.html）。

杂草与庄稼



一位哲学家带着他的弟子游学世界。在游历了许多国家，拜访了许多著名的学府之后，个个满腹经纶的他们回到了出发地。进城之前，哲学家和他的弟子在郊外的一片草地上坐了下来。哲学家说：“在你们结束学业的时候，今天我们上最后一课。你们看，在我们周围的旷野里，长满了野草，现在我想知道的是如何铲除这些野草？”针对老师的提问，弟子们非常惊愕。他们都没有想到，一直在探讨人生奥妙的哲学家，最后一课问的竟是这么一个简单的问题。
一个弟子首先开口：“老师，只要有一把铲刀就够了。”哲学家点点头。
“用火烧也是很好的办法。”
“撒上石灰，可以铲掉所有的野草。”
“斩草除根，只要把根挖出来就行。”
……
等弟子都讲完了，哲学家站起来说：“课就上到这里，你们回去后，各按照自己的办法除去一片杂草。没有除掉的，一年后的今天再来相聚。”一年后，他们都来了。不过他们发现原来相聚的地方不再是杂草丛生，而是一片长满谷子的庄稼地。他们来到去年就坐的地方未见到哲学家，却发现一张纸条，上面写着：“要想铲除旷野里的杂草，最好的方法就是让庄稼长势良好。同样，要想让灵魂无纷扰，惟一的方法就是用美德去占据它。”

文章来源:文章阅读网

欣赏更多
美文：好好活着
美图：蒲公英

联系我们

39. 图2-11 在网页中加入链接

40. 第一个链接，链接源点为图像crops.gif，目标点为图像crops2.gif，这两幅图像都存储在F:\myweb\images中。 第二个链接文章阅读网，链接源点为文字“文字阅读网”，目标点为外部网址“http://www.duwenzhang.com”。 第三个链接美文：好好活着，链接源点为文字“美文：好好活着”，目标点为F:\myweb中的内部网页life.html。 第四个链接美图：蒲公英，链接源点为文字“美图：蒲公英”，目标点为F:\myweb\images中的图像dandelion.jpg。 第五个链接联系我们为电子邮件链接。 链接属性中target=_blank表示在新窗口中打开链接目标。如果没有设置目标属性或者设置为target=_self，都会在当前窗口打开链接。

41. 5. 表格表格是网页中最常使用的排版方法，是HTML中的重点，在这里我们只简单介绍一下表格。 表格所涉及的标签有“表格标签”、“行标签”和“单元格标签”。 …：表格标签，表示一个表格的开始和结束。 …：行标签，成对出现，包含在表格标签之间，有几对行标签说明该表格有几行。 …：单元格标签，成对出现，包含在行标签之间，有几对单元格标签说明该行有几个单元格，另外是特殊的单元格，表示该单元格为标题即表头。

42. 一月二月三月120010001500单元格（用来表示，每个单元格可以有背景颜色和背景图片）表格（用来表示，表格可以有背景颜色、背景图片）表格边框每一行可以用来表示，单元格放在行中，每行可以有很多的单元格。表头（用

来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗） 43. 表2-3 表格相关标签的属性属性说明border标签的属性，表示表格的边框的宽度，单位为像素，默认宽度为0，即无边线width和height适用于标签、和 ，分别用来表示表格、行和单元格的宽高，单位为像素或者百分比。align适用于标签、和 ，分别用来表示表格、行和单元格的对齐方式，值有left（左对齐）、center（居中）和right（右对齐）。用于时，表示表格在父级单位（如页面等）中的对齐方式；用于表示整行单元格内对象的对齐方式；用于和 表示某个单元格内对象的对齐方式。valign适用于标签 ，表示单元格内容在垂直方向的对齐方式，值有top（顶端）、midddle（居中）、bottom（底部）和baseline（基线）。bgcolor适用于标签、和 ，分别用来表示表格、行和单元格的背景颜色。background适用于标签、和，显示容易出问题。cellspacing标签 ，分别用来表示表格、行和单元格的背景图像，但一般不用于 的属性，表示单元格的间距，单位为像素。cellpadding标签的属性，表示单元格的边距，单位为像素。colspan标签 的属性，表示跨多列，如colspan=3表示该单元格跨3列，即横向合并3个单元格。rowspan标签 的属性，表示跨多行，rowspan=2表示该单元格跨2列，即纵向合并2个单元格。 44. 【例2-11】表格示例（table.html）。 成绩单 学号 姓名 JSP程序设计 程序设计 计算机网络 200703001 张小凡 90 78 82 200703002 王于飞 67 80 75 200703003 李天雨 62 75 55 45. 图2-12 表格应用 46. 6. 框架框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架主要包括两个部分，框架集（frameset）和框架（frame）。框架集是在一个文档内定义一组框架结构的HTML网页，框架集中定义了在一个窗口中显示的框架数、框架尺寸、载入到框架的网页等；而框架则是指在网页上定义的一个显示区域。是框架集标签，通过标签定义每一个框架。框架集的基本页面代码如下： ... ...... 的属性src表示嵌入该框架的网页文件的路径，一般也使用相对路径；name表示该框架的名称。 使用的rows和cols属性可以设置浏览器分为几个框架，我们通过下面的例子来具体说明。 47. 【例2-12】框架示例（framset.html）。 <body> </body> 48. 图2-13 框架应用 49. 在该例子中浏览器被划分为3个区域，即分为3个框架，如图2-13，整个浏览器页面被首先分为上下两个区域，上边区域是一个框架，而下面区域又被划分为左右两个框架。 例子第5行代码中：属性rows="80,*"表明浏览器被划分为上下两个区域，上边区域高为80像素高，下边区域高用*号表示“相对”，即除去80像素后剩余大小；属性frameborder="yes"表示框架有边框，如果值为no则不显示边框；输赢border="2"表示框架边框为2像素，属性bordercolor="#D6D6D6"用来设置框架边框颜色。 例子第6行代码表示上边框架没有再被划分，嵌入网页top.html，框架名称为topFrame。 例子第7行代码中：属性cols="15%,85%"表示下面区域又被划分为左右两个框架，左边框架宽为15%，右边框架宽为85%，框架边框宽为2，颜色为#D6D6D6。 例子第8-9行代码和分别表示左边框架嵌入网页left.html，框架名称为leftFrame；右边框架嵌入main1.html，框架名称为mainFrame。 另在...标签内的内容将只出现在不支持框架的浏览器中。 50. 在该例子中浏览器被划分为3个区域，即分为3个框架，如图2-13，整个浏览器页面被首先分为上下两个区域，上边区域是一个框架，而下面区域又被划分为左右两个框架。 除了上述文件，为了体现框架的作用，我们在left.html上添加了两个链接，left.html代码如下。 第一回  风雪惊变 第二回  江南七怪 第三回  大漠风沙 第四回  黑风双煞 第五回  弯弓射雕 第六回  崖顶疑阵 第二回  江南七怪表示在文字“第二回  江南七怪”设置链接，链接目标main2.html，特别注意其中target="mainFrame"表明在名称为mainFrame的框架即右侧主框内打开链接目标。点击该链接后效果如图2-14所示，同样的方法，我们可以在left.html的各段文字上设置链接分别打开不同页面，在此省略。 51. 图2-14 框架链接应用 52. 2.1.3 表单 表单是网页中提供的一种交互式操作手段，在网页中的使用十分广泛。无论是提交搜索的信息，还是网上注册等都需要使用表单。用户可以通过提交表单信息与服务器进行动态交流。表单主要可以分为两部分：一是HTML源代码描述的表单；二是提交后的表单处理，需要调用服务器端编写好的JSP等代码对客户端提交的信息作出回应。该部分仅讲述HTML源代码描述的表单。 53. 在HTML中，在需要使用表单的地方插入成对的表单标签 即可。 基本语法 表单项、文字、图片等 其中，属性name表示表单的名称；action用来指定接纳表单数据的JSP页面或者servlet，如果该属性为空则提交给当前页面；method属性指定传输方式，可以选择post或get（在7.5节详细介绍两者的区别）；enctype属性指定传送数据的编码方式，缺省值是application/x-url-encoded，利用表单上传文件时，需要改变编码方式，此时需要配合“post”方法。 表单最重要的作用是获取用户信息，这就需要在表单中加入表单项（控件），例如文本框、单选按钮等，常用的表单项如表2-4所示。 54. 表单项说 明单行文本框密码文本框提交按钮，将表单里的信息提交给表单里action所指向的地址图片提交重置按钮，重设表单内容普通按钮隐藏元素单选按钮复选框文件域...列表框...多行文本框表2-4 常见表单项 55. 单行文本框 单行文本框允许用户输入一些简短的单行信息，例如用户姓名、住址等。其基本语法如下所示： name：设定文本框的名称，数据交互中会用到 size：设定此文本框显示的宽度 value：设定此文本框的预设内容 maxlength：设定此文本框输入的最大长度 56. (2) 密码框 密码框主要用于一些保密信息的输入，例如密码。其基本语法如下所示： 密码文本框用法基本与单行文本框一样，其属性也类似于单行文本框，在此不予重复。 例text.htm 57. (3) 提交按钮 通过提交按钮可以将表单里的信息提交给表单action所指向的文件地址。其基本语法如下所示： name：设定提交按钮的名称 value：设定按钮上显示的文本，默认为“提交”。 58. (4) 图片提交 “图片提交”作用和“提交按钮”相同，不同的是“图片提交”以一个图片作为表单的提交按钮，其中src属性表示图片的路径。其基本语法如下所示： name：设定提交图片的名称 src：图像路径，一般使用相对路径 alt：鼠标经过图像或者图像不显示时的替换文本 width和height：设定图像的宽度和高度 示例：图2-15 图片提交示例 59. (5) 重置按钮 重置按钮是表单中另外一个比较常用的按钮，其作用是重置用户填写的信息。其基本语法如下所示： name：设定提交按钮的名称 value：设定按钮上显示的文本，默认为“重置”。 60. (6) 普通按钮 另外，表单中经常用到普通按钮，它没有默认的动作，有时需要利用JavaScript来做一些特殊的效果时使用。其基本语法如下所示： 除了按钮的显示文字外，可以在按钮上添加很多效果，特别是单击按钮后发生的事件等，如图2-16所示是一个单击后会有对话框提示的按钮，下面是对应的HTML源代码。 例button.htm图2-16 按钮示例 61. (7) 隐藏元素 隐藏元素多用于在提交表单时向服务器传递一些不需要用户设定但程序必需的参数值。这在动态网页中的需求更加明显。基本语法如下所示： 隐藏元素一般位于 标签内，在表单提交时一同被发送给服务器端，下面是一个隐藏元素的使用示例，功能是在表单提交时，将用户的IP地址和用户所在的地区传送给服务器端，这种数据传递用户往往是没有发觉的。 例hidden.htm 62. (8) 单选按钮 单选按钮通常是给出几个选项供用户选择，一次只能从中选一个，应用单选按钮时要确定显示给用户的文字和不同选项的取值。其基本语法如下所示： value：设定此单选按钮的选定值 checked：当该项默认被选中时设定，否则不设定。 例radio.htm 63. (9) 复选框 复选框通常是给出几个选项供用户选择，并且可以从中选择多个，使用复选框时也要确定显示给用户的文字和不同选项的取值。其基本语法如下所示： value：设定此复选框的选定值 checked：当该项默认被选中时设定，否则不设定。 例checkbox.htm 64. (10) 文件域 文件域是用来填写文件路径，通过表单上传文件的地方。 照片： 65. (11) 下拉列表 下拉列表是表单中供用户选择的一个表单项，列表框可以显示多个选项供选择，且用户能同时选择其中的一个或多个。列表框中包含标签。其基本语法如下所示： …… name：设定下拉列表的名称 size：设定下拉列表显示选项的个数 multiple：设定此下拉列表可多选，如果为单选则省略该项 value：的属性，当选择该项时的值 例option1.htm，option2.htm 66. (12) 多行文本框 多行文本框用来输入较多的文字信息，常在新闻发布与论坛等系统中用到。其基本语法如下所示： rows：文本框显示的行数 cols：文本框显示的列数 使用多行文本框时主要是确定它的名称以及大小(行数与列数)，当用户输入的文字超过显示容量时，多行文本框会自动产生滚动条。 67. 【例2-13】表单应用（form.html）。 68. 69. 会员注册 用户名： 密码： 确认密码： 性别： 男 女 爱好： 体育 音乐 文学 其它 所在城市： 北京 上海 天津 重庆 照片： 备注：      70. 图2-17 表单示例 71. 多媒体页面用嵌入多媒体对象 基本语法 #=URL 注： 使用 标记之前，需要安装插件才可以； 对于不同的plugin，其embed属性也不同。 例： flash.htm(Flash动画) 例： rmi.htm(rmi音乐文件) 例： avi.htm(avi动画) 例： mpeg.htm(mpeg影像文件) 72. 2.1.4 XML与XHTML XML（Extensible Markup Language）即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language，标准通用标记语言)。XML是Internet环境中跨平台的、依赖于内容的技术，是当前处理结构化文档信息的有力工具。XML是一种简单的数据存储语言，使用一系列简单的标签描述数据，而这些标签可以很方便的建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单并易于掌握和使用。 XML是一种元标签语言，没有许多固定的标签，为Web开发人员提供了更多了灵活性。当使用HTML时，标签只是简单地表示内容的显示形式，而与表示的内容没有任何关联，为文档的进一步处理带来极大的不便。1. XML 73. 比如要表示个人简历，用HTML的表示方式如下（文件名resume.html）： 姓名 性别 出生日期 专业 张三 男 1991.8.12 软件开发 74. 上述html文件无法从标签 、 等得知其内容表示什么，如果用XML，相应的文档（文件名resume.xml）就可以写成如下形式： 张三 男 1991.8.12 软件开发 这里，version规定了XML文档的版本，encoding规定了XML文档的编码类型，此处取值gb2312表示简体中文。对比两个例子，使用XML可以做到自定义标签，用标签表明内容的含义。这就为在网络上交流资料时用计算机处理文档提供了极大的方便，也增加了源文件的可读性。 75. 当然resume.xml能以表格形式运行的前提是必须自定义好形式，定义其显示形式的文件如下（文件名resume.xsl，在xml文件的第二行引入了该xsl文件）： 姓名 性别 生日 专业 76. XSL之于XML ，就像 CSS 之于 HTML。它是指可扩展样式表语言 (Extensible Stylesheet Language)，这是一种用于以可读格式呈现 XML 数据的语言。有了resume.xsl定义显示形式，文件resume.xml在浏览器中显示的形式和resume.xml形式相同（如图2-18所示），不过它给程序员提供了更大的灵活性，也更易于数据交换。图2-18 浏览xml文件 77. 2. XHTML可扩展超文本标记语言（eXtensible HyperText Markup Language，XHTML），与超HTML类似，不过语法上更加严格。HTML语法要求比较松散，这样对网页编写者来说比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML， XHTML 1.0在2000年1月26日成为W3C的推荐标准。 和CSS（Cascading Style Sheets，层叠式样式表）结合后，XHTML能发挥真正的威力；这在实现样式和内容分离的同时，又能有机地组合网页代码，在另外的单独文件中，还可以混合各种XML应用。 78. 从HTML到XHTML过渡的变化比较小，主要是为了适应XML，最大的变化在于文档必须是良构的，具体变化如下。 所有的标签都必须要有一个相应的结束标签。 在HTML中，可以有开放标签，例如 标签可以省略其对应的和 ，但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它，例如 。 所有标签的元素和属性的名字都必须使用小写。 所有的属性必须用引号""括起来。 在HTML中，属性值可加双引号，也可以不加，但是在XHTML中，属性必须被加引号。例如 必须修写为： 。 79. 所有的XHTML标签都必须合理嵌套。 XHTML要求所有的嵌套都必须按顺序，也就是说，一层一层的嵌套必须是严格对称，不能出现交叉。例如 ... 就是错误的，而 ... 才是合法的。 把所有<和&特殊符号用编码表示。 任何（<）不是标签的一部分，都必须被编码为（<），任何（>）不是标签的一部分，都必须被编码为（>），任何（&）不是实体的一部分的，都必须被编码为（&）。 给所有属性赋一个值。 XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如 必须修改为。 不能在注释内容中使用“--”。 “--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如是无效的。 图像必须有替代文字。 每个图像标签都必须有alt说明文字。例如： 。 80. 2.2 JavaScript技术JavaScript是由Netscape公司开发的一种网页的脚本编程语言，它支持客户端与服务器端的应用程序以及构件的开发。JavaScript是一种解释性的语言，它的基本结构形式与其他编程语言相似，需要先编译后执行。 例Example1.htm 81. 2.2.1 JavaScript语法运算符——运算符就是完成操作的一系列符号，它有七类：赋值运算符（=，+=，-=，*=，/=，%=，<<=，>>=，|=，&=）、算术运算符(+，-，*，/，++，--，%)、比较运算符(>，<，<=，>=，==，!=)、逻辑运算符(||，&&，!)、条件运算(?:)、位移运算符(|，&，<<，>>，~，^)和字符串运算符(+)。 表达式——运算符和操作数的组合称为表达式，通常分为四类：赋值表达式、算术表达式、布尔表达式和字符串表达式。 语句——Javascript程序是由若干语句组成的，语句是编写程序的指令。Javascript提供了完整的基本编程语句，它们是：赋值语句、switch选择语句、while循环语句、for循环语句、do while循环语句、break循环终止语句、continue循环中断语句、with语句、try...catch语句、if-else语句等。 82. 函数——函数是命名的语句段，这个语句段可以被当作一个整体来引用和执行。使用函数要注意以下几点： (1) 函数一般由关键字function定义； (2) 函数名是调用函数时引用的名称，它对大小写是敏感的； (3) 参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量，也可以是函数； (4) return语句用于返回表达式的值。 对象——JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。 83. 事件——用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有你看不见的事件引发。绝大部分事件都由用户的动作所引发，如：用户按鼠标的按钮，就产生onClick事件，若鼠标经过某项内容，就产生onMouseOver事件等等。在Javascript中，事件往往与事件处理程序配套使用。 变量——如 var username = “yangli“;变量有它的类型，上例中username的类型为string（字符串），JavaScript支持的常用类型还有：object（对象）、array（数组）、number（数）、boolean（布尔值）、null（一个空值）和undefined（没有定义和赋值的变量）。 实际上JavaScript的变量是弱变量类型，你赋值给它的是字符串，它就是String类型，赋给数字它就是整型。赋给true和false它就是boolean型。 84. 声明变量 var a; “var” － 用于声明变量的关键字 “a” － 变量名 同时声明和初始化变量 var a= 10;a = 10;声明变量声明多个变量 var x, y, z = 10;赋值 85. 声明变量var.htm 定义变量赋 值输 出prompt(“提示信息”,”默认值”) 将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。 86. 2.2.2 JavaScript使用方式JavaScript加入网页有两种方法： 直接加入到网页中 引用方式 87. 这是最常用的方法，大部分含有JavaScript的网页都采用这种方法。直接加入到网页中 的位置并不是固定的，可以包含在... 或...中的任何地方，甚至是...标签之外。 88. 如果已经存在一个JavaScript源文件（通常以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。在网页中调用JavaScript源文件的基本格式如下：引用方式 其中url就是JavaScript源文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。例如要实现前文“直接插入方式”中所举例子的效果，可以首先创建一个JavaScript源代码文件“script.js”，其内容如下： document.write("这是Javascript！"); 如果网页文件和script.js文件在同一目录下，那么在网页中可以这样调用程序：。 89. 使用外部 JS 文件 JavaScript 代码 (test.htm) 以上文本是通过访问外部 JavaScript 文件显示的 document.write("喂！你好吗?")JavaScript 代码 (test.js ) 90. 2.2.3 JavaScript代码实例创建弹出式窗口window.html, window2.html 检测鼠标是否移过javascript_alert.htm 在网页主体和标题上分别显示日期（date.html） 简单的表单验证（formcheck.html） 验证表单（formtest.html） 91. 【例2-14】在网页主体和标题上分别显示日期（date.html）。 92. 该例子通过日期类Date的对象来获取当前的年月日和星期几信息，对这些信息进行简单加工后，通过document.write()将日期显示在网页主体部分（可根据需要显示在不同位置，如表格的单元格中），通过设置document.title将日期显示在标题栏上。程序执行结果如图2-19所示。图2-19 显示日期时间 93. 【例2-15】简单的表单验证（formcheck.html）。 用户名： 邮  件：   94. 95. 该例子是一个简单的表单验证， 中onSubmit="return check()"表示在提交表单时调用函数check()，而函数check()在后面的JavaScript中定义，主要用于检验用户名是否为空，邮件是否为空以及邮件名中是否含有@，如果不正确，则使用alert弹出警示框。程序运行结果如图2-20所示。图2-20 简单表单验证 96. 【例2-16】验证表单（formtest.html）。 97. 98. 请填入个人信息： 员工号： （员工号必须输入四位数字） 必填，四位数字 姓名： （姓名必须输入两到三位汉字） 必填，两到三位汉字 邮件： （请输入正确格式的邮件） 必填 费用： （请输入合法的费用格式，如1.23）     99.   101. 该例子依然是表单验证，在表单每个项中设置validChar属性来记录此文本框中允许输入的字符的正则表达式，设置isRequired属性来记录该项是否为必须的，这些都需要在JavaScript代码中判断，请大家认真阅读程序以及注释。例如表单项“员工号” 中，validChar="\d{4}"表示员工号必须输入4位数字，isRequired="true"表示该项必须输入。更多常用正则表达式详见表2-5。网页浏览结果如图2-21所示。图2-21 表单验证 102. 另外，该程序中，一旦表单项内容出错，则在其后出现红色提示文字，提示性红色文字是否显示通过CSS文件来设置，相应的文件保存为Style.css，文件内容如下。 .feedbackShow{ visibility: visible; } .feedbackHide{ visibility: hidden; }   103. 表2-5 常用正则表达式举例正则表达式举例说明正则表达式举例说 明[A-Za-z]1位字母\d1位0到9的数字[A-Za-z]{n}n位字母\d{n}n位0到9的数字[A-Za-z]{n,}至少n位字母\d{2,6}2-6位数字[A-Za-z]{2,6}2-6位字母\d{n,}至少n位数字[A-Za-z]+1串字母\d+1串数字[A-Za-z0-9]1位字母或数字[\u4E00-\u9FA5]1位汉字[A-Za-z0-9]{n}n位字母或数字[\u4E00-\u9FA5]{n}n位汉字[A-Za-z0-9]{n,}至少n位字母或数字[\u4E00-\u9FA5]{n,}至少n位汉字[A-Za-z0-9]{2,6}2-6位字母或数字[\u4E00-\u9FA5]{2,6}2-6位汉字[A-Za-z0-9]+字母、数字组成的字符串[\u4E00-\u9FA5]+1串汉字-?\d+\.\d+浮点数（正负均可）\d+\.\d+正浮点数-?\d+\.\d{n}保留n位小数的浮点数-\d+\.\d+负浮点数-?\d+\.\d{n,}保留至少n位小数的浮点数-?\d+(\.\d{0,2})*整数或者保留0到2位小数的浮点数电子邮件\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 104. 2.3 小结HTML和JavaScript这两项技术是学习JSP的基础，希望大家对其能够有所了解和掌握。其中HTML更是写好JSP程序的最基础和不可或缺的技术，读者必须能够熟练地制作HTML静态网页，而不仅仅局限于本书介绍内容。而JavaScript作为客户端的脚本语言，在实际项目中的应用也比较多，不过读者没必要记住JavaScript语法的每个细节，能够做到基本读懂就行，在实际需要时可以有目标的在网上查找相关资料。 PPT 图集 相关PPT  第2章 JSP动态网页设计基础  第2章 jsp应用基础  JavaServer Pages (JSP) 网页程序设计  12章 jsp编程基础  第2章-网页样式  第八章 Servlet基础  网页编程基础  第4章 JSP基本语法  jsp基础  第二章 JSP简介