资源预览内容
第1页 / 共121页
第2页 / 共121页
第3页 / 共121页
第4页 / 共121页
第5页 / 共121页
第6页 / 共121页
第7页 / 共121页
第8页 / 共121页
第9页 / 共121页
第10页 / 共121页
亲,该文档总共121页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
1,Java EE应用技术基础,济南大学信息学院 刘鹍 liukun,2,回顾:第1章 Java EE简介,3,第2章 JSP应用基础,4,第2章 JSP应用基础,2.1 HTML语言 2.2 Servlet应用 2.3 JSP语法 2.4 JSP内置对象 2.5 JSP综合应用实例,5,第2章 JSP应用基础,先来看一个例子 什么是JSP 他和HTML什么关系?,6,第2章 JSP应用基础,启动Tomcat服务器,在IE浏览器中输入“http:/localhost:8080/test/input.jsp”,系统会显示input.jsp页面,如图2.1所示。当在文本框中输入10后,单击【计算】按钮会跳转到另外一个页面,也就是result.jsp页面,并且输出结果314.0,如图2.2所示。,图2.1 input.jsp页面 图2.2 result.jsp页面,7,第2章 JSP应用基础,Input.jsp 请输入半径r: ,8,第2章 JSP应用基础,result.jsp ,9,第2章 JSP应用基础,JSP?,10,2.1 HTML语言,2.1.1 HTML文件的基本结构 HTML文件的基本结构如图2.3所示。, 文档头部分 文档主体部分 ,图2.3 HTML文件的基本结构,11,2.1.1 HTML文件的基本结构,大家可以看下面的例子,文档头部分有网页标题标记,文档主体部分有图片标记、超链接标记及一些文字。把这段代码命名为a.html,保存在想要保存的路径。双击该文件就可以运行了。只要该路径下有b.html文件,单击超链接就可以跳转到b.html。, 第一个html网页 超链接 这是我的第一个网页 ,12,2.1.2 HTML文件的语言标记,1. HTML标记 HTML标记表示文档内容的开始和结束。是开始标记,是结束标记,其他所有的HTML代码都位于这两个标记之间。浏览器将该标记中的内容视为一个Web文档,按照HTML语言规则对文档内的标记进行解释。标记是可选的,但是最好不要省略这两个标记,以保持Web文档结构的完整性。 2. 首部标记 首部标记中提供与网页有关的各种信息。在首部标记中,一般使用下列标记。 .:制定网页的标题。 .:定义文档内容样式表。 . :插入脚本语言程序。 :描述网页信息。 这些信息首先向浏览器提供,但不作为文档内容提交。,13,2.1.2 HTML文件的语言标记,3. 标题栏标记 标题栏标记的内容是在浏览器标题栏中显示的文本。通常,Web搜索工具用它作为索引。 4. 描述标记 描述文档属性参数。 5. 正文标记 正文标记的格式如下: 正文标记中包含文档的内容。其常用属性如下: background:文档背景图像的URL 地址。 bgcolor:文档的背景颜色。 text:文档中文本的颜色。 link:文档中链接的颜色。 vlink:文档中已被访问过的链接的颜色。 alink:文档中正被选中的链接的颜色。,14,2.1.2 HTML文件的语言标记,此外,HTML文件还有很多用来设置文本格式的标记,下面举几个常用的标记。 (1)分段标记 段落是文档的基本信息单位。利用分段标记,可以忽略文档中原有的回车和换行。定义一个新段落,就是换行并插入一个空行。 单独使用标记时会空一行,使后续内容隔一行显示。同时使用,则将段落包围起来,表示一个分段的块。其最常用的属性如下。 align:段落的水平对齐方式,其值如下: left:左对齐(默认值)。 center:居中对齐。 right:右对齐。 justify:两边对齐。,15,2.1.2 HTML文件的语言标记,(2)换行标记 该标记强行中断当前行,使后续内容在下一行显示,这个标记很简单,也很常用。 (3)标题标记 标题标记的格式如下: 其常用属性如下。 align:段落的水平对齐方式,其值如下: left:左对齐(默认值)。 center:居中对齐。 right:右对齐。 justify:两边对齐。,16,2.1.2 HTML文件的语言标记,(4)对中标记 该标记中间的内容全部居中。 (5)块标记 块标记的作用是定义文档块。常用属性如下。 align:段落的水平对齐方式。其值如下: left:左对齐(默认值)。 center:居中对齐。 right:右对齐。,17,2.1.2 HTML文件的语言标记,(6)水平线标记 在标记位置画一条线。常用属性如下。 align:段落的水平对齐方式。其值如下: left:左对齐(默认值)。 center:居中对齐。 right:右对齐。 color:线的颜色。 size:线的宽度(以像素为单位)。 width:线的长度(像素或占页面宽度的百分数)。 noshade:显示一条无阴影的实线。 (7)字体标记 字体标记用来设置文本的字符格式,主要包括字体、字号和颜色等。常用属性如下。 face:字体名表。 size:字号值。 color:颜色值。设置字体的颜色。,18,2.1.2 HTML文件的语言标记,(8)图像标记 图像标记的常用属性如下。 src:图像文件的URL 地址。 alt:图像的简单文本说明,在浏览器下不能显示图像或图像加载时间过长时显示该文本。 height:显示图像的高度(像素或百分比)。 width:显示图像的宽度(像素或百分比)。 align:图像大小小于显示区域大小时的对齐方式。 使用align属性设置图像与文本在垂直方向的对齐方式,此时align属性的取值如下: top:图像与文本顶部对齐。 middle:图像与文本中央对齐。 bottom:图像与文本底部对齐。 当图像在左右绕排文本时,align属性的取值如下: left:图像居左,文本居右。 right:图像居右,文本居左。,19,2.1.2 HTML文件的语言标记,(9)超链接标记 超链接内容 超链接的常用属性如下。 href:目标端点的URL 地址(可以包含一个或多个参数)。 如前面的例子中: 超链接 单击此超链接,就会跳转到名为b.html的页面。该属性是必选项。 target:窗口或框架的名称。 target属性的取值既可以是窗口或框架的名称,也可以是如下保留字: _blank:未命名的新浏览器窗口。 _parent:父框架页或窗口。如果包含链接的框架不是嵌套的,则链接的目标文件加载到整个浏览器窗口中。 _self:所在的同一框架或窗口。 _top:整个浏览器的窗口,并删除所有框架。,20,2.1.3 表单与表格的使用,1. 表单及其控件标记 表单用来从用户(站点访问者)处收集信息,然后将这些信息提交给服务器进行处理。表单中可以包含允许用户进行交互的各种控件,例如,文本框、列表框、复选框和单选按钮等。用户在表单中输入或选择数据后提交,该数据就会提交到相应的表单处理程序,以各种不同的方式进行处理。表单结构如下: (1)表单标记 该标记的格式如下: ,21,2.1.3 表单与表格的使用,form标记的属性如下。 name:表单的名称。 method:表单数据传输到服务器的方法。其属性值如下: post:在HTTP请求中嵌入表单数据。 get:将表单数据附加到请求该页的URL中。 action:接收表单数据的服务器端程序或动态网页的URL地址。 target:目标窗口。其属性值如下: _blank:在未命名的新窗口中打开目标文档。 _parent:在显示当前文档的窗口的父窗口中打开目标文档。 _self:在提交表单所使用的窗口中打开目标文档。 _top:在当前窗口内打开目标文档,确保目标文档占用整个窗口。 form标记有以下事件。 onsubmit:提交表单时调用的时间处理程序。 onreset:重置表单时调用的处理程序。,22,2.1.3 表单与表格的使用,下面具体介绍表单中的控件。 (2)表单输入控件标记 单行文本框。 创建单行文本框方法如下: (a)单行文本框的属性如下: name:单行文本框的名称,通过它可以在脚本中引用该文本框控件。 value:文本框的值。 default value:文本框的初始值。 size:文本框的宽度(字符数)。 maxlength:允许在文本框内输入的最大字符数。 form:所属的表单(只读)。,23,2.1.3 表单与表格的使用,(b)单行文本框的方法如下。 click():单击该文本框。 focus():得到焦点。 blur():失去焦点。 select():选择文本框的内容。 (c)单行文本框的事件如下。 onclick:单击该文本框时执行的代码。 onblur:失去焦点时执行的代码。 onchange:内容变化时执行的代码。 onfocus:得到焦点时执行的代码。 onselect:选择内容时执行的代码。,24,2.1.3 表单与表格的使用, 密码文本框。 创建密码文本框方法如下: 密码文本框的属性、方法和事件与单行文本框的设置基本相同,只是密码文本框没有onclick事件。 隐藏域。 创建隐藏域方法如下: 隐藏域的属性、方法和事件与单行文本框的设置基本相同,只是没有default value属性。 复选框。 创建复选框方法如下: 选项文本 (a)复选框的属性如下。 name:复选框的名称。 value:选中时提交的值。 checked:当第一次打开表时该复选框处于选中状态。 defaultchecked:判断复选框是否定义了checked属性。,25,2.1.3 表单与表格的使用,(b)复选框的方法如下。 focus():得到焦点。 blur():失去焦点。 click():单击该复选框。 (c)复选框的事件如下。 onfocus:得到焦点时执行的代码。 onblur:失去焦点时执行的代码。 onclick:单击该文本框时执行的代码。 但值为空白。例如,要创建以下复选框: 应在body体内设置代码如下: 苹果 香蕉 橘子,26,2.1.3 表单与表格的使用, 单选按钮。 创建单选按钮方法如下: 选项文本 单选按钮的属性如下。 name:单选按钮的名称,若干个名称相同的单选按钮构成一个控件组,在该组中只能选中一个选项。 value:提交时的值。 checked:当第一次打开表单时该单选按钮处于选中状态。该属性是可选的。 例如,创建以下单选按钮: 应在body中设置代码如下: 性别:男 女,27,2.1.3 表单与表格的使用, 按钮。 使用input标记可以在表单中添加3种类型的按钮:提交按钮、重置按钮和自定义按钮。创建按钮的方法如下: (a)按钮的属性如下。 type:按钮种类。具体如下。 submit:创建一个提交按钮。 reset:创建一个重置按钮。 button:创建一个自定义按钮。 name:按钮的名称。 value:显示在按钮上的标题文本。 (b)按钮的事件如下。 onclick:单击按钮执行的脚本代码。 文件域。 创建文件域方法如下: 其中,“属性:“值“”部分可以进行如下设置: name:文件域的名称。 value:初始文件名。 size:文件名输入框的宽度。,28,2.1.3 表单与表格的使用,(3)其他表单控件 下面分别介绍这两种控件的用法。 滚动文本框。 初始值 其属性如下: name:滚动文本框控件的名称。 rows:控件的高度。 cols:控件的宽度。 readonly:表示文本框中的内容是只读的,不能被修改。 该标记的其他属性、方法和相关事件与单行文本框基本相同。 选项选单。 创建选项选单方法如下: 选项1 选项2 ,29,2.1.3 表单与表格的使用,其属性如下: name:选项选单控件的名称。 size:在列表中一次可以看到的选项数目,默认值为1。 multiple:允许做多项选择。 selected:该选项的初始状态为选中。 下面就这些控件做一个综合的例子来简单体验这些控件的用法,界面如图2.4所示。,图2.
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号