第2章javaweb开发基础概要

《第2章javaweb开发基础概要》由会员分享，可在线阅读，更多相关《第2章javaweb开发基础概要（115页珍藏版）》请在金锄头文库上搜索。

1、第2章 Java Web开发基础,HTML语言,JSP基础,Servlet技术,Java Web综合开发实战：网络留言系统,2.1 HTML语言,2.1.1 HTML文件的基本结构 HTML文件的基本结构如图2.1所示。,2.1.1 HTML文件的基本结构,下面的例子，文档头部分有网页标题标记，文档主体部分有图片标记、超链接标记及一些文字。把这段代码命名为a.html，保存在想要保存的路径。双击该文件就可以运行了。只要该路径下有b.html文件，单击超链接就可以跳转到b.html。 【例2.1】第一个网页。 第一个html网页 超链接 这是我的第一个网页 ,2.1.2 HTML文件的语言标记,

2、1HTML标记 HTML标记表示文档内容的开始和结束。是开始标记，是结束标记，其他所有的HTML代码都位于这两个标记之间。浏览器将该标记中的内容视为一个Web文档，按照HTML语言规则对文档内的标记进行解释。 2首部标记 首部标记中提供与网页有关的各种信息。在首部标记中，一般使用下列标记。 .：制定网页的标题。 .：定义文档内容样式表。 . ：插入脚本语言程序。 ：描述网页信息。,2.1.2 HTML文件的语言标记,3标题栏标记 标题栏标记的内容是在浏览器标题栏中显示的文本。通常，Web搜索工具用它作为索引。 4描述标记 描述文档属性参数。,2.1.2 HTML文件的语言标记,5正文标记 正文

3、标记的格式如下： 正文标记中包含文档的内容。其常用属性如下。 background：文档背景图像的URL 地址。 bgcolor：文档的背景颜色。 text：文档中文本的颜色。 link：文档中链接的颜色。 vlink：文档中已被访问过的链接的颜色。 alink：文档中正被选中的链接的颜色。,2.1.2 HTML文件的语言标记,6分段标记 段落是文档的基本信息单位。利用分段标记，可以忽略文档中原有的回车和换行。 单独使用标记时会空一行，使后续内容隔一行显示。同时使用，则将段落包围起来，表示一个分段的块。其最常用的属性为align，其值如下。 left：左对齐（默认值） center：居中对齐

4、right：右对齐 justify：两边对齐,2.1.2 HTML文件的语言标记,7换行标记 该标记强行中断当前行，使后续内容在下一行显示，这个标记很简单，也很常用。 8标题标记 标题标记的格式如下： 其常用属性也是align。,2.1.2 HTML文件的语言标记,9对中标记 该标记中间的内容全部居中。 10块标记 块标记的作用是定义文档块。其常用属性也是align。,2.1.2 HTML文件的语言标记,11水平线标记 在标记位置画一条线。常用属性如下。 align：段落的水平对齐方式。 color：线的颜色。 size：线的宽度（以像素为单位）。 width：线的长度（像素或占页面宽度的百分

5、数）。 noshade：显示一条无阴影的实线。,2.1.2 HTML文件的语言标记,12字体标记 字体标记用来设置文本的字符格式，主要包括字体、字号和颜色等。常用属性如下。 face：字体名表。 size：字号值。 color：颜色值。设置字体的颜色。,2.1.2 HTML文件的语言标记,13图像标记 图像标记的常用属性如下。 src：图像文件的URL 地址。 alt：图像的简单文本说明，在浏览器下不能显示图像或图像加载时间过长时显示该文本。 height：显示图像的高度（像素或百分比）。 width：显示图像的宽度（像素或百分比）。 align：图像大小小于显示区域大小时的对齐方式。 14超

6、链接标记 超链接内容 超链接的常用属性如下。 href：目标端点的URL 地址（可以包含一个或多个参数）。 target：窗口或框架的名称。,2.1.3 HTML基本说明,1颜色 使用颜色名称来表示。例如，红色、绿色和蓝色分别用red、green和blue表示。 使用十六进制格式数值#RRGGBB来表示，RR、GG和BB分别表示颜色中的红、绿、蓝三原色的两位十六进制数据。例如，红色、绿色和蓝色分别用#FF0000、#00FF00和#0000FF表示。表2.1列出了16种标准颜色及其十六进制数值。,2.1.3 HTML基本说明,2字符实体 一个字符实体以&符号打头后跟实体名字或者是#加上实体编号

7、，最后是一个分号。最常用的字符实体如表2.2所示。,2.1.3 HTML基本说明,3常用属性 有些属性在HTML许多标记中出现。 类名：class。 唯一标识：id。 内样式: style。 提示信息：title。 4常用事件 事件处理描述是一个或一系列以分号隔开的 JavaScript 表达式、方法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代码。 事件包括窗口事件、表单及其元素事件、键盘事件、鼠标事件。,2.1.4 表单与表格,1表单 表单用来从用户（站点访问者）处收集信息，然后将这些信息提交给服务器进行处理。表单中可以包含允许用户进行交互的各种控件，例如，文本框、列表框、复

