《html5+css3技术应用》（连载）

didimm

内容简介：
    《HTML5+CSS3技术应用完美解析》围绕着HTML5和cSS3技术，比较全面细致地探讨了HTML5和cSS3的各项新特性的使用，使读者能够快速入门HTML5和cSS3前端开发。本书分为15章，各章内容安排由易到难、由浅及深，除了讨论HTML5和cSS3 API的具体使用，还深入探讨HTML5和 cSS3特性的相关概念，力争使读者对HTML5和cSS3的新特性有一个最全面、最真实的了解和掌握。此外，书中的各个章节都提供了大量的应用实例，以帮助读者更好地进行开发实践。
　　郭小成编著的《HTML5+CSS3技术应用完美解析》内容紧凑、结构严谨、实例丰富、图文并茂、深入浅出，适合广大具有一定HIML、css 和JavaScript基础的Web开发人员、有志于从事HTML5和cSS3开发的初学者以及对Web前端开发技术感兴趣的人员。

didimm

目录
第1章  HTML5概述
1.1  HTML5的发展历程
1.1.1  HTML4兴起之路
1.1.2  XHTML曲折之路
1.1.3  HTML5的诞生
1.2  HTML5的基本特征
1.2.1  向前兼容性
1.2.2  跨平台运行性
1.2.3  简单易用性
1.2.4  用户友好性
1.3  HTML5的新功能
1.3.1  简化的DOCTYPE声明
1.3.2  简化的编码字符集
1.3.3  简化样式表和脚本引入
1.3.4  新增的全局属性
1.3.5  语义化标签之文档元素
1.3.6  语义化标签之文本元素
1.4  本章小结
第2章  旧貌换新颜——Html5 Web Form
2.1  Html5 Web Form概述
2.1.1  Html5 Web Form的设计理念
2.1.2  Html5 Web Form新在何处
2.1.3  Html5 Web Form的浏览器支持情况
2.2  Html5 Web Form的使用
2.2.1  表单容器的基本属性
2.2.2  表单结构的元素标签
2.2.3  保留的输入类型控件
2.2.4  新增的输入类型控件
2.2.5  新增的表单标签属性
2.2.6  表单验证机制
2.3  构建Html5 Web Form的开发实例
2.3.1  分析开发需求
2.3.2  搭建程序基本框架
2.3.3  页面的风格设计
2.3.4  构建实例表单验证机制
2.4  本章小结
第3章  影音急先锋——Html5 Audio and Video
3.1  Html5 Audio and Video 概述
3.1.1  视频容器
3.1.2  编码器和解码器
3.1.3  Html5 Audio and Video 的优势
3.1.4  Html5 Audio and Video 的缺陷
3.1.5  Html5 Audio and Video 的浏览器支持情况
3.2  Html5 Audio and Video 的使用
3.2.1  检测浏览器的支持情况
3.2.2  多媒体元素标签及其简单属性
3.2.3  多媒体元素的source子标签及其属性
3.2.4  多媒体元素的事件控制
3.2.4  多媒体元素的网络状态
3.2.5  多媒体元素的就绪状态
3.2.6  多媒体元素的异常状态
3.2.7  多媒体元素的播放状态
3.2.8  多媒体元素的控制按钮
3.3  构建Html5 Audio and Video的开发实例
3.5.1  分析开发的需求
3.5.2  搭建程序显示框架
3.3.3  设计播放器控制栏样式
3.3.4  播放器的初始化
3.3.5  添加播放和暂停按钮
3.3.6  添加播放时间和进度控制条
3.3.7  添加静音按钮和音量调节滑动条
3.3.8  添加播放速率选择按钮和停止按钮
3.3.9  添加全屏按钮和关灯按钮
3.4  本章小结
第4章  璀璨的明珠——Html5 Web Canvas
4.1  Html5 Web Canvas概述
4.1.1  Html5 Web Canvas的发展历程
4.1.2  Html5 Web Canvas的优势和劣势
4.1.3  Html5 Web Canvas的浏览器支持情况
4.2  Html5 Web Canvas使用
4.2.1  检测浏览器支持情况
4.2.2  Canvas接口的属性和方法
4.2.3  画笔风格的设置
4.2.4  基本形状的绘制
4.2.5  图形图像的处理
4.2.6  Canvas文本的处理
4.2.7  Canvas图片的处理
4.3  构建Html5 Web Canvas的开发实例
4.3.1  分析开发需求
4.3.2  程序主框架的搭建
4.3.4  底部导航栏缩略图
4.3.3  底部导航栏翻页按钮
4.3.5  点击放大图片和翻页功能
4.3.6  缩略图预览显示
4.3.7  自动隐藏导航栏
4.4  本章小结
第5章  寻她千百度——Html5 Web Geolocation
5.1  Html5 Web Geolocation概述
5.1.1  地理位置信息
5.1.2  位置信息的来源
5.1.3  Html5 Web Geolocation用户隐私保护机制
5.1.2  Html5 Web Geolocation的浏览器支持情况
5.2  Html5 Web Geolocation的使用
5.2.1  检测浏览器支持情况
5.2.2  单次请求方式的基本方法
5.2.3  单次请求成功之后的回调方法
5.2.4  单次请求失败之后的回调方法
5.2.5  重复更新方式的基本方法
5.3  Google Maps的基本使用
5.3.1  引入Google Maps API
5.4.2  初始化地图显示
5.3.3  添加地图地标显示
5.3.4  添加地图信息窗口显示
5.4  构建Html5 Web Geolocation开发实例
5.4.1  分析开发的需求
5.4.2  搭建程序主框架
5.4.3  获取用户的地理位置信息
5.4.4  在Google地图上显示用户的地理位置
5.4.5  显示用户所在地的天气
5.5  本章小结
第6章  多管共齐下——Html5 Web Workers
6.1  Html5 Web Workers的概述
6.1.1  进程和线程
6.1.2  Html5 Web Workers的特点
6.1.3  Html5 Web Workers的工作原理
6.1.4  Html5 Web Workers的浏览器支持情况
6.2  Html5 Web Workers的使用
6.2.1  浏览器支持情况检测
6.2.2  在主线程建立专用线程
6.2.3  在主线程建立共享线程
6.2.4  通用子线程接口的方法和属性
6.2.5  专用子线程接口的方法和属性
6.2.6  共享子线程接口的方法和属性
6.3  构建Html5 Web Workers的开发实例
6.3.1  分析开发需求
6.3.2  表单数据收集页面
6.3.3  动态增加课程项目
6.3.4  程序的主线程
6.3.2  程序的子线程
6.4  本章小结
第7章  突起的异军——Html5 Web Socket
7.1  Html5 Web Socket的概述
7.1.1  服务器推送技术简介
7.1.2  基于客户端套接口的服务器推送技术
7.1.3  基于HTTP长连接的服务器推送技术
7.1.4  Html5 Web Socket的实现原理
7.1.5  Html5 Web Socket的浏览器和服务器支持情况
7.2  Html5 Web Socket的使用
7.2.1  浏览器支持情况检测
7.2.2  搭建Html5 Web Socket运行环境
7.2.3  服务器端编程之Server接口
7.2.4  服务器端编程之Connection接口
7.2.5  客户端编程WebSocket接口
7.3  构建Html5 Web Socket开发实例
7.3.1  分析开发需求
7.3.2  搭建程序主框架
7.3.3  编写服务器端脚本
7.3.4  实现用户登录和显示用户列表
7.3.5  实现发送消息和显示聊天记录
7.4  本章小结
第8章  存储更给力——Html5 Web Storage
8.1  Html5 Web Storage 概述
8.1.1  Cookie本地存储
8.1.2  Web本地存储的发展
8.1.3  Html5 Web Storage本地存储的优势
8.1.4  Html5 Web Storage本地存储的不足
8.1.5  Html5 Web Storage本地存储的分类
8.1.4  Html5 Web Storage的浏览器支持情况
8.2  DOM Storage本地存储的使用
8.2.1  浏览器支持情况检测
8.2.2  Storage的属性和方法
8.2.3  DOM Storage的事件处理机制
8.2.4  JSON数据存储
8.3  DataBase Storage本地存储的使用
8.3.1  浏览器的支持情况检测
8.3.2  创建并打开本地数据库
8.3.3  Database接口的使用
8.3.4  本地数据库的基本操作
8.4  构建Html5 Web Storage的开发实例
8.4.1  分析开发需求
8.4.2  设计登录表单
8.4.3  存储表单数据
8.4.4  读取表单数据
8.5  本章小结
第9章  离线也疯狂——Html5 Web Offline
9.1  Html5 Web Offline概述
9.1.1  Google Gears离线应用
9.1.2  Html5 Web Offline和浏览器网页缓存
9.1.3  Html5 Web Offline的优点和缺点
9.1.4  Html5 Web Offline 的浏览器支持情况
9.2  Html5 Web Offline的使用
9.2.1  浏览器支持情况检测
9.2.2  配置Html5 Web Offline的服务器环境
9.2.3  Manifest缓存清单文件
9.2.3  applicationCache接口的状态常量和事件属性
9.2.4  applicationCache接口的方法
9.3  构建Html5 Web Offline的开发实例
9.3.1  分析开发需求
9.3.2  搭建程序主框架
9.3.3  编写Manifest缓存清单
9.3.4  设计Javascript脚本
9.4  本章小结
第10章  CSS3概述
10.1 CSS3发展历程
10.1.1  CSS的兴起
10.1.2  CSS Level 2.1的发布
10.1.3  CSS Level 3的诞生
10.2 CSS3的新特性
10.2.1  强大的选择器
10.2.2  专业的UI设计
10.2.3  简单的动画特效
10.2.4  高效的布局方式
10.2.5  智能媒体查询
10.3  浏览器对CSS3的支持
10.3.1  私有属性带来的困扰
10.3.2  主流浏览器对CSS3的支持情况
10.4  本章小结
第11章  选择器畅想CSS3 Selector
11.1  属性选择器
11.1.1  保留的属性选择器
11.1.2  新增的属性选择器
11.2  伪选择器
11.2.1  伪元素选择器
11.2.2  保留的伪类选择器
11.2.3  新增的结构性伪类选择器
11.2.4  新增的UI元素状态伪类选择器
11.3  本章小结
第12章  专业的视觉CSS3 UI
12.1  边框和轮廓UI设计
12.1.1  边框属性的使用
12.1.2  轮廓属性的使用
12.2  文本和内容UI设计
12.2.1  文本属性的使用
12.2.2  内容属性的使用
12.3  渐变和背景UI设计
12.3.1  渐变方法的使用
12.3.2  背景属性的使用
12.4  本章小结
第13章  唯美的排列 CSS3 Layout
13.1  多列自动布局方式
13.1.1  多列自动布局的浏览器支持情况
13.1.2  多列自动布局的使用
13.2  弹性盒布局方式
13.2.1  弹性盒布局的浏览器支持情况
13.2.2  弹性盒布局的使用
13.3  本章小结
第14章  强劲的动画 CSS3 Animation
14.1 变形动画设计
14.1.1  变形动画设计的浏览器支持情况
14.1.2  变形动画设计的使用
14.2  过渡动画设计
14.2.1  过渡动画设计的浏览器支持情况
14.2.2  过渡动画设计的使用
14.3  高级动画设计
14.3.1  高级动画设计的浏览器支持情况
14.3.2  高级动画设计的使用
14.4  本章小结

