第一章 Java Web编程基础Word下载.docx

资源描述

第一章 Java Web编程基础Word下载.docx

《第一章 Java Web编程基础Word下载.docx》由会员分享，可在线阅读，更多相关《第一章 Java Web编程基础Word下载.docx（40页珍藏版）》请在冰豆网上搜索。

第一章 Java Web编程基础Word下载.docx

HTML标记不区分大小写，例如，标记<

html>

甚至<

HtML>

的效果是一样的。

但读者在编写自己的程序时，最好自始至终都采用同样的书写方式。

1.2<

中常用的标记

标记中，除了上小节提到的<

标记外，还常常会使用另外一个<

META>

标记，这个标记主要用于对HTML文件做一个简单的说明。

1.3<

的内容都会显示到浏览器的内容框架中，所以，这是HTML活动的主要舞台，下面我们就对在<

中常用的标记做一个详细的说明。

首先我们来看<

标记本身。

1.3.1<

标记

标记表示的是整个在浏览器内容框架中显示的部分，它有对应的结束标记<

。

标记中，可以加入自己的一些属性，用于控制整个页面的底色、底图以及字体等，下面列出了<

中常用的属性：

●BGCOLOR8

BGCOLOR属性用于控制HTML文档的背景颜色。

如：

BGCOLOR="

#CCFFCC"

颜色可以用十六进制数表示的RGB颜色，或者直接指明颜色名称，如BGCOLOR="

red"

等。

RGB;

●BACKGROUND

BACKGROUND属性用于引入HTML文档的背景图片。

BACKGROUND=“images/bg.gif"

可以使用的图片格式为GIF，JPEG格式。

如果指定了背景图片，指定的背景颜色将会被遮挡。

●TEXT

TEXT属性用于控制HTML文档的正文文字颜色。

TEXT=“#FF6666”。

Text元素定义的颜色将应用于整篇文档。

下面我们来看一个例子，在这个例子中，指明了HTML文档的底色为红色，使用“bg.gif”作为背景，文字颜色为绿色：

示例1-2：

标记中设置文字颜色和背景色

body.htm

SecondHTMLDoc<

BODYBGCOLOR="

RED"

BACKGROUND="

bg.gif"

TEXT="

#00FF00"

H1>

BODY中的文字，<

/H1>

将会显示成绿色。

图1-2所示就是body.htm在IE中的显示效果。

图1-2body.htm在IE中的显示结果

1.3.2<

FONT>

除了可以使用<

标记中的TEXT属性来统一指定HTML文档中的文字颜色外，还可以通过<

标记来指定某段文字的颜色，以及其他的文字风格，只需要将这些文字包含在<

/FONT>

之间就可以了，下面是<

标记的基本用法：

FONTCOLOR="

#FFGGFF"

FACE="

TIMESNEWROMAN"

SIZE="

12"

文字<

在这个<

标记中，使用了三个属性来定义<

中包含的文字的风格：

用COLOR指定文字的颜色；

FACE属性指定文字的字体，注意，如果在客户端的系统上找不到指定的字体，浏览器将会使用系统的默认字体来显示；

SIZE指定文字的大小。

另外，还有三个标记和字体的风格相关：

，它们都是成对出现的，即<

…<

/I>

，<

/B>

/U>

，标记之间用于放置文字。

标记对用来控制文字显示为粗体（Bold），而<

标记对用来控制文字显示为斜体（Italics），<

标记用来控制文字的下划线。

这三个标记可以嵌套使用，比如，如果要控制字体显示为粗体+斜体，可以使用下面的方式：

Thisisatestsentence<

它就会在IE中显示一行斜体+粗体风格的文字。

1.3.3标题字体

可以使用<

H#>

/H#>

来使用预定义好的标题字体，其中#可以取从1到6的值，表示的字体大小由大到小，即<

所定义的字体最大，而<

H6>

定义的字体最小。

另外，<

后面会自动的空出一行。

下面是<

H3>

这是一个三级标题字体<

/H3>

这是内容……

上面的代码段在浏览器中显示的时候，使用<

所定义的字体显示“这是一个三级标题字体”，接着在<

后面空一行，然后再显示“这是内容……”这些信息。

1.3.4<

IMG>

标记用于向文档中引入一张图片，它的用法如下：

IMGSRC="

图片路径"

WIDTH="

图片宽度"

