null第2章 JSP动态网页设计基础第2章 JSP动态网页设计基础null要使用JSP开发出专业的动态网站,首先必须熟练掌握静态网站的制作技术。HTML是在学习JSP之前必须了解的基础知识,很多JSP语法的使用都是建立在HTML文档的基础上。实际开发中,一般都是使用现成的HTML文档来添加JSP的动态脚本并做适当修改,除了特殊的应用,很少从零开始写一个JSP页面,所以读懂HTML文档并了解HMTL语言中的技巧为更快地上手JSP提供了很大的帮助。
JavaScript是JSP知识体系中一个可选的知识模块。也就是说不了解JavaScript知识也不会影响JSP的应用开发,但是如果掌握了JavaScript的知识,将可以更加方便地解决网页开发中的某些特定问
题
快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题
,例如经常使用JavaScript判断用户在
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
单中输入数据的合法性。null本章学习目标:
了解HTML与JSP的关系
掌握HTML的常用标签
能够使用HTML设计基本网页
能够使用HTML设计网络中常用的表单
了解JavaScript在JSP学习中的作用
了解JavaScript的简单应用
能够读懂JavaScript程序,并能通过查阅资料了解更多JavaScript应用2.1 HTML快速入门2.1 HTML快速入门HTML是Hyper Text Markup Language的缩写,中文一般译为“超文本标记语言”。 用HTML语言编写的超文本文档称为HTML文档,和一般文档的不同之处是,一个HTML文件不仅包含文本内容,还包含一些Tag,中文称为“标签”或者“标记”。 HTML文件的后缀名是.html或者.htm。2.1.1 HTML基本结构 2.1.1 HTML基本结构
...
...
html文档以标签开始,以标签结束。
文档头以标签开始,以标签结束。
文档体以标签开始,以标签结束。
null【例2-1】网页基本结构
我的第一个网页
少年不识愁滋味,为赋新词强说愁
null步骤1:建立站点根目录——新建一个文件夹用于存放网页,比如在F盘创建一个文件夹myweb,在本章我们把它作为站点根目录,读者在做
练习
飞向蓝天的恐龙练习非连续性文本练习把字句和被字句的转换练习呼风唤雨的世纪练习呼风唤雨的世纪课后练习
时可以自行设定站点根目录。
步骤2:编写代码——HTML可以使用任何字处理软件来编写,最简单的是Windows自带的记事本。用记事本编写以上代码,标题和网页主体内容可以适当修改。
步骤3:保存文件——文件名命名为first.html(注意:其中first是自己为文件起的名字,可修改,但扩展名必须为html或者htm),另外注意将“文件类型”改为“所有文件”,如图2-1所示。null图2-1 保存html文件null步骤4:浏览网页——保存完毕后,在文件夹myweb中可以看到first.html被浏览器识别,双击即可查看网页效果,在IE中浏览效果如图2-2所示,如需要继续编辑,则右键单击选择以记事本打开。图2-2 第一个网页浏览效果null我们回过头分析一下第一个网页,其中的代码由四对标签组成。
…:表示整个HTML文档的开始和结束,网页的所有内容都位于这两个标签之间。
…:头部标签,在例子中,头部之间插入一对标题标签。
…:标题标签,说明该HTML文件的标题是什么,当浏览该文件时,标题显示在浏览器上方的标题栏内。在第一个网页中,我们在
…标记之间包含的标题是“我的第一个网页”,在图2-2中可以看到它显示在网页的标题栏。
…:主体标签,页面的主体部分都放在这对标签之间。在第一个网页中,我们在…标记之间包含的内容是“少年不识愁滋味,为赋新词强说愁”,在图2-2可以看到这行字显示在网页的主体部分。2.1.2 HTML常用标签 2.1.2 HTML常用标签 标签可以从大体上分为单标签(没有结束标签)和双标签(有结束标签)两种,根据有没有属性,有以下四种显示方式。
<标签>…标签>
<标签 属性1=值1 属性2=值2…>...标签>
<标签>
<标签 属性1=值1 属性2=值2…>null
面向大海 春暖花开
面向大海 春暖花开
从明天起,做一个幸福的人
喂马,劈柴,周游世界
从明天起,关心粮食和蔬菜
我有一所房子,面向大海,春暖花开
在网页中添加文本非常简单,只需要把要添加的文字输入到和之间。【例2-2】在网页中输入文字(text.html)。null预览网页,结果如图2-3所示,似乎没有我们预期的结果,这是因为,如果没有标签修饰文本,文字将以无格式的形式显示,(如果浏览器窗口显示不下,则自动换行),要实现分段、不同字体及大小,可以使用标签来修饰文字。
图2-3 多行文本的预览null(1) 分段排版
分段标签主要有“预先格式化标签”
…
、“换行标签”
和“段落标签”
…
。
预先格式化标签
…
:添加在文本的开始和结尾处。用这个标签括起来的文本,在网页中会按照输入时的格式显示。
换行标签
:换行标签加在需要换行的位置,当浏览器遇到这个标签时,会自动进行换行。
段落标签
…
:段落标签添加在段首和段尾。段落标签和
标签的不同之处在于在不同段落之间,多一行空行。段落标签
有一个属性align,它用来描述文字的对齐方式,一般值有center、left和right三种,分别表示居中、左对齐和右对齐。null【例2-3】预先格式化标签的使用(pre.html)。
面向大海 春暖花开
面向大海 春暖花开
从明天起,做一个幸福的人
喂马,劈柴,周游世界
从明天起,关心粮食和蔬菜
我有一所房子,面向大海,春暖花开
null图 2-4
…
标签的使用null【例2-4】换行和段落标签的使用(paragraph.html)。
换行标签和段落标签
猎人、猎狗
一条猎狗将兔子赶出了窝,一直追赶他,追了很久仍没有捉到。牧羊看到此种情景,讥笑猎狗说‘你们两个之间小的反而跑得快得多。‘猎狗回答说:‘你不知道我们两个的跑是完全不同的!我仅仅为了一顿饭而跑,他却是为了性命而跑呀!
这话被猎人听到了,猎人想:猎狗说的对啊,那我要想得到更多的猎物。就这样过了一段时间,问题又出现了,大兔子非常难捉到,小兔子好捉,但捉到大兔子得到的奖赏和捉到小兔子得到的骨头差不多,猎狗们善于观察发现了这个窍门,专门去捉小兔子。慢慢的,大家都发现了这个窍门。
猎人对猎狗说:最近你们捉的兔子越来越小了,为什么?
猎狗们说:反正没有什么大的区别,为什么费那么大的劲去捉那些大的呢?
null图2-5 段落标签和换行标签的使用null另外,该例子第5行使用到了水平线标签
,代码为
,其属性color表示水平线的颜色,颜色值设置参考后续内容“字体样式”;属性width表示水平线宽度,单位可以是像素或者百分比,默认为100%;属性size表示水平线高度,单位为像素。null(2) 字体样式
...对它括起来的文字设置字体样式,它主要有如下属性。
face:文字所用的字体
size:文字的大小
color:文字的颜色
另外样式标签可以用来设置粗体、斜体和下划线样式。
粗体标签:
...
斜体标签:
...
下划线标签:
...null【例2-5】设置字体样式(font.html)。
面向大海 春暖花开
面向大海 春暖花开
从明天起,做一个幸福的人
喂马,劈柴,周游世界
从明天起,关心粮食和蔬菜
我有一所房子,面向大海,春暖花开
null图2-6 设置字体样式null在指定网页对象的颜色时,比如字体颜色、背景颜色等,有16种标准颜色可以选择,如表2-1所示。在网页中,除了用颜色名称表示颜色外,还可以用颜色的十六进制值表示,它的形式为#RRGGBB,其中,RR、GG、BB分别表示红、绿、蓝成分所占比例的两位十六进制值。表2-1 16种标准颜色null(3) 标题
一般文章都有标题、章和节等结构,HTML中提供了标题标签
、、、、和,中的n表示标题级别,n值越小,标题字号越大。标题标签也是成对出现的。
标题标签的使用
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
正文非标题文字
【例2-6】标题标签的使用(headline.html)。null图2-7 标题标签的使用null与列表有关的标签
列表有关的标签
无序列表:
秋夕:
- 银烛秋光冷画屏,
- 轻罗小扇扑流萤。
- 天阶夜色凉如水,
- 坐看牵牛织女星。
有序列表:
秋夕:
- 银烛秋光冷画屏,
- 轻罗小扇扑流萤。
- 天阶夜色凉如水,
- 坐看牵牛织女星。
定义性列表:
- 银烛秋光冷画屏,
- 这是1行
- 轻罗小扇扑流萤。
- 这是2行
- 天阶夜色凉如水,
- 这是3行
- 坐看牵牛织女星。
- 这是4行
null 网页背景颜色和背景图像都是页面属性,在标签中设置。
背景颜色
在标签中设置属性bgcolor即可,例如我们要将网页的背景颜色设置为“银色”,只需要在标签中加入一句代码bgcolor="sliver"或者bgcolor="#0c0c0c"。
null【例2-7】设置网页背景颜色(bgcolor.html)。
设置网页背景颜色
面向大海 春暖花开
从明天起,做一个幸福的人
喂马,劈柴,周游世界
从明天起,关心粮食和蔬菜
我有一所房子,面向大海,春暖花开
null图2-8 网页背景颜色设置null(2) 背景图像
要设置背景图像,首先我们选好一副图像bg001.jpg,接下来要把图像放入站点中。还记得我们先前创建的站点的路径是F:\myweb,现在在站点中新建一个文件夹images,用于存放图片,创建好以后将图像bg001.jpg置于其中。
设置背景图像的一般形式为:
图像路径一般使用相对路径,即它相对于html文档的路径,bg001.jpg相对于保存于F:\myweb路径下的网页文档background.html的路径为images/bg001.jpg。
在设置背景图像时,如果该图像的大小不能够占满整个浏览器页面,它们会自动进行拼接。
null【例2-8】设置页面背景图像(background.html)。
设置背景图像
这天,小猪唏哩呼噜和小伙伴们,在商店买了许多鞭炮。因为今天是小白兔的生日。他们要放鞭炮来祝贺它的生日.小伙伴们高高兴兴的一起唱着歌,往小白兔的家走去。这时,小猪看见一只特别美丽的蝴蝶,就轻手轻脚的朝蝴蝶走去。小蝴蝶仿佛像看见小猪一样。挥动着美丽的翅膀,朝森林里飞去。小猪唏哩呼噜紧追不舍,一会就和大家走散了。小猪也没注意到前面是森林,结果和伙伴们越走越远。他迷了路。小猪赶忙往回走,可是怎么也找不到回去的路了。
null图2-9 设置网页背景图像null适当的应用图像可以使网页变得赏心悦目,充满吸引力,网页中可以加入的图像格式有jpeg、gif和png。
网页中插入图像的标签是,它是一个单标签。并不是真正的把图片加入到HTML文件中,而是通过一个路径告诉浏览器图像在哪里。其基本语法格式为:
这里图像路径一般也使用相对路径,即图像文件相对于html文档的路径,的常用属性见表2-2。
null表2-2 标签的常用属性null【例2-9】在网页中加入图像(image.html)。
图像应用
在海边,我捡起一枚小小的贝壳。贝壳很小,却非常坚硬和精致。回旋的花纹中间有着色泽或深或浅的小点,如果仔细观察的话,在每个小点周围又有自成一圈的复杂图样。怪不得古时候的人要用贝壳来做钱币,在我手心里躺着实在是一件艺术品,是舍不得拿去和别人交换的宝贝啊! 在海边捡起这一枚贝壳的时候,里面曾经居住过的小小的柔软的肉体早已死去,在阳光,沙粒和海浪的淘洗之下,贝壳中生命所留下的痕迹已完全消失了。但是,为了这样一个短暂,微小的生命,为了这样一个脆弱,卑微的生命,上仓给它制作居所时却是多精致,多仔细,多么地一丝不苟啊! 比起贝壳里的生命来,我在这世间能停留的时间和空间是不是更长和更多一点呢?是不是也应该用我的能力把我所能做到的事情做得更精致,更仔细,更加一丝不苟呢?请让我也能留下一些令人珍惜,令人惊叹的东西吧。在千年之后,也许会有人对我留下的痕迹反复观看,反复把玩,并且会忍不住轻轻地叹息: "这是一颗怎样固执又怎样简单的心啊!"
下面,我们要在网页中加入图像shell.jpg。当然首先我们要将图像置入F:\html\images中,然后在网页中加入。null图2-10 在网页中加入图像null 超级链接(HyperLink)习惯上被称为超链接。给网页上的文本或图像设置超链接,可以使得从源点跳到目标点。
基本语法 文字或图像
语法说明
在HTML文件中,超链接目标可以分为内部链接和外部链接。所谓内部链接:指网站内部文件之间的链接,此类链接的地址一般使用相对地址,即链接目标文件相对于该网页文件的路径地址。所谓外部链接,指网站内的文件链接到站点外文件的链接,外部链接一般使用绝对地址,比如链接到新浪,地址就是http://www.sina.com.cn)。
链接的源点可以是文字或者图像。
另外,比较特殊是在网页上添加一个电子邮件链接。添加电子邮件链接,只需要在希望链接的电子邮件地址的文字前后分别加上和即可。在浏览网页时,点击链接文字就可以打开本机上默认的电子邮件收发软件。null【例2-10】超链接(link.html)。
超链接
杂草与庄稼
一位哲学家带着他的弟子游学世界。在游历了许多国家,拜访了许多著名的学府之后,个个满腹经纶的他们回到了出发地。进城之前,哲学家和他的弟子在郊外的一片草地上坐了下来。哲学家说:“在你们结束学业的时候,今天我们上最后一课。你们看,在我们周围的旷野里,长满了野草,现在我想知道的是如何铲除这些野草?”针对老师的提问,弟子们非常惊愕。他们都没有想到,一直在探讨人生奥妙的哲学家,最后一课问的竟是这么一个简单的问题。
一个弟子首先开口:“老师,只要有一把铲刀就够了。”哲学家点点头。
“用火烧也是很好的办法。”
“撒上石灰,可以铲掉所有的野草。”
“斩草除根,只要把根挖出来就行。”
……
等弟子都讲完了,哲学家站起来说:“课就上到这里,你们回去后,各按照自己的办法除去一片杂草。没有除掉的,一年后的今天再来相聚。”一年后,他们都来了。不过他们发现原来相聚的地方不再是杂草丛生,而是一片长满谷子的庄稼地。他们来到去年就坐的地方未见到哲学家,却发现一张纸条,上面写着:“要想铲除旷野里的杂草,最好的方法就是让庄稼长势良好。同样,要想让灵魂无纷扰,惟一的方法就是用美德去占据它。”
文章来源:文章阅读网
欣赏更多
美文:好好活着
美图:蒲公英
联系我们
null图2-11 在网页中加入链接null第一个链接,链接源点为图像crops.gif,目标点为图像crops2.gif,这两幅图像都存储在F:\myweb\images中。
第二个链接文章阅读网,链接源点为文字“文字阅读网”,目标点为外部网址“http://www.duwenzhang.com”。
第三个链接美文:好好活着,链接源点为文字“美文:好好活着”,目标点为F:\myweb中的内部网页life.html。
第四个链接美图:蒲公英,链接源点为文字“美图:蒲公英”,目标点为F:\myweb\images中的图像dandelion.jpg。
第五个链接联系我们为电子邮件链接。
链接属性中target=_blank表示在新窗口中打开链接目标。如果没有设置目标属性或者设置为target=_self,都会在当前窗口打开链接。null
表格
关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载
是网页中最常使用的排版方法,是HTML中的重点,在这里我们只简单介绍一下表格。
表格所涉及的标签有“表格标签”、“行标签”和“单元格标签”。
:表格标签,表示一个表格的开始和结束。
…
:行标签,成对出现,包含在表格标签之间,有几对行标签说明该表格有几行。
… | :单元格标签,成对出现,包含在行标签之间,有几对单元格标签说明该行有几个单元格,另外是特殊的单元格,表示该单元格为标题即表头。null单元格(用 | 来表示,每个单元格可以有背景颜色和背景图片)表格(用 |