didimm

第 2章  旧貌换新颜——Html5 Web Form




本章我们来一起探讨Htmt5 Web Form。众所周知，Html表单自从问世以来，通过其在数据收集、数据组织、人机交互的优势，使得Web应用程序使整个Web领域提升到了一个新的层次。Html表单在整个Web领域中起着举足轻重的作用，小到个人网站的注册登录功能，大到大型企业的数据库管理系统，都可以看到Html 表单的身影。
如果说Html表单的问世丰富和活跃了Web领域，那么Html5 Web Form的实现就是使这项崭新的技术百尺竿头，更进一步。Html5 Web Form在保持了Html表单简便易用特性的同时，增加了许多内置的元素、控件和属性来满足用户的需求，大大简便了我们之前要实现的输入类型检查、错误提示、表单校验等功能的代码。
本章，我们主要讨论Html5 Web Form，首先会探讨Html5 Web Form的设计理念和各主流浏览器的支持情况，随后会讨论保留的和新加的表单元素、输入类型属性和输入类型控件，最后我们会以一个开发实例探讨Html5 Web Form在实际开发中的应用。

didimm

2.1  Html5 Web Form概述
Html5 Web Form是基于原有HTML表单的基础上，加入了一些特性元素和属性。使得开发人员更加方便，用户体验程度更高。本节，我们将重点探讨Html5 Web Form的设计理念、新颖之处和目前浏览器的支持情况。
2.1.1  Html5 Web Form的设计理念
在Web领域里探索了12年之久的超文本标记语言HTML，自从成为万维网的核心语言之后，精益求精，不断创新，终于发展到了第五次修订版本Html5。但是Html4的发布以后，就被一度被网页设计师和Web程序员称为最成功地标记格式语言。那么Html5在表单应用方面又有哪些创新的设计理念呢？
根据W3C(World Wide Web Consortium,万维网联盟)的解释，HTML5表单新特性的目的是在为用户提供更好的用户体验，为开发人员提供更简单的编程。从而我们总结Html5 Web Form是基于以下设计理念的。
•        代码简单。同样的表单代码Html5将比以前的Html代码更简单，因为在Html5 Web Form中去掉了以往的冗余代码。这对开发人员来说是非常重要的。
•        功能强大。在Html5 Web Form加入一些新元素新特性，在很大程度上改善了Html4中表单标签死板等问题，例如：在Html4或XHtml中，<input>,<button>,<select>,<textarea>等标签要放在<form>标签里面，而在Html5 Web Form中，却没有这样的限制，这些标签可以放在网页的任何位置，因为这些标签可以通过新增的form属性与相应的表单关联。
•        用户友好。Html5 Web Form的初衷是为用户提供了更好的Web服务体验。例如：使用Html5 Web Form的新特性可以为用户提供一些自动聚焦、输入信息提示和输入信息选择等功能。
•        兼容性好。基于目前的浏览器参差不齐，各大主流浏览器对Html5 Web Form的支持情况也不尽相同。但是Html4表单的标签和特性在Html5中是完全支持的，反过来，Html5 Web Form的新元素新特性在旧式浏览器也不会报错，所以读者现在就可以在自己的Web程序上大胆地使用Html Web Form技术。