HEIGHT="

图片高度"

BORDER="

边框大小"

ALIGN="

LEFT|RIGHT|CENTER"

标记和前面其他的标记不一样的地方在于它可以不需要有结束标记。

SRC属性用于指定需要引入的图片的路径，最好不要使用绝对路径，这个属性是必需的，而后面的其他属性都是可选的；

WIDTH用于指明图片的宽度，如果不指定，则使用图片的实际宽度来显示；

HEIGHT用于指明图片的高度，如果不指定，则使用图片的实际高度来显示；

BORDER用于指明图片的边框大小，默认为0，即没有边框；

ALIGN用于指明图片的水平对齐方式，可以选择LEFT、RIGHT、CENTER中的一个，默认为LEFT，即靠左对齐。

1.3.5<

标记表示一个超链接，用于引导指向另外一个资源（其他HTML文件、图片、EMAIL、JSP文件等等）。

它的用法如下：

AHREF="

资源"

文字或者图片<

/A>

其中HREF指明这个超链接指向的另一个资源，这个属性是必需的。

而<

之间的“文字或图片”使用于指示这个超链接的，点击文字或者图片，浏览器就会转到另一个资源中。

下面是一个文字连接：

detail.htm"

新闻详细内容<

而下面是一个图片连接：

pic.htm"

PIC.JPG"

另外，还可以将数据附在超链接上，通过超链接向HREF属性定义的资源传递字符串数据。

比如，如果“HREF”指向的资源是“getData.jsp”，我们希望向这个jsp程序传递一个人名（PersonName）“张三”，那么，我们可以将超链接写成如下格式：

getData.jsp?

personName=张三"

资源<

从这个例子我们可以看出，在超链接中，加上了“?

personName=张三”，其中，使用“?

”来分割开需要链接的资源和往这个资源传递的数据，而personName是往这个资源传递的数据的“名字”，“张三”是往这个资源传递的数据的“值”，它们之间用分号分割开来，也就是说，传递的数据按照“名-值”对的形式出现。

在服务器端，可以在getData.jsp中通过“personName”来取得它的对应的值。

如果需要往“getData.jsp”传递多个值，那么可以给这几个值之间使用“&

”来分隔，如：

personName=张三&

age=20"

这样，就往“getData.jsp”中传递了两个参数：

personName和age，它们的值分别为“张三”和“20”，在getData.jsp中可以分别使用这两个参数的名字来取得对应的参数值。

关于如何取得这些参数值，将在后续的章节介绍。

1.3.6列表标记

列表标记有两种形式，一种是有序列表（OrderedList），另一种是无序列表（UnorderedList），它们之间的区别在于，有序列表在显示的时候会自动的将列表中的各项内容从上到下排序，并且在每项内容前加上序号；

而无序列表则不会加上序号。

下面是无序列表的用法：

UL>

LI>

选项<

/LI>

/UL>

下面是有序列表的用法：

OL>

/OL>

图1-3左边是有序列表的显示效果，右边是无序列表的显示结果。

图1-3列表

1.3.7表格定义标记

TABLE>

标记用于定义一个表格，它的基本格式如下：

TH>

TD>

第一列<

/TD>

/TH>

TR>

/TR>

/TABLE>

上面定义了一个简单的表格，在IE中的显示结果如图1-4所示。

从上面的代码可以看出，定义一个表格除了<

标记外，还涉及到<

等标记，下面就分别对这些标记做一些说明。

●<

标记用于定义一个表格，它可以有一些属性用于控制这个表格的特点，下面就是一些常用的属性：

WIDTH：

WIDTH属性用于定义表格的宽度，可以用一个整数来表示像素或者用一个百分比来表示占浏览器显示框架的大小，如果没有定义这个属性，那么表格的宽度将根据表格中实际内容所占的大小来决定；

HEIGHT：

HEIGHT属性用于定义表格的高度，同样也可以使用一个整数来表示像素或者用一个百分比来表示占浏览器显示框架的高度。

这个属性通常不用，而是根据表格中的内容使用默认的高度；

BORDER：

BORDER属性用于定义表格的边框的宽度，默认为0，也就是没有边框；

BGCOLOR：

定义表格的背景色。

用于定义表格的一行。

用于定义表头（TableHead）中的列，在浏览器中，通常是表现为粗体居中文字。

用于定义表格的一列，所有的表格内容都放在<

