第2章--jsp动态网页设计基础

《第2章--jsp动态网页设计基础》由会员分享，可在线阅读，更多相关《第2章--jsp动态网页设计基础（123页珍藏版）》请在金锄头文库上搜索。

1、第2章 JSP动态网页设计基础,要使用JSP开发出专业的动态网站，首先必须熟练掌握静态网站的制作技术。HTML是在学习JSP之前必须了解的基础知识，很多JSP语法的使用都是建立在HTML文档的基础上。实际开发中，一般都是使用现成的HTML文档来添加JSP的动态脚本并做适当修改，除了特殊的应用，很少从零开始写一个JSP页面，所以读懂HTML文档并了解HMTL语言中的技巧为更快地上手JSP提供了很大的帮助。 JavaScript是JSP知识体系中一个可选的知识模块。也就是说不了解JavaScript知识也不会影响JSP的应用开发，但是如果掌握了JavaScript的知识，将可以更加方便地解决网页开

2、发中的某些特定问题，例如经常使用JavaScript判断用户在表单中输入数据的合法性。,本章学习目标： 了解HTML与JSP的关系 掌握HTML的常用标签 能够使用HTML设计基本网页 能够使用HTML设计网络中常用的表单 能够使用简单的CSS控制页面样式 了解JavaScript在JSP学习中的作用 了解JavaScript的简单应用 能够读懂JavaScript程序，并能通过查阅资料了解更多JavaScript应用,2.1 HTML快速入门,HTML是Hyper Text Markup Language的缩写，中文一般译为“超文本标记语言”。 用HTML语言编写的超文本文档称为HTML文档

3、，和一般文档的不同之处是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称为“标签”或者“标记”。 HTML文件的后缀名是.html或者.htm。,2.1.1 HTML5 基本结构,. ,html文档以标签开始，以标签结束。,文档头以标签开始，以标签结束。,文档体以标签开始，以标签结束。,文档类型。,【例2-1】网页基本结构,我的第一个网页众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。,步骤1：建立站点根目录新建一个文件夹用于存放网页，比如在F盘创建一个文件夹myweb，在本章我们把它作为站点根目录，读者在做练习时可以自行设定站点根目录。 步骤2：编写代码HTML可以使用任何字处理

4、软件来编写，最简单的是Windows自带的记事本。用记事本编写以上代码，标题和网页主体内容可以适当修改。 步骤3：保存文件文件名命名为first.html（注意：其中first是自己为文件起的名字，可修改，但扩展名必须为html或者htm），另外注意将“文件类型”改为“所有文件”，如图2-1所示。,图2-1 保存html文件,步骤4：浏览网页保存完毕后，在文件夹myweb中可以看到first.html被浏览器识别，双击即可查看网页效果，在IE中浏览效果如图2-2所示，如需要继续编辑，则右键单击选择以记事本打开。,图2-2 第一个网页浏览效果,我们回过头分析一下第一个网页，其中的代码由四对标签组

5、成。 ：表示整个HTML文档的开始和结束，网页的所有内容都位于这两个标签之间。 ：头部标签，在例子中，头部之间插入一对标题标签。 ：标题标签，说明该HTML文件的标题是什么，当浏览该文件时，标题显示在浏览器上方的标题栏内。在第一个网页中，我们在标记之间包含的标题是“我的第一个网页”，在图2-2中可以看到它显示在网页的标题栏。 ：主体标签，页面的主体部分都放在这对标签之间。在第一个网页中，我们在标记之间包含的内容是“少年不识愁滋味，为赋新词强说愁”，在图2-2可以看到这行字显示在网页的主体部分。,2.1.2 HTML常用标签,标签可以从大体上分为单标签（没有结束标签）和双标签（有结束标签）两种，