didimm

相信大家都可能对Xform有一定的了解。事实上，Html5 Web Form从某种意义上来说只是Xform的冰山一角。Xform是下一代的HTML表单的标准，通过XML结构化数据格式定义、存储和传递表单数据，提供了比现在更加灵活或丰富的表单控件，而且使用了我们Web开发中流行的MVC(视图、控制器、模型)的设计模式，强制性地将用户数据和表单分离，使代码更加清晰、简单、方便，比现有的html表单更加规范，有更高的可用性。此外，XForm提供了丰富的表单样式和强大的事件处理模型，让开发者可以把大量的精力放在表单内容和数据的收集上，从而可以不用过多地关注表单的显示方式。但是这个作为W3C万维网研究了近十年的标准，至今还处于雏形阶段，主流浏览器在没有安装插件的条件下，都没有对其提供支持。而Html5 Web Form的一些功能和特性的设计理念在很大程度上就是来自于Xform。读者如果对Xform感兴趣，可以自行查看相关资料进行学习。
2.1.2  Html5 Web Form新在何处
Html5 Web Form是在Html4中改进而来的，万变不离其宗，所以它必然保留了一些现有html表单的功能和特性。当然，这些保留的功能和特性，对于我们来说是喜闻乐见的，因为我们不仅可以花更少的时间去熟悉Html5 Web Form 的使用，而且对Html5 Web Form的兼容性也有一定的保障。这些保留的功能和特性主要如下：
•        表单的容器还是<form>标签，我们可以在其中设置基本的提交特性。
•        我们之前的表单控件（如文本框、单选按钮、复选框）的使用方法不变。
•        用户向服务器提交表单的方式不变，GET和POST两种方式。
•        我们之前使用的脚本控制可以继续使用。
所以，Html5 Web Form标准的出现并不是什么质的变革。简单来说，Html5 Web Form只是在原来的基础上加入了一些新的控件类型，同时加入一些新元素和属性来解决开发人员以往代码冗余的问题，所以Html5 Web Form的旧貌换新颜主要体现在以下几个方面。

