第一章 Java Web编程基础.docx
- 文档编号:3852864
- 上传时间:2022-11-25
- 格式:DOCX
- 页数:40
- 大小:270.38KB
第一章 Java Web编程基础.docx
《第一章 Java Web编程基础.docx》由会员分享,可在线阅读,更多相关《第一章 Java Web编程基础.docx(40页珍藏版)》请在冰豆网上搜索。
第一章JavaWeb编程基础
第一章JavaWeb编程基础
本章要点
本章介绍了HTML的基础知识,对与JavaWeb编程相关的HTML标记做了详细的介绍。
对于JavaScript,也做了相应的说明。
1.1HTML基础
HTML是“超文本标记语言(HyperTextMarkupLanguage)”的简称,它是进行网页设计的基础。
它是由众多预定义好的、以“<”和“>”包含起来的标记组成的。
下面我们来看一个HTML文件。
示例1-1:
第一个HTML文件
源文件:
HelloWorld.htm
HelloWorld
将上面的文本内容保存成一个扩展名为“.htm”或者“.html”的文件,如HelloWorld.htm,然后在IE或者其他浏览器中打开它,可以看到如图1-1所示的效果。
图1-1HelloWorld.htm在IE中的执行效果
下面我们来分析一下这个简单的HTML文件。
从上面的代码1-1中我们可以看出,每一个HTML文件都是以标记开始,以标记结束。
而HTML标记通常(但不是总是)是成对出现的,如和,以及在和之间的两对标记:
、和、以及在对之间的在
提示:
HTML标记不区分大小写,例如,标记和甚至的效果是一样的。
但读者在编写自己的程序时,最好自始至终都采用同样的书写方式。
1.2
中常用的标记在
标记中,除了上小节提到的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
TEXT="#00FF00">BODY中的文字,
将会显示成绿色。
图1-2所示就是body.htm在IE中的显示效果。
图1-2body.htm在IE中的显示结果
1.3.2标记
除了可以使用
标记中的TEXT属性来统一指定HTML文档中的文字颜色外,还可以通过标记来指定某段文字的颜色,以及其他的文字风格,只需要将这些文字包含在和之间就可以了,下面是标记的基本用法:在这个标记中,使用了三个属性来定义中包含的文字的风格:
用COLOR指定文字的颜色;FACE属性指定文字的字体,注意,如果在客户端的系统上找不到指定的字体,浏览器将会使用系统的默认字体来显示;SIZE指定文字的大小。
另外,还有三个标记和字体的风格相关:
、和,它们都是成对出现的,即…,…和…,标记之间用于放置文字。
标记对用来控制文字显示为粗体(Bold),而标记对用来控制文字显示为斜体(Italics),标记用来控制文字的下划线。
这三个标记可以嵌套使用,比如,如果要控制字体显示为粗体+斜体,可以使用下面的方式:
Thisisatestsentence
它就会在IE中显示一行斜体+粗体风格的文字。
1.3.3标题字体
可以使用
所定义的字体最大,而定义的字体最小。
另外,后面会自动的空出一行。
下面是标记的基本用法:
这是一个三级标题字体
这是内容……上面的代码段在浏览器中显示的时候,使用
所定义的字体显示“这是一个三级标题字体”,接着在
后面空一行,然后再显示“这是内容……”这些信息。1.3.4标记
标记用于向文档中引入一张图片,它的用法如下:
标记和前面其他的标记不一样的地方在于它可以不需要有结束标记。
SRC属性用于指定需要引入的图片的路径,最好不要使用绝对路径,这个属性是必需的,而后面的其他属性都是可选的;WIDTH用于指明图片的宽度,如果不指定,则使用图片的实际宽度来显示;HEIGHT用于指明图片的高度,如果不指定,则使用图片的实际高度来显示;BORDER用于指明图片的边框大小,默认为0,即没有边框;ALIGN用于指明图片的水平对齐方式,可以选择LEFT、RIGHT、CENTER中的一个,默认为LEFT,即靠左对齐。
1.3.5标记
标记表示一个超链接,用于引导指向另外一个资源(其他HTML文件、图片、EMAIL、JSP文件等等)。
它的用法如下:
其中HREF指明这个超链接指向的另一个资源,这个属性是必需的。
而和之间的“文字或图片”使用于指示这个超链接的,点击文字或者图片,浏览器就会转到另一个资源中。
下面是一个文字连接:
而下面是一个图片连接:
另外,还可以将数据附在超链接上,通过超链接向HREF属性定义的资源传递字符串数据。
比如,如果“HREF”指向的资源是“getData.jsp”,我们希望向这个jsp程序传递一个人名(PersonName)“张三”,那么,我们可以将超链接写成如下格式:
personName=张三">资源 从这个例子我们可以看出,在超链接中,加上了“? personName=张三”,其中,使用“? ”来分割开需要链接的资源和往这个资源传递的数据,而personName是往这个资源传递的数据的“名字”,“张三”是往这个资源传递的数据的“值”,它们之间用分号分割开来,也就是说,传递的数据按照“名-值”对的形式出现。 在服务器端,可以在getData.jsp中通过“personName”来取得它的对应的值。 如果需要往“getData.jsp”传递多个值,那么可以给这几个值之间使用“&”来分隔,如: personName=张三&age=20">资源 这样,就往“getData.jsp”中传递了两个参数: personName和age,它们的值分别为“张三”和“20”,在getData.jsp中可以分别使用这两个参数的名字来取得对应的参数值。 关于如何取得这些参数值,将在后续的章节介绍。 1.3.6列表标记 列表标记有两种形式,一种是有序列表(OrderedList),另一种是无序列表(UnorderedList),它们之间的区别在于,有序列表在显示的时候会自动的将列表中的各项内容从上到下排序,并且在每项内容前加上序号;而无序列表则不会加上序号。 下面是无序列表的用法:
下面是有序列表的用法:
- 选项
- 选项
- 选项
图1-3左边是有序列表的显示效果,右边是无序列表的显示结果。
图1-3列表
1.3.7表格定义标记
第一列 | 第一列 |
第一列 | 第一列 |
上面定义了一个简单的表格,在IE中的显示结果如图1-4所示。
从上面的代码可以看出,定义一个表格除了
、 | 和 | ||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
用于定义表头(TableHead)中的列,在浏览器中,通常是表现为粗体居中文字。 ● | 用于定义表格的一列,所有的表格内容都放在 | 之间,可以是文字、图片、表单(FORM)元素甚至是另一个表格。 | 中用WIDTH设置各列的宽度,用ALIGN属性来设置表格格子中内容的水平对齐方式,可以使用LEFT、CENTER、RIGHT中的一个值。 另外,对于不规则的表格,可以使用ROWSPAN来设置表格的格子跨越的表格行数,而用COLSPAN来设置表格的格子所跨越的表格列数。 在进行表格定义时, | |||||||
---|---|---|---|---|---|---|---|---|---|---|
( | )标记必须放在 | |
---|---|---|
姓名 | 年龄 | 性别 |
张三 | 23 | 男 |
玛丽 | 20 | 女 |
它的显示效果如图1-4所示。
图1-4表格
下面我们来看一个不规则的表格。
示例1-4:
不规则的表格
源文件:
table1.htm
这个表格的第一行跨越了三列,所以在这边使用COLSPAN="3"来指定,它在IE中的显示效果如图1-5所示。
图1-5不规则表格
对于跨越多行的表格,可以使用ROWSPAN来定义。
在此不再赘述。
1.3.8表单(FORM)定义
表单(FORM)在动态网站编程中占有重要的地位,使用FORM,可以从客户端向服务器端发送数据,在服务器端,可以使用ASP、JSP、Servlet、CGI等程序将传递过来的数据读取出来进行处理。
FORM定义的基本格式如下:
...
在FORM定义中,可以指定ACTION、METHOD、NAME、ENCTYPE等属性,用于接收数据的各类表单元素定义在
之间。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标记中用于接收文本数据,下面我们来学习这三种文本组件。
●文本框
文本框定义的基本格式如下:
文本框用标记INPUT定义,并且需要将它的TYPE属性值定义为TEXT,这也是INPUT标记的默认类型;NAME属性用于给文本框指定一个名字,这个属性是必需的;VALUE属性可以用于指定文本框的默认值;SIZE属性用于定义文本框的大小,默认是20;而MAXLENGTH是用于限制文本框的输入数据长度的属性。
●密码框
密码框和文本框类似,唯一和文本框区别的地方在于,需要将INPUT标记的TYPE属性设置为PASSWORD,其他的属性设置和文本框的设置一样,另外,在密码框中输入数据的时候,密码框中不会明文显示输入的数据,而是用“*”或其他的掩盖字符来表示,但这并不影响到将输入的数据发送。
●文本域
文本域使用
和前面的两个文本组件不同,
NAME用于设置文本域的名字,而ROWS用于设置文本域的行数,而COLS用于设置文本域的列数,如果文本域有默认值,则将默认值放在之间。
下面我们来看一个例子,这个例子中定义了一个FORM,在这个FROM中加入了三个文本组件:
示例1-5:
文本组件
源文件:
textele.htm
NAME="userInfo"> MAXLENGTH="30"VALUE="默认值"> SIZE="15"MAXLENGTH="30"> 默认的值放在这里 在这里用到了一个 图1-6是它在IE中的显示结果。 图1-6文本组件 1.3.10下拉列表 下拉列表向用户提供一系列的选项。 它可以分为单选列表和多选列表两种。 单选列表可以让用户选择一个选项,它也是下拉列表的默认设置;多选列表可以让用户选择多个选项。 下拉列表的基本格式如下: 下拉列表使用SELECT标记来定义,需要使用“NAME”属性来给它指定一个名字,“SIZE”属性用于指定下拉列表在浏览器中显示的行数,如果不指定这个属性,那么在浏览器中只有一行可见。 下拉列表的各个选项可以使用之间,可以定义显示到浏览器中的内容。 如果需要定义多选列表,可以通过指定 下面我们来看一个单选列表和多选列表的例子。 示例1-6: 单选列表和多选列表 源文件: select.htm 图1-6是这两个列表的显示效果,第一个为多选列表,第二个为单选列表。 在第二个单选列表中,指定了默认选项为第一个选项。 图1-7下拉列表 1.3.11单选框 单选框提供给用户多选一的组件,它的基本格式如下: 可以看出,单选框也是使用标记来定义,但是需要将它的“TYPE”属性设置为“RADIO”,需要给它指定一个名字。 一个只能定义一个单选框选项,因此对于一组的选项,必须针对每个选项定义并且需要给它们提供一样的名字,这样这些选项就能组成一个“组”,在这些选项中,每次最多只能有一个选项被选中。 如果需要指定默认的选项,可以给该选项指定“CHECKED”属性即可,如: 这样,对于“性别”单选框,它有两个选项,默认选项是“女”。 1.3.12多选框 多选框提供给用户一个选择多个选项的组件,它的基本格式如下: 通常情况下,将一组同样性质的多选框指定一样的名字。 如果需要指定某些选项为默认选项,可以给这个选项指定“CHECKED”属性。 被选择中的各个选项值会组成一个字符串发送到服务器端,各个选项值之间用逗号隔开。 下面我们来看一个多选框和单选框的例子: 示例1-7: 单选框和多选框 源文件: check.htm 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。 copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1
标记,它用于控制换行。