6、根据有没有属性，有以下四种显示方式。 .,1. 文本,青玉案元夕东风夜放花千树， 更吹落，星如雨。 宝马雕车香满路。 凤箫声动，玉壶光转，一夜鱼龙舞。蛾儿雪柳黄金缕， 笑语盈盈暗香去。 众里寻他千百度， 蓦然回首，那人却在，灯火阑珊处。,在网页中添加文本非常简单，只需要把要添加的文字输入到和之间。,【例2-2】在网页中输入文字（text.html）。,预览网页，结果如图2-3所示，似乎没有我们预期的结果，这是因为，如果没有标签修饰文本，文字将以无格式的形式显示，（如果浏览器窗口显示不下，则自动换行），要实现分段可以使用标签来修饰文字，但是HTML5不再有用于修饰文本字体、大小和颜色的标签，而改

7、由CSS来实现这些。,图2-3 多行文本的预览,(1) 分段排版 分段标签主要有“预先格式化标签”、“换行标签”和“段落标签”。 预先格式化标签：添加在文本的开始和结尾处。用这个标签括起来的文本，在网页中会按照输入时的格式显示。 换行标签：换行标签加在需要换行的位置，当浏览器遇到这个标签时，会自动进行换行。 段落标签：段落标签添加在段首和段尾。值得注意的是在HTML5中标签不再保留属性align。段落标签和标签的不同之处在于在不同段落之间，多一行空行。,【例2-3】预先格式化标签的使用（pre.html）。,青玉案 元夕东风夜放花千树， 更吹落，星如雨。 宝马雕车香满路。 凤箫声动，玉壶光转，

8、一夜鱼龙舞。蛾儿雪柳黄金缕， 笑语盈盈暗香去。 众里寻他千百度， 蓦然回首，那人却在，灯火阑珊处。,图 2-4 标签的使用,【例2-4】换行和段落标签的使用（paragraph.html）。,换行标签和段落标签老木匠的房子有个老木匠准备退休，回家与妻子儿女享受天伦之乐。 老板舍不得他的好工人走， “这是你的房子，”他说，“我送给你的礼物。” 他震惊得目瞪口呆，。,图2-5 段落标签和换行标签的使用,(2)强调文本有些时候，我们会希望对某些文本进行必要的强调，或者标记出需要在CSS中强调的文本。 粗体标签：. 斜体标签：.,【例2-5】强调文本（empha.html）。,青玉案元夕青玉案元夕为南

9、宋著名词人辛弃疾所作，词从极力渲染元宵节绚丽多彩的热闹场面入手，反衬出一个孤高淡泊、超群拔俗、不同于金翠脂粉的女性形象，寄托着作者政治失意后，不愿与世俗同流合污的孤高品格。,图2-6 强调文本,(3) 标题文本一般文章都有标题、章和节等结构，HTML中提供了标题标签、和，中的n表示标题级别，n值越小，标题字号越大。标题标签也是成对出现的。,标题标签的使用一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 正文非标题文字,【例2-6】标题标签的使用（headline.html）。,图2-7 标题标签的使用,2. 图像,适当的应用图像可以使网页变得赏心悦目，充满吸引力，网页中可以加入的图像

10、格式有jpeg、gif和png。 网页中插入图像的标签是，它是一个单标签。并不是真正的把图片加入到HTML文件中，而是通过一个路径告诉浏览器图像在哪里。其基本语法格式为：这里图像路径一般也使用相对路径，即图像文件相对于html文档的路径，的常用属性见表2-1。,表2-1标签的常用属性,【例2-7】在网页中加入图像（image.html）。,图像应用牵牛花属于旋花科牵牛属，.。 ,下面，我们要在网页中加入图像flower1.jpg、flower2.jpg和flower3.jpg。当然首先我们要将图像置入D:ch02images中，然后在网页中加入，加入其它几幅图像方法类似。,图2-8 在网页中加

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

