web前端开发教案.doc

1、Web前端开发教案web前端开发教案第1单元教案教师 教学单元授课计划学时4授课时间安排一、教学内容：知识点：1、网页设计的基本概念：www、url、网页，网站。2、网页浏览原理，网页中的组成要素。3、网站开发流程：需求分析、设计、实现、测试、维护和更新。技能：二、学生特征分析学生年龄在20岁-22岁,对网络很感兴趣。80%以上的学生曾经浏览过网页，知道打开网页的方法。学生对访问的网站已经形成了自己的评价方法。三、教学内容和学习水平的分析1、技能和知识点的划分与学习水平的确定编号技能和知识点识记理解熟练操作应用综合分析技能鉴赏网站，分析网站的技能知识1、 网页，网站的概念2、 网站开发流程态度

2、主动分析、积极思考能力具备鉴赏网站的能力2、教学的重点和难点教学重点：1、网站浏览原理；2、网站开发流程解决途径：通过例子来展示网站浏览原理；开发流程介绍中引入实际开发的例子。教学难点：综合评价网站的的方法。解决途径：展示网站实例，学生讨论，最终形成评价方案。四、教学策略基于例子的教学模式。根据知识特点，举出一个典型性的例子，由学生根据例子中的场景，分析实际的应对措施。如，本节课中有关时光网站的鉴赏，学生课堂上谈谈自己的观点，由此总结出好的网站应该具备的特征。五、教学过程设计和流程第1章 Web前端开发基础本章内容与学习目标网页设计的基本概念和知识分析网页基本组成元素和开发中使用的软件网站的开

3、发流程和制作规则第1节 Web介绍Web也称万维网。Web的英文全称是“World Wide Web”，简称WWW。它是基于“超文本”的信息查询和发布系统。1.1 Web介绍1.1.1 Web起源1.开发阶段19801991年，TimBerners-Lee在ENQUIRE项目上应用了一个可以处理超文本信息的的在线数据编辑库。1984年他将大型超文本数据库系统命名为WWW。2.发展阶段19921995年，随着支持图像，多媒体技术的网络浏览器的发布，WWW技术在互联网上应用广泛。3.商业化阶段19961998年，越来越多的公司，企业开始在互联网上创建Web站点。4.无所不在的WWW借助WWW，用户

4、可以在线学习，发布消息，看电影听音乐。WWW像一张巨大的网，已经覆盖到生活，工作，学习，娱乐的方方面面。1.1.2 Web版本Web 1.0采用的是技术创新主导模式，盈利基于点击的流量。由网站到用户是单向的行为。Web 1.0时代的代表站点为新浪，搜狐，网易三大门户。Web 2.0注重页面与用户的交互。用户既是网站内容浏览者，也是网站内容的制造者。Web 3.0支持不同网站之间信息进行交互，支持借助第三方信息平台对多家网站的信息进行整合使用。1.2 Web开发 Web开发包括网站的前端开发和后端开发。1.2.1 前端开发Web前端开发包括PC端网页、移动端网页、移动APP、游戏、软件开发等。前

5、端开发简单上手容易，同时是一种热门技术，人才紧缺，薪资较高。1.2.2 后端开发后端开发提供数据库支持，对用户在页面的操作给予响应。常用的数据库技术是MySql、SqlServer、Oracle等。1.3 Web基本概念1.3.1 网站网站是Internet上有内在联系的若干页面通过超级链接构成的网页的集合。通常把进入网站首先看到的网页称为首页。首页是网站的门面，是访问量最大的网页，默认的文件名是index或default。在服务器上设置之后，直接通过网址可以进入网站首页。1.3.2 网页网页是由多种媒体，如文字、声音、动画等组成的页面，在页面上通过超链接实现与其他网页之间的跳转。1.网页中的

6、媒体元素1）文本文本是网页的主体组成部分，主要用来传达网页中的信息。2）图像图像能直观的表达信息，具有很强的视觉冲击。通常在网页中使用的图像主要是GIF、JPEG、PNG格式。3）音频音频是多媒体网页中的重要组成部分。但尽量不要将声音文件作为背景音乐，那样会影响网页的下载速度。目前，支持网络的声音文件格式有MIDI、WAV、MP3等格式。4）视频网页中可以插入视频文件，使网页更加精彩。网页中常见的视频文件格式有：realplay、mpeg、AVI等。2.网页组成元素介绍常见的网页组成元素包括5种，分别是网页的logo、banner、导航条、主体部分、版尾部分。1）logo标志logo是反映事物

