JSP动态网页设计基础.pptVIP

第2章JSP动态网页设计基础,要使用JSP开发出专业的动态网站，首先必须熟练掌握静态网站的制作技术。HTML是在学习JSP之前必须了解的基础知识，很多JSP语法的使用都是建立在HTML文档的基础上。实际开发中，一般都是使用现成的HTML文档来添加JSP的动态脚本并做适当修改，除了特殊的应用，很少从零开始写一个JSP页面，所以读懂HTML文档并了解HMTL语言中的技巧为更快地上手JSP提供了很大的帮助。JavaScript是JSP知识体系中一个可选的知识模块。也就是说不了解JavaScript知识也不会影响JSP的应用开发，但是如果掌握了JavaScript的知识，将可以更加方便地解决网页开发中的某些特定问题，例如经常使用JavaScript判断用户在表单中输入数据的合法性。,本章学习目标：了解HTML与JSP的关系掌握HTML的常用标签能够使用HTML设计基本网页能够使用HTML设计网络中常用的表单了解JavaScript在JSP学习中的作用了解JavaScript的简单应用能够读懂JavaScript程序，并能通过查阅资料了解更多JavaScript应用,2.1HTML快速入门,HTML是HyperTextMarkupLanguage的缩写，中文一般译为“超文本标记语言”。用HTML语言编写的超文本文档称为HTML文档，和一般文档的不同之处是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称为“标签”或者“标记”。HTML文件的后缀名是.html或者.htm。,2.1.1HTML基本结构,.,html文档以标签开始，以标签结束。,文档头以标签开始，以标签结束。,文档体以标签开始，以标签结束。,【例2-1】网页基本结构,我的第一个网页少年不识愁滋味，为赋新词强说愁,步骤1：建立站点根目录新建一个文件夹用于存放网页，比如在F盘创建一个文件夹myweb，在本章我们把它作为站点根目录，读者在做练习时可以自行设定站点根目录。步骤2：编写代码HTML可以使用任何字处理软件来编写，最简单的是Windows自带的记事本。用记事本编写以上代码，标题和网页主体内容可以适当修改。步骤3：保存文件文件名命名为first.html（注意：其中first是自己为文件起的名字，可修改，但扩展名必须为html或者htm），另外注意将“文件类型”改为“所有文件”，如图2-1所示。,图2-1保存html文件,步骤4：浏览网页保存完毕后，在文件夹myweb中可以看到first.html被浏览器识别，双击即可查看网页效果，在IE中浏览效果如图2-2所示，如需要继续编辑，则右键单击选择以记事本打开。,图2-2第一个网页浏览效果,我们回过头分析一下第一个网页，其中的代码由四对标签组成。：表示整个HTML文档的开始和结束，网页的所有内容都位于这两个标签之间。：头部标签，在例子中，头部之间插入一对标题标签。：标题标签，说明该HTML文件的标题是什么，当浏览该文件时，标题显示在浏览器上方的标题栏内。在第一个网页中，我们在标记之间包含的标题是“我的第一个网页”，在图2-2中可以看到它显示在网页的标题栏。：主体标签，页面的主体部分都放在这对标签之间。在第一个网页中，我们在标记之间包含的内容是“少年不识愁滋味，为赋新词强说愁”，在图2-2可以看到这行字显示在网页的主体部分。,2.1.2HTML常用标签,标签可以从大体上分为单标签（没有结束标签）和双标签（有结束标签）两种，根据有没有属性，有以下四种显示方式。.,1.文本,面向大海春暖花开面向大海春暖花开从明天起，做一个幸福的人喂马，劈柴，周游世界从明天起，关心粮食和蔬菜我有一所房子，面向大海，春暖花开,在网页中添加文本非常简单，只需要把要添加的文字输入到和之间。,【例2-2】在网页中输入文字（text.html）。,预览网页，结果如图2-3所示，似乎没有我们预期的结果，这是因为，如果没有标签修饰文本，文字将以无格式的形式显示，（如果浏览器窗口显示不下，则自动换行），要实现分段、不同字体及大小，可以使用标签来修饰文字。,图2-3多行文本的预览,(1)分段排版分段标签主要有“预先格式化标签”、“换行标签”和“段落标签”。预先格式化标签：添加在文本的开始和结尾处。用这个标签括起来的文本，在网页中会按照输入时的格式显示。换行标签：换行标签加在需要换行的位置，当浏览器遇到这个标签时，会自动进行换行。段落标签：段落标签添加在段首和段尾。段落标签和标签的不同之处在于在不同段落之间，多一行空行。段落标签有一个属性align，它用来描述文字的对齐方式，一般值有center、left和right三种，分别表示居中、左对齐和右对齐。,【例2-3】预先格式化标签的使用（pre.html）。,面向大海春暖花开面向大海春暖花开从明天起，做一个幸福的人喂马，劈柴，周游世界从明天起，关心粮食和蔬菜我有一所房子，面向大海，春暖花开,图2-4标签的使用,【例2-4】换行和段落标签的使用（paragraph.html）。,换行标签和段落标签猎人、猎狗一条猎狗将兔子赶出了窝，一直追赶他，追了很久仍没有捉到。牧羊看到此种情景，讥笑猎狗说你们两个之间小的反而跑得快得多。猎狗回答说：你不知道我们两个的跑是完全不同的！我仅仅为了一顿饭而跑，他却是为了性命而跑呀！这话被猎人听到了，猎人想:猎狗说的对啊，那我要想得到更多的猎物。就这样过了一段时间，问题又出现了，大兔子非常难捉到，小兔子好捉，但捉到大兔子得到的奖赏和捉到小兔子得到的骨头差不多，猎狗们善于观察发现了这个窍门，专门去捉小兔子。慢慢的，大家都发现了这个窍门。猎人对猎狗说:最近你们捉的兔子越来越小了，为什么?猎狗们说:反正没有什么大的区别，为什么费那么大的劲去捉那些大的呢?,图2-5段落标签和换行标签的使用,另外，该例子第5行使用到了水平线标签，代码为，其属性color表示水平线的颜色，颜色值设置参考后续内容“字体样式”；属性width表示水平线宽度，单位可以是像素或者百分比，默认为100%；属性size表示水平线高度，单位为像素。,(2)字体样式.对它括起来的文字设置字体样式，它主要有如下属性。face：文字所用的字体size：文字的大小color：文字的颜色另外样式标签可以用来设置粗体、斜体和下划线样式。粗体标签：.斜体标签：.下划线标签：.,【例2-5】设置字体样式（font.html）。,面向大海春暖花开面向大海春暖花开从明天起，做一个幸福的人喂马，劈柴，周游世界从明天起，关心粮食和蔬菜我有一所房子，面向大海，春暖花开,图2-6设置字体样式,在指定网页对象的颜色时，比如字体颜色、背景颜色等，有16种标准颜色可以选择，如表2-1所示。在网页中，除了用颜色名称表示颜色外，还可以用颜色的十六进制值表示，它的形式为#RRGGBB，其中，RR、GG、BB分别表示红、绿、蓝成分所占比例的两位十六进制值。,表2-116种标准颜色,(3)标题一般文章都有标题、章和节等结构，HTML中提供了标题标签、和，中的n表示标题级别，n值越小，标题字号越大。标题标签也是成对出现的。,标题标签的使用一级标题二级标题三级标题四级标题五级标题六级标题正文非标题文字,【例2-6】标题标签的使用（headline.html）。,图2-7标题标签的使用,2.网页背景,网页背景颜色和背景图像都是页面属性，在标签中设置。背景颜色在标签中设置属性bgcolor即可，例如我们要将网页的背景颜色设置为“银色”，只需要在标签中加入一句代码bgcolor=sliver或者bgcolor=#0c0c0c。,【例2-7】设置网页背景颜色（bgcolor.html）。,设置网页背景颜色面向大海春暖花开从明天起，做一个幸福的人喂马，劈柴，周游世界从明天起，关心粮食和蔬菜我有一所房子，面向大海，春暖花开,图2-8网页背景颜色设置,(2)背景图像要设置背景图像，首先我们选好一副图像bg001.jpg，接下来要把图像放入站点中。还记得我们先前创建的站点的路径是F:myweb，现在在站点中新建一个文件夹images，用于存放图片，创建好以后将图像bg001.jpg置于其中。设置背景图像的一般形式为：图像路径一般使用相对路径，即它相对于html文档的路径，bg001.jpg相对于保存于F:myweb路径下的网页文档background.html的路径为images/bg001.jpg。在设置背景图像时，如果该图像的大小不能够占满整个浏览器页面，它们会自动进行拼接。,【例2-8】设置页面背景图像（background.html）。,设置背景图像这天，小猪唏哩呼噜和小伙伴们，在商店买了许多鞭炮。因为今天是小白兔的生日。他们要放鞭炮来祝贺它的生日.小伙伴们高高兴兴的一起唱着歌，往小白兔的家走去。这时，小猪看见一只特别美丽的蝴蝶，就轻手轻脚的朝蝴蝶走去。小蝴蝶仿佛像看见小猪一样。挥动着美丽的翅膀，朝森林里飞去。小猪唏哩呼噜紧追不舍，一会就和大家走散了。小猪也没注意到前面是森林，结果和伙伴们越走越远。他迷了路。小猪赶忙往回走，可是怎么也找不到回去的路了。,图2-9设置网页背景图像,3.图像,适当的应用图像可以使网页变得赏心悦目，充满吸引力，网页中可以加入的图像格式有jpeg、gif和png。网页中插入图像的标签是，它是一个单标签。并不是真正的把图片加入到HTML文件中，而是通过一个路径告诉浏览器图像在哪里。其基本语法格式为：这里图像路径一般也使用相对路径，即图像文件相对于html文档的路径，的常用属性见表2-2。,表2-2标签的常用属性,【例2-9】在网页中加入图像（image.html）。,图像应用在海边,我捡起一枚小小的贝壳。贝壳很小,却非常坚硬和精致。回旋的花纹中间有着色泽或深或浅的小点,如果仔细观察的话,在每个小点周围又有自成一圈的复杂图样。怪不得古时候的人要用贝壳来做钱币,在我手心里躺着实在是一件艺术品,是舍不得拿去和别人交换的宝贝啊!在海边捡起这一枚贝壳的时候,里面曾经居住过的小小的柔软的肉体早已死去,在阳光,沙粒和海浪的淘洗之下,贝壳中生命所留下的痕迹已完全消失了。但是,为了这样一个短暂,微小的生命,为了这样一个脆弱,卑微的生命,上仓给它制作居所时却是多精致,多仔细,多么地一丝不苟啊!比起贝壳里的生命来,我在这世间能停留的时间和空间是不是更长和更多一点呢?是不是也应该用我的能力把我所能做到的事情做得更精致,更仔细,更加一丝不苟呢?请让我也能留下一些令人珍惜,令人惊叹的东西吧。在千年之后,也许会有人对我留下的痕迹反复观看,反复把玩,并且会忍不住轻轻地叹息:这是一颗怎样固执又怎样简单的心啊!,下面，我们要在网页中加入图像shell.jpg。当然首先我们要将图像置入F:htmlimages中，然后在网页中加入。,图2-10在网页中加入图像,4.超链接,超级链接（HyperLink）习惯上被称为超链接。给网页上的文本或图像设置超链接，可以使得从源点跳到目标点。基本语法文字或图像语法说明在HTML文件中，超链接目标可以分为内部链接和外部链接。所谓内部链接：指网站内部文件之间的链接，此类链接的地址一般使用相对地址，即链接目标文件相对于该网页文件的路径地址。所谓外部链接，指网站内的文件链接到站点外文件的链接，外部链接一般使用绝对地址，比如链接到新浪，地址就是）。链接的源点可以是文字或者图像。另外，比较特殊是在网页上添加一个电子邮件链接。添加电子邮件链接，只需要在希望链接的电子邮件地址的文字前后分别加上和即可。在浏览网页时，点击链接文字就可以打开本机上默认的电子邮件收发软件。,【例2-10】超链接（link.html）。,超链接杂草与庄稼一位哲学家带着他的弟子游学世界。在游历了许多国家，拜访了许多著名的学府之后，个个满腹经纶的他们回到了出发地。进城之前，哲学家和他的弟子在郊外的一片草地上坐了下来。哲学家说：“在你们结束学业的时候，今天我们上最后一课。你们看，在我们周围的旷野里，长满了野草，现在我想知道的是如何铲除这些野草？”针对老师的提问，弟子们非常惊愕。他们都没有想到，一直在探讨人生奥妙的哲学家，最后一课问的竟是这么一个简单的问题。一个弟子首先开口：“老师，只要有一把铲刀就够了。”哲学家点点头。“用火烧也是很好的办法。”“撒上石灰，可以铲掉所有的野草。”“斩草除根，只要把根挖出来就行。”等弟子都讲完了，哲学家站起来说：“课就上到这里，你们回去后，各按照自己的办法除去一片杂草。没有除掉的，一年后的今天再来相聚。”一年后，他们都来了。不过他们发现原来相聚的地方不再是杂草丛生，而是一片长满谷子的庄稼地。他们来到去年就坐的地方未见到哲学家，却发现一张纸条，上面写着：“要想铲除旷野里的杂草，最好的方法就是让庄稼长势良好。同样，要想让灵魂无纷扰，惟一的方法就是用美德去占据它。”文章来源:文章阅读网欣赏更多美文：好好活着美图：蒲公英联系我们,图2-11在网页中加入链接,第一个链接，链接源点为图像crops.gif，目标点为图像crops2.gif，这两幅图像都存储在F:mywebimages中。第二个链接文章阅读网，链接源点为文字“文字阅读网”，目标点为外部网址“”。第三个链接美文：好好活着，链接源点为文字“美文：好好活着”，目标点为F:myweb中的内部网页life.html。第四个链接美图：蒲公英，链接源点为文字“美图：蒲公英”，目标点为F:mywebimages中的图像dandelion.jpg。第五个链接联系我们为电子邮件链接。链接属性中target=_blank表示在新窗口中打开链接目标。如果没有设置目标属性或者设置为target=_self，都会在当前窗口打开链接。,5.表格,表格是网页中最常使用的排版方法，是HTML中的重点，在这里我们只简单介绍一下表格。表格所涉及的标签有“表格标签”、“行标签”和“单元格标签”。：表格标签，表示一个表格的开始和结束。：行标签，成对出现，包含在表格标签之间，有几对行标签说明该表格有几行。：单元格标签，成对出现，包含在行标签之间，有几对单元格标签说明该行有几个单元格，另外是特殊的单元格，表示该单元格为标题即表头。,表2-3表格相关标签的属性,【例2-11】表格示例（table.html）。,表格应用成绩单学号姓名JSP程序设计程序设计计算机网络200703001张小凡907882200703002王于飞678075200703003李天雨627555,图2-12表格应用,6.框架,框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架主要包括两个部分，框架集（frameset）和框架（frame）。框架集是在一个文档内定义一组框架结构的HTML网页，框架集中定义了在一个窗口中显示的框架数、框架尺寸、载入到框架的网页等；而框架则是指在网页上定义的一个显示区域。是框架集标签，通过标签定义每一个框架。框架集的基本页面代码如下：,.,的属性src表示嵌入该框架的网页文件的路径，一般也使用相对路径；name表示该框架的名称。使用的rows和cols属性可以设置浏览器分为几个框架，我们通过下面的例子来具体说明。,【例2-12】框架示例（framset.html）。,框架应用,图2-13框架应用,在该例子中浏览器被划分为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。另在.标签内的内容将只出现在不支持框架的浏览器中。,在该例子中浏览器被划分为3个区域，即分为3个框架，如图2-13，整个浏览器页面被首先分为上下两个区域，上边区域是一个框架，而下面区域又被划分为左右两个框架。除了上述文件，为了体现框架的作用，我们在left.html上添加了两个链接，left.html代码如下。,第一回崖顶疑阵,第二回江南七怪”设置链接，链接目标main2.html，特别注意其中target=mainFrame表明在名称为mainFrame的框架即右侧主框内打开链接目标。点击该链接后效果如图2-14所示，同样的方法，我们可以在left.html的各段文字上设置链接分别打开不同页面，在此省略。,图2-14框架链接应用,2.1.3表单,表单是网页中提供的一种交互式操作手段，在网页中的使用十分广泛。无论是提交搜索的信息，还是网上注册等都需要使用表单。用户可以通过提交表单信息与服务器进行动态交流。表单主要可以分为两部分：一是HTML源代码描述的表单；二是提交后的表单处理，需要调用服务器端编写好的JSP等代码对客户端提交的信息作出回应。该部分仅讲述HTML源代码描述的表单。,在HTML中，在需要使用表单的地方插入成对的表单标签即可。基本语法,表单项、文字、图片等,其中，属性name表示表单的名称；action用来指定接纳表单数据的JSP页面或者SERVLET，如果该属性为空则提交给当前页面；method属性指定传输方式，可以选择post或get（在7.5节详细介绍两者的区别）；enctype属性指定传送数据的编码方式，缺省值是application/x-url-encoded，利用表单上传文件时，需要改变编码方式，此时需要配合“post”方法。表单最重要的作用是获取用户信息，这就需要在表单中加入表单项（控件），例如文本框、单选按钮等，常用的表单项如表2-4所示。,表2-4常见表单项,(1)单行文本框单行文本框允许用户输入一些简短的单行信息，例如用户姓名、住址等。其基本语法如下所示：name：设定文本框的名称，数据交互中会用到size：设定此文本框显示的宽度value：设定此文本框的预设内容maxlength：设定此文本框输入的最大长度,(2)密码框密码框主要用于一些保密信息的输入，例如密码。其基本语法如下所示：密码文本框用法基本与单行文本框一样，其属性也类似于单行文本框，在此不予重复。,(3)提交按钮通过提交按钮可以将表单里的信息提交给表单action所指向的文件地址。其基本语法如下所示：name：设定提交按钮的名称value：设定按钮上显示的文本，默认为“提交”。,(4)图片提交“图片提交”作用和“提交按钮”相同，不同的是“图片提交”以一个图片作为表单的提交按钮，其中src属性表示图片的路径。其基本语法如下所示：name：设定提交图片的名称src：图像路径，一般使用相对路径alt：鼠标经过图像或者图像不显示时的替换文本width和height：设定图像的宽度和高度示例：,图2-15图片提交示例,(5)重置按钮重置按钮是表单中另外一个比较常用的按钮，其作用是重置用户填写的信息。其基本语法如下所示：name：设定提交按钮的名称value：设定按钮上显示的文本，默认为“重置”。,(6)普通按钮另外，表单中经常用到普通按钮，它没有默认的动作，有时需要利用JavaScript来做一些特殊的效果时使用。其基本语法如下所示：除了按钮的显示文字外，可以在按钮上添加很多效果，特别是单击按钮后发生的事件等，如图2-16所示是一个单击后会有对话框提示的按钮，下面是对应的HTML源代码。,图2-16按钮示例,(7)隐藏元素隐藏元素多用于在提交表单时向服务器传递一些不需要用户设定但程序必需的参数值。这在动态网页中的需求更加明显。基本语法如下所示：隐藏元素一般位于标签内，在表单提交时一同被发送给服务器端，下面是一个隐藏元素的使用示例，功能是在表单提交时，将用户的IP地址和用户所在的地区传送给服务器端，这种数据传递用户往往是没有发觉的。,(8)单选按钮单选按钮通常是给出几个选项供用户选择，一次只能从中选一个，应用单选按钮时要确定显示给用户的文字和不同选项的取值。其基本语法如下所示：value：设定此单选按钮的选定值checked：当该项默认被选中时设定，否则不设定。,(9)复选框复选框通常是给出几个选项供用户选择，并且可以从中选择多个，使用复选框时也要确定显示给用户的文字和不同选项的取值。其基本语法如下所示：value：设定此复选框的选定值checked：当该项默认被选中时设定，否则不设定。,(10)文件域文件域是用来填写文件路径，通过表单上传文件的地方。,(11)下拉列表下拉列表是表单中供用户选择的一个表单项，列表框可以显示多个选项供选择，且用户能同时选择其中的一个或多个。列表框中包含标签。其基本语法如下所示：,name：设定下拉列表的名称size：设定下拉列表显示选项的个数multiple：设定此下拉列表可多选，如果为单选则省略该项value：的属性，当选择该项时的值,(12)多行文本框多行文本框用来输入较多的文字信息，常在新闻发布与论坛等系统中用到。其基本语法如下所示：rows：文本框显示的行数cols：文本框显示的列数使用多行文本框时主要是确定它的名称以及大小(行数与列数)，当用户输入的文字超过显示容量时，多行文本框会自动产生滚动条。,【例2-13】表单应用（form.html）。,表单应用会员注册用户名：密码：确认密码：,性别：男女爱好：体育音乐文学其它所在城市：北京上海天津重庆,照片：备注：,图2-17表单示例,2.1.4XML与XHTML,XML（ExtensibleMarkupLanguage）即可扩展标记语言，它与HTML一样，都是SGML(StandardGeneralizedMarkupLanguage，标准通用标记语言)。XML是Internet环境中跨平台的、依赖于内容的技术，是当前处理结构化文档信息的有力工具。XML是一种简单的数据存储语言，使用一系列简单的标签描述数据，而这些标签可以很方便的建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单并易于掌握和使用。XML是一种元标签语言，没有许多固定的标签，为Web开发人员提供了更多了灵活性。当使用HTML时，标签只是简单地表示内容的显示形式，而与表示的内容没有任何关联，为文档的进一步处理带来极大的不便。,1.XML,比如要表示个人简历，用HTML的表示方式如下（文件名resume.html）：,姓名性别出生日期专业张三男1991.8.12软件开发,上述html文件无法从标签、等得知其内容表示什么，如果用XML，相应的文档（文件名resume.xml）就可以写成如下形式：,张三男1991.8.12软件开发,这里，version规定了XML文档的版本，encoding规定了XML文档的编码类型，此处取值gb2312表示简体中文。对比两个例子，使用XML可以做到自定义标签，用标签表明内容的含义。这就为在网络上交流资料时用计算机处理文档提供了极大的方便，也增加了源文件的可读性。,当然resume.xml能以表格形式运行的前提是必须自定义好形式，定义其显示形式的文件如下（文件名resume.xsl，在xml文件的第二行引入了该xsl文件）：,姓名性别生日专业,XSL之于XML，就像CSS之于HTML。它是指可扩展样式表语言(ExtensibleStylesheetLanguage)，这是一种用于以可读格式呈现XML数据的语言。有了resume.xsl定义显示形式，文件resume.xml在浏览器中显示的形式和resume.xml形式相同（如图2-18所示），不过它给程序员提供了更大的灵活性，也更易于数据交换。,图2-18浏览xml文件,2.XHTML,可扩展超文本标记语言（eXtensibleHyperTextMarkupLanguage，XHTML），与超HTML类似，不过语法上更加严格。HTML语法要求比较松散，这样对网页编写者来说比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML，XHTML1.0在2000年1月26日成为W3C的推荐标准。和CSS（CascadingStyleSheets，层叠式样式表）结合后，XHTML能发挥真正的威力；这在实现样式和内容分离的同时，又能有机地组合网页代码，在另外的单独文件中，还可以混合各种XML应用。,从HTML到XHTML过渡的变化比较小，主要是为了适应XML，最大的变化在于文档必须是良构的，具体变化如下。所有的标签都必须要有一个相应的结束标签。在HTML中，可以有开放标签，例如标签可以省略其对应的和，但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个/来关闭它，例如。所有标签的元素和属性的名字都必须使用小写。所有的属性必须用引号括起来。在HTML中，属性值可加双引号，也可以不加，但是在XHTML中，属性必须被加引号。例如必须修写为：。,所有的XHTML标签都必须合理嵌套。XHTML要求所有的嵌套都必须按顺序，也就是说，一层一层的嵌套必须是严格对称，不能出现交叉。例如.就是错误的，而.才是合法的。把所有）不是标签的一部分，都必须被编码为（）。给所有属性赋一个值。XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如必须修改为。不能在注释内容中使用“-”。“-”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如是无效的。图像必须有替代文字。每个图像标签都必须有alt说明文字。例如：。,2.2JavaScript技术,JavaScript是由Netscape公司开发的一种网页的脚本编程语言，它支持客户端与服务器端的应用程序以及构件的开发。JavaScript是一种解释性的语言，它的基本结构形式与其他编程语言相似，需要先编译后执行。,2.2.1JavaScript语法,运算符运算符就是完成操作的一系列符号，它有七类：赋值运算符（=，+=，-=，*=，/=，%=，=，|=，变量有它的类型，上例中username的类型为string（字符串），JavaScript支持的常用类型还有：object（对象）、array（数组）、number（数）、boolean（布尔值）、null（一个空值）和undefined（没有定义和赋值的变量）。实际上JavaScript的变量是弱变量类型，你赋值给它的是字符串，它就是String类型，赋给数字它就是整型。赋给true和false它就是boolean型。,2.2.2JavaScript使用方式,JavaScript加入网页有两种方法：直接加入到网页中引用方式,这是最常用的方法，大部分含有JavaScript的网页都采用这种方法。,直接加入到网页中,用来告诉浏览器这是用JavaScript编写的程序（W3C已经建议使用新的标准：)。HTML的注释标签：用来去掉浏览器所不能识别的JavaScript源代码，这对不支持JavaScript语言的浏览器来说是很有用的。“/-Javascript结束”中双斜杠表示JavaScript的注释部分。至于程序中所用到的document.write()函数则表示将括号中的文字输出到窗口中去。另外一点需要注意的是的位置并不是固定的，可以包含在.或.中的任何地方，甚至是.标签之外。,如果已经存在一个JavaScript源文件（通常以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。在网页中调用JavaScript源文件的基本格式如下：,引用方式,其中url就是JavaScript源文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。例如要实现前文“直接插入方式”中所举例子的效果，可以首先创建一个JavaScript源代码文件“script.js”，其内容如下：document.write(这是Javascr