12、即可。在浏览网页时，点击链接文字就可以打开本机上默认的电子邮件收发软件。,【例2-8】超链接（link.html）。,超链接汉宫春 立春日 春已归来，看美人头上，袅袅春幡。 无端风雨，未肯收尽余寒。 年时燕子，料今宵梦到西园。 浑未办黄柑荐酒，更传青韭堆盘却笑东风从此，便薰梅染柳，更没些闲。 闲时又来镜里，转变朱颜。 清愁不断，问何人会解连环？ 生怕见花开花落，朝来塞雁先还。文字来源:百度百科 辛弃疾的其它作品 青玉案 元夕 丑奴儿 书博山道中壁 文中配图联系我们,图2-9 在网页中加入链接,第1个链接 ，链接源点为图像han1.jpg，目标点为图像han2.jpg，这两幅图像都存储在D:ch

13、02images中。 第2个链接百度百科，链接源点为文字“百度百科”，目标点为外部网址“http:/”。 第3个链接青玉案 元夕，链接源点为文字“青玉案 元夕”，目标点为D:ch02中的内部网页pre.html。 第4个链接丑奴儿 书博山道中壁，链接源点为文字“丑奴儿 书博山道中壁”，目标点为D:ch02images中的word文档“chounuer.doc”。 第5个链接文中配图，链接源点为文字“文中配图”，目标点为D:ch02images中的图像“han2.jpg”。 第6个链接联系我们为电子邮件链接。 链接属性中target=“_blank“表示在新窗口中打开链接目标。如果没有设置目标属

14、性或者设置为target=“_self“，则在当前窗口打开链接。,4. 表格,表格曾经是网页中最常使用的排版方法，DIV+CSS排版布局方法出现后，表格更多的用来显示各种数据，在这里我们只简单介绍一下表格。 表格所涉及的标签有“表格标签”、“行标签”和“单元格标签”。 ：表格标签，表示一个表格的开始和结束。 ：行标签，成对出现，包含在表格标签之间，有几对行标签说明该表格有几行。 ：单元格标签，成对出现，包含在行标签之间，有几对单元格标签说明该行有几个单元格，另外是特殊的单元格，表示该单元格为标题即表头。,表2-2 表格相关标签的属性,表格的三个标签在HTML4之前有很多属性，在HTML5中基本

15、都不再支持，表2-2给出了HTML5的属性。,【例2-9】表格示例（table.html）。,表格应用学生登记表 学号姓名年龄专业照片201303001张小凡18软件开发201303002碧瑶17计算机多媒体技术201303003陆雪琪16计算机应用,图2-10 表格应用,2.1.3 表单,表单是网页中提供的一种交互式操作手段，在网页中的使用十分广泛。无论是提交搜索的信息，还是网上注册等都需要使用表单。用户可以通过提交表单信息与服务器进行动态交流。表单主要可以分为两部分：一是HTML源代码描述的表单；二是提交后的表单处理，需要调用服务器端编写好的JSP等代码对客户端提交的信息作出回应。该部分仅

16、讲述HTML源代码描述的表单。,在HTML中，在需要使用表单的地方插入成对的表单标签即可。 基本语法, 表单项、文字、图片等 ,其中，属性name表示表单的名称；action用来指定接纳表单数据的JSP页面或者SERVLET，如果该属性为空则提交给当前页面；method属性指定传输方式，可以选择post或get（在7.5节详细介绍两者的区别）；enctype属性指定传送数据的编码方式，缺省值是application/x-url-encoded，利用表单上传文件时，需要改变编码方式，此时需要配合“post”方法。 表单最重要的作用是获取用户信息，这就需要在表单中加入表单项（控件），例如文本框、单选按钮等，常用的表单项如表2-3所示。,表2-3 常见表单项,1. 常用表单项,(1) 单行文本框单行文本框允许用户输入一些简短的单行信息，例如用户姓名、住址等。其基本语法如下所示：name：设定文本框的名称，数据交互中会用到 size：设定此文本框显示的宽度 value：设定此文本框的预设内容 maxlength：设定此文本框输入的最大长度,