7、特征的记号。它以图形或者文字符号为载体，除了表示一定的寓意以外还具有表达情感和指令动作等作用。2）banner广告条在网页中，广告条一般是放置在醒目的位置，吸引用户对于广告信息的关注，从而达到网络营销的效果。banner可以是动态的图像（如gif动画或者flash动画），也可以是静态的图像。banner的尺寸有一定的约定，3）导航条帮助用户快速访问网站内容的工具。导航条分为横排导航条、竖排导航条等，复杂的导航条还有二级级联菜单。设计导航条时应该注意，其中的项目分类合理，便于浏览者快速找到，同时导航条应该置于醒目的位置。4）主体部分主体部分是网页中最重要的组成，其中包括网页中所有的信息，这部分内

8、容可以是纯文本信息，也可以是由文本、图像等元素等构成的多媒体信息。5）版尾部分版尾部分是整个网页的结束部分，通常用来声明网站的版权，为用户提供访问网站的联系方式等信息。1.3.3 URLURL（Uniform Resource Locator，统一资源定位），是Internet上标准资源的地址，用来描述网页及其他网络资源地址的一种标识方法。URL的一般书写格式是：访问协议：/主机域名或IP地址：端口号/路径/文件名，例如：。1.3.4 http协议全称HyperText Transfer Protocol，超文本传输协议。http协议是网络上使用最为广泛的一种协议。所有Web页面都必须遵守这个

9、协议。http协议主要用于服务器和浏览器之间的请求和响应服务。客户端通过建立一个默认端口是80的链接初始化一个请求服务，服务器端通过监听此80端口响应请求。1.3.5 Web服务器也称为WWW服务器，主要功能是提供信息服务。Web服务器的工作流是：接收用户请求-动态响应请求-处理请求-反馈结果。常见的Web服务器有两种，微软的IIS服务器（互联网信息服务器）和阿帕奇（apache）的Tomcat服务器。1.3.6 Web浏览器解析并显示HTML文件的应用软件。浏览器主要通过超文本传输协议（http）与Web服务器之间进行交互，将服务器传回的HTML标记进行解析。常见的浏览器有IE、google

10、、Firefox、Opera和Safari。1.4 Web页面浏览过程（1）用户启动浏览器，在地址栏中输入要访问的网页的url，通过http协议向url所在的服务器发起服务请求。（2）服务器根据浏览器发起的请求，把url地址转换成网页所在服务器上的实际路径，找到相应的网页文件。（3）网页中包括html标记，服务器直接通过http协议将文档发送到客户端，网页中还包括jsp程序，asp程序或者其他动态网站程序，则通过服务器执行后将运行结果发送给客户端。（4）浏览器解释html文档，将结果显示在客户端浏览器。1.5 Web前端开发技术1.HTML技术HTML为超文本标记语言。网页文件都是由超文本标志

11、语言HTML所创建的。2.CSS技术Cascading Style Sheet，层叠样式表，是一种用来表现网页格式的语言。使用CSS可以将网页的格式和内容相分离，编辑格式时不需要考虑内容，便于网页维护。3.JavaScript技术JavaScript是一种解释型、基于对象的脚本语言，用来向HTML页面添加交互行为，具有跨平台特性的一种语言。4.jQuery技术jQuery是继prototype之后又一个优秀的Javascript框架。通过jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。1.6 主流Web浏览器1.IE浏

12、览器Internet Explorer，是微软公司推出的一款网页浏览器。IE有6，7、8、9、10、11等版本。2. Google ChromeGoogle Chrome是一款由Google公司开发的网页浏览器。Google Chrome的特点是简洁、快速。它支持多标签浏览，每个标签页面都在独立的“沙箱”内运行，在提高安全性的同时，一个标签页面的崩溃也不会导致其他标签页面被关闭。3.Firefox中文俗称“火狐”，是一个自由及开放源代码的网页浏览器，使用Gecko排版引擎，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。4.OperaOpera是一款挪威Opera

13、Software ASA公司制作的，支持多页面标签式浏览的网络浏览器。具有跨平台性，可以在Windows、Mac和Linux三个操作系统平台上运行。Opera浏览器创始于1995年4月。5.SafariSafari是苹果计算机的最新操作系统Mac OS X中的浏览器，也是iPhone手机、iPodTouch、iPad平板电脑中iOS指定默认浏览器。它使用了KDE的KHTML作为浏览器的运算核心。1.7 Web前端开发流程典型的Web前端开发包括以下5个阶段。（1）制定网站的需求分析：确立建站目标，网站所面向的用户及网站所要实现的功能。 （2）设计阶段：明确网站的栏目组成，页面的内容，网站的链接

