《程序设计基础JAVA电子教案》由会员分享，可在线阅读，更多相关《程序设计基础JAVA电子教案（107页珍藏版）》请在金锄头文库上搜索。
1、程序设计基础程序设计基础-JAVA电子教案电子教案1.1 理解理解HTML1.1.1 HTML的基本概念的基本概念1.1.2 HTML的标签的标签1.1.3 表单与点选图象表单与点选图象JAVA初级教程Web系统开发技术与方法1.1.1 HTML的基本概念的基本概念HTML语言是超文本标记语言（HyperlinkTextMarkupLanguage）的缩写，是基于SGML（标准通用标记语言，StandardGeneralMarkupLanguage）定义下的一个描述性语言，是使用特殊标识来描述文档结构和表现形式的一种语言，由W3C（WorldWideWebConsortium）制定和更新。用H
2、TML编写的超文本文档称为HTML文档，它独立于各种操作系统平台，如UNIX，WINDOWS等。超文本是可以包含纯文本、图片、声音、动画、视频等内容标识，并在相关内容和相关文档间建立链接关系的内容形式。虽然HTML文档可以包含纯文本、图片、声音、动画、视频等内容标识，但这些标识本身所构成的文档是一种纯文本文件，可以用任何一种文本编辑器进行编辑。JAVA初级教程Web系统开发技术与方法1.1.1 HTML的基本概念的基本概念HTML不是一种程序设计语言，而是一种结构表示语言。它是用来对网页内容进行排版的一种标识语言。HTML是由一些特定符号和语法组成的，使用描述性的标记符（称为标签）来指明文档的
3、不同内容。标签是区分文本各个组成部分的分界符，用来把HTML文档划分成不同的逻辑部分（或结构），如段落、标题和表格等。标签描述了文档的结构，它向浏览器提供该文档的格式化信息，以传送文档的外观特征。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签的标签HTML文档有很多由“”所饮包含的内容，这些内容就是HTML标签。由HTML标签所括起来的句子组成的就是所要标识的内容。HTML标签用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（1）1. 单标签单标签n单标签是HTML中最简单的一
4、种标签，该类标签只需单独使用就可以完整地表达其含义，这类标签的使用语法是：n在HTML中，最常用的单标签是，它表示换行。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（2）2. 双标签双标签nHTML大多数标签都是“双标签”，它由“开始标签”和“结束标签”两部分构成，必须成对使用。告诉Web浏览器标签所表示的功能的开始和结束。“开始标签”和“结束标签”的书写形式基本相同，只是结束标签前比开始标签多了一个斜杠“/”。n这类标签的语法是：标识内容n其中“标识内容”部分就是这对标记施加作用的部分。例如要突出显示某段文字，就将此段文字放在一对、标签中：第一：JAVA初级教程
5、Web系统开发技术与方法1.1.2 HTML的标签（的标签（3）3. 标签属性标签属性 n许多单标签和双标签的开始标签内可以包含一些属性，其语法是：n各属性之间无先后次序，属性也可省略（即取默认值）。n例如单标签表示在文档当前位置画一条水平线（horizontalline），一般是从窗口中当前行的最左端一直画到最右端。可带一些属性，如：n其中SIZE属性定义线的粗细，属性值取整数，默认值为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，该值为默认值），CENTER（居中），RIGHT（右对齐）；WIDTH属性定义线的长度，可取相对值（由一对号括起来的百分数，表示相对于充满整个窗口的百分比
6、），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），默认值是100%。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（4）4. 结构标签结构标签n结构标签用于说明HTML文档的结构。HTML文档分文档头和文档体两部分。文档头对文档进行了一些必要的定义，文档体中是要显示的各种具体信息。一般的HTML文档具有以下基本结构：n头部信息文档主体，即文档的正文部分n可以看出HTML文档由标签、标签和标签三部分组成。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（4）n(1) 标签标签n在文档的最外层，表示这对标签间的内容是HTM
7、L文档。它标明HTML文档的开始，类似地，结束标签应该出现在HTML文档的尾部。有时一些网页会省略标记，因为.html或.htm文件被Web浏览器默认为是HTML文档。n(2) 标签标签n标签出现在文档的起始部分，标明文档的标题，或介绍性信息。该部分包含的是文档的无序信息。文档标题部分可以包含题目和主题信息。结束标签指明文档标题部分的结束。n(3) 标签标签nHTML文档中的标签用来标明文档的主体区域，该部分能够包容其它字符串，如标题、段落、列表等，可以将HTML文档的主体区域简单地理解成标题以外的所有部分。结束标签指明主体区域的结尾。JAVA初级教程Web系统开发技术与方法1.1.2 HTM
8、L的标签（的标签（5）5.文字显示标签n(1) 标题标签标题标签n一般文章都有标题、副标题、章和节等结构层次的内容，HTML中也提供了相应的标题标签。其中n为标题的等级，HTML总共提供六个等级的标题，n越小，标题字号就越大，以下是所有等级的标题：n第一级标题n第二级标题n第三级标题n第四级标题n第五级标题n第六级标题JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（5）n(2) FONT标签标签nFONT标签是用来设置字体的大小、颜色、字体等，其格式为：nnFONT标签的属性有：nSIZEwSIZE表示字体的大小，可以取1、2、3、4、5、6、7七个等级。w例如：今
9、天天气真好！nCOLORwCOLOR表示字符的颜色，以#RRGGBB表示，其中RR、GG、BB都是数字，取0255之间的值。分别表示红、绿、蓝3种色值，色值越大，该颜色的强度就越强。也可以使用下列预定义色彩值：Black，Red，Blue，White，Green，Purple等。例如：w文字红色文字w文字红色文字nFACEwFACE表示所用字体，取值都为字体名称。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（5）n(3) 逻辑字体标签逻辑字体标签n常用的逻辑字体(LogicalStyle)标签包括以下几种：w下划线标签w删除线标签w代码标签w闪烁标签w增强标签w强
10、调标签w示例标签w此外，常用的还有字体标签，如粗体：，斜体：等。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（5）n(4) 换行标签换行标签n换行标签为，前面已提到，是一种单标签。在编写HTML文件时，往往不必考虑太多的细节设置，也不用担心段落过长的部分会被浏览器切掉。这是因为每当浏览器窗口被缩小时，浏览器会自动将其中所显示的HTML标签文本右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。n(5) 小于号标签和大于号标签小于号标签和大于号标签n由于小于号(“”)组成一对尖括号，而这两个字符已作为标签字符，所以当需要显示这两个字符本身时，就必
11、须采用其他的转义方法表示。HTML中采用“<”和“>”分别显示小括号和大括号本身。在它们两端无需加尖括号。例如：<。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（5）n(6) 段落标签段落标签n段落标签为。为了使文本排列整齐、清晰，文字段落之间常用来做标签。文档段落的开始由表示，段落的结束由来标明。其中是可以省略的，因为下一个的开始就意味着上一个的结束。n(7) 水平线标签水平线标签n水平线标签为。这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。有三个属性：wSIZE ：水平线的宽度；wWIDTH：水平线的长度，用占屏幕宽度的百分比或象素
12、值来表示；wALIGN：水平线的对齐方式，有LEFT，RIGHT，CENTER三种取值情况；wNOSHADE：线段无阴影属性，为实心线段。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（5）n(8) 位置控制标签位置控制标签n位置控制标签为。通过该标签的ALIGN属性，可以选择文字或图片的对齐方式，ALIGN属性取值为LEFT表示向左对齐，取值为RIGHT表示向右对齐，取值为CENTER表示居中。其基本语法如下：n此外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。如：wwwJAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（6）
13、6. 链接标签链接标签相关内容间的链接是超文本的重要特性之一。通过链接，网络中的相关信息资源联系在一起，用户也可以从一个页面直接跳转到其他相关页面、图象等信息资源，从而可以更快地找到所需要的信息。Web中不同信息间的这种链接关系可通过HTML的链接标签来建立。常用的链接标签有和。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（6）(1) 链接标签链接标签n链接标签的格式为：n链接文字n其中，链接标签的属性包括：wHERF 超文本链接指向的URL；wNAME超文本链接的名称；wTARGET新打开的一个浏览器窗口（可和窗口标签配合使用或打开新的窗口）。n例如：北京师范大
14、学n文字和图片均可进行链接。文字和图片均可进行链接。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（6）可用.标签来设定链接、未链接部份颜色。的相关属性有：nALINK按下链接部份并保持时颜色nLINK未看过的链接部份颜色nVLINK已看过的链接部份颜色例如：JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（6）链接分为本地链接、URL链接和目录链接。本地链接本地链接n同一台机器上的不同文件间进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。n例如，如果正在浏览的网页的绝对路径是：
15、c:mybooksHTML教程chapter01.htm，而该页相对于当前目录，即“HTML教程”的相对路径就是：chapter01.htm。n如果要表示浏览HTML教程之外另一页的某个文件，该文件的路径要以两个圆点(.)来表示上一层目录，即：././internet/IP地址。n把这几种路径的表示方法写入链接中：w以绝对路径表示：文件的链接w以相对路径表示：文件的链接w链接上一目录中的文件：IP地址JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（6）URL链接链接URL的含义是统一资源定位器，通过它可以以多种通讯协议与外界沟通来存取信息。URL链接的形式是：协议名
16、:/主机.域名/路径/文件名其中协议包括：nfile本地系统文件nhttpWWW服务器nftpftp服务器ntelnet基于TELNET的协议nmailto电子邮件nnewsUsenet新闻组ngopherGOPHER服务器nwaisWAIS服务器写在HTML文件中，链接其他主机上的文件时，格式如下：n北京师范大学n北京师范大学励耘论坛JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（6）目录链接目录链接n目录链接用于具体说明是指向该文件上部、下部或是中央部分。使用目录链接，首先要把某段落设置为链接位置，格式是：n然后在调用此链接部分的文件中定义链接，格式是：链接文字
17、n如果是在一个文件内跳转，文件名可以省略不写。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（6）(2) 标签标签n标签用于设定基本URL的位置或路径，以后只要设定文件名称即会自动加上位置或路径。n该标签的属性有：wHREF链接的URL位址或文件wTARGET指定链接到的URL位址或文件显示于哪一个窗口（可和窗口标签配合使用或开新的窗口）。n例如：链接文字JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（7）7. 列表标签列表标签n列表标签用来在网页上将数据组织成多行的排列形式显示，列表又分为无序号列表、序号列表、可选择列表和定义性列表几种
18、类型。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（7）(1) 无序号列表无序号列表n无序号列表就是没有编号的列表，使用的标签是，在每一个列表项前边使用。n其结构如下所示：ww第一项w第二项wn其中type有3种可选类型：disc、circle、square(都必须小写)。分别表示实心圆点、空心圆点、小方块三种类型。它们是出现在各选项左侧的项目符号。例如：ww第一项w第二项w第三项wJAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（7）(2) 序号列表序号列表n序号列表是带有编号的列表，它的格式和使用方法与无序号列表基本相同。序号列表使用
19、标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：ww第一项w第二项w第三项wn其中，START属性表示编号开始的数，例如START=3表示编号从3开始，如果从1开始可以省略。nTYPE属性表示编号式样，例如：TYPE=1表示编号为1、2、3等阿拉伯数字；TYPE=A表示编号为A、B、C等大写字母。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（7）(3) 可选择列表可选择列表n可选择列表是一个带滚动条的列表，表中项目可供选择，它的格式是：nn选项1n选项2n选项3nn其中NAME属性表示该选择列表的名称。SIZE属性表示该列表中可
20、同时显示的行数，即列表的高度。MULTIPLE表示可以对列表中的项目进行多项选择。OPTIONVALUE为选项的值。SELECTED指定初始状态下的选项，上式中初始状态选择了选项1。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（7）(4) 定义性列表定义性列表n定义性列表可以用来给每一个列表项再加上一段说明性文字，说明性文字独立于列表项另起一行显示。在应用中，列表项使用标签标明，说明性文字使用表示。在定义性列表中，还有一个属性是COMPACT,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示：ww第一项叙述第一项的定义w第二项叙述第二项的定义w第三项
21、叙述第三项的定义wJAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（8）8.表格标签n(1) 标签标签n用于定义表格。是一种容器标记，即用它来声明表格开始，而且其他表格标签只能在标签内的使用。n标签的相关属性如下：wALIGN调整位置wBGCOLOR背景颜色wBORDER边框wHEIGHT高度wWIDTH宽度JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（8）n(2) 标签标签n用于定义表格的标题。表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。n例如：设置标题位于表格上方：n.JAVA初级教程Web系统开发技术与
22、方法1.1.2 HTML的标签（的标签（8）n(3) 、和和标签标签n标签用于定义表的一行，标签用于定义一个表元，即表格中一个单元格的数据，标签用于定义表头。n表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左(left)、居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上对齐(top)、居中(middle)、下对齐(bottom)和基线(baseline)。n例如：wwJAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（8）n(4)
23、 跨多行、多列的表元跨多行、多列的表元 n要创建跨多行、多列的表元，只需在或中加入ROWSPAN或COLSPAN属性，这两个属性的值，表明了表元中要跨越的行或列的个数。n例如：w其中，COLSPAN表示跨越的列数，COLSPAN=2表示该单元格的宽度为两个列的宽度。n又如：w其中ROWSPAN所要表示的意义是指跨越的行数，ROWSPAN=2就表示该单元格跨越表格两个行的高度。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（9）9. 图像标签图像标签n图像标签为。超文本支持的图象格式一般有XBitmap(XBM)、GIF、JPEG三种，通过标签可以在HTML文件中添加
24、图像，n其格式为：n其中，SRC属性指明了所要链接的图像文件地址，该图像文件可以是本地机器上的图像，也可以是位于远程主机上的图像文件。地址的表示方法可以沿用“链接标签”中URL的地址表示方法。JAVA初级教程Web系统开发技术与方法1.1.2 HTML的标签（的标签（9）图像标签有以下属性：nSRC表示图像文件的URL地址nDYNSRC表示视频文件的URL地址nWIDTH表示图像的宽度nHEIGHT表示图像的高度nVSPACE表示图像上下空白区的大小nHSPACE表示图像左右空白区的大小nALIGN标识图像与周围文本的对齐关系nALT当鼠标接近图像时显示的提示nBORDER表示图像的边框宽度n
25、CONTROLS设置视频文件是否可用nSTART设置视频文件的播放方式nLOOP设置视频文件的播放次数JAVA初级教程Web系统开发技术与方法1.1.3 表单与点选图象表单与点选图象表单在Web被广泛使用，主要用于接收用户数据输入。一个表单往往由以下部分组成：n(1)标签；n(2)标签中的一种或多种表单输入方式，由说明；n(3)一个或多个提交按钮。JAVA初级教程Web系统开发技术与方法1.1.3 表单与点选图象（表单与点选图象（1）1. 与与标签标签n为表单标签，用以说明开始一个表单模式，它属于一个容器标记，表示其它表单标签需要在它的包围中才有效，便是其中的一个，用以设定各种输入数据的方法。
26、它是一个单标签。定义表单的格式为：nn表单通常是与CGI配合使用的，参数ACTION用以指明该CGI程序的位置，以便将表单所填的数据正确传给CGI进行处理。其中的“METHOD=GET|POST”表示将资料传送给CGI的方式有两种，可以是POST方式或GET方式。JAVA初级教程Web系统开发技术与方法1.1.3 表单与点选图象（表单与点选图象（1）n表单中可以有不同类型的数据输入区域，以通过不同的方式在表单中输入数据。这些不同的输入方式由标签的TYPE属性来定义，具体格式是：nn其中TYPE类型可以选择的形式有：nTEXT文本输入nRADIO单选按钮nCHECKBOX复选框nPASSWORD
27、密码输入框nSUBMIT/RESET提交和重置按钮nBUTTON按钮nHIDDEN隐藏按钮（可以隐藏一个字段）JAVA初级教程Web系统开发技术与方法1.1.3 表单与点选图象（表单与点选图象（1）n标签还可以设置一些属性，主要有：wALIGN：对齐方式，可以取值为TOP、BOTTOM或MIDDLE。wMAXLENGTH：允许输入的最大字符数。wSIZE：控件的宽度。wSRC：插入图像的地址和名称。wVALUE：对于BUTTON、SUBMIT、RESET是表单的CAPTION。对于RADIO、CHECKBOX是控件的值。对于TEXT、PASSWORD为默认值。wEVENT：指定激发的事件。JA
28、VA初级教程Web系统开发技术与方法1.1.3 表单与点选图象（表单与点选图象（2）2.表单标签中的其他标签n(1) 多行文本标签多行文本标签n有时在网页上会让用户输入大量文字，此时标签中的TEXT就显得不敷使用，这时可以利用标签来产生一个可以输入多行文本的区域。标签的主要属性有：nNAME：设定文本的名称。nWRAP：设定此文本的换行模式。设定值有：OFF不自动换行、VIRTUAL自动换行。nCOLS：取值为一整数，设定文本的列数（横向字数）。nROWS：取值为一整数，设定文本的行数（垂直字数）。JAVA初级教程Web系统开发技术与方法1.1.3 表单与点选图象（表单与点选图象（2）n(2)
29、 下拉菜单标签下拉菜单标签n利用可以产生一个下拉菜单。使用标签时，需要配合标签来产生选项。的主要属性包括：nNAME：设定下拉菜单的名称。nSIZE：设定下拉菜单的大小，默认值为1，如果有四个选项，而又将SIZE设成4，则下拉式菜单便会变成选项方块，将四个选项一起呈现在方块中。nVALUE：菜单选项值。nMULTIPLE：设定下拉菜单为复选，即可以一次选择多个选项。JAVA初级教程Web系统开发技术与方法1.1.3 表单与点选图象（表单与点选图象（2）n例如：n您喜欢看书吗？：非常喜欢还算喜欢不太喜欢非常讨厌JAVA初级教程Web系统开发技术与方法1.2HTTP协议和WEB服务器1.2.1 H
30、TTP协议的内容和工作方式协议的内容和工作方式1.2.2 客客户户机机/服服务务器器模模式式的的信信息息交交换换过过程程JAVA初级教程Web系统开发技术与方法1.2.1 HTTP协议的内容和工作方式协议的内容和工作方式Web服务器使用的主要协议是HTTP（HyperTextTransferProtocol）协议，即超文体传输协议。HTTP协议是基于TCP/IP协议之上的协议，是Web浏览器和Web服务器之间的应用层协议。它是通用的、无状态的、面向对象的协议。HTTP协议于1990年提出，早期版本是HTTP1.0，最近的版本是1.1，但当前大多数Web客户程序仍使用1.0版本的HTTP协议。H
31、TTP有点对点和借助中间服务两种信息传输方式。JAVA初级教程Web系统开发技术与方法1.2.1 HTTP协议的内容和工作方式协议的内容和工作方式1. 点对点方式点对点方式n该种方式是最简单的传输方式，拨号上网用户访问自己接入的ISP的WWW服务器即为此种方式。客户端主机与源服务器之间建立起点对点的直接连接关系，响应速度当然也是比较快的。2. 借助中间服务的方式借助中间服务的方式n该种方式设定中间服务器，或称中继结点。HTTP支持三种类型的中间系统。JAVA初级教程Web系统开发技术与方法1.2.1 HTTP协议的内容和工作方式协议的内容和工作方式n(1) 代理服务器代理服务器n代理服务器(p
32、roxy)接收客户发送的HTTP资源请求，代替客户向服务器发送请求，然后代替客户接收服务器的应答，再转给客户。从其行为上看具有双重性，既作为客户向源服务器发请求，又作为服务器向客户返回应答。n(2) 网关型中间服务器网关型中间服务器n网关型中间服务器(gateway)可以代替那些不能够直接与客户通信的源服务器接收客户请求，对于客户来说，gateway就是源服务器，实际上，gateway可作为防火墙。n(3) 通道型服务器通道型服务器n通道型服务器(tunnel)对于客户和源服务器来说，都是不可见的，它只是简单地把接收到的HTTP数据流转发出去，对数据流本身不作任何改变，也就是简单的中继作用。除
33、通道服务器外，中间服务器、源服务器系统都可具有本地的缓存机制。JAVA初级教程Web系统开发技术与方法1.2.2客户机/服务器模式的信息交换过程HTTP的工作过程为典型的客户机/服务器工作模式，客户机即为Web浏览器，服务器即是Web服务器。HTTP的工作过程使用请求/响应握手方式，一个客户机与服务器建立连接后，发送一个请求给服务器，请求方式的格式为：统一资源标识符(URL)、协议版本号，后边是MIME信息包括请求修饰符、客户机信息和可能的内容。服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能
34、的内容JAVA初级教程Web系统开发技术与方法1.2.2客户机/服务器模式的信息交换过程该过程分为四个步骤：即建立连接、发送请求信息、发送响应信息、关闭连接。图1-1客户机/服务器工作过程JAVA初级教程Web系统开发技术与方法1.2.2客户机/服务器模式的信息交换过程第一步：客户机向Web服务器发出连接请求，Web服务器响应，客户机和Web服务器之间建立一条TCP连接。此时，Web服务器会创建一系列环境变量并给它们赋值。Web浏览器与Web服务器建立连接，打开一个称为socket（套接字）的虚拟文件，此文件的建立标志着连接建立成功。第二步：Web浏览器通过socket向Web服务器提交请求。
35、第三步：Web浏览器提交请求后，通过HTTP协议传送给Web服务器。Web服务器接到后，进行事务处理，处理结果又通过HTTP传回给Web浏览器，从而在Web浏览器上显示出所请求的页面。第四步：关闭连接：当应答结束后，Web浏览器与Web服务器必须断开，以保证其它Web浏览器能够与Web服务器建立连接。JAVA初级教程Web系统开发技术与方法1.2.2客户机/服务器模式的信息交换过程Web服务器处理过程包括一个完整的逻辑阶段：接受连接产生静态或动态内容并把它们传回浏览器关闭连接接受下一个连接。Web服务器可以接受多个浏览器的链接，一个浏览器也可以同时连接多个Web服务器。Web服务器采用了多线程
36、和多进程技术来解决多项任务造成的拥挤现象。Web服务器使用超文本标记语言HTML描述网络的资源，创建网页，以供Web浏览器阅读。JAVA初级教程Web系统开发技术与方法1.2.2客户机/服务器模式的信息交换过程Web浏览器(WebBrowser)是一个用于文档检索和显示的客户应用程序，并通过超文本传输协议HTTP与Web服务器相连。Web服务器是指驻留于因特网上某种类型计算机的程序。在网络中为实现信息发布、资料查询、数据处理等诸多应用搭建基本平台的服务器。当Web浏览器（客户端）连到服务器上并请求文件时，服务器将处理该请求并将文件发送到该浏览器上，附带的信息会告诉浏览器如何查看该文件（即文件类
37、型）。服务器使用HTTP（超文本传输协议）进行信息交流。JAVA初级教程Web系统开发技术与方法1.3 基于浏览器的系统优点基于浏览器的系统优点1.3.1 客户机客户机/服务器模式及特点服务器模式及特点1.3.2 浏览器浏览器/服务器模式服务器模式JAVA初级教程Web系统开发技术与方法1.3.1客户机/服务器模式及特点客户机是一个联网的信息请求方，通常是一台PC或工作站，为终端用户提供友好的界面，能够从服务器处查询数据库和其他信息。服务器通常是一台高性能工作站、小型计算机或大型机，拥有供网络中的众多客户操作的信息。在客户机/服务器计算模式下，一个或多个客户机和一个或若干个服务器，以及下层的操
38、作系统进程间通信系统，共同组成一个支持分布计算，分析和表示的系统。JAVA初级教程Web系统开发技术与方法1.3.1客户机/服务器模式及特点在客户机/服务器模式中，如果大量的操作在客户端进行，就是所谓的胖客户机，反之则是瘦客户机。胖客户机模型的主要优点是它充分利用了桌面功能，卸除了服务器上的应用处理并使它们更加有效，不易发生瓶颈。缺点则是需要在瘦服务器和胖客户机之间进行大量的数据传输，并且，维护、升级或替换分布于各客户端的应用程序是非常困难的。JAVA初级教程Web系统开发技术与方法1.3.1客户机/服务器模式及特点客户机/服务器工作模式的特点是：n1. 桌面上的智能桌面上的智能n2. 减少工
39、作站网络负载，优化网络利用率减少工作站网络负载，优化网络利用率n3. 最优化地共享服务器资源最优化地共享服务器资源n4. 较好的可维护性和可移植性较好的可维护性和可移植性n5. 维护数据库的完整性维护数据库的完整性n6. 数据库与客户程序无关数据库与客户程序无关JAVA初级教程Web系统开发技术与方法1.3.2 浏览器浏览器/服务器模式服务器模式1.浏览器/服务器模式的结构浏览器/服务器模式是随着Internet技术的兴起，对客户机/服务器模式的一种改进。浏览器/服务器结构是以Web为中心，采用TCP/IP、HTTP传输协议，客户端通过浏览器访问Web相连的后台数据库。在这种结构下，软件应用的
40、业务逻辑完全在应用服务器端实现，用户表现完全在Web服务器实现，客户端只需要浏览器即可进行业务处理，是一种全新的软件系统构造技术。浏览器/服务器模式实际上是一种三层结构的C/S模式，基本思想是将用户界面与企业逻辑分离，把信息系统按功能划分成表示、功能和数据三大块，分别放置在相同或不同的硬件平台上。JAVA初级教程Web系统开发技术与方法1.3.2 浏览器浏览器/服务器模式服务器模式主要有以下三层：(1)表示层n表示层是信息系统的用户接口部分，即人机界面，是用户与系统间交互信息的窗口，主要功能是指导操作人员使用界面，输入数据、输出结果。它并不拥有企业逻辑或只拥有部分不涉及企业核心机密的应用逻辑。
41、(2)功能层n功能层是应用的主体，包括了系统中核心和易变的逻辑(规划、动作方法、管理模式等)，它的功能是接收输入数据，处理后返回结果。(3)数据层n数据层即数据库管理系统，负责管理对数据库的读写和维护，能够迅速执行大量数据的更新和检索。JAVA初级教程Web系统开发技术与方法1.3.2 浏览器浏览器/服务器模式服务器模式在三层结构中，表示层和功能层之间的数据交换在尽可能简洁，应尽量减少一次业务处理在表示层这功能层之间进行的数据交换量。表示层话在客户端，功能层放在应用服务器上，数据层放在数据库服务器上JAVA初级教程Web系统开发技术与方法1.3.2 浏览器浏览器/服务器模式服务器模式2.浏览器
42、/服务器模式的特点：n(1)用户界面简单易用n(2)易于维护与升级n(3)具有良好的开放性n(4)信息共享度高n(5)扩展性好n(6)网络适应性强n(7)安全性好JAVA初级教程Web系统开发技术与方法1.4 客户端脚本语言客户端脚本语言JavaScript1.4.1 JavaScript的特点的特点1.4.2 JavaScript与与Java的主要区别的主要区别1.4.3 在在HTML中使用中使用JavaScript代码代码1.4.4 JavaScript函数函数1.4.5 JavaScript事件事件1.4.6 JavaScript对象对象1.4.7 利用利用JavaScript验证用户操
43、作验证用户操作JAVA初级教程Web系统开发技术与方法1.4.1 JavaScript的特点的特点JavaScript语言的前身是Livescript。在Sun公司推出Java语言之后，Netscape公司就引进了Sun公司有关Java的程序概念，以此来扩展NetscapeNavigator的功能，并将原有的Livescript重新设计，进而开发出一种可以嵌入Web页面、基于对象和事件驱动的解释性语言，并将其改名为JavaScript，。JAVA初级教程Web系统开发技术与方法1.4.1 JavaScript的特点的特点JavaScript具有以下特点具有以下特点：1. 脚本语言脚本语言nJa
44、vaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样，JavaScript也是一种解释性语言，它提供了一个简易的开发过程。JavaScript包括有限且简单的命令集合及语法，能够完成各种已定义的任务。nJavaScript的基本结构形式与Java、C、C+、VB、Delphi等语言十分类似，但它不像这些语言需要预先编译，而是在程序运行过程中被逐行地解释执行。它与HTML标签结合在一起，从而方便用户的使用操作。2. 简单性简单性nJavaScript与其他脚本语言一样，容易开发、易于排除故障。JavaScript是一种基于Java基本语句和控制流而设计的简单而紧凑的语
45、言，从而对于学习Java也是一种非常好的过渡。其次它的变量类型是采用弱类型，未使用严格的数据类型。JAVA初级教程Web系统开发技术与方法1.4.1 JavaScript的特点的特点3. 安全性安全性nJavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。4. 动态性动态性n由于JavaScript在浏览器中执行，而且能直接与HTML页面交互，因此JavaScript能使程序响应诸如鼠标单击、在表单窗体中输入数据、移动窗口、选择菜单等用户事件，为Web页面增加了交
46、互性，使页面具有成为动态性。同时，JavaScript本身可以直接对客户输入做出响应，而无须经过Web服务器端程序。5. 与平台无关与平台无关nJavaScript只只依赖于浏览器本身，而与操作环境无关，只要计算机能运行浏览器，并且浏览器支持JavaScript就可正确执行。JAVA初级教程Web系统开发技术与方法1.4.2 JavaScript与与Java的主要区别的主要区别(1)与Java不同，JavaScript是解释性语言。在Java中，源代码在运行前必须要进行编译，而在JavaScript中，源代码文件直接在运行时由浏览器解释执行。比Java简单，容易掌握。(2)JavaScript
47、是基于对象的语言，而Java是一种真正的面向对象的语言，即使是开发简单的程序，Java也必须创建对象。由于是一种基于对象和事件驱动的编程语言，JavaScript提供了许多已经创建好的内部对象，供程序设计人员使用。(3)Java采用强类型变量检查，即所有的变量在编译之前必须作声明。在JavaScript中，变量声明采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。JAVA初级教程Web系统开发技术与方法1.4.2 JavaScript与与Java的主要区别的主要区别(4)JavaScript是一种嵌入语言，它的语句直接嵌入到HTML文本中，而Java语句不能直接嵌入HT
48、ML文本。使用Java语言编写的程序应保存为独立的字节代码.class文件，供HTML进行调用。(5)在HTML文本中，通过标签调用Java的class文本，而通过标签使用脚本语言。JAVA初级教程Web系统开发技术与方法1.4.3 在在HTML中使用中使用JavaScript代码代码JavaScript语言是通过标签嵌入到HTML文本中的，其基本格式如下： JavaScript语言代码; JavaScript语言代码;.其中，属性Language用于说明后边文档中采用何种脚本语言，这里的Language=JavaScript说明采用的是JavaScript语言JAVA初级教程Web系统开发技
49、术与方法1.4.3 在在HTML中使用中使用JavaScript代码代码例子例子JS1.htm127Pleaseenteryourname:8910JAVA初级教程Web系统开发技术与方法1.4.3 在在HTML中使用中使用JavaScript代码代码1.语句1、6是一对标签。语句2、3、5是嵌入的JavaScript语句。2.语句2、6是一对注释语句，在它们之间的语句都不被HTML执行，但是对于JavaScript来说并不是注释句。JavaScript的注释句和Java一样是两条斜杠/，如语句5就是一个JavaScript的注释句。3.语句3中的function表示一个函数，getname是
50、函数名。4.语句4中的alert是窗口对象的一个方法，JavaScript通过引用函数名调用某个方法或函数。这个语句就是通过调用alert来调用方法。alert方法功能是弹出一个对话框，对话框中显示参数表示的字符串。5.语句1到7都在head标签之中，构成HTML文件头。习惯上人们把JavaScrip语句放在文件头重，但这不是必须的。6.语句8、9、10在文件体body中，设置了一个表单标签，表单类型是文本输入框。JAVA初级教程Web系统开发技术与方法1.4.3 在在HTML中使用中使用JavaScript代码代码JS1.htm程序运行结果为：JAVA初级教程Web系统开发技术与方法1.4.
51、4 JavaScript函数函数在JavaScript中，函数是由function语句定义。Function语句包括一个函数名、传递到函数的一系列参数以及所定义函数的函数体。Function函数名(参数表) 函数体;Return表达式;其中，函数命名与变量命名基本规则相同，函数名对大小写是敏感的，可以包括下划线“_”，以字母作为首字符。参数表是传递给函数使用或操作的值，其值可以是常量、变量或其它表达式。当调用函数时，所用变量可作为参数传递。通过指定函数名来调用函数。函数的结果是通过return语句来返回的。JAVA初级教程Web系统开发技术与方法1.4.4 JavaScript函数函数例：Fu
52、nctionprintName(name)document.write(“yournameis”);document.write(name);document.write(“”);在这个函数内，对name的引用指的是传递到函数的值。在调用函数时，如果变量传递到了函数，改变函数内的参数的值不会改变传递到函数的变量值。参数仅在函数生命周期内有效。如果多次调用函数，每次调用函数时会重新建立参数，而不会保留上次调用函数时所具有的值。JAVA初级教程Web系统开发技术与方法1.4.4 JavaScript函数函数对于函数定义中函数名后的参数表，参数变量的个数可通过arguments.Length来检查取
53、得，例如：FunctiongetArgumentsNum(exp1,exp2,exp3,exp4)Number=getArgumentsNum.arguments.Length;if(Number1)document.wrile(exp2);if(Number2)document.write(exp3);if(Number3)document.write(exp4);.JAVA初级教程Web系统开发技术与方法1.4.5 JavaScript事件事件JavaScript是基于事件驱动的。例如鼠标或热键的动作就可称之为事件，而由鼠标或热键引发的一连串程序的动作，就是由相应的事件驱动的。而对事件进行
54、处理的程序或函数，称之为事件处理程序。事件处理程序即是脚本，编程人员可以编写这些处理程序。当指定事件发生时，执行用户编写的事件处理程序。其基本格式为：事件处理程序的引用标签可以是JavaScript的任意语句、方法和函数。JAVA初级教程Web系统开发技术与方法1.4.5 JavaScript事件事件1. 鼠标和键盘事件鼠标和键盘事件鼠标事件包括onMouseDown、onMouseUp、onMouseOut和onClick事件，分别表示按下鼠标、抬起鼠标按钮、把鼠标从按钮上移开、单击鼠标按钮时产生的事件。在这些事件发生时，它们所指定的事件处理程序或代码将被调用执行。键盘事件包括onKeydo
55、wn、onKeyup和onKeypress等事件，分别表示按下、抬起和按下键盘上某个键时，发生的事件。通常鼠标和键盘事件在下列基本对象中产生：nbutton按钮对象ncheckbox“复选框”或“检查列表框”nradio单选钮nresetbuttons重要按钮nsubmitbuttons提交按钮JAVA初级教程Web系统开发技术与方法1.4.5 JavaScript事件事件2. 改变事件改变事件当利用text或texturea元素输入的字符值改变时发生该事件，同时当在select表格项中选项状态发生改变后也会引发该事件。3. 选中事件选中事件 该事件为onSelect，当text或textar
56、ea对象中的文字被选中后，引发该事件。4. 获取和失去焦点事件获取和失去焦点事件获得焦点事件onFocus：当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。失去焦点onBlur：当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocus事件是一个对应的关系。JAVA初级教程Web系统开发技术与方法1.4.5 JavaScript事件事件5. 加载和卸载窗口事件加载和卸载窗口事件加载窗口事件onLoad：当窗口加载时，产生该事件。onLoad的作用就在于首次载入一个文档时检测cookie的值，
57、并用一个变量为其赋值，使它可以被源代码使用。卸载窗口事件onUnload：当窗口退出时引发onUnload事件，并可更新Cookie的状态。6. 改变窗口大小时间改变窗口大小时间该事件为resize，改变窗口大小时发生该事件。JAVA初级教程Web系统开发技术与方法1.4.6 JavaScript对象对象JavaScript语言是基于对象的，它没有提供抽象、继承、重载等有关面向对象语言的功能。而是把其它语言所创建的复杂对象统一起来，形成一个强大的对象系统。JavaScript中的对象是由属性(properties)和方法(methods)两个基本元素构成的。对象的属性是指对象的背景色，长度，名
58、称等。对象的方法是指对属性所进行的操作，也就是一个对象自身所属的函数，如使对象获得焦点，使对象获得一个随机数等操作。引用对象可以通过三种方式获取：引用JavaScript内部对象、由浏览器环境中提供或创建新对象。JAVA初级教程Web系统开发技术与方法1.4.6 JavaScript对象（对象（1）1.JavaScript内部对象(1)string对象该对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。例如：mystring=ThisisaJavaScript“mystringlength=mystring.length最后mystringlength返回mystri
59、ng字串的长度为20。JavaScript对象属性的引用可以通过三种方法：使用点“.”运算符，如mystring.length。通过对象的下标实现引用，例如：country0=“China”；通过字符串的形式实现，例如：countryName=“China”。JAVA初级教程Web系统开发技术与方法1.4.6 JavaScript对象（对象（1）string对象的方法主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。常用的方法有：n有关字符显示的控制方法nbig()、small()字符用大、小体字体显示；Italics()斜体字显示，bold()粗体字
60、显示，blink()字符闪烁显示，fixed()固定字体显示、fontsize(size)控制字体大小，其中参数size可以取1，2，3等整数。n字体颜色方法；fontcolor(color)。参数color可以用以#RRGGBB表示，其中RR、GG、BB都是数字，取0255之间的值，分别表示红、绿、蓝3种色值，也可以用red,yellow,green等文字表示。n字符串大小写转换方法，toLowerCase()：转换成小写，toUpperCase()转换成大写。n字符搜索方法：indexOfchar,startIndex返回某字符第一次出现的位置。其中参数char是要搜索的字符，参数star
61、tIndex为搜索的起始位置。n返回字串的一部分字串方法：substring(start,end)方法。从start开始到end的字符全部返回。n锚点anchor(anchorName)：该方法创建如用Html文档中一样的anchor标签。说明：JavaScript对象方法的引用：使用点“.”运算符，ObjectName.methods()。JAVA初级教程Web系统开发技术与方法1.4.6 JavaScript对象（对象（1）n(2)算术函数对象mathn算术函数对象math，算术函数对象提供除加、减、乘、除以外的一些数学运算方法，常用的math方法有：n求绝对值abs()n求正弦、余弦值s
62、in(),cos()n求反正弦、反余弦asin(),acos()n求正切、反正切tan(),atan()n四舍五入floor()n求整数部分round()n平方根运算sqrt()n求随机数random()n幂运算pow(base,exponent)JAVA初级教程Web系统开发技术与方法1.4.6 JavaScript对象（对象（1）n(3)日期及时间对象Daten日期及时间对象是Date，要获取当前的日期和时间，必须通过关键字new创建一个实例，即MyDate=NewDate()。Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。n获取日期和时间方法ngetYear()返
63、回年数ngetMonth()返回当月号数ngetDate()返回当日号数ngetDay()返回星期几ngetHours()返回小时数ngetMintes()返回分钟数ngetSeconds()返回秒数ngetTime()返回毫秒数JAVA初级教程Web系统开发技术与方法1.4.6 JavaScript对象（对象（1）n设置日期和时间nsetYear()设置年nsetDate()设置当月号数nsetMonth()设置当月份数nsetHours()设置小时数nsetMintes()设置分钟数nsetSeconds()设置秒数nsetTime()设置毫秒数JAVA初级教程Web系统开发技术与方法1.
64、4.6 JavaScript对象（对象（1）n(4)JavaScript中的系统函数nJavaScript中的系统函数又称内部方法。这些方法不属于任何对象。如利用eval()可返回返回字符串表达式中的值。n这些系统函数主要有：wunEscape(string)返回字符串string的ASCII码wescape(char)将ASCII吗返回字符的编码wparseFloat(string)返回实数，将字符串类型的数字转化为实数wparseInt(stringradix)返回整数，将radix进制的字符串类型数字转化为整数。其中radix是数的进制，string字符串数字。JAVA初级教程Web系统
65、开发技术与方法1.4.6 JavaScript对象（对象（2）2. 由浏览器提供的对象由浏览器提供的对象浏览器提供了对象，一类是普通对象，如window（窗口）对象、document（文件）对象等，浏览器中只能有一个window或document对象。另一类称为集合，浏览器中可以有多个同类对象。例如frames（框架）、forms(表单)集合。JAVA初级教程Web系统开发技术与方法1.4.6 JavaScript对象（对象（3）3. 创建新对象创建新对象使用JavaScript可以创建用户自己的对象。创建一个对象，必须首先定义一个对象，然后再为该对象创建一个实例。这个实例就是定义的新对象。J
66、avaScript对象的定义，其基本格式如下：FunctionObject(属性表)This.prop1=prop1This.prop2=prop2.This.meth1=FunctionName1;This.meth2=FunctionName2;.在一个对象的定义中，可以为该对象指明其属性和方法。通过属性和方法构成了一个对象的实例。JAVA初级教程Web系统开发技术与方法1.4.6 JavaScript对象（对象（3）例如，关于University对象的定义：FunctionUniversity(name,city,creatDateURL)This.name=nameThis.city=
67、cityThis.creatDate=NewDate(creatDate)This.URL=URL一旦对象定义完成后，就可以为该对象创建一个实例了：NewObject=NewObject();其中NewObject是新的对象，Object是已经定义好的对象。JAVA初级教程Web系统开发技术与方法1.4.7 利用利用JavaScript验证用户操作验证用户操作在web系统中JavaScript主要用来在客户端完成用户操作验证、与用户进行简单交互等功能，在用户前台使用JavaScript可以减轻后台服务器的负担。为了程序的可读性和JavaScript的复用性，通常程序员把这些通用的功能函数集中放
68、在.js文件中，然后在前台页面调用，这样就不用在每个页面中写很多重复的JavaScript函数。函数举例：validateRequired(form)和validateFloat(form)。nvalidateRequired(form)函数用来验证form对象中某些特定的域是否是空值，用户只要把希望验证的域和返回值作为参数，然后直接调用这个函数就可以完成空值校验功能。nvalidateFloat(form)函数用来验证form对象中某些特定的域值是否是float类型，用户只要把希望验证的域和希望的返回值作为参数，然后直接调用这个函数就可以完成float数据类型的校验功能。JAVA初级教程We
69、b系统开发技术与方法1.4.7 利用利用JavaScript验证用户操作验证用户操作在用户前台的显示页面中加入如下脚本：functionvalidateCustomer(form)returnvalidateRequired(form)&validateFloat(form);functionrequired()this.aa=newArray(CustName,客户名称是必填字段,newFunction(varName,returnthisvarName;);functionFloatValidations()this.aa=newArray(Discount,折扣须是数字,newFunct
70、ion(varName,returnthisvarName;);JAVA初级教程Web系统开发技术与方法1.4.7 利用利用JavaScript验证用户操作验证用户操作脚本首先定义了客户验证函数validateCustomer(form)，这个函数调用validateRequired(form)和validateFloat(form)对用户输入进行验证，required()和FloatValidations()指定了将要进行验证的域和返回值。用户可以根据不同的程序功能设定不同的域进行验证，并指定个性化的返回值。ValidateRequired（form）代码如下：functionvalidat
71、eRequired(form)varisValid=true;varfocusField=null;vari=0;varfields=newArray();oRequired=newrequired();for(xinoRequired)varfield=formoRequiredx0;if(field.type=text|field.type=textarea|field.type=file|JAVA初级教程Web系统开发技术与方法1.4.7 利用利用JavaScript验证用户操作验证用户操作field.type=select-one|field.type=radio|field.type
72、=password)varvalue=;if(field.type=select-one)varsi=field.selectedIndex;if(si=0)value=field.optionssi.value;elsevalue=field.value;if(trim(value).length=0)if(i=0)focusField=field;fieldsi+=oRequiredx1;isValid=false;JAVA初级教程Web系统开发技术与方法1.4.7 利用利用JavaScript验证用户操作验证用户操作if(fields.length0)focusField.focus()
73、;alert(fields.join(n);returnisValid;JAVA初级教程Web系统开发技术与方法1.5 CSS格式语言格式语言1.5.1 CSS的作用的作用1.5.2 CSS基本语法基本语法 JAVA初级教程Web系统开发技术与方法1.5.1 CSS的作用的作用CSS(CascadingStyleSheets)是层叠样式表，或译为级联样式表、串接样式单，一般直接简称为样式表。样式表是一种用于设计网页样式的工具。其作用是用来设计和控制网页外观，在网页中定义文字属性，文本属性等网页中的基本信息，从而有效地对页面的布局、字体、颜色、背景和其它效果实现精确的控制，便于实现网站统一、整体
74、的外观风格。CSS的主要功能是通过对HTML标签进行设定，来达到对网页中的字体、格式、颜色、背景图象和其它图文效果进行控制，使网页能按设计者的意图来显示。JAVA初级教程Web系统开发技术与方法1.5.1 CSS的作用的作用CSS的作用有以下几个方面：n(1)将格式和结构分离。n(2)不依赖于特定版本的浏览器，在几乎所有的浏览器上都可以使用。n(3)一些原来通过图片转换实现的功能，只要用CSS就可以轻松实现，从而能够制作出体积更小、下载更快的网页；n(4)使用户轻松地控制页面的布局。n(5)可以同时更新多个网页的格式。JAVA初级教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法
75、（1）1. 基本语法格式基本语法格式CSS是由三个部分构成，它们是：选择符（selector）、属性（properties）和属性的取值（value）。基本格式如下：selectorproperty:value(1)选择符、属性和属性值n选择符用来指定CSS规则所适用的对象，通常是所要定义样式的HTML标签。属性用来声明所要定义的某一方面的特征，属性值是属性的具体内容。n通过选择符来定义相应的属性和属性值，其中每个属性都有一个值，属性和属性值要用冒号隔开，即具有形式：选择符属性：值。n有时属性的值由多个单词组成，这时应给属性值加引号。n如果要在一个选择符中声明多个属性，即单一选择符的复合样式声
76、明，不同的“属性:属性值”对间要用分号隔开，即：选择符属性1:值1;属性2:值2。JAVA初级教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法（1）(2)选择符组n在CSS中可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义。(3)CLASS选择符nCLASS选择符就是类选择符。利用CLASS选择符完成样式定义后，其他具有相同样式需求的应用可以继承已定义的类，从而方便地使用。n定义CLASS选择符时，需要在自定类的名称前面加一个点号，类的名称可以是任意的英文单词或以英文开头与数字的组合。为了简单明了，一般以其功能和效果简要命名。然后可以在HTM
77、L标签里加入所定义的class参数。如：wp.righttext-align:rightw这个段落向右对齐的w.textcolorcolor:#0000ffw这个标题是蓝色的JAVA初级教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法（1）(4)ID选择符nID选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为它具有一定的局限性。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。定义ID选择符时要在名字前面加指示符“#”。n定义ID选择符的属性有以下两种方法：n匹配所有元素wID属性将匹配所有id=“intro”的元素：w#intron匹配链接元素wID属
78、性只匹配id=“intro”的链接元素：wa#intro(5)包含选择符n包含选择符也叫做关联选择符。使用方法是一个用空格隔开两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。所以，可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。JAVA初级教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法（1）(6)样式表的层叠性n层叠性就是继承性，这是因为样式表具有伪类性。样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。n
79、当样式表继承遇到冲突时，总是以最后定义的样式为准。n不同的选择符定义相同的元素时，有优先级。ID选择符优先级最高，其次是类选择符之后是HTML标签选择符。可以用!important提升样式表的优先权。(7)注释n注释有利于编写者或阅读者以后对代码的理解、编辑和更新，且在浏览器中并不显示出来。nCSS注释以/*开头，以*/结尾，可写在任何需要的位置。JAVA初级教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法（2）2.在HTML页面中引入CSS在HTML页面中有四种引用CSS的方法：n(1)在内部的元素中使用“style”属性来定义样式w方法是在内部的元素中需要用到的标签中加上s
80、tyle属性，将这一属性的值设定为要使用的CSS样式。简单清楚而易于理解，但没有达到内容和实现分离的目的。n(2)在元素中使用“style”元素来指定w方法是在内部元素中使用“STYLE”标签来定义样式表，即将CSS样式表定义在网页内部的head标签里。但只有当前页面可以使用。n(3)使用元素链接到外部的样式文件w设定的方法是在head标签中使用link标签指定。可避免重复。n(4)使用CSS“import”标记来导入样式表单w这种方法的思想和使用元素链接到外部的样式文件是一致的，同样需要以一个.css为后缀的文件将样式表保存，然后通过import标记来导入。JAVA初级教程Web系统开发技术
81、与方法1.5.2 CSS基本语法（基本语法（3）w3. CSS的基本属性的基本属性w(1)背景属性nCSS中主要的背景属性如右表所示。nbackground-attachment属性u该属性可有两个取值：scroll和fixed；scroll是初始值，产生的效果是常见的背景图案随页面上的文字一起流动。fixed属性则能够产生背景静止不动，文字在背景上流动的特殊效果。nbackground-position属性u该属性是设置背景图案的起始位置，可分别用百分比和长度值来设定，初始值为0和0。属性属性值举例属性含义background-color#F5E2EC背景色彩background-image
82、 url(image/bg.gif)背景图片background-attachmentfixed固定背景background-repeatrepeat重复排列-网页预设No-repeat不重复排列repeat-x在x轴重复排列repeat-y在y轴重复排列background-position90%，90%背景图片x与y轴的位置JAVA初级教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法（3）w(2)文本属性n常用的文本属性如下表所示text-decorationLine-through加删除线overline加顶线underline加底线none删除连结底线text-tran
83、sformcapitalize首字大写uppercase英文大写lowercase英文小写text-alignright文字靠右对齐left文字靠左对齐center文字置中对齐justify 两端对齐 属性属性值举例属性含义color#999999文字色彩font-family细明体文字字型font-size9pt文字大小font-styleitelic文字斜体font-variantsmall-caps小字体letter-spacing1pt字间距离line-height200%设定行高font-weightbold文字粗体vertical-alignsub下标字super上标字JAVA初级
84、教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法（3）w(3)样式表的定位nCSS定位的positon属性能够使用两种方法定位HTML元素：相对定位和绝对定位。所谓相对定位是指允许元素在相对于文档布局的原始位置上进行偏移；而绝对定位允许元素与原始的文档布局分离且任意定位。实现CSS的定位最终还是要靠属性，CSS的定位属性共有9个。来看一下定位属性的详细列表：属性属性含义属性值position定义位置absolute，relative，staticleft、top指定横向、纵向坐标位置length，percentage，autowidth、height指定占用空间大小同上wlip
85、剪切shape,autooverflow内容超出时的处理办法visible，hiddenscroll，autoz-index产生立体效果auto，integervisibility定义可见性inherit，visible，hiddenJAVA初级教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法（3）w(4)鼠标属性n当把鼠标移动到不同的地方时，当鼠标需要执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生改变。n用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。在CSS当中，这种样式是通过“cursor”属性来实现的。cur
86、sor属性有很多的属性值，右表是它的详细内容。属性值含义auto自动，按照默认状态自行改变crosshair精确定位“十”字default默认指针hand手形move移动e-resize箭头朝右方ne-resize箭头朝右上方nw-resize箭头朝左上方n-resize箭头朝上方se-resize箭头朝右下方sw-resize箭头朝左下方s-resize箭头朝下方w-resize箭头朝左方text文本“I”形JAVA初级教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法（3）w(5)分级属性n在html中，使用者无需使用前面提到的一些字体、颜色、容器属性来对字体、颜色和边距、填
87、充距等进行初始化。因为在CSS中，已经提供了进行分级的专用分级属性。分级属性包括了“list-style”（列表样式）、“list-item”（列表项）等多种属性，下面看一下分级属性的详细列表：属性属性含义属性值display定义是否显示block，inline，list-item，nonewhite-space决定怎样处理空白部分normal，pre，nowraplist-style-type在列表项前加项目编号disc，circle，square，decima，lower-roman，upper-roman，lower-alpha，upper-alpha，nonelist-style-im
88、age在列表项前加图案lnonelist-style-position决定列表项中第二行的起始位置inside，outsidelist-style一次定义前面的列表属性，JAVA初级教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法（4）4. CSS应用举例应用举例用elegantERP系统的初步界面设计，举例说明CSS的语法、属性等在实际操作中的应用。首先定义一个CSS文件来统一管理和设计用户登陆界面，将该文件命名为login.css：nbodynbackground:#ffffff;nfont-family:arial,verdana;nfont-size:10px;nn.l
89、oginTextnfont-family:arial,verdana;/*设置文本的字体样式*/nfont-size:10px;/*设置文本的字体大小*/nna:hovertext-decoration:underline;ninput.bigwidth:100px;ninput.smallwidth:50px;JAVA初级教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法（4）在HTML文件中引入这个CSS文件login.css。详见：login.htmn在head中引用CSS文件：w/*使用CSS控制页面输出*/n在页面元素中的使用举例：wwwwwwwww用户登陆wwwwwwwww!-Clientogin-JAVA初级教程Web系统开发技术与方法wwww用户名:ww密码:请注意大小写wwww登录name=SubmitUserwwwww开发单位:elegant软件有限公司欢迎与我们联系wwJAVA初级教程Web系统开发技术与方法1.5.2 CSS基本语法（基本语法（4）运行结果：JAVA初级教程Web系统开发技术与方法
