第2章JSP动态网页设计基础.

第2章JSP动态网页设计基础•要使用JSP开发出专业的动态网站，首先必须熟练掌握静态网站的制作技术。HTML是在学习JSP之前必须了解的基础知识，很多JSP语法的使用都是建立在HTML文档的基础上。实际开发中，一般都是使用现成的HTML文档来添加JSP的动态脚本并做适当修改，除了特殊的应用，很少从零开始写一个JSP页面，所以读懂HTML文档并了解HMTL语言中的技巧为更快地上手JSP提供了很大的帮助。•JavaScript是JSP知识体系中一个可选的知识模块。也就是说不了解JavaScript知识也不会影响JSP的应用开发，但是如果掌握了JavaScript的知识，将可以更加方便地解决网页开发中的某些特定问题，例如经常使用JavaScript判断用户在表单中输入数据的合法性。本章学习目标：–了解HTML与JSP的关系–掌握HTML的常用标签–能够使用HTML设计基本网页–能够使用HTML设计网络中常用的表单–能够使用简单的CSS控制页面样式–了解JavaScript在JSP学习中的作用–了解JavaScript的简单应用–能够读懂JavaScript程序，并能通过查阅资料了解更多JavaScript应用2.1HTML快速入门•HTML是HyperTextMarkupLanguage的缩写，中文一般译为“超文本标记语言”。用HTML语言编写的超文本文档称为HTML文档，和一般文档的不同之处是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称为“标签”或者“标记”。HTML文件的后缀名是.html或者.htm。2.1.1HTML5基本结构!DOCTYPEhtmlhtmlhead.../headbody.../body/htmlhtml文档以html标签开始，以/html标签结束。文档头以head标签开始，以/head标签结束。文档体以body标签开始，以/body标签结束。文档类型。【例2-1】网页基本结构!DOCTYPEhtmlhtmlheadtitle我的第一个网页/title/headbody众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。/body/html•步骤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：表示整个HTML文档的开始和结束，网页的所有内容都位于这两个标签之间。•head…/head：头部标签，在例子中，头部之间插入一对标题标签。•title…/title：标题标签，说明该HTML文件的标题是什么，当浏览该文件时，标题显示在浏览器上方的标题栏内。在第一个网页中，我们在title…/title标记之间包含的标题是“我的第一个网页”，在图2-2中可以看到它显示在网页的标题栏。•body…/body：主体标签，页面的主体部分都放在这对标签之间。在第一个网页中，我们在body…/body标记之间包含的内容是“少年不识愁滋味，为赋新词强说愁”，在图2-2可以看到这行字显示在网页的主体部分。2.1.2HTML常用标签标签可以从大体上分为单标签（没有结束标签）和双标签（有结束标签）两种，根据有没有属性，有以下四种显示方式。•标签…/标签•标签属性1=值1属性2=值2….../标签•标签•标签属性1=值1属性2=值2…1.文本!DOCTYPEhtmlhtmlheadtitle青玉案•元夕/title/headbody东风夜放花千树，更吹落，星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。蛾儿雪柳黄金缕，笑语盈盈暗香去。众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。/body/html•在网页中添加文本非常简单，只需要把要添加的文字输入到body和/body之间。【例2-2】在网页中输入文字（text.html）。•预览网页，结果如图2-3所示，似乎没有我们预期的结果，这是因为，如果没有标签修饰文本，文字将以无格式的形式显示，（如果浏览器窗口显示不下，则自动换行），要实现分段可以使用标签来修饰文字，但是HTML5不再有用于修饰文本字体、大小和颜色的font标签，而改由CSS来实现这些。图2-3多行文本的预览(1)分段排版•分段标签主要有“预先格式化标签”pre…/pre、“换行标签”br和“段落标签”p…/p。•预先格式化标签pre…/pre：添加在文本的开始和结尾处。用这个标签括起来的文本，在网页中会按照输入时的格式显示。•换行标签br/：换行标签加在需要换行的位置，当浏览器遇到这个标签时，会自动进行换行。•段落标签p…/p：段落标签添加在段首和段尾。值得注意的是在HTML5中p标签不再保留属性align。段落标签和br/标签的不同之处在于在不同段落之间，多一行空行。【例2-3】预先格式化标签的使用（pre.html）。!DOCTYPEhtmlhtmlheadtitle青玉案元夕/title/headbodypre东风夜放花千树，更吹落，星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。蛾儿雪柳黄金缕，笑语盈盈暗香去。众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。/pre/body/html图2-4pre…/pre标签的使用【例2-4】换行和段落标签的使用（paragraph.html）。!DOCTYPEhtmlhtmlheadtitle换行标签和段落标签/title/headbodyp老木匠的房子/phr/p有个老木匠准备退休，回家与妻子儿女享受天伦之乐。br/老板舍不得他的好工人走，……br/“这是你的房子，”他说，“我送给你的礼物。”/pp他震惊得目瞪口呆，……。/p/body/html图2-5段落标签和换行标签的使用(2)强调文本有些时候，我们会希望对某些文本进行必要的强调，或者标记出需要在CSS中强调的文本。•粗体标签：b.../b•斜体标签：i.../i【例2-5】强调文本（empha.html）。!DOCTYPEhtmlhtmlheadtitle青玉案•元夕/title/headbodyb《青玉案•元夕》/b为南宋著名词人b辛弃疾/b所作，词从极力渲染元宵节绚丽多彩的热闹场面入手，反衬出一个i孤高淡泊、超群拔俗/i、不同于金翠脂粉的女性形象，寄托着作者政治失意后，不愿与世俗同流合污的孤高品格。/body/html图2-6强调文本(3)标题文本一般文章都有标题、章和节等结构，HTML中提供了标题标签h1、h2、h3、h4、h5和h6，hn中的n表示标题级别，n值越小，标题字号越大。标题标签也是成对出现的。!DOCTYPEhtmlhtmlheadtitle标题标签的使用/title/headbodyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6正文非标题文字/body/html【例2-6】标题标签的使用（headline.html）。图2-7标题标签的使用2.图像•适当的应用图像可以使网页变得赏心悦目，充满吸引力，网页中可以加入的图像格式有jpeg、gif和png。•网页中插入图像的标签是img，它是一个单标签。img并不是真正的把图片加入到HTML文件中，而是通过一个路径告诉浏览器图像在哪里。其基本语法格式为：imgsrc=图像路径/•这里图像路径一般也使用相对路径，即图像文件相对于html文档的路径，img的常用属性见表2-1。属性说明src图像文件的路径，一般使用图像文件相对于网页文档的相对路径alt图像的说明文字，在网页不能正常显示时出现该文字，另外在浏览器中，当鼠标经过并短暂停留时，也会显示出该说明文字。width和height图像的高度和宽度，单位是像素，默认为图像的实际大小表2-1img标签的常用属性【例2-7】在网页中加入图像（image.html）。!DOCTYPEhtmlhtmlheadtitle图像应用/title/headbodyimgsrc=images/flower1.jpgalt=牵牛花width=300height=225/imgsrc=images/flower2.jpgalt=牵牛花width=300height=225/imgsrc=images/flower3.jpgalt=牵牛花width=300height=225/hr/牵牛花属于旋花科牵牛属，…….。/body/html下面，我们要在网页中加入图像flower1.jpg、flower2.jpg和flower3.jpg。当然首先我们要将图像置入D:\ch02\images中，然后在网页中加入imgsrc=images/flower1.jpgalt=牵牛花width=300height=225/，加入其它几幅图像方法类似。图2-8在网页中加入图像3.超链接超级链接（HyperLink）习惯上被称为超链接。给网页上的文本或图像设置超链接，可以使得从源点跳到目标点。•基本语法ahref=链接目标地址文字或图像/a•语法说明在HTML文件中，超链接目标可以分为内部链接和外部链接。所谓内部链接：指网站内部文件之间的链接，此类链接的地址一般使用相对地址，即链接目标文件相对于该网页文件的路径地址。所谓外部链接，指网站内的文件链接到站点外文件的链接，外部链接一般使用绝对地址，比如链接到新浪，地址就是）。链接的源点可以是文字或者图像。另外，比较特殊是在网页上添加一个电子邮件链接。添加电子邮件链接，只需要在希望链接的电子邮件地址的文字前后分别加上ahref=mailto:电子邮件地址和/a即可。在浏览网页时，点击链接文字就可以打开本机上默认的电子邮件收发软件。【例2-8】超链接（link.html）。!DOCTYPEhtmlhtmlheadtitle超链接/title/headbodyp汉宫春立春日br/br/春已归来，看美人头上，袅袅春幡。br/无端风雨，未肯收尽余寒。br/年时燕子，料今宵梦到西园。br/浑未办黄柑荐酒，更传青韭堆盘br/br/却笑东风从此，便薰梅染柳，更没些闲。br/闲时又来镜里，转变朱颜。br/清愁不断，问何人会解连环？br/生怕见花开花落，朝来塞雁先还。/pahref=images/han2.jpgimgsrc=images/han1.jpgalt=点击查看原图