didimm

表单结构更加自由。前面我们已经讨论过，在Html4的表单实现中，如果我们不使用一定脚本控制，表单控件就必须被放置在<form></form>标签之中才能顺利的提交到服务器，也就是说，Html4规范中要求开发人员必须将要提交到同一服务器的数据集中到一个DOM块中，这在form元素和表单控件较多的情况下对设计以及实现带来一定程度的限制。例如在某个注册模块中，有一部分信息需要提交到服务器地址A，而另一部分则需要提交到服务器地址B，然而在展现上这些控件又是混在一块的。这一场景在HTML4中处理起来是比较麻烦的，但是在Html5 Web Form中却可以轻松处理，因为在Html5中，所有的表单控件都增加了一个新属性form,可以关联相应的表单id，表示该控件属于某个表单。通过这个属性则彻底突破了必须将控件写在<form></form>之中的限制。
表单提交更加灵活。在Html4中，一个表单的数据内容一般只能提交到一个服务器地址，这在一定程度上也阻碍了我们表单功能实现的限制。而Html5 Web Form也解决了这个问题，因为在Html5中,所有的表单控件都增加了一个新属性formaction,可以为每个表单控件设置要提交的服务器地址，这使得我们在设计网页时更加灵活，可以自由地选择要向服务器提交表单的数据。
用户体验更加友好。Html5 Web Form的初衷就是为了提供更好地用户体验，Html5中引入了一些新的属性，例如holderplace、datalist、list等，这些自动聚焦、提示列表和用户自由信息提示等功能，可以让Web程序更好地与用户实现交互。
输入类型更加丰富。Html5 Web Form规范中提供了一系列的输入类型，如邮箱、网址、邮政编码等等。与我们之前只有的文本text、password和submit相比，大大丰富了我们的输入类型，也使我们省略了一大堆冗余的表单脚本验证代码。
表单样式更加华丽。Html5 Web Form在以前只有文本框、单选钮和复选框等几个典型的输入样式的基础上，引入了时间选择器和数字选择器等更加丰富的表单数据内容表现形式，使我们可以在研究和实现用户内容和数据的收集上放更多的精力，从而不必太在意表单样式的表现。
此外，在Html5 Web Form规范中，虽然提供了很多元素和属性的使用方法，但是它并没有规定浏览器用何种方式来呈现给用户。Html5的这种以退为进，无为而大作的策略，显然有着长远的考虑。