14、结构。（3）制作阶段：使用网页制作软件和图像处理软件来完成网页。（4）测试阶段：检查网站的链接结构，跨浏览器兼容性，检查页面是否出现显示错误。（5）维护和更新阶段：使用网页设计软件对网站进行更新和维护。1.7.1 需求分析明确下面几个问题：1.建网站的目的是什么？产品、服务销售建立一种公益性服务为一种思想、观念、事业作宣传使自己的业务走向世界2.你的主要浏览者是哪类群体？按性别分：女性男性按年龄段分：青少年儿童成人按职业分：学生白领蓝领3.基于明确的受众定位，你希望网站又怎样的特色？以内容为本，访问速度快视觉设计具有特色大量使用图和动画，忽略登录速度打开页面的速度最重要在通常的用户群体分析时，

15、我们去统计一些人口特征，如平均年龄，性别比例，平均文化程度，民族习惯等，根据这些数据去套用普遍的行为和需求，比如年轻人喜欢活泼的颜色和个性的版面结构，老年人喜欢稳重的风格。采集到用户需求之后，需要将需求转换成文档，便于开发人员使用。需求文档中应该包括网站建立所需要的软硬件设备、网站的功能描述等信息。1.7.2 网站设计设计阶段在整个网站开发过程中也是非常重要的，接下来重点分析设计、规划过程中要考虑哪些方面因素。在建设网站之前必须对站点进行结构规划，确定网页组成及存放路径，完成页面详细设计文档。这个过程做的细致、到位，可以为后期开发节省大量的时间。1. 设计页面及路径2. 页面详细设计文档1.7

16、.3 网站制作设计完成之后进入制作阶段。制作网站包括前台页面制作、页面代码书写和后台程序开发3个步骤。对于静态网站只需要完成前面两个步骤。1.前台页面制作通过使用网页图像制作软件来制作网页元素logo、banner，设计整个网站的布局。通过dreamweaver或HTML标记对网页元素进行操作，完成网站的静态页面的制作。2.页面代码书写利用css和javascript技术对网页进行美化，为网页增加一些交互动作，如鼠标指向的动作，滚动图片效果。3.后台程序开发对于动态网站，需要数据库的支持，所以后台程序开发包括设计数据库和数据表，以及编写操作数据库中表的程序。1.7.4 网站测试在发布网站之前要

17、对网站进行各种严格的测试，包括功能测试、性能测试、可用性测试、安全性测试等。测试最好是在一个真实的环境下进行，也就是在互联网上测试。测试的目的是检查和验证，发现问题和错误。通过测试检查网站中的图像、文字、视频、表单等元素的大小、位置、版面结构是否发生了移位。发现网站中的空链接、错误链接、查看页面中的的图像是否能完整显示、视频是否能够正常打开。检查在不同的浏览器中网页是否都能正常显示。1. 功能性测试2. 性能测试3. 可用性测试4. 安全性测试1.7.5 维护和更新网站建成之后应该间隔一定的时间进行更新，向其中增加新的内容和功能，给用户提供新鲜感。维护网站是一项长期的工作，通过维护保障网站更好

18、地运行。1.8 Web前端开发工具1.9 Web前端工程师从业要求Web前端工程师主要工作职责是协调前端设计师完成页面的界面美化，协调后端程序员实现用户的交互设计。前端工程师必须掌握HTML5、CSS、JavaScript、jQuery、Ajax等核心技术，具备互联网交互设计能力，熟悉后端服务器运行环境和数据通信协议。能掌握响应式布局框架、Bootstrap、AngularJS等最新JS框架的技术。1.10 网站鉴赏能力培养欣赏时光网，网址:时光网被誉为国内电影社区类最优秀的网站。网站的访问者为全球电影发烧友，网站收录历年众多过内容各种类型影片，影片信息全面、新颖、并具有群组社区等内容，互动性

