资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/12/16,#,项目,1,开发环境安装与配置,Java Web,应用开发,通过该项目，掌握,Java web,应用程序开发环境的安装与配置。整个开发环境包括,JDK,、,Eclipse,和,Tomcat,这三个组成部分。搭建好开发环境后，在此基础上创建并运行一个简单的,Java web,应用程序。,该项目的包括以下任务：,安装、配置,JDK,和,Eclipse,安装、配置,Tomcat,编写第一个,Web,应用程序,单元介绍,知识目标,了解,JDK,、,Eclipse,、,Tomcat,的概念,掌握,JDK,、,Eclipse,、,Tomcat,的下载、安装方法,掌握,Eclipse,的配置和使用方法,掌握,Tomcat,的配置方法,了解,Java Web,应用程序的基本结构,能力目标,能下载、安装,JDK,能下载、安装、配置和使用,Eclipse,能下载、安装、配置,Tomcat,能创建并运行一个简单的,Java web,应用程序,学习目标,任务分析,在进行,Java web,应用程序开发之前，要搭建好开发平台，本节任务主要包括,JDK,和,Eclipse,的下载和安装。其中,JDK,是,Java,开发工具集，为,Java,程序的编译、执行提供底层支持，,Eclipse,是一个可视化的软件项目开发工具，具有组织和管理项目文件，代码智能提示、自动完成，项目编译部署等功能，,Eclipse,的功能可以通过插件扩展。,任务,1.1,安装、配置,JDK,和,Eclipse,相关知识,1.1 JDK,简介,JDK,是,Java Development Kit,的简称，是,Java,语言的开发工具包，它包含了,Java,的运行环境,(JRE),、工具和基础类库,(rt.jar),。,最主流的,JDK,是,Sun,公司发布的,JDK,，从,SUN,的,JDK5.0,开始，提供了泛型等实用的功能，其版本名称也不再延续以前的,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,最初是由,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,月发布代号,Kepler,的,4.3,版；,2014,年,6,月发布代号,Luna,的,4.4,版；,2015,年,6,月发布代号,Mars,的,4.5,版。,任务,1.1,安装、配置,JDK,和,Eclipse,任务实施,1.,下载,JDK,从,Web,应用程序应下载“,Eclipse IDE for Java EE Developers”,，进入子页面后进一步选择软件版本和对应的操作系统，这里选择最新版,4.5,（代号,Mars,）,任务,1.1,安装、配置,JDK,和,Eclipse,任务实施,4.,安装和启动,Eclipse,Eclipse,是以压缩包形式发布的，解压后运行,eclipse.exe,即可。,Eclipse,启动后会弹出工作区选择对话框，通过对话框可以设置工作区目录，该目录为,Eclipse,项目文件的存放目录。,任务,1.1,安装、配置,JDK,和,Eclipse,任务实施,5.Eclipse,启动参数配置,eclipse,的启动由,%ECLIPSE_HOME%/eclipse.ini,控制，如果系统中没有定义环境变量,ECLIPSE_HOME,，则,eclipse,启动程序会默认读取安装目录下的,eclipse.ini,。,-showsplash,org.eclipse.platform,-launcher.defaultAction,openFile,-launcher.appendVmargs,-vm,E:jdk1.7binjavaw.exe,-vmargs,-Dosgi.requiredJavaVersion=1.7,-Xms256m,-Xmx1024m,任务,1.1,安装、配置,JDK,和,Eclipse,任务实施,6.,在,Eclipse,中配置,JRE,Eclipse,不知道系统中安装了哪些版本的,JRE,（或,JDK,），需要在设置对话框中手工指定。,Eclipse,的设置对话框通过点击菜单项“,Window”“Prefrences”,打开。,选择对话框左边树型列表的“,Java”“Installed JREs”,，对开发中使用的,JRE,（,Java,运行环境）进行管理。,Eclipse,默认已经添加了,JRE7,，如果系统中还要用到,JRE6,，则点击“,Add.”,按钮，选择,JRE6,所在的目录，添加到开发平台中。,任务,1.1,安装、配置,JDK,和,Eclipse,任务实施,7.,编写,Java,程序测试开发环境,在,Eclipse,中新建一个,Java,项目，起名为,Test,，选择,JDK1.7,（,JDK7.0,）作为项目编译运行环境，如图,1.7,。,在项目源码中添加,TestEnv,类，编写主函数如下：,案例,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,实践训练,下载并安装,JDK1.7,和,Eclipse IDE for Java EE Developers 4.5,，在,Eclipse,中设置默认的,JRE,，并创建,Java,项目，编写程序检测,Java,运行环境参数。,任务,1.1,安装、配置,JDK,和,Eclipse,任务分析,Java web,应用程序在运行时不仅要依赖,JRE,，还要依赖,Tomcat,容器。,本节的任务是下载、安装和配置,Tomcat,，并在,Eclipse,中进行设置，让,Eclipse,和,Tomcat,协同工作。,任务,1.2,安装、配置,Tomcat,相关知识,1.3 Tomcat,简介,Tomcat,是一个免费开源的轻量级,Web,应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试,JSP,程序的首选。,Tomcat,的官方网站地址是,tomcat.apache.org/,。,。,任务,1.2,安装、配置,Tomcat,任务实施,1.,下载和安装,Tomcat,打开,Tomcat,的官方网站,tomcat.apache.org/,，在主页的左边列出了各个版本的下载链接，目前最高版本是,9.0,，如图,1.8,。,任务,1.2,安装、配置,Tomcat,任务实施,2.,在,Eclipse,中配置,Tomcat,点击菜单项“,Window”“Prefrences”,打开,Eclipse,的设置对话框，选择对话框左边树型列表中的“,Server”“Runtime Environments”,，对,Web,服务器进行管理。,点击“,Add.”,按钮，弹出图,1.9,所示的对话框，选择对应的,Tomcat,版本，点“,Next”,，在如图,1.10,所示的对话框中选择,Tomcat,的路径和,JRE,版本。,任务,1.2,安装、配置,Tomcat,任务实施,3.,在,Eclipse,中新建,Web,服务器,Eclipse,在,Servers,窗口中列出所有的服务器，初次运行,Eclipse,时，服务器列表为空，此时点击里面的链接“,Click this link to create a new server.”,可以新建服务器。,点击链接后，在弹出的“,New Server”,对话框中选择服务器类型（如图,1.11,），再点“,Finish”,按钮完成服务器创建。在此界面中，可以点“,Add.”,对选中的服务器类型进行设置。,任务,1.2,安装、配置,Tomcat,任务实施,服务器正确启动后，打开浏览器，输入“,localhost:8080/”,如果能打开如图,1.14,所示的,Tomcat,主页，说明服务器运行正常。,任务,1.2,安装、配置,Tomcat,任务实施,4.,配置,Tomcat,服务器,Tomcat,服务器的主要配置文件是,server.xml,和,web.xml,，在,server.xml,中配置,web,服务器相关参数，在,web.xml,中配置,web,应用程序参数。,（,1,）,server.xml,Tomcat,服务器的结构如图,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,接口的标准实现。它包含一个,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,，其设定会影响所有,web,应用程序，第二处是,WEB-INF/web.xml,，其设定只影响该应用程序本身。,默认主页,(,欢迎,),文件设置,报错页面设置,会话超时的设置,过滤器设置,任务,1.2,安装、配置,Tomcat,实践训练,1.,在,Eclipse,中设置并启动,tomcat,，然后打开浏览器，输入,tomcat,默认网址检测（,localhost:8080,）网站是否正常运行。,2.,在,server.xml,中将,tomcat,的监听端口号改成,9000,，在,Eclipse,中重新启动,Tomcat,，输入端新的网址（,localhost:9000,），测试网站是否正常运行，测试完毕后将端口改回,8080,。,3.,配置一个虚拟主机，主机名叫,myhost,，通过域名,访问，根目录是,d:myhost,。,4.,在虚拟主机中增加一个名为,app1,的,Web,应用程序。,任务,1.2,安装、配置,Tomcat,任务分析,在,Eclipse,中建立一个,Java Web,应用程序项目，部署到,Tomcat,服务器中运行，主页为,index.jsp,。当客户端浏览器通过指定的网址访问该,Web,应用程序时，在浏览器中显示服务器的当前日期和时间。,任务,1.3,创建第一个,Web,应用程序项目,相关知识,1.4 Web,应用程序存放位置与结构,一个,Web,应用程序对应,server.xml,配置文件中的一个,Context,节点，其存放文件的根目录位置与,Context,节点的,docBase,属性对应。如果,Host,节点中没有设置,Context,子节点，则默认的根目录就是该,appBase,指定目录下的,ROOT,子目录。,Web,应用程序根目录下有一个特殊文件夹,WEB-INF,，其中包含当前,Web,应用程序的配置文件,web.xml,存放在,WEB-INF,中，仅对当前,Web,应用生效。另外在,WEB-INF,中还包含两个子目录，分别是,classes,和,lib,，其中,classes,中存放,Java,类编译后生成的,.classes,文件，,lib,中存放,jar,文件。,任务,1.3,创建第一个,Web,应用程序项目,相关知识,1.5 Web,项目的组织结构,Eclipse,中的,Web,项目组织结构如图,1.16,所示。,其中,src,目录中存放,Java,源代码，,WebContent,目录中存放,jsp,文件，配置文件,web.xml,存放在目录,WebContentWEB-INF,中，依赖的第三方,jar,文件（如数据库驱动）存放在,WebContentWEB-INFlib,中。,任务,1.3,创建第一个,Web,应用程序项目,项目实施,1.,修改,Eclipse,的配置文件，解决中文乱码问题,在启动,Eclipse,前，用写字板打开,Eclipse,安装目录下的配置文件,eclipse.ini,，在“,-vmargs”,栏目下增加一行，内容为“,-Dfile.encoding=utf-8”,，然后启动,Eclipse,。这项设置保证新建的,JSP,页面编码用,UTF-8,，支持中文内容。修改完毕后保存，再重新启动,Eclipse,。,任务,1.3,创建第一个,Web,应用程序项目,项目实施,2.,新建项目,Eclipse,通过项目来管理一个,Web,应用程序，在做程序之前要先新建项目。,选择菜单“,File”“new”“Dynamic Web Project”,（如果没有列出，在,Other,中查找），在弹出对话框中填写“,Project name”,为“,FirstProject”,，连续点击两次“,Next”,，在“,Web Module”,选项卡中勾选“,Generate web.xml deployment descriptor”,，让项目中自动添加,web.xml,文件（如图,1.17,），最后点击“,Finish”,按钮创建新项目。,任务,1.3,创建第一个,Web,应用程序项目,项目实施,3.,新建,JSP,页面,在“,Project Explorer”,窗口中找到刚才创建的“,FirstProject”,项目，在项目的,WebContent,文件夹上点击鼠标右键，在弹出菜单中选择“,New”“JSP File”,，然后在对话框中将文件名改为“,index.jsp”,，点“,Finish”,按钮完成,JSP,页面创建。,任务,1.3,创建第一个,Web,应用程序项目,项目实施,4.,在,JSP,页面中编写代码,5.,运行程序,点击工具栏上的“,Run”,按钮（快捷键,Ctrl+F11,），在弹出的对话框中选择“,Run On Server”,，并在后续对话框中选择“,Tomcat V7.0 Server at localhost”,作为运行,Web,应用程序的服务器。如果后面运行的时候也用该服务器，不再弹出对话框，可以勾选“,Always use this server when running this project”,选项。,运行后，在,Eclipse,的,Console,窗口中会显示出服务器的启动过程，并打开浏览器显示运行结果。如果,Eclipse,自带的浏览器没有自动打开，可以在外部打开浏览器，输入网址“,localhost:8080/FirstProject/index.jsp”,查看运行结果。,任务,1.3,创建第一个,Web,应用程序项目,实践训练,创建一个,web,应用程序项目，在,jsp,页面中打印乘法九九表。,任务,1.3,创建第一个,Web,应用程序项目,1.,当,Eclipse,中的,Web,应用程序项目成功运行后，,Tomcat,安装目录下的,server.xml,发生了什么变化（注意观察,Context,节点）？,2.Web,应用程序项目中的文件，在运行前被部署到了,Tomcat,下面的哪个目录中，项目中的内容和部署后的内容有什么对应关系？,拓展训练,项目,2,实现用户注册功能,Java Web,应用开发,通过该项目，掌握网页表单标签的用法，以及通过表单提交数据后的接收、处理和响应。,该项目的包括以下任务：,设计用户注册表单,接收表单提交的数据,验证提交的数据是否合法,处理表单提交的数据并响应输出,单元介绍,学习目标,知识目标,了解,HTTP,协议规范,掌握表单标签的特点、使用方法和注意事项,掌握接收表单提交数据的方法,掌握提交数据的处理和响应输出到客户端的方法,能力目标,能设计规范、正确的网页表单,能编写代码接收表单提交的数据,能编写代码对提交数据的处理并响应输出到客户端,任务,2.1,设计注册信息输入页面,任务分析,用户,注册时提交信息类型比较多，包括文本类型、数值类型、日期类型等，有的信息还有采用选择的方式，从指定选择中选择一项或多项。为了降低难度，注册页面中的表单输入元素都采用标准的,HTML,标签来实现,。,相关知识,2.1,HTTP,协议,HTTP,是超文本传输协议,(HyperText Transfer Protocol),的缩写，定义了客户端（如浏览器）和,web,服务器之间的数据交换格式。,HTTP,是一种无状态协议，客户端连接服务器后，发送请求数据，服务器端接收请求数据，处理后将结果返回给客户端，然后客户端和服务器端断开连接。,HTTP,通信过程就是一个“请求,(request),”“响应,(response),”的过程。,HTTP,协议的请求报文格式,HTTP,请求报文组成部分包括：,*,初始行,(initial line),*,请求头,(header lines),*,空行,(blank line),*,消息正文,(body),一个用,HTTP,抓包工具抓取到的请求报文内容如下：,Origin:localhost:8080,Upgrade-Insecure-Requests:1,User-Agent:Mozilla/5.0(Windows NT 6.3;WOW64)AppleWebKit/537.36(KHTML,like Gecko)Chrome/50.0.2661.94 Safari/537.36,Content-Type:application/x-www-form-urlencoded,Referer:localhost:8080/FirstProject/,Accept-Encoding:gzip,deflate,Accept-Language:zh-CN,zh;q=0.8,Cookie:JSESSIONID=CEDA40765BA64F9C1D34FD089DB17811,uid=abc&pwd=123456&sex=M&birthday=1990-5-1&interest=1&interest=2,POST localhost:8080/FirstProject/login_check.jsp HTTP/1.1,Host:localhost:8080,Connection:keep-alive,Content-Length:64,Cache-Control:max-age=0,Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8,HTTP,协议的响应报文格式,HTTP,响应报文组成部分包括：,初始行,(initial line),响应头,(header lines),空行,(blank line),消息正文,(body),一个用,HTTP,抓包工具抓取到的响应报文内容如下：,HTTP/1.1 200 OK,Server:Apache-Coyote/1.1,Content-Type:text/html;charset=UTF-8,Content-Length:401,Date:Mon,12 Aug 2016 09:18:40 GMT,注册验证,提交的用户名是：,abc,提交的密码是：,123456,提交的性别是：,M,提交的生日是：,1990-5-1,提交的爱好是：,1 2,下面对几个常用,header lines,进行说明,Host:,用于请求报文，表示请求的主机地址。,Content-Type:,用于响应报文，表示返回资源的文件类型，以,MIME,形式给出，如,text/html,、,image/jpg,、,image/gif,等。,Content-Length:,用于请求或响应报文，表示资源的文件长度。,2.2 HTTP,HTML,是,HyperText Markup Language(,超文本标记语言,),的缩写，用,HTML,编写的文档称为超文本文档。,HTML,本身为纯文本格式，但是可以通过一些特定的标签表示图片、声音、超链接等非文本内容。,当,浏览器发起请求时，服务器通过,HTTP,协议响应给浏览器的数据正文通常用,HTML,格式表示，浏览器接收到之后，再解析并呈现为用户看到的五彩缤纷的网页。,HTML,中包含了很多的标签，比如：,在网页中显示,flower.jpg,文件所对应的图片，高度和宽度都为,200,：,在网页中显示一个超链接：,百度,在网页中显示一个表格：,1,行,1,列,1,行,2,列,2,行,1,列,2,行,2,列,当,浏览器向服务器发送比较复杂的数据时，人工去构造,HTTP,请求报文是一项艰巨的任务，并且用户需要一个友好的界面来填写数据，而并不关心浏览器在后台是怎么把数据提交给服务器的。,HTML,的表单标签包括一系列的控件，以友好的图形界面供用户进行输入或选择，当点击提交按钮时，将数据封装为,HTTP,请求报文发送给服务器。表单标签包括的控件有：,2.3,表单标签,input(,输入,),标签,input,标签是网页中变化最多的标签，根据,type,属性不同，可以产生,10,种变化，表,2.1,中进行了归纳：,使用,input,标签时注意：,input,标签一般要设置,name,属性，这样提交到服务器后才能获取到值；,对于文本、密码输入框，可以通过,value,属性设置初始内容；,对于按钮，可以通过,value,属性设置表面的提示文字；,单选按钮和复选框的,value,属性在浏览器中没有效果，但是可以提交到服务器上；,对于同在一个分组的单选按钮，,name,属性必须设置为相同的值；,select,标签一般和,option,标签配合使用，实现网页中的下列框和列表框，如,下：,select(,选择,),标签,使用,select,标签时注意：,select,标签的,size,属性决定它的外观，默认情况下,size,为,1,，显示为下拉框，如果把,size,设置为大于,1,，就显示为列表框；,select,标签的内容如果要提交，就必须包含在,中，并且要设置,name,属性；,在,select,标签中，每个,标签对表示一个选项，默认选中项要加,selected,属性；,在列表框中用,multiple,属性实现多选。,textarea(,文本域,),标签,textarea,标签的功能和,标签相似，都是实现文本输入，不同的是,textarea,可以输入较多内容，并且可以换行。,使用,select,标签时注意：,textarea,标签必须成对使用；,可以用,cols,、,rows,属性设置文本域的列数（宽度）和行数（高度）。,form(,表单,),标签,标签对定义表单的开始和结束，上述的表单控件只有包含标签对在里面，其数据才能提交。常用的属性有,name,、,action,、,method,、,target,和,enctype,这几个属性的含义如下：,name:,表单的名字,action:,表单提交后处理程序的,url,地址,method:,提交表单的方式，采用,get,方式提交，提交的内容会显示在浏览器地址栏中，提交的数据量很少，采用,post,方式提交，提交的内容不会显示在地址栏中，提交的数据量大。,target:,显示返回结果页面的目标窗口（和,a,标签的,target,属性类似）,enctype:,上传数据的编码格式，上传文件一般用,multipart/form-data,例如：,这段代码表示表单的名字叫,form1,，提交之后由,reg_check.jsp,处理，采用,post,方式提交，提交后的处理结果页面显示在新窗口中。,2.4 CSS,定位与,DIV,布局,DIV+CSS,是,WEB,设计标准，它是一种网页的布局方法。与传统中通过表格（,table,）布局定位的方式不同，它可以实现网页页面内容与表现相分离。,CSS,盒子模型,CSS,控制页面是通过盒子模型实现的，所有页面标签都可以看成一个盒子，分布在页面的固定位置。盒子的大小需要通过属性调整，盒子和盒子之间的影响也通过浮动和定位等技术实现,。,CSS,盒子模型,:,从,图中,可以看出，,CSS,盒子模型包括,6,个部分，分别为元素内容,(element),、宽度,(width),、高度,(height),、内边距,(padding),、边框,(border),和外边距,(margin),。,元素内容,(element),是指页面的实际内容。,宽度,(width),和高度,(height),主要用于控制,CSS,盒子模型中元素的大小，盒子的实际宽度,=,元素宽度,+,内边距,(,左侧和右侧内边距之和,)+,边框,(,左侧和右侧边框宽度之和,)+,外边距,(,左侧和右侧外边距之和,),，盒子的实际高度,=,元素高度,+,内边距,(,上侧和下侧内边距之和,)+,边框,(,上侧和下侧边框长度之和,)+,外边距,(,上侧和下侧外边距之和,),。,内边距,(padding),定义元素边框与元素内容之间的空白区域。该属性可以设置,1,2,3,或者,4,个属性值。,当,指定,1,个属性值时，表示上、下、左、右的内边距均为该值。,当,指定,2,个属性值时，分别对应上、下和左、右的内边距。,当,指定,3,个属性值时，分别表示上、左右、下的内边距。,当,指定,4,个属性值时，分别表示上、下、左、右的内边距。,也可以通过,padding-top,、,padding-right,、,padding-bottom,和,padding-left,分别设置上、右、下、左内边距。,边框,(border),是围绕元素内容和内边距的一条或多条线。该属性允许你规定元素边框的样式、宽度和颜色。边框的样式是通过,border-style,属性实现的，该属性可以设置为,none,、,hidden,、,dotted,等，边框样式可以通过,top-right-bottom-left,的顺序为上、下、左、右边框指定样式，也可以通过,border-top-style,、,border-right-style,、,border-bottom-style,和,border-left-style,分别设置上、右、下、左边框样式。,外边距,(margin),是指围绕在元素边框的空白区域，设置外边距的最简单的方法就是使用,margin,属性，,margin,属性接受任何长度单位，可以是像素、英寸、毫米或,em,，,margin,可以设置为,auto,，,margin,的默认值是,0,，所以如果没有为,margin,声明一个值，就不会出现外边距。,CSS,定义了一些规则，允许为外边距指定少于,4,个值，如果缺少左外边距的值，则使用右外边距的值，如果缺少下外边距的值，则使用上外边距的值，如果缺少右外边距的值，则使用上外边距的值。也可以通过,margin-top,、,margin-right,、,margin-bottom,和,margin-left,分别设置上、右、下、左外边距。,下面,通过一个示例演示,CSS,盒子模型各个属性的用法，该示例实现一个背景为灰色的简单,CSS,盒子模型，具体代码如下所,示,:,CSS,盒子,.box,background-color,:#808080;/*,指定背景颜色,*/,margin:20px;/*,指定外边距,*/,padding:20px;/*,指定内边距,*/,height:60px;/*,指定高度,*/,width:100px;/*,指定宽度,*/,我,是一个,CSS,盒子,模型,程序的运行结果如,图所示,：,CSS,盒子的定位与浮动,float,浮动,在,标准流中，一个块级元素在页面中独占一行，各个块级元素自上而下排列。但使用了浮动后，块级元素的排列方式就会有所变化。,float,浮动属性可以指定,left,、,right,、,none,和,inherit,。,left,：元素向左浮动。,right,：元素向右浮动。,none,：默认值。元素不浮动，并会显示在其在文本中出现的位置。,inherit,：规定应该从父元素继承,float,属性的值。,CSS,盒子,.box,background-color:#808080;/*,指定背景颜色,*/,margin:20px;/*,指定外边距,*/,padding:20px;/*,指定内边距,*/,height:60px;/*,指定高度,*/,width:100px;/*,指定宽度,*/,float,:left;/*,向左浮动,*/,我,是一个,CSS,盒子,模型,我,是一个,CSS,盒子,模型,下面在样式中加入向左浮动效果，具体代码如下所示,：,程序的运行结果如图,所示,：,通过上述两个示例，可以看出两个盒子由垂直排列变成了水平排列。,如果,要清除浮动效果，需要使用,clear,属性，它的取值可以为,left,、,right,、,both,、,none,和,inherit,。,left,：在左侧不允许浮动元素。,right,：在右侧不允许浮动元素。,both,：在左右两侧均不允许浮动元素,none,：默认值，允许浮动元素出现在两侧。,inherit,：规定应该从父元素继承,clear,属性的值。,position,定位,position,属性规定元素的定位类型。,position,包含以下,5,个属性。,absolute,：生成绝对定位的元素，相对于,static,定位以外的第一个父元素进行定位。,fixed,：生成绝对定位的元素，相对于浏览器窗口进行定位。,relative,：生成相对定位的元素，相对于其正常位置进行定位。,static,：默认值。没有定位，元素出现在正常的流中。,inherit,：规定应该从父元素继承,position,属性的值。,CSS,嵌套盒子,.father,background-color:#D3D3D3;/*,指定背景颜色,*/,height:80px;/*,指定高度,*/,width:100px;/*,指定宽度,*/,.son,background-color:#696969;/*,指定背景颜色,*/,height:40px;/*,指定高度,*/,width:50px;/*,指定宽度,*/,下面通过示例讲解这几种属性的区别，该示例实现一个含有嵌套关系的盒子。具体代码如下所示,：,子盒子,父盒子,程序的运行结果如图所示,:,.,son,background-color,:#696969;/*,指定背景颜色,*/,height:40px;/*,指定高度,*/,width:50px;/*,指定宽度,*/,position:relative;/*,相对定位,*/,left:20px;/*,向右偏移,20*/,top:20px;/*,向下偏移,20*/,如果想要让子盒子向右下各偏移,20px,，使用相对定位的代码如下所,示,：,程序的运行结果如图,所示,：,相对,定位是相对于原来的位置，通过偏移指定的距离到达新位置，而父标签中的其它标签不受影响,。如果,使用绝对定位，代码如下所,示,：,.son,background-color,:#696969;/*,指定背景颜色,*/,height:40px;/*,指定高度,*/,width:50px;/*,指定宽度,*/,position:absolute;/*,绝对定位,*/,left:20px;/*,向右偏移,20*/,top:20px;/*,向下偏移,20*/,程序的运行结果如图,2.7,所示：,绝对,定位以父标签为基准进行偏移，如果没有父标签，会以浏览器窗口为基准进行偏移，其它标签按照原有布局进行排列,。,display,属性,display,属性规定元素应该生成的显示框的类型，,display,的值可以是,none,、,block,或,inline,，,none,表示此元素不会被显示；,block,表示此元素将显示为块级元素，此元素前后会带有换行符；,inline,为默认值，此元素会被显示为内联元素，元素前后没有换行符。,将,块级标签,变成行内标签的代码如下所示。,将块级标签变成行内标签,将,行内标签,变成块级标签的代码如下所示。,将行内标签变成行级,标,将,块级标签和行内标签隐藏的代码如下所示。,将块级标签隐藏,将行内标签隐藏,任务实施,1.,新建项目,选择,菜单“,File,”“,new,”“,Dynamic Web Project,”（如果没有列出，在“,Other,”中查找），在弹出对话框中填写“,Project name,”为“,UserReg,”，连续点击两次“,Next,”，在“,Web Module,”选项卡中勾选“,Generate web.xml deployment descriptor,”，让项目中自动添加,web.xml,文件，最后点击“,Finish,”按钮创建新项目。,在,web.xml,中修改,Web,应用程序的主页设置，将主页改为,reg.jsp,：,reg.jsp,2.,创建,jsp,页面,在,Package Explorer,中展开,UserReg,项目，在,WebContent,文件夹上点击鼠标右键，选择“,new,”“,Other,”，在弹出对话框中搜索“,jsp,”，如,图,：,选择“,JSP File”,，点“,Next”,按钮，将文件名改为“,reg.jsp”,，再点“,Next”,，在,JSP,文件模板中选择“,New JSP File(html)”,，如图：,最后点击“,Finish,”完成,JSP,文件的创建。,3.,编辑,jsp,页面,打开,reg.jsp,，输入网页内容：,用户注册,用户注册,用户名,密码,性别,男,女,生日,爱好,运动,音乐,旅游,4.,运行项目,点击,工具栏上的“,Run,”按钮（快捷键,Ctrl+F11,），在弹出的对话框,中选“,Run On Server,”，在,Eclipse,的内置浏览器中可以看到运行结果，如果内置浏览器没
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