didimm

首先，这种分离语义和样式的方法带给了浏览器更大的发挥空间，浏览器可以不断改善自己的显示样式；
其次，桌面浏览器和移动设备的浏览器都可以遵照Html5 Web Form语义标准的前提下，设计出适合用户当前使用设备的显示方式。例如，现在的部分移动设备上，可以通过识别表单的输入类型，会显示不同的屏幕键盘。在Iphone手机上，当输入类型为email时，会提供带有“@”和“.”的屏幕键盘，而输入类型为url时，则会提供带有“.com”和“/”的屏幕键盘。如图2-1和图2-2所示。

2.1.3  Html5 Web Form的浏览器支持情况
虽然Html5 Web Form的浏览器支持情况不一定是最糟糕的，但至少是令我们最头疼最纠结的一个。目前主流的桌面浏览器和移动设备浏览器对Html5 Web Form新控件和新属性的支持情况如图2-3和图2-4所示。其中白色表示完全支持，浅灰色表示部分支持，深灰色表示不支持。

didimm

从图2-2和图2-3中可以看出，虽然支持Html5 Web Form的浏览器越来越多，但是在主流的浏览器的支持情况却是参差不齐。这主要是因为Html5 Web Form控件类型众多，而到目前为止，很多浏览器制造厂商都还没有来得及投入太多的精力去支持这些新的输入控件类型。即便如此，现在的Webkit内核的浏览器基本都在不同程度上地开始支持Html5 Web Form，特别是桌面浏览器Opera和移动设备上的浏览器Safari已经把Html5 Web Form支持得很完美了，Html5 Web Form的普及已经指日可待。
此外，读者也不需要对自己在应用程序上使用Html5 Web Form新元素而表示担忧，因为Html5 Web Form的兼容性非常好。例如，即使用户的浏览器不支持新的表单输入控件，也会向Html4规范兼容，不会抛出任何异常或者错误，只是使用简单文本输入框代替。正是基于此，我们在使用Html5 Web Form时，也没有去检测用户的浏览器的支持情况的必要。
2.2  Html5 Web Form的使用
在Web应用程序中，表单是收集用户信息和进行程序交互的主要手段，也是组织和分配用户数据内容的重要方式。而Html5 Web Form良好的表单设计理念，将更好地降低服务器处理表单的负载压力，提供用户友好体验，让开发人员在使用表单收集数据时更加方便。本节，首先我们讨论一些表单的基础，然后从细节上探讨Html5 Web Form的使用。
2.2.1  表单容器的基本属性
在Html5 Web Form中，保留了我们熟悉的表单容器<form>标签。现在我们一起来回顾<form>标签的基本属性的使用。这些属性主要包括：
•        method属性
•        action属性
•        enctype属性
•        accept属性
•        accept-charset 属性
•        target属性
•        id属性
•        name属性
•        autocomplete属性
•        novalidate属性