19、强。1. 网站首页分析1） 色调分析2） 网站结构分析2. 栏目分析3. 网站主要特色如下：（1）主题定位明确。网站主要展示最新、最热门的电影资讯信息。以这个主题为中心，网站分为购票、商城、新闻、直播等栏目，内容丰富，信息量大。（2）网站的风格独特，颜色搭配出彩，布局整齐。（3）资讯更新及时，在网站多处能看到“今日”等文字，时间感强。另外地域也很明确，根据浏览者的IP确定了所在地，网站上显示的信息都是浏览者所在城市的影视信息，服务很贴切，很到位。（4）提供了交互的平台，当影迷需要发表影评，可以非常快捷的通过表单提交言论，也可以在虚拟社区参加讨论。（5）网站的访问速度快，没有受到图片和媒体文件大

20、造成下载速度慢的影响。思考：课后浏览雅虎中国，中国工商银行、当当网和陕西政务大厅网站，分析这些网站的组成、功能和站点风格。课后反思：web前端开发教案02第二单元教案教师 教学单元HTML-网页骨架结构授课计划学时6授课时间安排一、教学内容：知识点：1、HTML基本结构标签。2、常用标签的使用。3、标签的属性。技能： 学习使用HTML语言书写网页。二、学生特征分析三、教学内容和学习水平的分析1、技能和知识点的划分与学习水平的确定编号技能和知识点识记理解熟练操作应用综合分析技能使用常见标签制作网页知识HTML结构标签态度主动操作、积极思考，勤于动手能力具备制作网页的能力2、教学的重点和难点教学重

21、点：1、HTML结构标签；2、HTML表格标签，文本标签的运用。解决途径：将标签的书写代码和预览效果对照，直观化理解标签的作用。教学难点：1、使用表格布局；2、模板和库；3、行为。解决途径：先展示具体的操作过程，看到操作结果之后再来总结各种不同的布局的特点。四、教学策略1、类比的教学策略（对于一个难理解的概念用日常生活中相类似的现象做比较，提出两者之间的共性方便理解）。2、问题引入策略（提出问题之后，由学生来思考，引导学生自我探索寻找答案）。五、教学过程设计和流程第2章 HTML-网页骨架结构本章内容与学习目标熟悉HTML基本语法掌握编辑器的使用方法熟悉常见标签及属性的使用方法2.1HTML基

22、础HTML(Hypertext Markup Language，超文本标记语言)，是一种使用文本符号表示，由浏览器解释执行的标记语言。使用HTML语言编写的文件称为HTML文件，也叫网页文件，扩展名为.html或.htm。网页基本结构HTML网页说明：标记是由一对尖括号和标记名组成的，大多数标记都包括开始标记和结束标记。开始标记和结束标记之间的内容是HTML标记所设置的内容。标记属性可以设置文本格式，如对齐方式、字体、大小、颜色。HTML标记和属性不区分大小写，但是为了书写标准，最好使用小写形式书写。文档的根元素必须是html，并且必须为它指明命名空间。元素必须正确嵌套。标记必须成对使用。标记

23、名和属性名必须小写。属性值必须用引号括起来。2.2HTML头部标记2.2.1 头部标记 元素是所有头部元素的容器。 内的元素可包含脚本、样式、提供元信息等等。以下标签可以嵌套到head标记中：（元标记）、（标题标记）、（链接默认地址）、（链接外部样式表）、（脚本标记）以及 （样式标记）。2.2.2 元标记用来描述与网页相关的信息，如网页标题、字符集、关键词字、文档的作者等，这部分信息内容一般不会显示在浏览器主体窗口中。meta标记的3个属性：name：设置属性名称，与它对应的属性值为content，content中的内容其实就是参数的变量值。content：设置属性值。http-equiv：

24、http的文件头用于向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与它对应的属性值为content，content中的内容是参数的变量值。1设定网页关键字语法：说明：keywords表示设置关键字 content中设置具体的关键字，多个关键字之间用英文逗号分割。2设置网页描述信息语法：说明：discription设置属性为“描述”。 content中设置具体的描述内容。3设置网页字符集语法：说明：http-equiv表示http传输协议标题头。 content-type表示字符集。content定义文档的类型和页面所使用的字符集。4设定网页自动刷新时间可以使用meta标记设置间隔

25、一定的时间刷新网页内容。语法：说明：refresh表示刷新功能。 content表示间隔的时间，时间以秒为单位。5网页自动跳转基本语法：说明：refresh表示刷新功能。 content表示间隔的时间和跳转的页面地址。【例2.1】编写一个网页，当在页面停留3秒钟后自动跳转到咸阳师范学院()网站上。2.2.3 标记标记嵌套在中，用来设置网页的标题，这个标题将显示在浏览器标题栏中。在所有 HTML文档中标记都是必需的，同时它可以提供页面被添加到收藏夹时显示的标题，也可以提供搜索引擎显示结果的页面标题。写法：网页标题2.2.4 标记标签为页面上的所有链接设置默认地址或默认目标（target）。2.2

