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

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

举报
开通vip

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

第2章  JSP动态网页设计基础
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与列表有关的标签