Java-Wed应用开发全套电子课件完整版ppt整本书电子教案最全教学教程整套课件.pptx

《Java-Wed应用开发全套电子课件完整版ppt整本书电子教案最全教学教程整套课件.pptx》由会员分享，可在线阅读，更多相关《Java-Wed应用开发全套电子课件完整版ppt整本书电子教案最全教学教程整套课件.pptx（367页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目1 开发环境安装与配置 Java Web应用开发应用开发通过该项目，掌握Javaweb应用程序开发环境的安装与配置。整个开发环境包括JDK、Eclipse和Tomcat这三个组成部分。搭建好开发环境后，在此基础上创建并运行一个简单的Javaweb应用程序。该项目的包括以下任务：安装、配置JDK和Eclipse安装、配置Tomcat编写第一个Web应用程序单元介绍单元介绍知识目标知识目标了解JDK、Eclipse、Tomcat的概念掌握JDK、Eclipse、Tomcat的下载、安装方法掌握Eclipse的配置和使用方法掌握Tomcat的配置方法了解JavaWeb应用程序的基本结构能力目标能

2、力目标能下载、安装JDK能下载、安装、配置和使用Eclipse能下载、安装、配置Tomcat能创建并运行一个简单的Javaweb应用程序学习目标学习目标任务分析任务分析在进行在进行Java web应用程序开发之前，要搭建好开发平台，本节应用程序开发之前，要搭建好开发平台，本节任务主要包括任务主要包括JDK和和Eclipse的下载和安装。其中的下载和安装。其中JDK是是Java开发工开发工具集，为具集，为Java程序的编译、执行提供底层支持，程序的编译、执行提供底层支持，Eclipse是一个可是一个可视化的软件项目开发工具，具有组织和管理项目文件，代码智视化的软件项目开发工具，具有组织和管理项目

3、文件，代码智能提示、自动完成，项目编译部署等功能，能提示、自动完成，项目编译部署等功能，Eclipse的功能可以的功能可以通过插件扩展。通过插件扩展。任务任务1.1安装、配置安装、配置JDK和和Eclipse相关知识相关知识1.1 JDK简介简介JDK是是Java Development Kit的简称，是的简称，是Java语言的开发工具包，语言的开发工具包，它包含了它包含了Java的运行环境的运行环境(JRE)、工具和基础类库、工具和基础类库(rt.jar)。最主流的最主流的JDK是是Sun公司发布的公司发布的JDK，从，从SUN的的JDK5.0开始，提供开始，提供了泛型等实用的功能，其版本名

4、称也不再延续以前的了泛型等实用的功能，其版本名称也不再延续以前的1.1、1.2、1.3、1.4，而是变成了，而是变成了5.0、6.0。2010年年3月，月，Oracle收购收购Sun Microsystems，目前，目前JDK的最新版本是的最新版本是8.0。任务任务1.1安装、配置安装、配置JDK和和Eclipse相关知识相关知识1.2 Eclipse简介简介Eclipse 是一个开放源代码的、基于是一个开放源代码的、基于Java的应用开发平台，该平台本身的应用开发平台，该平台本身是一个具有可扩展性框架，可以通过插件进行扩展。是一个具有可扩展性框架，可以通过插件进行扩展。Eclipse最初是由

5、最初是由IBM公司开发的集成开发环境，公司开发的集成开发环境，2001年年11月贡献给开源社区，现在由月贡献给开源社区，现在由非营利软件供应商联盟非营利软件供应商联盟Eclipse基金会管理。基金会管理。2007年年6月，稳定版月，稳定版3.3发布；发布；2008年年6月发布代号月发布代号Ganymede的的3.4版；版；2009年年6月发布代号月发布代号Galileo的的3.5版；版；2010年年6月发布代号月发布代号Helios的的3.6版；版；2011年年6月发布代号月发布代号Indigo的的3.7版；版；2012年年6月发布代号月发布代号Juno的的4.2版；版；2013年年6月发布代