26、.5 标记标签定义当前文档与外部资源之间的关系，最典型的应用为连接外部样式表。2.2.6 标记标签用来定义客户端脚本，比如 JavaScript。2.2.7 标记标签可以对HTML文档定义样式（格式）。2.3 主体标记标签表示网页的主体内容，其中包含网页中的所有内容，比如文本、超链接、多媒体元素、表格和列表等。Bgcolor、background、leftmargin,rightmargin,topmargin,bottommargin、text、link、vlink、alink。2.4 文字与分区标记网页中的文本形式：(1)普通字符，可以直接录入。(2)空格，使用“ ”表示一个半角

27、空格。(3)特殊字符，如双引号，货币符号，版权信息。特殊符号是在键盘上没有的字符，可以通过输入对应的命名实体进行录入。(4)注释信息，对源代码进行说明，浏览器解析时忽略注释。语法：2.4.1 标记用来设置文字的字体，大小，颜色。语法：文字属性size、color、face2.4.2 标题标记hn标记中的n可以取1-6之间的值，n值越大，标题文字越小。基本语法： 标题文字属性：align表示对齐方式，可选left，right，center值，分别表示左对齐，右对齐，居中对齐。2.4.3 分区标记1. 段落标记语法：段落文字浏览器会自动地在段落的前后添加空行。（ 是块级元素）小贴士：段落标记需要成

28、对使用（），忘记使用结束标签会产生错误。段落标记的align属性，用来设置对齐方式。缺省此属性表示段落文字左对齐。用法：段落文字 段落文字位于浏览器窗口水平居中位置。 align也可以设置为right表示右对齐。2. 换行标记语法：说明： 段落标记文字的行距比较大，换行标记的行距较小。连续使用两个，效果等同于一对标记。 3. 预格式化标记浏览器在解析源代码时，自动过滤代码中的换行符，同时将连续出现的空格当作一个半角的空格处理。如果需要保留源代码中的格式，可以使用标记。4. 居中标记语法：设置居中对齐的文字文字将显示在浏览器窗口水平居中的位置。5. 缩排标记语法：设置缩进的文字6. 水平线标记作

29、用：对段落进行分隔，可以使网页结构更加清晰。使用标记会在网页中出现一条宽度占满整个浏览器窗口的水平线。语法： 属性size、width、align、noshade、color2.5 超链接标记语法：超链接元素说明：href属性说明了链接目的地址。超链接元素可以是文本、图像、或其他HTML元素。target_url是目标文件的路径或者网址，此路径可以用绝对路径或相对路径表示。绝对路径如“D:workindex.html”，相对路径如“workindex.html”。补充说明：1.当链接的目标位置为当前文档内部的位置，称为页内链接。 语法：anchor 定义书签标记（也叫命名锚记） 超链接元素链向

30、一个书签 2.邮件链接，语法：链接文字 3.图片链接，为图片设置超级链接语法： 表示图像标记， image_url.jpg为图像的源文件名称。2.6 列表标记 HTML支持有序列表和无序列表。无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。同样，有序列表也是一列项目，列表项目使用数字进行标记。无序列表始于 （unorderlist） 标签，在无序列表中嵌套着多个列表项，每个列表项始于 。2.7 多媒体标记网页中可以插入如图片、声音、视频等多媒体元素。2.7.1 图像标记语法：说明：src属性定义了图像文件的地址。该地址可以是绝对路径或相对路径。 alt属性表示替换文字

31、，当浏览器无法读取图像时用来替代图像的文字。 是单标记，不能成对使用。2.7.2 background（属性）background属性可以用在、等标记中。用来设置元素的背景图像。语法：说明：当插入的图像尺寸小于网页的大小，图像默认水平，垂直方向重复显示。2.7.3 bgcolor（属性）bgcolor属性可以用在、等标记中。用来设置元素的背景颜色。语法：说明：网站常用的背景颜色：白色 #ffffff; 浅灰色 #f0f0f0-#f9f9f9;这种颜色又称之为万能色，与各类色系都能和谐融洽搭配。网站常用的背景颜色：接近深蓝色（颜色代码#0000cc），接近天蓝色（颜色代码#2aa8d9）和接近青

