Java-Web-应用程序设计全书电子教案整本书教学教程讲义.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/5,#,Java Web,应用程序设计,主讲人：,Java Web,应用概述,1,目录,2,4,3,5,6,7,8,网页前端开发技术,JSP,技术,JavaBean,技术,数据库访问技术,MVC,模式下的,Servlet,技术,jQuery,技术,综合实例,充电站管理系统,1,单击添加章节名称,1,Java Web,应用概述,学习目标,理解,web,应用程序的工作原理，能够静态网站和动态网站。,了解,C/S,和,B/S,结构的区别、,web,应用发展历程及,web,开发技术。,了解,Java Web,应用程序的组成及开发模式。,学会,Java Web,开发环境搭建。,掌握创建、部署并运行一个,Java Web,应用程序的方法。,1.1,认识,Web,应用,一个,Web,应用（,Web Application,）通常是指响应用户请求而生成的一些,Web,页面。一个网站由大量的页面组成，每个页面通常由一个或多个文件组成，组成一个网站的大量文件之间必须通过特定的方式连接在一起，并且需要一个系统来管理这些文件。,1.1.1 Web,应用程序的工作原理,Web,应用程序大体可以分为两种，即静态网站和动态网站。,HTTP,请求,HTTP,响应,浏览器,静态,网页,Web,服务器,图,1-1,静态网站的工作流程,1.1.1 Web,应用程序的工作原理,随着网络的发展，很多线下业务开始向网上发展，基于,Internet,的,Web,应用也变得越来越复杂，用户访问的资源已不能仅仅局限于服务器上保存的静态网页，更多的内容需要根据用户的请求动态生成页面信息，即动态网站。,1.1.1 Web,应用程序的工作原理,图,1-2,动态网站的工作流程,1.1.2 C/S,和,B/S,结构,C/S,（,Client/Server,）即客户端,/,服务器结构。在这种结构下，需要分别写服务器端程序和客户端程序，应用于服务器和客户机。服务器端程序负责管理和维护数据资源，并接受客户机的服务请求，向客户机提供所需的数据或服务。客户机安装客户端程序后，也能接受用户请求，具备大量处理功能，因此称为“胖客户端”。,C/S,开发模式能够充分利用两端硬件环境的优势，将任务合理分配到服务器和客户端，从而降低了系统的通信开销。在,2000,年以前，,C/S,开发模式占网络程序开发的主流。,1.1.2 C/S,和,B/S,结构,B/S(Browser/Server),即浏览器,/,服务器结构。在这种结构中，客户端不需要开发任何应用程序，而统一采用如,IE,和火狐等浏览器，通过浏览器向,Web,服务器发送请求，所以，这样的客户端也称瘦客户端。,Web,服务器是安装了,Web,服务软件的计算机，能够处理客户端发过来的,Web,请求，并将处理结果返回给客户端。,1.1.2 C/S,和,B/S,结构,B/S,结构和,C/S,结构的比较如表,1-1,所示,：,B/S,结构,C/S,结构,客户端,不需要专门的客户端,需要专门的客户端,可维护性,方便，只需要更新服务器端程序,需要更新客户端和服务器端的程序,速度,慢，大部分功能在服务器端完成,快，大部分功能在本地执行,美观性,一般，采用的是通用的客户端,可以自由设计，比较美观,方便性,不需要安装客户端程序,需要安装专门的客户端程序,1.1.3 Web,的发展历程,自从,1990,年，英国计算机科学家,Tim Berners-Lee,发明了,World Wide Web,并成功通过,Internet,实现了,HTTP,代理与服务器的第一次通讯以来，,Web,发展主要经历了三个阶段：,Web1.0,阶段、,Web2.0,阶段及,Web3.0,阶段。,1.1.3 Web,的发展历程,1.Web1.0,阶段,网络是信息的提供者，通过静态网页把信息单向提供给用户。用户通过客户端的,Web,浏览器可以访问,Internet,上各个,Web,站点，而在每个,Web,站点上，保存着提前编写好的,HTML,格式的,Web,页面和,Web,之间可以实现跳转的超文本链接。这时的,Web,页面只能包括单纯的文本信息，用户也只能阅读，不能交流，实现了信息的分享。,1.1.3 Web,的发展历程,2.Web2.0,阶段,网络成为了平台，更注重用户的交流。用户既是网站内容的浏览者，也是网站内容的制造者。因此，,Web2.0,是以用户为核心的互联网，随着,P2P,、,Blog,、,Ajax,及,XML,等技术的快速发展，促进了网络用户的信息交换和协同合作。,1.1.3 Web,的发展历程,3.Web3.0,阶段,在这个阶段网络已经成为用户需求理解者和提供者，网络对于用户了如指掌，知道用户的行为习惯和需求，能够进行资源筛选、智能匹配，进而直接给用户解决方案。,Web3.0,是互联网价值重新分配的必然趋势，体现了用户网络互动及个性化体验的互联网技术的完善。,1.1.4 Web,应用开发技术,在开发,Web,应用程序时，通常需要应用客户端和服务器两方面的技术。客户端应用技术主要用于接收与返回用户信息内容展现，服务器应用技术主要用于业务逻辑的处理、与数据库的交互及内部控制等。下面分别介绍比较常用的应用技术。,1.1.4 Web,应用开发技术,1.,客户端应用技术,目前，比较常用的客户端应用技术包括,HTML,（,Hypertext Markup Language,）、,CSS,（,Cascading Style sheet,）样式和,JavaScript,等。其中，,HTML,即超文本标记语言，用于描述网页文档的一种标记语言，主要用于显示网页信息，不需要编译，由浏览器解释执行。,CSS,样式也称为层叠样式表技术，可以有效对网页进行布局并精确控制字体、颜色和背景等效果，不仅可以美化页面，而且还能优化网页速度。,JavaScript,是客户端脚本技术，通过脚本语言以编程方式对页面元素进行控制，增加页面的灵活性，并且浏览器可以解释执行。,1.1.4 Web,应用开发技术,2.,服务器端应用技术,（,1,）,ASP,（,2,）,PHP,（,3,）,JSP,1.1.4 Web,应用开发技术,（,1,）,ASP,ASP,（,Active Server Pages,）是微软公司开发的一种动态网站开发技术，类似,HTML,、,Script(,脚本,),与,CGI(,公用网关接口,),的结合体。,ASP,允许用户在网页代码中嵌入,VBScript,或,JavaScript,脚本语言来生成动态的内容，,Web,服务器必须安装适当的解释器后，才可以解释执行脚本程序，然后将执行结果与静态内容结合起来，以,HTML,格式传送到客户端浏览器。对于一些复杂的操作，,ASP,还可以调用后台的,ActiveX,控件来无限扩充其能力。,ASP,技术有很多优点，简单易学，但是它基本上局限于微软公司的操作系统平台，很难在跨平台,Web,服务器上工作。,1.1.4 Web,应用开发技术,（,2,）,PHP,PHP,最早是,Personal Home Page,的缩写，后来理解为超文本预处理器，是一种通用开源脚本语言。,PHP,语言风格与,C,语言类似，又混合了,Java,、,Perl,以及,PHP,自创的语法，比较容易学习。,PHP,也是一种,HTML,内嵌式的语言，在服务器端执行，具有非常强大的功能和较高的效率，还提供了标准的数据库接口，数据库连接方便，兼容性好、扩展性强。,PHP,能够被多个平台支持，广泛应用于,UNIX/Linux,平台，代码对外开放，被许多网站编程人员运用。,1.1.4 Web,应用开发技术,（,3,）,JSP,JSP,（,Java Server Pages,）是由,Sun,公司（现已被甲骨文公司收购）推出的服务器端开发技术。,JSP,技术是在传统网页,HTML,文件中插入,Java,代码，从而形成,JSP,文件。,JSP,以,Java,为基础，沿用了,Java,强大的,API,功能。,JSP,页面中的,HTML,代码用来显示静态内容；嵌入的,Java,代码与,JSP,标记用来生成动态的内容。,Web,服务器在遇到访问,JSP,页面的请求时，首先执行其中的,Java,程序段，然后将执行结果连同,JSP,文件中的,HTML,代码一起返回给客户，实现动态网页所需要的功能。,JSP,可以被预编译，提高运行速度。并且,JSP,应用程序一次编译后，便可随时随地运行。,1.2 Java Web,应用,Java Web,应用开发主要涉及表现层（,JSP,技术、,JQuery,技术）、控制层（,Servlet,技术）、业务逻辑层（,JavaBean,技术）和数据访问层（,JDBC,技术），除了学习,JSP,语法和常用对象之外，还要熟练运用,Java,语言编程实现业务逻辑和控制功能等。,1.2.1 Java Web,与,Java,的关系,Java,平台分成如下三个版本：,（,1,）,Java SE,：标准版，主要用于桌面应用的开发，同时也是其它版本的基础。,（,2,）,Java EE,：企业版，主要用于企业级应用的开发。,（,3,）,Java ME,：微版本或称为嵌人式版本，占用内存较少，主要用于嵌入式应用的开发。,Java EE,采用分层思想进行应用程序架构，一般分为,3,层（表现层、业务逻辑层和数据访问层）或,4,层（表现层、控制层、业务逻辑层和持久层），以提高软件开发效率。,1.2.2 Java Web,应用程序,Java Web,应用程序就是采用,Java,语言编写的,Web,应用程序，通过互联网能够让,Web,浏览器和服务器进行通信。,Java Web,应用程序由一组,JSP,页面、,Servlet,、,JavaBean,以及其它可以绑定的资源构成，可以在实现,Servlet,规范的,Web,容器中运行。,Java Web,应用的组成如图,1-3,所示。,1.2.2 Java Web,应用程序,图,1-3 Java Web,应用的组成,1.2.2 Java Web,应用程序,一个,Java Web,应用程序的具体执行过程如下：,第一，客户端向,Web,服务器发起,HTTP,请求。,第二，,Web,服务器接收客户端发来的请求，根据请求的类型确定处理的对象。如果请求的是静态资源，则,Web,服务器直接处理；如果请求的是,Servlet,或,JSP,，则转交给,Web,容器，,Web,容器根据,Servlet,的配置文件（,web.xml,）确定调用的具体,Servlet,类，并把请求,(request),对象传给该,Servlet,类。,第三，,Servlet,处理完请求后，把要返回的信息放入响应（,response,）对象通过,Web,服务器返回客户端。这时,Web,容器把控制权返回给,Web,服务器。,1.2.3 Java Web,应用开发模式,Java,实现,Web,编程的第一代和第二代技术分别是,Servlet,和,JSP,。随着,Web,应用的复杂度增大，,Sun,公司推广,Java Web,开发的时候，提出了两个不同的开发架构模型，又称为,JSP Model 1,和,JSP Model 2,。而,JSP Model 2,模型就是简单的,MVC,架构模式。下面对于,Servlet,与,JSP,技术、几种开发架构模式进行简要介绍。,1.2.3 Java Web,应用开发模式,1,Servlet,与,JSP,Servlet,是,Java,技术中最早的,Web,解决方案，它与普通,Java,类的编写非常类似。使用,Servlet,技术，页面中的所有信息需要通过输出语句来生成，这是一件烦琐的事情。如果采用,HTML,语言直接生成相同功能的界面将非常简单。因此，,Java,推出了,JSP,技术，可以有效地解决,Servlet,生成页面比较困难的问题。,JSP,技术是,Servlet,更高级的扩展，通过,JSP,可以让开发人员把普通的,Java,代码嵌入到,HTML,页面中，最终,JSP,文件会通过,Web,服务器的,Web,容器编译成一个,Servlet,，用来处理各种请求，实现了快速地开发动态的,Web,页面。,1.2.3 Java Web,应用开发模式,2,JSP Model1,模型（,JSP+JavaBean,）,JSP Model 1,模型主要使用,JSP,和,JavaBean,技术来开发,Web,应用。,JavaBean,是特殊的,Java,类，封装数据库的操作和部分业务逻辑的代码，,JSP,页面中既包含输出效果的,HTML,、,CSS,代码，也会包含表示业务逻辑的,Java,代码。这种架构模型非常适合小型,Web,项目的快速开发，对,Java Web,开发人员的技术水平要求也不高。缺点是,Java,代码和,HTML,揉合在一起，不利于,Java,程序员和前台美工人员分工合作，项目后期维护也会造成很大的困难。,1.2.3 Java Web,应用开发模式,3,JSP Model2,模型（,MVC,架构模式）,为了解决,JSP Model1,的弊端，把,JSP,页面中的,Java,代码取出来，放到,Servlet,、,JavaBean,等,Java,文件中，专门由,Java,程序员单独开发维护，,JSP,页面就变得很“干净”，美工人员只负责显示。,JSP Model2,模型使用了三种技术：,JSP,、,Servlet,和,JavaBean,。,JSP,负责数据的最终显示，,Servlet,用来处理各种请求的分派，,JavaBean,主要负责对数据库的操作等业务。,1.3 Java web,运行环境,在进行,Java Web,应用开发前，需要把整个开发环境搭建好。通过前面对,Web,应用运行过程的学习，我们已经知道,Web,应用的运行需要,Web,服务器和,Java,开发工具包（,JDK,）的支持，同时为了高效率地进行软件开发，还需要安装,Java Web,的集成开发环境（,IDEIntegrated Development Enviroment,）。,1.3.1,运行环境简介,Java Web,服务器主要是与,Servlet,、,JSP,兼容的,Web,应用的容器，比较常用的有,Tomcat,、,JBoss,、,Resin,、,WebSphere,和,WebLogic,等。本书选择小型轻量级的,Tomcat7.0,作为,Web,服务器，它性能稳定、扩展性好、源码开放，是初学,Java Web,开发和中小企业应用的最佳选择。,Java Web,应用服务器在管理运行,JSP,程序时需要编译,Java,源文件、加载并执行,Java,文件，需要,JDK,的支持。所以搭建,Java Web,开发环境必须安装好,JDK,，本书选择,JDK7.0,版，与,Tomcat7.0,较好兼容。,1.3.1,运行环境简介,Java Web,集成开发环境有,Eclipse,、,MyEclipse,、,NetBeans,、,IntelliJ IDEA,等。,Eclipse,是一个开放的开发平台，需要安装,Eclipse,插件，才能进行,Java Web,开发,MyEclipse,是在,Eclipse,基础上增加自己的插件开发而成的功能强大的企业级集成开发环境，支持十分广泛，本书选择,MyEclipse9.0,作为开发环境，,1.3.2 JDK,的安装与配置,JDK,可以在,Oracle,公司的官方网站（,JDK,的安装与配置,2.,配置环境变量,在,Win10,操作系统中配置环境变量的方法如下,：,（,1,）在桌面上右击“此电脑”图标，在弹出的快捷菜单中选择“属性”命令，会打开“系统”窗口，单击“系统”窗口左侧的“高级系统设置”命令,。,（,2,）在“高级”选项卡中，单击“环境变量（,N,）,”按钮，将弹出“环境变量”对话框,，,单击系统变量下方的“新建（,W,）,按钮”，新建系统变量。,1.3.2 JDK,的安装与配置,（,3,）在“新建系统变量”对话框，分别输入变量名“,JAVA_HOME,”和变量值（,JDK,的安装路径），读者需要根据自己安装,JDK,时的安装路径进行相应修改。填写好后，单击“确定”按钮。,（,4,）在“环境变量”对话框中，双击,Path,变量修改其值，即在原变量值后面添加“,%JAVA_HOME%bin;,”变量值。单击“确定”按钮完成环境变量的设置。,（,5,）在,Windows,系统中测试,JDK,环境配置是否正确,。,在控制台提示符后输入“,javac,”命令并按,Enter,键，,1.3.3 Tomcat,的安装与配置,本书使用,Tomcat7.0,版本，读者可以到,Tomcat,官方网站下载，网址为,https:/tomcat.apache.org/download-70.cgi,。,双击下载后的文件（,pache-tomcat-7.0.75.exe,）进入,Apache Tomcat,安装的初始界面，单击“,Next,”按钮,，开始安装。,1.3.3 Tomcat,的安装与配置,安装完成后，,当在任务栏右侧出现绿色三角形图标，表示,Tomcat7,服务器已经在后台启动运行了。我们也可以在“所有应用”中找到“,configure Tomcat,”选项，打开,Tomcat,属性对话框，在该对话框中，单击停止（,stop,）、启动（,start,）、暂停（,Pause,）或重启（,Restart,）按钮，管理,Tomcat,服务器。,测试服务器。,打开浏览器，输入,localhost:8080/,，如果能看到,Tomcat,的首页，表示服务器正常运行，否则需要查看日志，寻找错误原因。,1.3.4 MyEclipse,的安装与配置,从,MyEclipse,官方网站,获得免费试用版软件。本书选择MyEclipse9.0,版本。双击下载的安装文件,myeclipse.9.0,，根据提示接受协议、选择安装路径、安装内容等进行安装即可，这里不再详细描述安装过程。,安装完成后，通常会启动,MyEclipse,，弹出“选择工作空间”对话框。,Workspace(,工作空间,),就是指定一个存储项目的文件夹，通过单击“,Browse,”按钮可以进行选择。,1.4,使用,MyEclipse,进行,Java Web,开发,开发环境搭建好了，本节将介绍如何开发一个简单的,Web,应用程序。,1.4.1,在,MyEclipse,中创建,Web,工程,通过双击桌面上的,MyEclipse,应用程序图标或者单击“所有应用,”,中的,MyEclipse 9,，就可以进入,MyEclipse,工作界面，新建,Web,工程，具体步骤如下：,第一步：选择菜单栏中的“,File,”“,New”,“,Web Project”,打开“,New Web Project,”对话框,。,1.4.1,在,MyEclipse,中创建,Web,工程,第二步：在“,Project,Name,”文本框中输入,Web,工程的名称，如：,first_project,。一般将该工程文件存放在默认的工作空间，如果想改变存储位置，不再勾选“,Use default location,”选项，然后单击“,Browse,”按钮进行设置。“,Source folder,”文本框用来指明存储项目源文件的文件夹；“,Web root folder,”文本框用来指明,Web,工程文件的存放文件夹；“,Context root URL,”文本框用于指明访问该,Web,站点的根路径。以上三项可以采用默认设置。,1.4.1,在,MyEclipse,中创建,Web,工程,第三步,:,单击“,Finish,”按钮，完成,first_project,工程创建。在左侧“,Package Explorer,”中能够看到该项目的名称及结构。,Java Web,工程文件结构中包含了类文件、类库、配置文件,web.xml,以及,JSP,文件等，这些组件协同工作。,1.4.2,在,MyEclipse,中新建,JSP,页面,新创建的,first_project,工程还是一个空项目，本小节我们在该项目中添加一个,JSP,页面。,首先，在,first_project,工程中找到,WebRoot,文件夹并右击，在弹出的快捷菜单上选择“,New,”“,JSP”,弹出对话框。我们可以在,File Name,文本框内输入文件名：比如,firstJsp.jsp,单击“,Finish,”按钮即可完成,JSP,页面创建，同时,MyEclipse,自动打开,firstJsp,页面。,接着，我们通过,MyEclipse,提供的,JSP,页面编辑器来编辑,firstJSP,页面。将,中的内容修改为“,Welcome to my first JSP,”并保存。,1.4.3,在,MyEclipse,中配置,Tomcat,服务器,为了能在,MyEclipse,中直接使用,Tomcat7,服务器，需要对其进行配置。单击工具栏上的“,Run/stop/Restart MyEclipse Servers,”按钮右侧的下三角，在弹出的菜单中选择“,configure server,”选项,。,展开左侧的“,Servers,”，找到“,Tomcat,”，选择其中的,Tomcat7.x,进行配置。在“,Tomcat home directory,”文本框中输入,Tomcat,的安装目录，指定正确的安装目录后，下面两个文本框会自动输入，无需再设置；,1.4.3,在,MyEclipse,中配置,Tomcat,服务器,然后，单击左侧,Tomcat7.x,，展开下拉框，单击“,JDK,”选项，右侧框显示“,JDK,”相关内容，在“,Tomcat JDK name,”下的文本框右侧输入刚安装的,JDK,的名称，也可以单击右侧“,Add,”按钮直接找到,JDK,安装路径，自动会填入,JDK,名称；,最后，单击“,OK,”按钮，,Tomcat7,服务器就整合至,MyEclipse,集成开发环境中了。,1.4.4,在,MyEclipse,中部署,Java Web,项目,将新建的,first_project,项目部署到,Web,服务器并运行的步骤如下：,第一步：在,MyEclipse,主界面中单击部署,Web,项目的工具按钮“,Deploy MyEclipse J2ee project to server,”，弹出对话框，在“,Project,”下拉列表框中选择要部署的,Web,应用。单击右侧的“,Add,”按钮将打开选择,Web,服务器窗口,。,1.4.4,在,MyEclipse,中部署,Java Web,项目,第二步：在“,Server,”下拉列表框中选择“,Tomcat 7.x,”，其它选项默认设置，单击“,Finish,”按钮完成服务器的选择。页面回到项目部署界面，此时会发现“,Deployments,”下面多了一行,first_project,项目部署到,Tomcat 7.x,服务器的信息，并且最下面“,Deployments Status,”（部署状态）下面显示“,Successfully deployed,”,(,部署成功,),。,1.4.4,在,MyEclipse,中部署,Java Web,项目,第三步：单击工具栏“,Run/stop/Restart MyEclipse Servers,”按钮右侧的下三角，弹出下拉菜单，选择“,Tomcat7.x,”选项中的“,Start,”,启动服务器,；,第四步：运行,first_project,项目。打开,MyEclipse,中的浏览器或外部浏览器，在地址栏中输入,loacalhost:8080/first_project/firstJsp.jsp,，按回车后运行,。,小 结,本章主要介绍了,web,应用程序的工作原理、开发模式、发展历程及,web,应用开发技术、,Java Web,应用的程序组成及开发模式等。通过图示的方式，详细介绍了,Java Web,开发环境的安装与配置并创建、部署、运行了第一个,Java Web,项目，为后续章节学习奠定了基础。,习 题,一、填空题,(,请在括号内填入正确答案,),1.Tomcat,服务器的默认端口是（,8080,）。,2.,在,Tomcat,成功安装和启动后，可以在浏览器中输入（,localhost:8080,）来测试安装配置是否正常。,3.,网络应用程序开发的两种结构是（,C/S,）和（,B/S,）,4.Java Web,应用开发的,MVC,架构模式的,M,表示（,Model,），,V,表示,（,View,），,C,表示（,Control,）。,习 题,二、上机实训题,1.,安装并配置,Java Web,开发环境。,(,略,),2.,使用,MyEclipse,创建一个,Java Web,工程，存储在工作空间,D,盘,javaweb,文件夹里，新建一个简单的,.jsp,文件，能够在浏览器中输出“,Hello World,”。,（略）,2,网页前端开发技术,学习目标,理解,HTML,语言中的文本控制、表格、图像、列表、表单标记的作用。,深入理解表格、表单、,CSS,样式表的作用和意义。,能熟练掌握网页设计中字符格式的设置方法，段落分段与换行的方法。,能熟练掌握,HTML,语言中各种标记的使用方法。,能熟练运用表单技术建立交互式页面。,能熟练运用,CSS,技术规范设计网页并美化网页内容。,2.1 HTML,2.1.1,创建,HTML,文件,2.1.2 HTML,文本控制标记,2.1.3,表格标记,2.1.4,图像标记,2.1.5,超链接,2.1.6,列表标记,2.1.7 HTML,表单标记,2.1.1,创建,HTML,文件,1.,什么是,HTML,HTML,，超文本标记语言,(Hyper Text Markup Language),，是用来描述网页的一种语言。人们可以使用,HTML,建立自己的,Web,站点。浏览器读取,HTML,文档，并以网页的形式显示出它们。浏览器不会显示,HTML,标签，而是使用标签来解释页面的内容。,例题,2-1,，我的第一个网页,2.1,例题,2-1,，我的第一个网页,jw2-1-1.html,源代码如下：,hello,欢迎来到我的第一个网页,我的第一个小程序,HTML,的基本结构,图,2-1,第一个小程序运行结果,2.1.1,创建,HTML,文件,2.HTML,文档结构,HTML,网页文件主要由文件头和文件体两部分组成。,文件头对文件进行一些必要的定义，文件体是,HTML,网页的主要部分，包含,3,个主要标记：,、,、,。,2.1.1,创建,HTML,文件,基本构,说明,HTML,文件开始,文件头开始,文件头,文件头结束,文件体开始,文件体,文件体结束,HTML,文件结束,HTML,网页的基本结构,:,2.1.1,创建,HTML,文件,基本构,说明,HTML,文件开始,文件头开始,文件头,文件头结束,文件体开始,文件体,文件体结束,HTML,文件结束,HTML,网页的基本结构,:,文件头,2.1.1,创建,HTML,文件,标记语法格式如下所示：,如标题标记,hr:,HTML,语法规则如下：,标记不区分大小写。,标记可以嵌套，不能交叉。,一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符。,在,HTML,源文件中的换行、回车符和多个连续空格在显示效果中是无效的。,2.1.2 HTML,文本控制标记,1.,标题标记,-,在,HTML,标记中，设定了,6,个标题标记，分别为,至,，代表,1,级标题至,6,级标题，数字越大，字体越小，用黑体字显示标题内容。,2.,字体标记,-,字体标记能够设置文字字体、字号和颜色等。其基本语法如下所示,:,2.1.2 HTML,文本控制标记,3.,文字布局类标记,-,、,、,段落标记以,开头，以,结束，使得该段的段前和段后各添加一个空行。换行标记,是一个单独标记。,如果想让页面中的内容居中显示，使用居中标记,，以,结束。,2.1.2 HTML,文本控制标记,4,HTML,文本控制标记举例,使用文本控制标记在,HTML,页面进行文字排版设计。如果想要达到如图,2-2,所示效果，参见例题,2-2,，,HTML,文本控制标记综合运用。,图,2-2 HTML,文本控制标记综合运用效果图,2.1.2 HTML,文本控制标记,例题,2-2,，,jw2-1-2.html,部分代码如下：,我国脱贫攻坚取得决定性成就,党的十八大以来，我们坚持以人民为中心的发展思想，明确了到,2020,年我国现行标准下农村贫困人口实现脱贫、贫困县全部摘帽、解决区域性整体贫困的目标任务。目前看，,脱贫进度符合预期，成就举世瞩目。,第一，,脱贫攻坚目标任务接近完成。,第二,，贫困群众收入水平大幅度提高。,第三,，贫困地区基本生产生活条件明显改善。,第四,，贫困地区经济社会发展明显加快。,第五,，贫困治理能力明显提升。第六，中国减贫方案和减贫成就得到国际社会普遍认可。,总的看,，我们在脱贫攻坚领域取得了前所未有的成就，彰显了中国共产党领导和我国社会主义制度的政治优势。这些成绩的取得，凝聚了全党全国各族人民智慧和心血，是广大干部群众扎扎实实干出来的。,2.1.3,表格标记,表格由,标签来定义。每个表格均有若干行（由,标签定义），每行被分割为若干单元格（由,标签定义）。,1.,表格的常用标记说明,表格是由行和列组成的，行和列又是由单元格组成，单元格是组成表格的最基本单位。单元格之间的间隔称为单元格间距；单元格内容与单元格边框之间的间隔称为单元格边距（或填充,),。,2.1.3,表格标记,图,-3,表格常用标记解释图,2.1.3,表格标记,表,2-2,表格常用标记及说明,2.1.3,表格标记,2.,页面中定义一个表格,例题,2-3,，在页面中定义,3,行,2,列学生信息表。,JW2-1-3.html,部分代码如下：,姓名,性别,张小华,女,图,2-4,插入一个,3,行,2,列的表,格,李文军,男,2.1.4,图像标记,在,HTML,页面中，添加图片是通过,标记来实现的。,标记语法格式如下：,url,指存储图像的位置，可以是相对路径，也可以是绝对路径。在浏览器无法载入图像时，浏览器将显示,alt,指定的替代文本。,例题,2-4,，在页面中显示一幅图像，当无法加载图像时，显示“习近平深入武汉社区看望居民群众和防控一线工作人员,”,。,jw2-1-4.html,部分代码如下：,2.1.5,超链接,超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。,网页中超链接一般分为以下,3,种类型,:,内部链接,锚点链接和外部链接。,2.1.5,超链接,建立超链接语法格式如下：,链接内容,例题,2-5,，在网页上插入超链接，链接至“,w3school,网站”。,Jw2-1-5.html,部分代码如下：,w3school,2.1.6,列表标记,列表标记可以将文字以列表的形式依次排列，更加方便网页访问者阅读。,HTML,列表标记主要有无序列表（,ul,）和有序列表（,ol,）两种。,2.1.6,列表标记,1.,无序列表,利用成对,标记可以插入无序列表，,标记之间使用成对,标记添加列表项值。,例题,2-6,，使用无序列表对文字排序。,jw2-1-6.html,部分代码如下：,鲜花速递、玫瑰、百合花,蛋糕、品牌生日蛋糕,礼篮、商务礼篮,2.1.6,列表标记,2.,有序列表,有序列表可以将列表项进行排号，它的标记为,，每一个排序列表项前面使用,标记。,例题,2-7,，使用有序列表对文字排序。,jw2-1-7.html,部分源代码如下：,鲜花,/,梦幻之恋 永恒的爱恋，无尽的爱,鲜花,/,一生的期盼 喜欢你是淡淡的爱,鲜花,/,一直爱你 有一种感觉叫做爱,2.1.6,列表标记,表,2-3,有序列表,type,属性取值及说明,属性值,有序列表符号,1,数字,1,、,2,a,小写字母,a,、,b,A,大写字母,A,、,B,i,小写罗马数字,i,、,ii,、,iii,、,iv,I,大写罗马数字、,2.1.7 HTML,表单标记,在上网过程中，经常会遇到账号注册、登录、用户调查等页面，这些页面中的文本框、密码框、单选按钮、复选按钮等都属于,HTML,表单中的元素。,表单是用户与网页交互信息的重要手段。,2.1.7 HTML,表单标记,1,插入表单,网页中插入表单以,标记开头，以,标记结束。,标记的基本语法如下：,2.1.7 HTML,表单标记,表,2-4 form,标记属性说明,属性名称,说明,name,指定表单名称，该属性值由程序员自定义。,action,指定处理表单数据程序的,URL,地址，其值可以是某个,JSP,文件名等。,Method,指定数据传送到服务器的方式。该属性值可取,get,和,post,两种。,get,属性值表示将表单中输入的数据追加在,action,指定的地址后面，并传送到服务器；,post,属性值不把表单中的数据追加到地址后面，按照,HTTP,协议中的,post,传输方式传送到服务器。,onSubmit,用于指定当用户单击提交按钮时触发的事件。,2.1.7 HTML,表单标记,表单中使用最频繁的标记就是,表单输入标记，通过这个标记可以向表单中添加单行文本框、多行文本框、按钮等元素。,标记的基本语法格式如下：,2.1.7 HTML,表单标记,表,2-5,标记的属性描述,属性,描述,Type,指定添加的是哪种类型的输入字段，共有,10,个可选值，见表,2-6,。,disabled,指定输入字段不可用，即字段变成灰色。属性值可为空，也可以为,disabled,。,checked,指定输入字段是否处于被选中状态，用于,radio,和,checkbox,控件，值可为空，也可以为,checked,。,width,指定输入字段的宽度，用于,image,控件。,height,指定输入字段的高度，用于,image,控件。,maxlength,指定输入字段可输入文字的个数，用于,text,和,password,控件，默认无字数限制。,readonly,指定输入字段是否为只读，属性值可为空，也可以为,readonly,。,size,指定输入字段的宽度，,text,和,password,控件以文字个数为单位，当,type,属性为其它值时，以像素为单位。,src,指定图片的来源，只用于,image,控件。,alt,指定图片无法显示时替代的文字，只用于,ima