之间，可以是文字、图片、表单（FORM）元素甚至是另一个表格。

可以在<

中用WIDTH设置各列的宽度，用ALIGN属性来设置表格格子中内容的水平对齐方式，可以使用LEFT、CENTER、RIGHT中的一个值。

另外，对于不规则的表格，可以使用ROWSPAN来设置表格的格子跨越的表格行数，而用COLSPAN来设置表格的格子所跨越的表格列数。

在进行表格定义时，<

标记必须放在<

标记之间，而<

（<

）标记必须放在<

标记之间。

下面我们来看一个例子。

下面这段代码定义了一个表格，表格的宽度为300，背景色为浅灰色。

这个表格有一个表头，背景色为深灰色，以及2行数据行，每行分为3列。

示例1-3：

使用表格

table.htm

TABLEWIDTH="

300"

BGCOLOR="

#A1A1A1"

TRBGCOLOR="

#5E5E5E"

姓名<

年龄<

性别<

张三<

23<

男<

玛丽<

20<

女<

它的显示效果如图1-4所示。

图1-4表格

下面我们来看一个不规则的表格。

示例1-4：

不规则的表格

table1.htm

TDCOLSPAN="

CENTER"

学生登记表

这个表格的第一行跨越了三列，所以在这边使用COLSPAN="

来指定，它在IE中的显示效果如图1-5所示。

图1-5不规则表格

对于跨越多行的表格，可以使用ROWSPAN来定义。

在此不再赘述。

1.3.8表单（FORM）定义

表单（FORM）在动态网站编程中占有重要的地位，使用FORM，可以从客户端向服务器端发送数据，在服务器端，可以使用ASP、JSP、Servlet、CGI等程序将传递过来的数据读取出来进行处理。

FORM定义的基本格式如下：

FORMACTION="

METHOD="

NAME="

ENCTYPE="

...

/FORM>

在FORM定义中，可以指定ACTION、METHOD、NAME、ENCTYPE等属性，用于接收数据的各类表单元素定义在<

FORM>

之间。

ACTION属性用于指定此表单数据提交的目标URL，它通常是一个相对路径。

如果没有设置这个属性或者属性值为空，表单数据将提交给此表单自身的URL。

METHOD属性用于指定提交表单数据的方式，常用的有GET和POST两种方式，如果没有设置此属性或者此属性值为空，则使用GET方式来提交数据。

GET和POST提交方式的主要不同点在于如下两点：

1.因为GET数据是URL的一部分，所以它会将表单数据附在URL后面传送。

也就是说，在浏览器的地址栏将会显示表单中的数据，并且，在通常情况下，浏览器会将这个附加数据后的URL保存起来，可以查阅通过浏览器的“历史”来得到它。

所以，这种方式不适合于发送需要保密的数据的表单，比如，密码等。

而POST不是URL的一部分，所以它不会将表单数据附在URL后面，所以这种方式不会发生上面的问题。

2.因为浏览器通常会限制URL的长度，所以，使用GET这种方式无法传送大量的数据。

而POST方式不会有这种问题。

所以，如果没有特殊的需要，最好使用POST方式来传送表单数据。

NAME属性用于给这个FORM指定一个名字，可以用字母和数字组合的方式来给FORM命名，但不要用数字开头。

ENCTYPE属性用于定义数据在发送前需要完成的编码方式，如果没有设置这个属性，那么会使用默认的值application/x-www-form-urlencoded，它使用的编码方式是UTF-8。

ACCEPT属性用于指定处理表单数据的ASP、JSP、Servlet或者其他程序接受的MIME（MultipurposeInternetMailExtensionprotocol,多用途网际邮件扩充协议）数据类型，如果FORM中有文件组件（FILE），还可以使用它来限制上载文件的类型。

ACCEPT-CHARSET属性用于指定处理表单数据的ASP、JSP、Servlet或者其他的程序接受的字符编码。

1.3.9文本组件

文本组件分成三种：

文本框、密码框和文本域，它们都可以放在FORM标记中用于接收文本数据，下面我们来学习这三种文本组件。

●文本框

文本框定义的基本格式如下：

INPUTTYPE="

TEXT"

VALUE="

MAXLENGTH="

文本框用标记INPUT定义，并且需要将它的TYPE属性值定义为TEXT，这也是INPUT标记的默认类型；