6、号月发布代号Kepler的的4.3版；版；2014年年6月发布代号月发布代号Luna的的4.4版；版；2015年年6月发布代号月发布代号Mars的的4.5版。版。任务任务1.1安装、配置安装、配置JDK和和Eclipse任务实施任务实施1.下载下载JDK从从http:/ 在在Eclipse官方网站的下载页面官方网站的下载页面http:/www.eclipse.org/downloads/可以下载安装可以下载安装程序，开发程序，开发Java Web应用程序应下载应用程序应下载“Eclipse IDE for Java EE Developers”，进，进入子页面后进一步选择软件版本和对应的操作系

7、统，这里选择最新版入子页面后进一步选择软件版本和对应的操作系统，这里选择最新版4.5（代（代号号Mars）任务任务1.1安装、配置安装、配置JDK和和Eclipse任务实施任务实施4.安装和启动安装和启动EclipseEclipse是以压缩包形式发布的，解压后运行是以压缩包形式发布的，解压后运行eclipse.exe即可。即可。Eclipse启动后会弹启动后会弹出工作区选择对话框，通过对话框可以设置工作区目录，该目录为出工作区选择对话框，通过对话框可以设置工作区目录，该目录为Eclipse项目项目文件的存放目录。文件的存放目录。任务任务1.1安装、配置安装、配置JDK和和Eclipse任务实施

8、任务实施5.Eclipse启动参数配置启动参数配置eclipse的启动由的启动由%ECLIPSE_HOME%/eclipse.ini控制，如果系统中没有定义环境变控制，如果系统中没有定义环境变量量ECLIPSE_HOME，则，则eclipse启动程序会默认读取安装目录下的启动程序会默认读取安装目录下的eclipse.ini。showsplashorg.eclipse.platformlauncher.defaultActionopenFilelauncher.appendVmargsvmE:jdk1.7binjavaw.exevmargsDosgi.requiredJavaVersion=1.

9、7Xms256mXmx1024m任务任务1.1安装、配置安装、配置JDK和和Eclipse任务实施任务实施6.在在Eclipse中配置中配置JREEclipse不知道系统中安装了哪些版本的不知道系统中安装了哪些版本的JRE（或（或JDK），需要在设置对话框中手工），需要在设置对话框中手工指定。指定。Eclipse的设置对话框通过点击菜单项的设置对话框通过点击菜单项“Window”“Prefrences”打开。打开。选择对话框左边树型列表的选择对话框左边树型列表的“Java”“Installed JREs”，对开发中使用的，对开发中使用的JRE（Java运行运行环境）进行管理。环境）进行管理。E

10、clipse默认已经添加了默认已经添加了JRE7，如果系统中还要用到，如果系统中还要用到JRE6，则点击，则点击“Add.”按钮，选择按钮，选择JRE6所在的目录，添加到开发平台中。所在的目录，添加到开发平台中。任务任务1.1安装、配置安装、配置JDK和和Eclipse任务实施任务实施7.编写编写Java程序测试开发环境程序测试开发环境在在Eclipse中新建一个中新建一个Java项目，起名为项目，起名为Test，选择，选择JDK1.7（JDK7.0）作为）作为项目编译运行环境，如图项目编译运行环境，如图1.7。在项目源码中添加在项目源码中添加TestEnv类，编写主函数如下：类，编写主函数如

11、下：案例案例1-1：检测：检测Java运行环境参数运行环境参数任务任务1.1安装、配置安装、配置JDK和和Eclipse任务实施任务实施7.编写编写Java程序测试开发环境程序测试开发环境在在Eclipse中新建一个中新建一个Java项目，起名为项目，起名为Test，选择，选择JDK1.7（JDK7.0）作为）作为项目编译运行环境，如图项目编译运行环境，如图1.7。在项目源码中添加在项目源码中添加TestEnv类，编写主函数如下：类，编写主函数如下：案例案例1-1：检测：检测Java运行环境参数运行环境参数任务任务1.1安装、配置安装、配置JDK和和Eclipse实践训练实践训练下载并安装JD

