1、Web应用程序开发技术应用程序开发技术电子工业出版社电子工业出版社本章导读本章导读 本章通过实际生活中的实例，介绍了本章通过实际生活中的实例，介绍了WebWeb应用程应用程序开发所涉及的基本概念，以及构成序开发所涉及的基本概念，以及构成WebWeb体系结构的体系结构的五大基本元素。五大基本元素。WebWeb应用中的每一次信息交换都要涉应用中的每一次信息交换都要涉及客户端和服务端，介绍了客户端及客户端和服务端，介绍了客户端/服务器模型的两服务器模型的两种形式：种形式：C/SC/S结构和结构和B/SB/S结构。也介绍了客户端的浏览结构。也介绍了客户端的浏览器：器：IEIE浏览器、火狐浏览器及服务器
2、中常用的浏览器、火狐浏览器及服务器中常用的WebWeb服服务器：务器：IISIIS、ApacheApache和和TomcatTomcat服务器，读者应重点掌服务器，读者应重点掌握浏览器从握浏览器从WebWeb服务器获得服务器获得WebWeb页面的过程。通过本章页面的过程。通过本章的学习，读者会对的学习，读者会对WebWeb应用程序有一个整体的框架结应用程序有一个整体的框架结构，为后面各部分内容的学习有非常大的帮助。构，为后面各部分内容的学习有非常大的帮助。1-1 Web 技术技术lWebWeb是一个分布式的超媒体（是一个分布式的超媒体（HypermediaHypermedia）信息系统，它将大
3、量的信息分布于整个因特网上。信息系统，它将大量的信息分布于整个因特网上。lWebWeb的任务就是向人们提供多媒体网络信息的任务就是向人们提供多媒体网络信息服务。服务。lWebWeb是一种典型的分布式应用结构。是一种典型的分布式应用结构。WebWeb应用应用中的每一次信息交换都要涉及客户端和服务端。中的每一次信息交换都要涉及客户端和服务端。因此，因此，WebWeb开发技术大体上也可以被分为客户端开发技术大体上也可以被分为客户端技术和服务器端技术两大类。技术和服务器端技术两大类。1-1-1 Web技术基础技术基础 l1.超文体、超媒体和超链接超文体、超媒体和超链接 Internet采用超文本和超媒
4、体的信息组织方式，将信息的链接扩采用超文本和超媒体的信息组织方式，将信息的链接扩展到整个展到整个Internet上上 。l2HTML HTML是用来制作网页的标记语言，是构成是用来制作网页的标记语言，是构成Web页面的主要工具。页面的主要工具。l3统一资源定位器（统一资源定位器（URL）统一资源定位器就是用来标识统一资源定位器就是用来标识Web文档位置的唯一标识符。文档位置的唯一标识符。l4Web的特点的特点 Web是图形化和易于导航的是图形化和易于导航的、Web与平台无关与平台无关、Web是分布式是分布式的的、Web是动态的是动态的 1-1-2 HTTP协议协议 1.HTTP协议即超文本传输
5、协议协议即超文本传输协议（Hypertext Transfer Protocol）这个）这个协议是在协议是在Internet中进行信息传送的协中进行信息传送的协议，浏览器默认使用这个协议。议，浏览器默认使用这个协议。2.HTTP协议协议的工作过程。的工作过程。3.HTTP协议是无状态协议协议是无状态协议。1-2 客户端客户端/服务器模型服务器模型 l1C/S模式的结构和工作原理模式的结构和工作原理 l2B/S模式的结构、工作原理和特点模式的结构、工作原理和特点 图图1.1 二层二层C/S结构图结构图图图1.2 典型的三层典型的三层B/S结构图结构图 图图1.3 B/S原理示意图原理示意图 1-
6、3 浏浏 览览 器器 l1-3-1 IE浏览器浏览器 l1-3-2 Firfox浏览器浏览器 1-4 服服 务务 器器l 服务器是一种高性能计算机，作为网络的节点，服务器是一种高性能计算机，作为网络的节点，存储、处理网络上存储、处理网络上80%的数据、信息，因此也被称的数据、信息，因此也被称为网络的灵魂。做一个形象的比喻：服务器就像是为网络的灵魂。做一个形象的比喻：服务器就像是邮局的交换机，而微机、笔记本电脑、邮局的交换机，而微机、笔记本电脑、PDA、手机、手机等固定或移动的网络终端，就如散落在家庭、各种等固定或移动的网络终端，就如散落在家庭、各种办公场所、公共场所等处的电话机。我们与外界日办
7、公场所、公共场所等处的电话机。我们与外界日常的生活、工作中的电话交流、沟通，必须经过交常的生活、工作中的电话交流、沟通，必须经过交换机，才能到达目标电话；同样如此，网络终端设换机，才能到达目标电话；同样如此，网络终端设备如家庭、企业中的微机上网，获取资讯，与外界备如家庭、企业中的微机上网，获取资讯，与外界沟通、娱乐等，也必须经过服务器，因此也可以说沟通、娱乐等，也必须经过服务器，因此也可以说是服务器在是服务器在“组织组织”和和“领导领导”这些设备。这些设备。1-4-1 Web服务器服务器 lWeb服务器的主要功能有：服务器的主要功能有：1信息的发布 2充当其他网络服务的平台充当其他网络服务的平
8、台 图图1.4 Web浏览器从浏览器从Web服务器获得服务器获得Web页面的过程页面的过程 1-4-2 IIS服务器服务器 IIS是是Internet Information Server的缩的缩写，它是微软公司主推的服务器，是目前最写，它是微软公司主推的服务器，是目前最流行的流行的Web服务器之一，它提供了强大服务器之一，它提供了强大Internet和和Intranet服务功能，最新的版本服务功能，最新的版本是是Windows 2003里面包含的里面包含的IIS 6.0，IIS与与WindowNT Server完全集成在一起，因而完全集成在一起，因而用户能够利用用户能够利用Windows N
9、T Server和和NTFS（NT File System，NT的文件系统）内置的文件系统）内置的安全特性，建立强大，灵活而安全的的安全特性，建立强大，灵活而安全的Internet和和Intranet站点。站点。1-4-3 Apache服务器服务器lApache是一种开放源码的支持是一种开放源码的支持HTTP协议的协议的一种一种Web服务器，由于其多平台和安全性的服务器，由于其多平台和安全性的特点，被广泛使用，是最流行的特点，被广泛使用，是最流行的Web服务器服务器端软件之一，它可以运行在几乎所有广泛使端软件之一，它可以运行在几乎所有广泛使用的计算机平台上。用的计算机平台上。lApache源于
10、源于NCSAhttpd服务器，经过多次服务器，经过多次修改，成为世界上最流行的修改，成为世界上最流行的Web服务器软件服务器软件之一。之一。1-4-4 Tomcat服务器服务器 Tomcat服务器是一个免费的开放源代码的服务器是一个免费的开放源代码的Web应用服务器，应用服务器，Tomcat是是Apache 软件基金会软件基金会（Apache Software Foundation）的）的Jakarta项目中项目中的一个核心项目，由的一个核心项目，由Apache、Sun和其他一些公司和其他一些公司及个人共同开发而成。由于有了及个人共同开发而成。由于有了Sun的参与和支持，的参与和支持，最新的最
11、新的Servlet和和JSP规范总是能在规范总是能在Tomcat中得到体中得到体现，现，Tomcat 5支持最新的支持最新的Servlet 2.4和和JSP 2.0规范。规范。因为因为Tomcat技术先进、性能稳定，而且免费，因而技术先进、性能稳定，而且免费，因而深受深受Java爱好者的喜爱并得到了部分软件开发商的认爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的可，成为目前比较流行的Web应用服务器。应用服务器。1-5 Web应用程序应用程序 l Web应用程序首先是应用程序首先是“应用程序应用程序”，和用标，和用标准的程序语言，如准的程序语言，如C、C+等编写出来的程序没等编写
12、出来的程序没有什么本质上的不同。然而有什么本质上的不同。然而Web应用程序又有自应用程序又有自己独特的地方，它是基于己独特的地方，它是基于Web的，而不是采用传的，而不是采用传统方法运行的。换句话说，它是典型的浏览器统方法运行的。换句话说，它是典型的浏览器/服服务器（务器（B/S）架构的产物，）架构的产物，Web应用程序一般都应用程序一般都是是B/S结构的。一个结构的。一个Web应用程序是一种经由应用程序是一种经由Internet或或Intranet以以Web方式访问的应用程序。方式访问的应用程序。它也是一个计算机软件应用程序，这个应用程序它也是一个计算机软件应用程序，这个应用程序用基于浏览器
13、的语言（如用基于浏览器的语言（如HTML、ASP、PHP、Perl、Python等）编码，依赖于通用的等）编码，依赖于通用的Web浏浏览器来表现它的执行结果。览器来表现它的执行结果。1-5-1 Web应用程序的执行过程应用程序的执行过程 Web应用程序的执行过程如下：应用程序的执行过程如下：l 浏览器根据输入的地址找到相应的服务器，不同的网站对应不同的服务器。这个服务器通常称为Web服务器，可以接收浏览器发送的请求。l Web服务器把这个请求交给相应的应用服务器。l 应用服务器接收到这个请求后，查找相应的文件，加载并执行这个文件。执行的结果通常是HTML文档。l 应用服务器把执行的结果返回给W
14、eb服务器，Web服务器再把这个结果返回给浏览器。l 浏览器解析HTML文档，然后把解析后的网页显示给用户。1-5-2 Web应用程序的开发步骤应用程序的开发步骤 1项目的立项及角色划分项目的立项及角色划分 2客户的需求分析客户的需求分析 3总体设计总体设计4详细设计详细设计1）整体形象设计 2）开发制作 3）调试完善 本章导读本章导读 HTML语言是语言是Web开发的基础，是真正的浏览器语言，是开发的基础，是真正的浏览器语言，是B/S结构的客户表现形式。本章从网页的基本结构开始，通过实结构的客户表现形式。本章从网页的基本结构开始，通过实例详细介绍了例详细介绍了HTML语言中常用标签的意义，属
15、性和用法，并结语言中常用标签的意义，属性和用法，并结合页面的美化，较系统地介绍了合页面的美化，较系统地介绍了CSS样式表的定义和使用。其样式表的定义和使用。其中，重点介绍了链接中，重点介绍了链接、表格、表格、表单、表单、输入、输入4个标签，它们是动态网页和静态网页的链接，也是学个标签，它们是动态网页和静态网页的链接，也是学习的重点和难点。最后本章通过两个较完整的开发实例，系统习的重点和难点。最后本章通过两个较完整的开发实例，系统地将整个地将整个HTML语言知识综合应用。通过本章的学习，了解了网语言知识综合应用。通过本章的学习，了解了网页制作的基本原理并掌握了页面的制作方法，为后面章节的学页制作
16、的基本原理并掌握了页面的制作方法，为后面章节的学习打下了基础。习打下了基础。2-1 HTML介绍介绍 l 超文本标记语言（超文本标记语言（Hyper Text Markup Language，HTML）是为）是为“网页创建和其他可在网页浏览器中看到的网页创建和其他可在网页浏览器中看到的信息信息”设计的一种标记语言。设计的一种标记语言。HTML被用来结构化信息，被用来结构化信息，例如标题、段落和列表等，也可用来在一定程度上描述文例如标题、段落和列表等，也可用来在一定程度上描述文档的外观和语义。档的外观和语义。l HTML只是一个纯文本文档。创建一个只是一个纯文本文档。创建一个HTML文档文档（或
17、称为（或称为HTML文件），只需要两个工具，一个是文件），只需要两个工具，一个是HTML编辑器，另一个是编辑器，另一个是Web浏览器。浏览器。HTML编辑器是用于生成编辑器是用于生成和保存和保存HTML文档的应用程序。文档的应用程序。Web浏览器是用来打开浏览器是用来打开Web网页文档，提供给我们查看网页文档，提供给我们查看Web资源的客户端程序。资源的客户端程序。包含包含HTML内容的文档最常用的扩展名是内容的文档最常用的扩展名是.html，但是像，但是像DOS这样的旧操作系统限制扩展名为最多这样的旧操作系统限制扩展名为最多3个字符，所个字符，所以以.htm扩展名也被使用。扩展名也被使用。2
18、-2 页页 面面 布布 局局 l2-2-1 2-2-1 html和和body标签标签 l2-2-2 2-2-2 head和和title标签标签 l2-2-3 2-2-3 p标签标签 l2-2-4 2-2-4 div和和span标签标签 l2-2-5 2-2-5 img标签标签 l2-2-6 2-2-6 a标签标签 l2-2-7 2-2-7 br和和hr标签标签 l2-2-8 2-2-8 ol和和li标签标签 2-2-1 html和和body标签标签 标签是一个成对标签，用于定义整个标签是一个成对标签，用于定义整个HTML文档的总结文档的总结构，构，在文档的最外层在文档的最外层，文档中的所有文本
19、和，文档中的所有文本和html标标签都包含在其中，它表示该文档是以超文本标识语言（签都包含在其中，它表示该文档是以超文本标识语言（html）编写）编写的。的。关于关于标签，主要有如下属性，见表标签，主要有如下属性，见表2-1。属 性描 述link设定页面默认的链接颜色alink设定鼠标正在单击时的链接颜色vlink设定访问后链接文字的颜色background设定页面背景图像bgcolor设定页面背景颜色leftmargin设定页面的左边距topmargin设定页面的上边距text设定页面文字的颜色2-2-2 head和和title标签标签 是是HTML文档的头部标签，在此标签中可以插文档的头部
20、标签，在此标签中可以插入其他标签，用以说明文档的标题和整个文档的一些公共属性。若入其他标签，用以说明文档的标题和整个文档的一些公共属性。若不需头部信息则可省略此标签，良好的习惯是不省略。不需头部信息则可省略此标签，良好的习惯是不省略。和和是嵌套在是嵌套在头部标签中的，标签之间的头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。文本是文档标题，它被显示在浏览器窗口的标题栏。例例2.1 最基本的页面结构。最基本的页面结构。HTML示例示例我的第一个我的第一个HTML页面页面本页面效果如图本页面效果如图2.1所示。所示。2-2-3 p标签标签 l例例2.2 段落标签段落标签的使用
21、。的使用。段落标签的使用段落标签的使用超文本标记语言超文本标记语言HTML语言于语言于1982年，年，标签是段落标签，由标签是段落标签，由标签所标识的文字，代表同一个段落的文字。单独使用标签所标识的文字，代表同一个段落的文字。单独使用时，下一个时，下一个的开始就意味着上一个的开始就意味着上一个的结束。良好的习惯是成对使用。的结束。良好的习惯是成对使用。基本格式为：基本格式为：或或 图图2.2 加入段落标签后的效果加入段落标签后的效果具体效果如图具体效果如图2.2所示。所示。2-2-4 div和和span标签标签 l 标签可定义文档中的分区或节。标签可定义文档中的分区或节。标签可以把文档分割为独
22、立的、不同的部标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用任何格式与其关联。如果用id或或class来标记来标记，那么该标签的作用会变得更加有效。本，那么该标签的作用会变得更加有效。本章后面的内容将会具体介绍章后面的内容将会具体介绍标签和标签和css的的结合使用。结合使用。l 标签被用来组合文档中的行内元素。标签被用来组合文档中的行内元素。标签没有固定的格式表现。当对它应用标签没有固定的格式表现。当对它应用css时，它才会产生视觉上的变化。时，它才会产生视觉上的变化。2-2-5 img标签标签 网页
23、中插入图片用单标签网页中插入图片用单标签，当浏览器读取到，当浏览器读取到标签标签时，就会显示此标签所设定的图像。时，就会显示此标签所设定的图像。表表2-2 标签的主要属性标签的主要属性属 性 名描 述src图像的图像的url路径路径alt提示文字提示文字width宽度，通常设为图片的真实大小以免失真，改变图片大小时，最好使用图像工具宽度，通常设为图片的真实大小以免失真，改变图片大小时，最好使用图像工具height高度，通常设为图片的真实大小以免失真，改变图片大小时，最好使用图像工具高度，通常设为图片的真实大小以免失真，改变图片大小时，最好使用图像工具lowsrc设定低分辨率图片，若所加入的是一
24、张很大的图片，可先显示图片设定低分辨率图片，若所加入的是一张很大的图片，可先显示图片align图像和文字之间的排列属性图像和文字之间的排列属性border边框边框hspace水平间距水平间距vlign垂直间距垂直间距2-2-6 a标签标签 l例例2.4 用于链接文档中的特定位置的书签链接。用于链接文档中的特定位置的书签链接。查看第查看第4章章第第1章章 和和标签是用来建立超链接的标签，其格式为：标签是用来建立超链接的标签，其格式为：超链接名超链接名称称 本页面效果如图本页面效果如图2.4所示所示 属属 性性描描 述述备备 注注href定义了这个链接所指的目标地址定义了这个链接所指的目标地址ta
25、rget指定打开链接的目标窗口，有四种方式指定打开链接的目标窗口，有四种方式供选择，其默认方式是原窗口供选择，其默认方式是原窗口 _parent：在上一级窗口中打开，一般使用在有框架页面中：在上一级窗口中打开，一般使用在有框架页面中 _blank：在新窗口中打开：在新窗口中打开 _self：在本窗口中打开，默认值：在本窗口中打开，默认值 _ top：在浏览器的整个窗口中打开，忽略任何框架：在浏览器的整个窗口中打开，忽略任何框架title用于指定指向链接时所显示的标题文字用于指定指向链接时所显示的标题文字2-2-7 br和和hr标签标签 l 换行标签换行标签是个单标签，也称空标签，不包含任何内容
26、，起到一个换行的作用。是个单标签，也称空标签，不包含任何内容，起到一个换行的作用。l水平分隔线标签水平分隔线标签是单独使用的标签，用于段落与段落之间的分隔，使文档结构清晰是单独使用的标签，用于段落与段落之间的分隔，使文档结构清晰明了，明了，表2-4 标签的主要属性属属 性性参参 数数功功 能能单单 位位默默 认认 值值size设置水平分隔线的粗细设置水平分隔线的粗细pixel（像素）（像素）2width设置水平分隔线的宽度设置水平分隔线的宽度pixel（像素）或（像素）或%100%alignleft center right设置水平分隔线的对齐方式设置水平分隔线的对齐方式centercolor
27、设置水平分隔线的颜色设置水平分隔线的颜色blacknoshade取消水平分隔线的取消水平分隔线的3d阴影阴影表表2-4 标签的主要属性标签的主要属性 2-2-8 ol和和li标签标签 l例例2.6 序列标签的使用。序列标签的使用。.数学数学 英语英语 语文语文 数学数学 英语英语 语文语文标签用于表示有序列表标签用于表示有序列表，标签用于表示无序列表标签用于表示无序列表 具体效果如下图具体效果如下图2.6所示。所示。属属 性性描描 述述备备 注注start编号开始的数字编号开始的数字也可以在包含的也可以在包含的标签中设定标签中设定valuen来改变列表行项目来改变列表行项目的特定编号，例如的特
28、定编号，例如type用于编号的数字、用于编号的数字、字母字母等的类型等的类型type=1表示列表项目用数字标号（表示列表项目用数字标号（1，2，3）type=A表示列表项目用大写字母标号（表示列表项目用大写字母标号（A，B，C）type=a表示列表项目用小写字母标号（表示列表项目用小写字母标号（a，b，c）type=I表示列表项目用大写罗马数字标号（表示列表项目用大写罗马数字标号（，）type=I表示列表项目用小写罗马数字标号（表示列表项目用小写罗马数字标号（i，ii，iii）2-3 表表 格格 l2-3-1 2-3-1 table标签标签 l2-3-2 2-3-2 tr和和td标签标签 表格
29、在网站中的应用非常广泛，可以方便表格在网站中的应用非常广泛，可以方便灵活地排版，很多网站也都是借助表格排版，灵活地排版，很多网站也都是借助表格排版，表格可以把相互关联的信息元素集中定位，使表格可以把相互关联的信息元素集中定位，使页面一目了然。所以说要制作好网页，就要学页面一目了然。所以说要制作好网页，就要学好表格。好表格。2-3-1 table标签标签 表表2-6 标签的主要属性标签的主要属性属性属性描述描述align排列表格。不赞成使用。请使用样式取而代之。排列表格。不赞成使用。请使用样式取而代之。可选值：可选值：left；center；rightbgcolor规定表格的背景颜色。不赞成使用
30、。请使用样式取规定表格的背景颜色。不赞成使用。请使用样式取而代之。而代之。border规定表格边框的宽度。可通过设置规定表格边框的宽度。可通过设置 border=0 来显来显示无边框的表格。示无边框的表格。cellpadding 规定单元边沿与其内容之间的空白。规定单元边沿与其内容之间的空白。cellspacing规定单元格之间的空白。规定单元格之间的空白。width规定表格的宽度。规定表格的宽度。2-3-2 tr和和td标签标签 在一个最基本的表格中，必须包含一组在一个最基本的表格中，必须包含一组标签，一组标标签，一组标签签和一组和一组标签。其中，标签。其中，在表格中定义一行；在表格中定义一
31、行；定义定义表格中的一个单元格。表格中的一个单元格。例例2.7 基本表格。基本表格。每个表格由每个表格由 table 标签开始。标签开始。一行一列：一行一列：100 两行三列：两行三列：100 200 300 400 500 600本页面的效果图如图本页面的效果图如图2.7所示。所示。2-4 表表 单单l2-4-1 form标签标签l2-4-2 input标签标签l2-4-3 select和和option标签标签 表单在表单在Web网页中用来给用户填写信息，从而能网页中用来给用户填写信息，从而能采集客户端信息，使网页具有交互的功能。表单是由窗采集客户端信息，使网页具有交互的功能。表单是由窗体和
32、控件组成的，一个表单一般应该包含用户填写信息体和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交和按钮等，这些输入框、按钮叫做控件，的输入框，提交和按钮等，这些输入框、按钮叫做控件，表单很像容器，它能够容纳各种各样的控件。表单很像容器，它能够容纳各种各样的控件。2-4-1 form标签标签 标签具有标签具有action、method和和target属性，各属性见下表属性，各属性见下表2-7。属性属性描述描述备注备注action用来接收表单信息并处理表单的程序的url地址如果这个属性是空值则当前文档的url将被使用method用来定义处理程序从表单中获得信息的方式 可取值为 GET 和
33、 POST 的其中一个：a)GET 方法，浏览器会与表单处理服务器建立连接，然后直接 在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。b)POST 方法，浏览器首先将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。GET是html默认传送方法。target 用来指定目标窗口可选值：a)当前窗口：_selfb)父级窗口：_parentc)顶层窗口：_topd)空白窗口：_blank基本的表单标签的使用格式如下：基本的表单标签的使用格式如下：2-4-2 in
34、put 标签标签 用于获取用户的输入信息，该标签是单个标签，没有结束标签。用于获取用户的输入信息，该标签是单个标签，没有结束标签。标签用来定义一个用户输入区，用户可在其中输入信息。标签用来定义一个用户输入区，用户可在其中输入信息。此标签必须放在此标签必须放在标签对之间。标签对之间。标签中共标签中共提供了提供了9种类型的输入区域，具体是哪一种类型由种类型的输入区域，具体是哪一种类型由type属性来决定。属性来决定。type属性取值属性取值输入区域类型输入区域类型控件的属性及说明控件的属性及说明单行的文本输入区域，单行的文本输入区域，size与与maxlength属性用来定义此属性用来定义此种输入
35、区域显示的尺寸大小与输入的最大字符数。种输入区域显示的尺寸大小与输入的最大字符数。(1)name 定义控件名称定义控件名称(2)value 指定控件初始值指定控件初始值,该值就是浏该值就是浏览器被打开时在文本框中的内容览器被打开时在文本框中的内容(3)size 指定控件宽度指定控件宽度,表示该文本输入表示该文本输入框所能显示的最大字符数。框所能显示的最大字符数。(4)maxlength 表示该文本输入框允许表示该文本输入框允许用户输入的最大字符数。用户输入的最大字符数。(5)onchang 当文本改变时要执行的函当文本改变时要执行的函数数(6)onselect 当控件被选中时要执行的当控件被选
36、中时要执行的函数函数(7)onfocus 当文本接受焦点时要执行当文本接受焦点时要执行的函数的函数普通按钮，当这个按钮被点击时，就会调用属性普通按钮，当这个按钮被点击时，就会调用属性onclick指定的函数；在使用这个按钮时指定的函数；在使用这个按钮时,一般配合使用一般配合使用value指定在它上面显示的文字，用指定在它上面显示的文字，用onclick指定一指定一个函数，一般为个函数，一般为JavaScript的一个事件。的一个事件。这三个按钮有下面共同的属性：这三个按钮有下面共同的属性：(1)name 指定按钮名称指定按钮名称(2)value 指定按钮表面显示的文字指定按钮表面显示的文字(3
37、)onclick 指定单击按钮后要调用的函指定单击按钮后要调用的函数数(4)onfocus 指定按钮接受焦点时要调指定按钮接受焦点时要调用的函数用的函数提交到服务器的按钮，当这个按钮被点击时，就会连接提交到服务器的按钮，当这个按钮被点击时，就会连接到表单到表单form属性属性action指定的指定的url地址。地址。重置按钮，单击该按钮可将表单内容全部清除，重新输重置按钮，单击该按钮可将表单内容全部清除，重新输入数据。入数据。2-4-2 input 标签（标签（续属性表续属性表）一个复选框,checked属性用来设置该复选框缺省时是否被选中。checkbox用于多选,有以下属性:(1)name
38、 定义控件名称(2)value 定义控件的值(3)checked 设定控件初始状态是被选中的(4)onclick 定义控件被选中时要执行的函数(5)onfocus 定义控件为焦点时要执行的函数隐藏区域,用户不能在其中输入,用来预设某些要传送的信息。hidden 隐藏控件,用于传递数据,对用户来说是不可见的;属性有:(1)name 控件名称(2)value 控件默认值(3)hidden隐藏控件的默认值会随表单一起发送给服务器，例如:控件的名称设置为ss,设置其数据为688,当表单发送给服务器后,服务器就可以根据hidden的名称ss,读取value的值688;使用图像来代替Submit按钮，图像
39、的源文件名由src属性指定，用户点击后，表单中的信息和点击位置的X、Y坐标一起传送给服务器。(1)name 指定图像按钮名称(2)src 指定图像的url地址输入密码的区域,当用户输入密码时，区域内将会显示*号。password 口令控件表示该输入项的输入信息是密码,在文本输入框中显示*，属性有:(1)name 定义控件名称(2)value 指定控件初始值,该值就是浏览器被打开时在文本框中的内容(3)size 指定控件宽度,表示该文本输入框所能显示的最大字符数。(4)maxlegnth 表示该文本输入框允许用户输入的最大字符数。单选按钮类型，checked属性用来设置该单选框缺省时是否被选中。
40、radio用于单选(1)name 定义控件名称(2)value 定义控件的值(3)checked 设定控件初始状态是被选中的(4)onclick 定义控件被选中时要执行的函数(5)onfocus 定义控件为焦点时要执行的函数当为单选项时，所有按钮的name属性必需相同。2-4-2 input 标签（标签（例题例题）l例例2.9 通过页面获得用户的输入信息。通过页面获得用户的输入信息。问卷调查 1.你的姓名：2.你的性别：男 女 本页面中，在表单中定义了4个输入控件，一个文本框，一对单选按钮和一个提交按钮，当用户输入数据并单击“提交我的问卷”按钮，生成的参数就可以提交到表单标签中action属性
41、指定的url地址，在本例中“#”表示提交到本页面。具体效果如图2.9所示。图2.9 通过页面获得用户的输入信息 2-4-3 select和和option标签标签 标签对用来创建一个菜单下拉列表框。标签用来指定列表框中的一个选项，它放在标签对之间。l例例2.10 一个简单的下拉选项框。一个简单的下拉选项框。下拉选项框请选择你喜欢的车型：VolvoSaabFiatAudi本例中，当你选择了某种车型，例如本例中，当你选择了某种车型，例如选择选择“Audi”，表单将会提交参数，表单将会提交参数cars=audi，将数据交给，将数据交给form标签中标签中的的action属性指定的属性指定的url地址。
42、本页地址。本页面效果如图面效果如图2.10所示。所示。图图2.10 一个简单的下拉选项框一个简单的下拉选项框 2-5 页页 面面 美化美化 l2-5-1 font标签标签 l2-5-2 strong和和b标签标签 l2-5-3 i和和u标签标签 l2-5-4 marquee标签标签 l2-5-5 CSS标签标签 l2-5-6 CSS综合运用综合运用2-5-1 font 标签标签 标签用于控制文字的字体，大小和颜色。控制方式是利用属性标签用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。设置得以实现的。关于关于标签，主要有如下属性，见表标签，主要有如下属性，见表2-9。属性描述默
43、认值face设置文字使用的字体宋体size设置文字的大小3color设置文字的颜色黑色标签的一般使用格式为：文字 2-5-2 strong和和b标签标签 在有关文字的显示中，常常会使用一些特在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示殊的字形或字体来强调、突出、区别以达到提示的效果。的效果。其中，其中，标签用于特别强调的文本，标签用于特别强调的文本，该标签修饰的文字内容显示为粗体字。该标签修饰的文字内容显示为粗体字。标签标签为粗体标签，放在为粗体标签，放在与与标签对之间的文字标签对之间的文字将以粗体方式显示。将以粗体方式显示。2-5-3 i和和u标签标签 l例
44、例2.11 文字标签的综合运用。文字标签的综合运用。文字标签的应用文字标签的应用本段文字使用了本段文字使用了font标签标签来定义字体。来定义字体。本段文字包含了本段文字包含了粗体粗体，强调强调，斜斜体体，和，和下画线下画线等多等多种修饰文字。种修饰文字。l标签为斜体标签，放在标签为斜体标签，放在与与标签对之间的文字将以斜体方式显示。标签对之间的文字将以斜体方式显示。l标签为下画线标签，放在标签为下画线标签，放在与与标签对之间的文字将以下画线方式显示。标签对之间的文字将以下画线方式显示。图图2.11 文字标签的综合应用文字标签的综合应用 本例效果如图本例效果如图2.11所示。示。所示。示。2-
45、5-4 marquee标签标签 l标签可以实现元素在网页中移动的效果，以达到动感十足的视觉效果。标签可以实现元素在网页中移动的效果，以达到动感十足的视觉效果。标签是一个成对的标签，其应用格式为：标签是一个成对的标签，其应用格式为：.l标签有很多属性，用来定义元素的移动方式，具体属性见下表标签有很多属性，用来定义元素的移动方式，具体属性见下表2-10。属性属性描述描述备注备注align指定对齐方式top，middle，bottombehavior指定移动方式 scroll表示单向滚动slide表示滚动到一方后停止 alternate表示滚动到一方后向相反方向滚动。bgcolor设定文字滚动范围的
46、背景颜色loop设定文字滚动次数 其值可以是正整数或 infinite表示无限次，默认为无限循环height设定字幕高度width设定字幕宽度scrollamount指定每次滚动的速度数值越大滚动越快scrolldelay文字每一次滚动的停顿时间，单位是毫秒。时间越短滚动越快hspace指定字幕左右空白区域的大小vspace指定字幕上下空白区域的大小direction设定文字的滚动方向可选值：left表示向左 right表示向右 up表示往上滚动 down 表示向下滚动2-5-4 marquee标签标签（例题例题）l例 2.12 滚动效果的实例我会跑了我会往上跑了我来回地跑我要走走停停图片也可
47、以 本页面的效果如图2.12所示，页面中文本和图片可以按预定的方向和速度移动，为页面增加了动感效果。图 2.12滚动效果的实例效果图2-5-5 CSSl CSS是是Cascading Style Sheets（层叠（层叠样式表单）的简称。很多人把它称作样式表。样式表单）的简称。很多人把它称作样式表。CSS用于设计网页样式，借助用于设计网页样式，借助CSS的强大功能，的强大功能，网页将在设计者丰富的想象力下千变万化。网页将在设计者丰富的想象力下千变万化。l CSS语法非常简单，组成语法非常简单，组成CSS语法的元语法的元素只有素只有CSS选择符与选择符与CSS属性。每个属性。每个CSS选择符选择
48、符由由1个或多个个或多个CSS属性组成。属性组成。CSS对大小写不敏感，对大小写不敏感，在在CSS语法中推荐使用小写。语法中推荐使用小写。l 网页引用网页引用CSS有三种方式：外部引用、有三种方式：外部引用、内部引用、内联引用。其中外部引用是内部引用、内联引用。其中外部引用是W3C推茬推茬的方式。的方式。2-5-6 CSS综合运用综合运用 l例例2.13 CSS的综合应用（为使读者能对比的综合应用（为使读者能对比css代码，本例采用内部引用方式）代码，本例采用内部引用方式）。a:linkcolor:RED;font-size:9PT;text-decoration:NONE a:VISITED
49、color:BLUE;font-size:9PT;text-decoration:NONE A:HOVERcolor:GREEN;font-size:15PT;text-decoration:UNDERLINE .littleredcolor:RED;font-size:10px .littlegreencolor:GREEN;font-size:24px#yellowp color:YELLOW 使用标签选择器的超级链接，靠近并点击查看效果。本段采用红色，而且比较小。本段采用绿色，而且比较大。本段采用ID选择符号。本页面的效果图如图本页面的效果图如图2.13所示。所示。图2.13 css的综
50、合应用2-6 框框 架架 l2-6-1 iframe2-6-1 iframe标签标签 l2-6-2 frameset2-6-2 frameset和和frameframe标签标签 框架就是把一个浏览器窗口划分为若干个框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的网页。使用小窗口，每个窗口可以显示不同的网页。使用框架可以非常方便地在浏览器中同时浏览不同框架可以非常方便地在浏览器中同时浏览不同的页面，也可以非常方便地完成导航工作。的页面，也可以非常方便地完成导航工作。2-6-1 iframe 标签标签 是内嵌框架标签，它的作用是在浏览器窗口中可以嵌入一个是内嵌框架标签，它的作用是