didimm

method属性用来指定浏览器向服务器传送表单数据的方式，这个属性是可选的。在Html5 Web Form中，除了保留在html4规范中的<form>标签里的method属性，而且在任何一个表单输入控件都可以设置formmethod属性，方便让表单不同部分的数据以不同的方式传输的服务器。Method和formmethod属性值可以是POST和GET，两种方式各有优劣，表2-1对这两种属性的传输方式和优点进行了归纳。
表2-1  Method和Formmethod属性值的传输方式和优点
Method和Formmethod属性值        传  输  方  式        优       点
Post        将主体资料直接传输给服务器。        传输数据大，安全性高，
Get        通过URL载体传输。        传输速度快，便于调试
当method或formmethod的属性值为POST时，表单的数据在浏览器后台直接传送给服务器进行处理。这一般用于传送数据量大、安全性要求比较高的表单数据内容。
当method或formmethod的属性值为GET时，实际上是通过URL传递表单数据内容，具体流程如下所示。
•        浏览器会先从服务器请求URL。
•        浏览器将表单的数据内容进行ASCALL编码，各个变量之间使用“&”符号连接。
•        浏览器将编码过的数据绑定到URL上发送给服务器。
对于method属性的具体使用，读者可以参考下面的代码。
HTML代码:test_method.html。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <form action="#" method="GET">
                <p>
                        姓名：
                        <input type = "text" name="user_name"/>
                </p>
                <p>
                        密码：
                        <input type = "password" name="user_password"/>
                </p>
                <input type="submit"/>
        </form>
</body>
</html>
•        text是文本框输入类型控件。
•        password是密码框的输入类型控件。
•        method属性用来指定浏览器向服务器传送表单数据的方式。
•        action属性用来设置服务器接收和处理表单数据的URL。
•        在上述代码中，我们使用GET方法传送数据内容。

didimm

在一般情况下，要尽量避免使用GET方式，因为URL的长度有限制，使用GET方式传输的表单数据一般不能超过2KB。此外，这种方式也存在一定的安全隐患，因为URL是可见的，不安分的用户可能会直接通过网址提交表单。
action属性用来设置服务器接收和处理表单数据的URL。这是表单容器<form>唯一的必选属性。和method一样，在Html5 Web Form中，除了在<form>标签中具有action属性，在任何的一个表单输入控件都可以设置formaction，让不同表单的数据传输给不同的服务器。对于action属性的具体使用，前面我们已经探讨过了，这里不再赘述。
在继续探讨表单容器的基本属性之前，我们有必要来讨论一下表单的基本架构，即服务器接受表单数据的具体方式。
一个完整的表单应该是包含两个部分的，本书所讨论的都只是浏览器端向用户显示的那部分。实际上，还有一部分就是服务器端接受和处理表单数据的脚本。这些脚本语言主要有ASP、CGI和PHP等等，它们都有一套标准、统一表单数据接受和处理方式。例如当我们使用POST方式传输表单数据时，ASP脚本服务器端使用Request.Form对象来接收，而PHP脚本服务器端使用$_[POST]数组来接收。而当我们使用GET方式传输表单数据时，ASP脚本服务器端使用Request.QueryString对象来接收，而PHP脚本服务器端使用$_[GET]数组来接收。
enctype 属性用来指定表单数据在发送到服务器之前进行编码的编码方式，这个属性是可选的，而且该属性只有在表单数据传输方式设置为POST时才有效。
同样地，在Html5 Web Form中，除了在<form>标签中保留了entype属性之外，在任何的一个表单输入控件都可以设置formenctype属性，为不同的表单输入控件指定相应的编码方式。表2-2对enctype和formenctype属性的取值和说明进行了归纳。