12、K1.7和EclipseIDEforJavaEEDevelopers4.5，在Eclipse中设置默认的JRE，并创建Java项目，编写程序检测Java运行环境参数。任务任务1.1安装、配置安装、配置JDK和和Eclipse任务分析任务分析Javaweb应用程序在运行时不仅要依赖JRE，还要依赖Tomcat容器。本节的任务是下载、安装和配置Tomcat，并在Eclipse中进行设置，让Eclipse和Tomcat协同工作。任务任务1.2安装、配置安装、配置Tomcat相关知识相关知识1.3Tomcat简介Tomcat是一个免费开源的轻量级Web应用服务器，在中小型系统和并发访问用户不是很多的场

13、合下被普遍使用，是开发和调试JSP程序的首选。Tomcat的官方网站地址是http:/tomcat.apache.org/。任务任务1.2安装、配置安装、配置Tomcat任务实施任务实施1.下载和安装Tomcat打开Tomcat的官方网站http:/tomcat.apache.org/，在主页的左边列出了各个版本的下载链接，目前最高版本是9.0，如图1.8。任务任务1.2安装、配置安装、配置Tomcat任务实施任务实施2.在Eclipse中配置Tomcat点击菜单项“Window”“Prefrences”打开Eclipse的设置对话框，选择对话框左边树型列表中的“Server”“Runtime

14、Environments”，对Web服务器进行管理。点击“Add.”按钮，弹出图1.9所示的对话框，选择对应的Tomcat版本，点“Next”，在如图1.10所示的对话框中选择Tomcat的路径和JRE版本。任务任务1.2安装、配置安装、配置Tomcat任务实施任务实施3.在Eclipse中新建Web服务器Eclipse在Servers窗口中列出所有的服务器，初次运行Eclipse时，服务器列表为空，此时点击里面的链接“Clickthislinktocreateanewserver.”可以新建服务器。点击链接后，在弹出的“NewServer”对话框中选择服务器类型（如图1.11），再点“Fin

15、ish”按钮完成服务器创建。在此界面中，可以点“Add.”对选中的服务器类型进行设置。任务任务1.2安装、配置安装、配置Tomcat任务实施任务实施服务器正确启动后，打开浏览器，输入“http:/localhost:8080/”,如果能打开如图1.14所示的Tomcat主页，说明服务器运行正常。任务任务1.2安装、配置安装、配置Tomcat任务实施任务实施4.配置Tomcat服务器Tomcat服务器的主要配置文件是server.xml和web.xml，在server.xml中配置web服务器相关参数，在web.xml中配置web应用程序参数。（1）server.xmlTomcat服务器的结构如

16、图1.15：任务任务1.2安装、配置安装、配置Tomcat任务实施任务实施从图中可以看出，Tomcat服务器主要由Server、Service、Connector、Engin、Host这些元素构成，各元素的属性可以在server.xml中配置。Server元素：代表整个容器,是Tomcat实例的顶层元素，对应org.apache.catalina.Server接口。Service元素：表示一个具体的Web服务，对应org.apache.catalina.Service接口，org.apache.catalina.core.StandardService类是Service接口的标准实现。它包含一

17、个Engine,以及一个或多个Connector,这些Connector共享同一个Engine。Connector元素：表示客户端和服务之间的连接。Engine元素：Service中的请求处理机，接收并处理来自Connector的请求，每个Service只能有一个Engine。Host元素：表示一个虚拟主机，一个Engine可以包含多个Host。Context元素：表示一个Web应用程序，一个Host可以包含多个Context。任务任务1.2安装、配置安装、配置Tomcat任务实施任务实施（2）web.xml在Tomcat目录下，web.xml存在于两处地方，第一处是conf/web.xml，

18、其设定会影响所有web应用程序，第二处是WEBINF/web.xml，其设定只影响该应用程序本身。默认主页(欢迎)文件设置报错页面设置会话超时的设置过滤器设置任务任务1.2安装、配置安装、配置Tomcat实践训练实践训练1.在Eclipse中设置并启动tomcat，然后打开浏览器，输入tomcat默认网址检测（http:/localhost:8080）网站是否正常运行。2.在server.xml中将tomcat的监听端口号改成9000，在Eclipse中重新启动Tomcat，输入端新的网址（http:/localhost:9000），测试网站是否正常运行，测试完毕后将端口改回8080。3.配置