32、蓝色的颜色（代码#00dfb9）一般带有科技风采、严肃、求实意义等；绿色（代码：#0fba3b）一般代表绿色、健康、洁净等意义。2.7.4 标记语法：说明：网页载入之后会自动播放背景音乐。 其他属性：balance，决定扬声器之间的音量如何分配，该属性取值在-10 000到+10 000。loop， 设置音频被播放的次数，是一个数值或者关键字infinite。volume，决定背景音乐的音量大小，属性值域为-10 000到0。2.7.5 标记语法：说明：file_url表示多媒体文件名，多媒体文件的格式可以是mp3。alt属性表示替换文字，当浏览器无法读取图像时用来替代图像的文字。标记中还可以

33、使用其他属性来设置多媒体元素的效果。2.7.6 标记语法： 2.8 表格标记网页中可以使用表格制作数据表格，如制作成绩表，工资表等。在网页中表格更重要的用途是排版页面内容。可以将网页元素，如段落文字、图像、视频等资源放置在表格的单元格中，使网页中的各个部分整齐而有条理。2.8.1 表格常用标记表格是一种结构性对象，包括行、列、单元格。2.8.2 表格常用属性表格常用的属性width、height、align、valign、border、bgcolor、background、cellspacingcellpadding。2.8.3 表格布局表格标记在项目开发中经常用来对网页布局，在表格的单元格中

34、插入文字，图像，音视频资源，通过表格布局使元素整齐排列。2.9 表单标记基础知识：什么是表单？表单是一种特殊的网页容器标签，在这个容器中用户可以插入各种普通的网页标签，如表格，层，也可以插入各种表单交互组件，如文本框，密码框，单选按钮，从而获取用户输入的信息。利用表单可以将网页中的数据通过特定的方式进行提交。提交后，由服务器端脚本对信息进行处理。表单可以与jsp或者asp等编程语言结合，同时也可以与前台的javascript合作，通过脚本来控制用户输入的信息的合法性。在万维网中，很多网站都是通过表单进行采集客户端数据。表单可以收集浏览者提交的信息或者实现搜索等功能。网站上的在线注册，登录等功能

35、都是通过表单实现的。要实现表单功能，必须包含两部分：1.页面上的表单元素。2.服务器端用于处理客户端填写信息的程序。2.9.1 标记语法： 表单元素2.9.2 标记标记用来设置表单中的输入元素，如文本框，密码框等。语法：说明：type表示不同的输入元素，可选择类型见表2.16。name表示输入元素的名称，id表示表单元素的编号，在一个表单域中，编号必须唯一。1.文本框文本框提供用户输入单行文本信息的区域。语法：文本框元素支持的属性如下：maxlength：最多可输入的字符数 size：文本框的长度，单位为像素，默认24像素 value：文本框的默认值2.密码框密码框提供用户输入密码信息的区域。

36、语法：密码框支持的属性：maxlength：最多可输入的字符数 size：密码框的长度，单位为像素，默认24像素 value：密码框的默认值3.单选按钮单选按钮提供用户在一组选项中进行单项选择。单选按钮用一个空心的圆表示。语法：说明：name：设置单选按钮所在的按钮组的名称，同一个单选按钮组中的多个按钮，某一个时刻只能有一项被选中。 value：按钮选中后传到服务器的值checked：表示单选按钮被选中。4.复选框复选框用来在一组选项中多选。复选按钮使用一个空心的矩形表示。语法：说明：name：设置复选框所在的按钮组的名称，同一个复选按钮组中的多个按钮，某一个时刻可以有多项被选中。 value

37、：按钮选中后传到服务器的值checked：表示复选框被选中。5.提交按钮提交按钮用来将表单内容提交到服务器。语法：说明：name：设置提交按钮的名称。 value：提交按钮上显示的文本。6.重置按钮重置按钮用来清除表单中输入的内容，将表单中的内容恢复成默认的值。语法：说明：name：设置重置按钮的名称。 value： 重置按钮上显示的文本。7.普通按钮按钮用来触发提交表单的动作，经常与javascript脚本配合对表单进行验证操作。语法：说明：name：设置普通按钮的名称。 value：普通按钮上显示的文本。onclick：表示处理表单的脚本函数。8.文件域input标记的type属性值为file用来创建一个文件域。语法：说明：name：设置文件域的名称。9.隐藏域隐藏域是一个隐藏的区域，浏览者无法看到，主要用途是不同页面之间传递数据。语法：说明：name：设置隐藏域的名称。 value：隐藏域传递的值2.9.3 下拉列表标记标记提供用户选择的选项列表。语法：option-1o