NAME属性用于给文本框指定一个名字，这个属性是必需的；

VALUE属性可以用于指定文本框的默认值；

SIZE属性用于定义文本框的大小，默认是20；

而MAXLENGTH是用于限制文本框的输入数据长度的属性。

●密码框

密码框和文本框类似，唯一和文本框区别的地方在于，需要将INPUT标记的TYPE属性设置为PASSWORD，其他的属性设置和文本框的设置一样，另外，在密码框中输入数据的时候，密码框中不会明文显示输入的数据，而是用“*”或其他的掩盖字符来表示，但这并不影响到将输入的数据发送。

●文本域

文本域使用<

TEXTAREA>

标记来定义，它的基本格式如下：

TEXTAREANAME="

ROWS="

COLS="

/TEXTAREA>

和前面的两个文本组件不同，<

标记必须成对出现，它有三个属性必须定义：

NAME用于设置文本域的名字，而ROWS用于设置文本域的行数，而COLS用于设置文本域的列数，如果文本域有默认值，则将默认值放在<

下面我们来看一个例子，这个例子中定义了一个FORM，在这个FROM中加入了三个文本组件：

示例1-5：

文本组件

textele.htm

/reg/register.jsp"

post"

NAME="

userInfo"

UserName"

15"

MAXLENGTH="

30"

默认值"

BR>

PASSWORD"

UserPwd"

SIZE="

DES"

20"

默认的值放在这里<

在这里用到了一个<

标记，它用于控制换行。

图1-6是它在IE中的显示结果。

图1-6文本组件

1.3.10下拉列表

下拉列表向用户提供一系列的选项。

它可以分为单选列表和多选列表两种。

单选列表可以让用户选择一个选项，它也是下拉列表的默认设置；

多选列表可以让用户选择多个选项。

下拉列表的基本格式如下：

SELECTNAME="

OPTIONVALUE="

/OPTION>

/SELECT>

下拉列表使用SELECT标记来定义，需要使用“NAME”属性来给它指定一个名字，“SIZE”属性用于指定下拉列表在浏览器中显示的行数，如果不指定这个属性，那么在浏览器中只有一行可见。

下拉列表的各个选项可以使用<

OPTION>

标记来定义，使用“VALUE”属性来给选项指定值，这个值不会显示在浏览器中，如果需要指定一个默认的选项，可以在该选项中加上一个“SELECTED”属性；

而在<

之间，可以定义显示到浏览器中的内容。

如果需要定义多选列表，可以通过指定<

SELECT>

标记的一个属性MULTIPLE来完成，并且同时将“SIZE”属性值设置为2或者2以上。

下面我们来看一个单选列表和多选列表的例子。

示例1-6：

单选列表和多选列表

select.htm

FORMNAME="

FN"

ACTION="

Favorite"

MULTIPLE>

Basketball"

篮球<

Volleyball"

排球<

TableTennis"

乒乓球<

Tennis"

网球<

Gender"

Man"

SELECTED>

Woman"

图1-6是这两个列表的显示效果，第一个为多选列表，第二个为单选列表。

在第二个单选列表中，指定了默认选项为第一个选项。

图1-7下拉列表

1.3.11单选框

单选框提供给用户多选一的组件，它的基本格式如下：

RADIO"

可以看出，单选框也是使用<

INPUT>

标记来定义，但是需要将它的“TYPE”属性设置为“RADIO”，需要给它指定一个名字。

一个<

只能定义一个单选框选项，因此对于一组的选项，必须针对每个选项定义并且需要给它们提供一样的名字，这样这些选项就能组成一个“组”，在这些选项中，每次最多只能有一个选项被选中。

如果需要指定默认的选项，可以给该选项指定“CHECKED”属性即可，如：

性别"

男"

男

女"

CHECKED>

女

这样，对于“性别”单选框，它有两个选项，默认选项是“女”。

1.3.12多选框

多选框提供给用户一个选择多个选项的组件，它的基本格式如下：

CHECKBOX"

通常情况下，将一组同样性质的多选框指定一样的名字。

如果需要指定某些选项为默认选项，可以给这个选项指定“CHECKED”属性。

被选择中的各个选项值会组成一个字符串发送到服务器端，各个选项值之间用逗号隔开。

下面我们来看一个多选框和单选框的例子：

示例1-7：

单选框和多选框

check.htm

展开阅读全文