19、一个虚拟主机，主机名叫myhost，通过域名访问，根目录是d:myhost。4.在虚拟主机中增加一个名为app1的Web应用程序。任务任务1.2安装、配置安装、配置Tomcat任务分析任务分析在Eclipse中建立一个JavaWeb应用程序项目，部署到Tomcat服务器中运行，主页为index.jsp。当客户端浏览器通过指定的网址访问该Web应用程序时，在浏览器中显示服务器的当前日期和时间。任务任务1.3 创建第一个创建第一个Web应用程序项目应用程序项目相关知识相关知识1.4 Web应用程序存放位置与结构应用程序存放位置与结构一个一个Web应用程序对应应用程序对应server.xml配置文件

20、中的一个配置文件中的一个Context节点，节点，其存放文件的根目录位置与其存放文件的根目录位置与Context节点的节点的docBase属性对应。如果属性对应。如果Host节节点中没有设置点中没有设置Context子节点，则默认的根目录就是该子节点，则默认的根目录就是该appBase指定目录指定目录下的下的ROOT子目录。子目录。Web应用程序根目录下有一个特殊文件夹应用程序根目录下有一个特殊文件夹WEB-INF，其中包含当前，其中包含当前Web应用程序的配置文件应用程序的配置文件web.xml存放在存放在WEB-INF中，仅对当前中，仅对当前Web应用应用生效。另外在生效。另外在WEB-I

21、NF中还包含两个子目录，分别是中还包含两个子目录，分别是classes和和lib，其中，其中classes中存放中存放Java类编译后生成的类编译后生成的.classes文件，文件，lib中存放中存放jar文件。文件。任务任务1.3 创建第一个创建第一个Web应用程序项目应用程序项目相关知识相关知识1.5 Web项目的组织结构项目的组织结构Eclipse中的中的Web项目组织结构如图项目组织结构如图1.16所示。所示。其中其中src目录中存放目录中存放Java源代码，源代码，WebContent目录中存放目录中存放jsp文件，配置文件文件，配置文件web.xml存放在目录存放在目录WebCon

22、tentWEB-INF中，中，依赖的第三方依赖的第三方jar文件（如数据库驱动）存放文件（如数据库驱动）存放在在WebContentWEB-INFlib中。中。任务任务1.3 创建第一个创建第一个Web应用程序项目应用程序项目项目实施项目实施1.修改修改Eclipse的配置文件，解决中文乱码问题的配置文件，解决中文乱码问题在启动在启动Eclipse前，用写字板打开前，用写字板打开Eclipse安装目录下的配安装目录下的配置文件置文件eclipse.ini，在，在“-vmargs”栏目下增加一行，内容为栏目下增加一行，内容为“-Dfile.encoding=utf-8”，然后启动，然后启动Ecl

23、ipse。这项设置保证新。这项设置保证新建的建的JSP页面编码用页面编码用UTF-8，支持中文内容。修改完毕后保存，支持中文内容。修改完毕后保存，再重新启动再重新启动Eclipse。任务任务1.3 创建第一个创建第一个Web应用程序项目应用程序项目项目实施项目实施2.新建项目新建项目Eclipse通过项目来管理一个通过项目来管理一个Web应用程序，在做程序之前要先新建项目。应用程序，在做程序之前要先新建项目。选择菜单选择菜单“File”“new”“Dynamic Web Project”（如果没有列出，在（如果没有列出，在Other中查找），在弹出对话框中填写中查找），在弹出对话框中填写“Pr

24、oject name”为为“FirstProject”，连续点击两次连续点击两次“Next”，在，在“Web Module”选项卡中勾选选项卡中勾选“Generate web.xml deployment descriptor”，让项目中自动添加，让项目中自动添加web.xml文件（如图文件（如图1.17），最后点），最后点击击“Finish”按钮创建新项目。按钮创建新项目。任务任务1.3 创建第一个创建第一个Web应用程序项目应用程序项目项目实施项目实施3.新建新建JSP页面页面在在“Project Explorer”窗口中找到刚才创建的窗口中找到刚才创建的“FirstProject”项目，