8、选框和单选按钮等。用户在表单中输入或选择数据后提交，该数据就会提交到相应的表单处理程序，以各种不同的方式进行处理。表单结构如下： ,2.1.4 表单与表格,form标记的属性如下。 name：表单的名称。 method：表单数据传输到服务器的方法。 action：接收表单数据的服务器端程序或动态网页的URL地址。 target：目标窗口。 form标记有以下事件。 onsubmit：提交表单时调用的时间处理程序。 onreset：重置表单时调用的处理程序。,2.1.4 表单与表格,2表单：输入控件 （1）单行文本框。 创建单行文本框方法如下： 单行文本框的属性如下。 name：单行文本框的名称

9、，通过它可以在脚本中引用该文本框控件。 value：文本框的值。 default value：文本框的初始值。 size：文本框的宽度（字符数）。 maxlength：允许在文本框内输入的最大字符数。 form：所属的表单（只读）。,2.1.4 表单与表格,单行文本框的方法如下。 click()：单击该文本框。 focus()：得到焦点。 blur()：失去焦点。 select()：选择文本框的内容。 单行文本框的事件如下。 onclick：单击该文本框时执行的代码。 onblur：失去焦点时执行的代码。 onchange：内容变化时执行的代码。 onfocus：得到焦点时执行的代码。 ons

10、elect：选择内容时执行的代码。,2.1.4 表单与表格,（2）密码文本框。 创建密码文本框方法如下： 密码文本框的属性、方法和事件与单行文本框的设置基本相同，只是密码文本框没有onclick事件。 （3）隐藏域。 创建隐藏域方法如下： 隐藏域的属性、方法和事件与单行文本框的设置基本相同，只是没有default value属性。,2.1.4 表单与表格,（4）复选框。 创建复选框方法如下： 选项文本 复选框的属性如下。 name：复选框的名称。 value：选中时提交的值。 checked：当第一次打开表时该复选框处于选中状态。 defaultchecked：判断复选框是否定义了checke

11、d属性。 复选框的方法如下。 focus()：得到焦点。 blur()：失去焦点。 click()：单击该复选框。,复选框的事件如下。 onfocus：得到焦点时执行的代码。 onblur：失去焦点时执行的代码。 onclick：单击该文本框时执行的代码。,2.1.4 表单与表格,（5）单选按钮。 创建单选按钮方法如下： 选项文本 单选按钮的属性如下。 name：单选按钮的名称，若干个名称相同的单选按钮构成一个控件组，在该组中只能选中一个选项。 value：提交时的值。 checked：当第一次打开表单时该单选按钮处于选中状态。该属性是可选的。,2.1.4 表单与表格,（6）按钮。 使用inp

12、ut标记可以在表单中添加3种类型的按钮：提交按钮、重置按钮和自定义按钮。创建按钮的方法如下： 按钮的属性如下。 type：按钮种类，具体如下。 name：按钮的名称。 value：显示在按钮上的标题文本。 按钮的事件如下。 onclick：单击按钮执行的脚本代码。,2.1.4 表单与表格,（7）文件域。 创建文件域的方法如下： 其中，“属性=“值“”部分可以进行如下设置。 name：文件域的名称。 value：初始文件名。 size：文件名输入框的宽度。,2.1.4 表单与表格,3表单：滚动文本框 初始值 其属性如下。 name：滚动文本框控件的名称。 rows：控件的高度。 cols：控件的

13、宽度。 readonly：表示文本框中的内容是只读的，不能被修改。,2.1.4 表单与表格,4表单：选项选单 创建选项选单方法如下： 选项1 选项2 其属性如下。 name：选项选单控件的名称。 size：在列表中一次可以看到的选项数目，默认值为1。 multiple：允许做多项选择。 selected：该选项的初始状态为选中。,2.1.4 表单与表格,【例2.2】表单控件的使用。 将下面的文件命名为all.html，保存到磁盘上。 双击all.html文件，在页面上就会出现如图2.2所示的界面。,2.1.4 表单与表格,5表格 表格由表头、行和单元格组成，常用于组织和显示信息，还可以用于安排

14、页面布局。表格的表头、行和单元格分别用不同的标记来定义。可以用table标记定义表格；表格中的每一行用tr标记来表示；行中的单元格用td或th标记定义。其中th标记定义表格的列标题单元格，表格的标题说明则用caption标记来定义。定义表格的格式图解，如图2.3所示。,2.1.4 表单与表格,【例2.3】表格的使用。 把这段代码保存，命名为table.html，双击该文件会看到如图2.4所示的界面。,2.1.4 表单与表格,（1）设置表格的属性 用table标记创建表格时，可以设置以下属性。 align：表格的对齐方式，其属性值如下。 background：表格背景图片的URL地址。 bgco

15、lor：表格的背景颜色。 border：表格边框的宽度（像素），默认值为0。 bordercolor：表格边框的颜色，border0时起作用。 bordercolordark：三维边框的阴影颜色，border0时起作用。 bordercolorlight：三维边框的高亮显示颜色，border0时起作用。 cellpandding：单元格内数据与单元格边框之间的间距（像素）。 width：表格的宽度（像素或百分比）。,2.1.4 表单与表格,（2）设置行的属性 表格中的每一行是用tr标记来定义的，可以设置下列属性。 align：行中单元格的水平对齐方式，其属性值如下。 background：行的背景图片的URL地址。 bgcolor：行的背景颜色。 bordercolor：行的边框颜色，只有当table标记的border0时起作用。 bordercolordark：行的三维边框的阴影颜色，只有当table标记的border0时起作用。 bordercolorlight：行的三维边框的高亮显示颜色，只有当table标记的border0时起作用。 valign：行中单元格内容的垂直对齐方式，其属性值如下。,2.1.4 表单与表