25、项目，在项目的在项目的WebContent文件夹上点击鼠标右键，在弹出菜单中选择文件夹上点击鼠标右键，在弹出菜单中选择“New”“JSP File”，然后在对话框中将文件名改为，然后在对话框中将文件名改为“index.jsp”，点点“Finish”按钮完成按钮完成JSP页面创建。页面创建。任务任务1.3 创建第一个创建第一个Web应用程序项目应用程序项目项目实施项目实施4.在在JSP页面中编写代码页面中编写代码5.运行程序运行程序点击工具栏上的点击工具栏上的“Run”按钮（快捷键按钮（快捷键Ctrl+F11），在弹出的对话框中选），在弹出的对话框中选择择“Run On Server”，并在后续

26、对话框中选择，并在后续对话框中选择“Tomcat V7.0 Server at localhost”作为运行作为运行Web应用程序的服务器。如果后面运行的时候也用该应用程序的服务器。如果后面运行的时候也用该服务器，不再弹出对话框，可以勾选服务器，不再弹出对话框，可以勾选“Always use this server when running this project”选项。选项。运行后，在运行后，在Eclipse的的Console窗口中会显示出服务器的启动过程，并打开窗口中会显示出服务器的启动过程，并打开浏览器显示运行结果。如果浏览器显示运行结果。如果Eclipse自带的浏览器没有自动打开，可

27、以在自带的浏览器没有自动打开，可以在外部打开浏览器，输入网址外部打开浏览器，输入网址“http:/localhost:8080/FirstProject/index.jsp”查看运行结果。查看运行结果。任务任务1.3 创建第一个创建第一个Web应用程序项目应用程序项目实践训练实践训练创建一个创建一个web应用程序项目，在应用程序项目，在jsp页面中打印乘法九九表。页面中打印乘法九九表。任务任务1.3 创建第一个创建第一个Web应用程序项目应用程序项目1.当当 Eclipse中的中的Web应用程序项目成功运行后，应用程序项目成功运行后，Tomcat安装目录下的安装目录下的server.xml发生

28、了什么变化（注意观察发生了什么变化（注意观察Context节点）？节点）？2.Web应用程序项目中的文件，在运行前被部署到了应用程序项目中的文件，在运行前被部署到了Tomcat下面的哪个下面的哪个目录中，项目中的内容和部署后的内容有什么对应关系？目录中，项目中的内容和部署后的内容有什么对应关系？拓展训练拓展训练项目2 实现用户注册功能实现用户注册功能 Java Web应用开发应用开发通过该项目，掌握网页表单标签的用法，以及通过表单提交数据后的接收、处理和响应。该项目的包括以下任务：设计用户注册表单接收表单提交的数据验证提交的数据是否合法处理表单提交的数据并响应输出单元介绍单元介绍学习目标学习目

29、标知识目标知识目标了解HTTP协议规范掌握表单标签的特点、使用方法和注意事项掌握接收表单提交数据的方法掌握提交数据的处理和响应输出到客户端的方法能力目标能力目标能设计规范、正确的网页表单能编写代码接收表单提交的数据能编写代码对提交数据的处理并响应输出到客户端任务任务任务任务2.12.1设计注册信息输入页面设计注册信息输入页面设计注册信息输入页面设计注册信息输入页面 任务分析任务分析 用户用户注册时提交信息类型比较多，包括文本类型、数值类型、日期类型等，注册时提交信息类型比较多，包括文本类型、数值类型、日期类型等，有的信息还有采用选择的方式，从指定选择中选择一项或多项。为了降低难度，有的信息还有

30、采用选择的方式，从指定选择中选择一项或多项。为了降低难度，注册页面中的表单输入元素都采用标准的注册页面中的表单输入元素都采用标准的HTML标签来实现标签来实现。相关知识相关知识 2.1 2.1 HTTP协议协议 HTTP是超文本传输协议是超文本传输协议(HyperText Transfer Protocol)的缩写，定义了客户端（如浏的缩写，定义了客户端（如浏览器）和览器）和web服务器之间的数据交换格式。服务器之间的数据交换格式。HTTP是一种无状态协议，客户端连接服务是一种无状态协议，客户端连接服务器后，发送请求数据，服务器端接收请求数据，处理后将结果返回给客户端，然后客器后，发送请求数据

31、，服务器端接收请求数据，处理后将结果返回给客户端，然后客户端和服务器端断开连接。户端和服务器端断开连接。HTTP通信过程就是一个通信过程就是一个“请求请求(request)”“响应响应(response)”的过程。的过程。HTTP协议的请求报文格式HTTP请求报文组成部分包括：*初始行(initialline)*请求头(headerlines)*空行(blankline)*消息正文(body)一个用HTTP抓包工具抓取到的请求报文内容如下：Origin:http:/localhost:8080UpgradeInsecureRequests:1UserAgent:Mozilla/5.0(Wind

32、owsNT6.3;WOW64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/50.0.2661.94Safari/537.36ContentType:application/xwwwformurlencodedReferer:http:/localhost:8080/FirstProject/AcceptEncoding:gzip,deflateAcceptLanguage:zhCN,zh;q=0.8Cookie:JSESSIONID=CEDA40765BA64F9C1D34FD089DB17811uid=abc&pwd=123456&sex=M&birt

33、hday=199051&interest=1&interest=2POSThttp:/localhost:8080/FirstProject/login_check.jspHTTP/1.1Host:localhost:8080Connection:keepaliveContentLength:64CacheControl:maxage=0Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8HTTP协议的响应报文格式HTTP响应报文组成部分包括：初始行(initialline)响应头(h

34、eaderlines)空行(blankline)消息正文(body)一个用HTTP抓包工具抓取到的响应报文内容如下：HTTP/1.1200OKServer:ApacheCoyote/1.1ContentType:text/html;charset=UTF8ContentLength:401Date:Mon,12Aug201609:18:40GMT注册验证提交的用户名是：abc提交的密码是：123456提交的性别是：M提交的生日是：199051提交的爱好是：12下面对几个常用headerlines进行说明Host:用于请求报文，表示请求的主机地址。ContentType:用于响应报文，表示返回资

35、源的文件类型，以MIME形式给出，如text/html、image/jpg、image/gif等。ContentLength:用于请求或响应报文，表示资源的文件长度。2.2 HTTPHTML是HyperTextMarkupLanguage(超文本标记语言)的缩写，用HTML编写的文档称为超文本文档。HTML本身为纯文本格式，但是可以通过一些特定的标签表示图片、声音、超链接等非文本内容。当浏览器发起请求时，服务器通过HTTP协议响应给浏览器的数据正文通常用HTML格式表示，浏览器接收到之后，再解析并呈现为用户看到的五彩缤纷的网页。HTML中包含了很多的标签，比如：在网页中显示flower.jpg

36、文件所对应的图片，高度和宽度都为200：在网页中显示一个超链接：百度在网页中显示一个表格：1行1列1行2列2行1列2行2列当浏览器向服务器发送比较复杂的数据时，人工去构造HTTP请求报文是一项艰巨的任务，并且用户需要一个友好的界面来填写数据，而并不关心浏览器在后台是怎么把数据提交给服务器的。HTML的表单标签包括一系列的控件，以友好的图形界面供用户进行输入或选择，当点击提交按钮时，将数据封装为HTTP请求报文发送给服务器。表单标签包括的控件有：2.3 表单标签表单标签input(输入)标签input标签是网页中变化最多的标签，根据type属性不同，可以产生10种变化，表2.1中进行了归纳：使用

37、input标签时注意：input标签一般要设置name属性，这样提交到服务器后才能获取到值；对于文本、密码输入框，可以通过value属性设置初始内容；对于按钮，可以通过value属性设置表面的提示文字；单选按钮和复选框的value属性在浏览器中没有效果，但是可以提交到服务器上；对于同在一个分组的单选按钮，name属性必须设置为相同的值；select标签一般和option标签配合使用，实现网页中的下列框和列表框，如下：select(选择)标签使用select标签时注意：select标签的size属性决定它的外观，默认情况下size为1，显示为下拉框，如果把size设置为大于1，就显示为列表框；s

38、elect标签的内容如果要提交，就必须包含在中，并且要设置name属性；在select标签中，每个标签对表示一个选项，默认选中项要加selected属性；在列表框中用multiple属性实现多选。textarea(文本域)标签textarea标签的功能和标签相似，都是实现文本输入，不同的是textarea可以输入较多内容，并且可以换行。使用select标签时注意：textarea标签必须成对使用；可以用cols、rows属性设置文本域的列数（宽度）和行数（高度）。form(表单)标签标签对定义表单的开始和结束，上述的表单控件只有包含标签对在里面，其数据才能提交。常用的属性有name、actio

39、n、method、target和enctype这几个属性的含义如下：name:表单的名字action:表单提交后处理程序的url地址method:提交表单的方式，采用get方式提交，提交的内容会显示在浏览器地址栏中，提交的数据量很少，采用post方式提交，提交的内容不会显示在地址栏中，提交的数据量大。target:显示返回结果页面的目标窗口（和a标签的target属性类似）enctype:上传数据的编码格式，上传文件一般用multipart/formdata例如：这段代码表示表单的名字叫form1，提交之后由reg_check.jsp处理，采用post方式提交，提交后的处理结果页面显示在新窗口

40、中。2.4 CSS定位与定位与DIV布局布局DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。CSS盒子模型CSS控制页面是通过盒子模型实现的，所有页面标签都可以看成一个盒子，分布在页面的固定位置。盒子的大小需要通过属性调整，盒子和盒子之间的影响也通过浮动和定位等技术实现。CSS盒子模型:从图中可以看出，CSS盒子模型包括6个部分，分别为元素内容(element)、宽度(width)、高度(height)、内边距(padding)、边框(border)和外边距(margin)。元素内容(element)

41、是指页面的实际内容。宽度(width)和高度(height)主要用于控制CSS盒子模型中元素的大小，盒子的实际宽度=元素宽度+内边距(左侧和右侧内边距之和)+边框(左侧和右侧边框宽度之和)+外边距(左侧和右侧外边距之和)，盒子的实际高度=元素高度+内边距(上侧和下侧内边距之和)+边框(上侧和下侧边框长度之和)+外边距(上侧和下侧外边距之和)。内边距(padding)定义元素边框与元素内容之间的空白区域。该属性可以设置1,2,3或者4个属性值。当指定1个属性值时，表示上、下、左、右的内边距均为该值。当指定2个属性值时，分别对应上、下和左、右的内边距。当指定3个属性值时，分别表示上、左右、下的内边

42、距。当指定4个属性值时，分别表示上、下、左、右的内边距。也可以通过paddingtop、paddingright、paddingbottom和paddingleft分别设置上、右、下、左内边距。边框(border)是围绕元素内容和内边距的一条或多条线。该属性允许你规定元素边框的样式、宽度和颜色。边框的样式是通过borderstyle属性实现的，该属性可以设置为none、hidden、dotted等，边框样式可以通过toprightbottomleft的顺序为上、下、左、右边框指定样式，也可以通过bordertopstyle、borderrightstyle、borderbottomstyle和

43、borderleftstyle分别设置上、右、下、左边框样式。外边距(margin)是指围绕在元素边框的空白区域，设置外边距的最简单的方法就是使用margin属性，margin属性接受任何长度单位，可以是像素、英寸、毫米或em，margin可以设置为auto，margin的默认值是0，所以如果没有为margin声明一个值，就不会出现外边距。CSS定义了一些规则，允许为外边距指定少于4个值，如果缺少左外边距的值，则使用右外边距的值，如果缺少下外边距的值，则使用上外边距的值，如果缺少右外边距的值，则使用上外边距的值。也可以通过margintop、marginright、marginbottom和m

44、arginleft分别设置上、右、下、左外边距。下面通过一个示例演示CSS盒子模型各个属性的用法，该示例实现一个背景为灰色的简单CSS盒子模型，具体代码如下所示:CSS盒子.boxbackgroundcolor:#808080;/*指定背景颜色*/margin:20px;/*指定外边距*/padding:20px;/*指定内边距*/height:60px;/*指定高度*/width:100px;/*指定宽度*/我是一个CSS盒子模型程序的运行结果如图所示：CSS盒子的定位与浮动float浮动在标准流中，一个块级元素在页面中独占一行，各个块级元素自上而下排列。但使用了浮动后，块级元素的排列方式就

45、会有所变化。float浮动属性可以指定left、right、none和inherit。left：元素向左浮动。right：元素向右浮动。none：默认值。元素不浮动，并会显示在其在文本中出现的位置。inherit：规定应该从父元素继承float属性的值。CSS盒子.boxbackgroundcolor:#808080;/*指定背景颜色*/margin:20px;/*指定外边距*/padding:20px;/*指定内边距*/height:60px;/*指定高度*/width:100px;/*指定宽度*/float:left;/*向左浮动*/我是一个CSS盒子模型我是一个CSS盒子模型下面在样式中

46、加入向左浮动效果，具体代码如下所示：程序的运行结果如图所示：通过上述两个示例，可以看出两个盒子由垂直排列变成了水平排列。如果要清除浮动效果，需要使用clear属性，它的取值可以为left、right、both、none和inherit。left：在左侧不允许浮动元素。right：在右侧不允许浮动元素。both：在左右两侧均不允许浮动元素none：默认值，允许浮动元素出现在两侧。inherit：规定应该从父元素继承clear属性的值。position定位position属性规定元素的定位类型。position包含以下5个属性。absolute：生成绝对定位的元素，相对于static定位以外的第一

47、个父元素进行定位。fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。relative：生成相对定位的元素，相对于其正常位置进行定位。static：默认值。没有定位，元素出现在正常的流中。inherit：规定应该从父元素继承position属性的值。CSS嵌套盒子.fatherbackgroundcolor:#D3D3D3;/*指定背景颜色*/height:80px;/*指定高度*/width:100px;/*指定宽度*/.sonbackgroundcolor:#696969;/*指定背景颜色*/height:40px;/*指定高度*/width:50px;/*指定宽度*/下面通过示例讲

48、解这几种属性的区别，该示例实现一个含有嵌套关系的盒子。具体代码如下所示：子盒子父盒子程序的运行结果如图所示:.sonbackgroundcolor:#696969;/*指定背景颜色*/height:40px;/*指定高度*/width:50px;/*指定宽度*/position:relative;/*相对定位*/left:20px;/*向右偏移20*/top:20px;/*向下偏移20*/如果想要让子盒子向右下各偏移20px，使用相对定位的代码如下所示：程序的运行结果如图所示：相对定位是相对于原来的位置，通过偏移指定的距离到达新位置，而父标签中的其它标签不受影响。如果使用绝对定位，代码如下所示

49、：.sonbackgroundcolor:#696969;/*指定背景颜色*/height:40px;/*指定高度*/width:50px;/*指定宽度*/position:absolute;/*绝对定位*/left:20px;/*向右偏移20*/top:20px;/*向下偏移20*/程序的运行结果如图2.7所示：绝对定位以父标签为基准进行偏移，如果没有父标签，会以浏览器窗口为基准进行偏移，其它标签按照原有布局进行排列。display属性display属性规定元素应该生成的显示框的类型，display的值可以是none、block或inline，none表示此元素不会被显示；block表示此元

50、素将显示为块级元素，此元素前后会带有换行符；inline为默认值，此元素会被显示为内联元素，元素前后没有换行符。将块级标签变成行内标签的代码如下所示。将块级标签变成行内标签将行内标签变成块级标签的代码如下所示。将行内标签变成行级标将块级标签和行内标签隐藏的代码如下所示。将块级标签隐藏将行内标签隐藏任务实施任务实施1.1.新建项目新建项目选择菜单“File”“new”“DynamicWebProject”（如果没有列出，在“Other”中查找），在弹出对话框中填写“Projectname”为“UserReg”，连续点击两次“Next”，在“WebModule”选项卡中勾选“Generateweb