第1篇HTML5 HTML5 是指 HTML 5.0 + CSS 3.0 + JavaScript+相关标准. 要成为一名合格的 Web 开发人员,需要学习和掌握的技术有以 下两个方面. (1)C#开发人员:HTML、CSS、JavaScript、jQuery、C#、ASP. NET、Silverlight. (2)Java 开发人员:HTML、CSS、JavaScript、jQuery、Java、 JSP、JavaFX 或者 Flex. 可见,不论是 C#开发人员还是 Java 开发人员,HTML、CSS、 JavaScript 都是必须掌握的基本技术,这些基本技术是进行网页设计 的基础. 在本书的第 1 篇,我们将首先学习这些知识. 本书第 2 篇和第 3 篇主要介绍 ASP.NET 的服务器和客户端开发 技术,而后两篇使用的基本知识,仍然是这一篇介绍的内容. 本书是针对学习过 C#语言的读者而言的.除了第一篇与 C#没有 关系外,后两篇的后台代码都是用 C#语言来编写. 对于没有学过 C#语言的读者,请首先学习《C#程序设计及应用 教程(第2版) 》 (人民邮电出版社,马骏主编)一书,否则学习本书 的后两篇会有一定的难度. 2 第 1章 概述 本章主要介绍 Web 相关基础知识以及 VS2010 开发环境配置,为后续章节的学习做准备. Microsoft Visual Studio 2010(简称 VS2010)是功能强大的集成开发环境,是Windows 操作 系统平台上最流行的开发工具,开发人员可以在其中完成所有的软件开发任务,包括 UML 建模、 集成测试、Windows 窗体应用程序开发、WPF 应用程序开发、ASP.NET Web 应用程序开发、 Silverlight 应用程序开发、Silverlight for Windows Phone 应用程序开发、XNA 游戏开发、WCF 以 及数据库相关的应用程序开发等,同时还提供了各种应用程序的安装、发布和部署支持.这些方 便的开发模型使 C#开发人员能快速地构建和编写各种复杂的应用程序. 1.1 应用程序的分类及特点 这一节主要介绍进行 Web 开发时,在哪些情况下采用哪些技术更能符合用户的实际需求,从 而快速开发出用户满意的应用程序. 下面我们分别从开发形式、采用的网络协议、部署方式以及业务逻辑处理的复杂度这些方面 来介绍目前的应用程序开发类型. 1.1.1 C/S 编程模型 传统的 C/S(Client/Server,客户端/服务器)模式又称为 C/S 结构.采用这种模式开发的应用 程序需要开发人员分别开发服务器端程序和客户端程序.C/S 模式的应用程序一般用 TCP、UDP 等网络协议编写网络应用程序.在这种开发模式下,双方建立连接后,任意一方都可以主动发送 信息给对方,也都可以接收对方主动发送过来的信息.由于这种模式是在客户端实现大多数的业 务处理逻辑和界面操作,而不是在服务器端实现,所以在传统概念上将其称为胖客户端. 这里顺便提一下,从使用的网络协议来看,P2P(peer-to-peer,对等互联网络技术)本质上也 是一种 C/S 应用程序,它仍然使用 TCP 或者 UDP 进行通信.但是,P2P 模式不仅限于客户端和 服务器之间的通信,还可以使用其他协议实现点对点的直接通信和网络自动发现,甚至不用提供 专门的服务器.或者说,P2P 是适用于特殊应用场合的一种功能增强的 C/S 模式. 1.1.2 B/S 编程模型 传统的 B/S(Browser/Server,浏览器/服务器)模式又称 B/S 结构,是指以 HTTP 为传输协议 的技术和体系结构.在这种模式下,客户端使用一种通用的应用程序,简称为浏览器,例如 IE 浏览器、FireFox 浏览器等. 与传统的 C/S 模式相比, 采用传统 B/S 模式的开发人员只需要开发发布在 Web 服务器上的程 序即可,从而简化了客户端的部署.另外,在传统的 B/S 模式下,不像传统 C/S 模式那样采用建 第1章概述 3 立连接后都能主动发送信息给对方的方 式,而是服务器被动地接收客户端浏览器 发送的请求.一般情况下,一旦服务器处 理完本次客户端的请求,就会立即断开与 该客户端的连接.换句话说,客户端浏览 器需要再次和服务器连接后才能发送新的 请求. B/S 模式一般采用三层架构设计.用 户界面、逻辑处理、数据支持构成所谓的三层架构,如图 1-1 所示. 在传统的 B/S 模式中,客户端浏览器只负责处理与显示逻辑相关的工作,而将大部分事务处 理逻辑都放在服务器端进行处理. 由于这种模式客户端包含的逻辑很少, 因此将其称为瘦客户端. 传统的 B/S 模式由两种编程模型组成,一种是 B/S 客户端编程模型,另一种是 B/S 服务器编 程模型. 1.B/S 客户端编程模型 B/S 客户端编程模型主要由 W3C 制定的 HTML 和XHTML 标准、CSS 标准、 HTML DOM 标 准以及客户端脚本 4 部分组成,这些标准的具体实现则由软件生产厂家来完成. 在客户端, HTML 和CSS 由软件生产厂家生产的客户端浏览器负责解析. HTML DOM 也是由浏 览器负责实现,并公开由客户端脚本调用.另外,解析客户端脚本的任务同样也是由浏览器来完成. 在客户端脚本中, 除了 JavaScript 以外, 虽然还可以使用其他客户端脚本语言, 但是对于 Web 开发人员来说,由于所有浏览器均支持 ECMAScript 标准,而JavaScript 是该标准的具体实现,所以Web 开发人员只需要学习 JavaScript,就可以用客户端脚本来编写浏览器能正常解析的网页. B/S 客户端编程模型的优势在于 HTML 文本、音频、视频及动画的表达和展现能力.适用于 企业对外公开的网站开发. 2.B/S 服务器编程模型 JavaScript 的优势在于客户端编程,但是由于它本质上并不是一种完全面向对象的编程语言, 而且提供的库函数有限,用它实现各种复杂的后台业务处理逻辑实在是太复杂了,所以又出现了 B/S 服务器编程模型.在这种编程模型中,只需要让 Web 服务器提供运行环境,即可实现快速部 署,而对客户端则没有限制.所以,Web 开发人员可以使用面向对象的高级语言(例如 C#、Java 等)通过某种开发环境的支持来编写更复杂的 Web 应用程序,从而提高 Web 开发的速度和效率. 那么,开发工具又如何使用客户端浏览器公开的 HTML DOM 对象呢?其实思路很简单,它只需 要通过开发工具的编译环境,再通过 Web 服务器将 Web 开发人员编写的代码转换为 JavaScript 代码,并嵌入到 HTML 中,然后将其变为字符串序列发送到客户端,就可以让浏览器正常解析和 显示.例如 ASP.NET、JSP 都属于 B/S 服务器编程模型. B/S 服务器编程模型同样适用于企业对外公开的网站开发.它和客户端编程模型相比,优点 是B/S 服务器编程模型既能利用客户端 HTML 文本、音频、视频和动画的表达和展现能力,又能 利用完全面向对象的高级语言和丰富的类库支持,提高 Web 开发的效率. 3.B/S 和C/S 开发模式的比较 从编程方式和软件部署的角度来看,对于传统的 C/S 模式,程序员需要分别编写服务器程序 和客户端程序, 除了在服务器上部署服务器程序外, 还需要将客户端程序安装到每一台客户机上. 对于传统的 B/S 模式,由于客户端浏览器程序是通用的,因此程序员只需要编写部署到 Web 服务 器上的程序即可. 从传输协议和速度上来看,在传统 C/S 模式下客户端和服务器由于直接使用 TCP 进行连接, 图1-1 B/S 模式三层架构示意图 HTML5 与ASP.NET 程序设计教程(第2版) 4 而且连接成功后一般保持连接状态,不需要每次都建立连接,所以响应速度快,常用于需要服务 器快速响应的场合,例如企业级日常业务处理等.而对于传统 B/S 模式来说,由于客户端每次产 生新的请求时,都要重新连接 Web 服务器,所以速度不如传统的 C/S 模式,但正是这种原因,却 能使得 Web 服务器可以服务于大量未知的客户, 一般用于客户不确定而且客户端不需要每日必须 频繁访问服务器的场合,例如新闻服务、企业对外广告和业务服务等. 从功能和程序依赖性这个角度来看,传统的 C/S 模式由于客户端可以充分利用本机操作系统 提供的底层功能函数,因此界面和功能可以做得非常丰富,但由于在复杂的功能中,客户端往往 对操作系统的依赖性较强,因此需要程序员分别针对不同的操作系统编写对应的客户端程序.而 对于传统的 B/S 模式,客户端只需要安装一个通用的浏览器即可,对操作系统的依赖性较小. 1.1.3 富互联网应用程序模型 近年来,随着互联网的普及和客户端功能的增强,又出现了一种新的应用程序类型,称为富 互联网应用程序(Rich Internet Application) ,简称 RIA.用RIA 技术编写的应用程序既可以在浏 览器中运行,也可以脱离浏览器运行.如果脱离浏览器运行,其效果与 C/S 模式的窗体应用程序 几乎没什么区别. RIA 模式的应用程序综合了传统 C/S 模式和传统 B/S 模式的优点,使之既能像 C/S 那样在客 户端完成复杂的企业级业务处理,又能像 B/S 那样易于部署,所以受到广大开发人员的青睐.比 较典型的基于 RIA 模式的应用程序有 Microsoft 公司的 Silverlight、 Macromedia 公司的 Flex (Flash) 以及 Oracle 公司的 JavaFX 等. 从支持的语言来看,Microsoft 公司的 Silverlight 后台使用 C#语言,页面使用 XAML 来描述. Oracle 公司的 JavaFX 后台使用 Java 语言,页面使用 JavaFX 来描述.Macromedia 公司的 Flex 则 使用 mxml 和actionscript 来描述. 对于.NET 开发人员来说,一般还是喜欢使用微软的 Silverlight 来开发 RIA 程序,以便能在 Windows 平台上获得更高的开发效率和性能.在Linux 平台上,可以使用 MoonLight(Novell 公 司资助的开源 Silverlight)来开发 Silverlight 应用程序.另外,由于 Silverlight 本身是一种客户端 技术,所以也可以在 Windows 平台上使用微软的 VS2010 开发工具开发 Silverlight 应用程序后, 再利用开源的 Web 服务程序(如Apache Web Server)将其部署在 Linux 服务器上. 但是,RIA 模型共同的特点是必须先在客户端安装一个插件,客户端才能正常运行部署在 Web 服务器上的 RIA 程序.例如,运行 Silverlight 程序需要在客户端安装 Silverlight 插件,运行 Flash(Flex)程序需要在客户端安装 Flash 插件. 1.2 W3C 和ECMA 标准 随着互联网的高速发展和各种技术的百花齐放,人们逐渐意识到如果没有统一的标准,就会 严重制约网络的发展.为解决 Web 应用开发中不同平台、技术带来的不兼容问题,保障 Web 信 息流通,于是产生了一些制定标准的组织,其中最典型的就是 W3C 和ECMA. W3C(World Wide Web Consortium,全球万维网联盟)成立于 1994 年.像HTML、CSS、 XML、 XHTML 和DOM (Document Object Model, 文档对象模型) 都属于 W3C 制定的 Web 标准. ECMA(European Computer Manufacturers Association,欧洲计算机制造联合会)是除了 W3C 之外另一个比较有代表性的组织之一. 我们平时所说的 "标准 JavaScript" 实际上就是指符合 ECMA 规定标准的 JavaScript,也叫"ECMAScript" . Web 标准是国际上的通用标准,凡是符合这些标准的网站,都能用目前流行的各种客户端浏 第1章概述 5 览器正常浏览.用符合 Web 标准制作的网页,也更容易被搜索引擎定位和检索. 为什么要求 Web 开发者必须符合这些标准呢?这是因为客户端浏览器并不是只有一种,如果浏 览器开发商各自制定一套自己的标准,会导致开发人员需要针对不同的浏览器开发不同的 Web 程序. 这里要强调一点,标准并不提供如何实现,只提供了功能和格式,开发工具可以按照标准来 实现规定的内容.换句话说,标准是在说明可以使用哪些功能、这些功能的语法格式,以及在使 用符合标准的内容时,哪些是推荐使用的,哪些是建议不要这样用的.而具体如何实现符合标准 规定的内容,则由具体的开发工具来决定. Web 标准中的每一个标准都制定了一套很复杂的格式,学习这些标准也很费时间.初学者总 是想搞明白哪些格式符合标准,哪些格式不符合标准,其实完全没必要.这并不是说标准不重要, 而是说完全记住这些标准的规定很不容易.实际上,对于 Web 开发人员来说,只需要使用符合标 准的开发工具来开发就可以了,开发工具会自动提醒开发人员某些格式不符合标准.例如在 VS2010 中,系统会用绿色下划线提醒某些标记不符合标准.一旦设计者发现不符合标准,不使 用它或将其更换为符合标准的格式就行了. 在早期的 Web 标准中,为了清晰地描述网页的各种特性,W3C 把一个网页分为"结构" 、 "表现"和"行为"3 个部分.与此对应的标准分别称为结构化标准(HTML、XML、XHTML) 、表 现标准(CSS)和行为标准(DOM、ECMAScript) . 目前流行的 HTML 第5版是 W3C 在2008 年发布的标准草案, 它规定了 HTML 5.0 的格式和 功能.目前流行的浏览器例如微软公司的 IE9(Internet Explore 9.0)、Mozilla 基金会的 FireFox 9.0、 谷歌公司的 Chrome 16.0 以及 Opera、Safari 等浏览器都已经支持 HTML 5.0 标准. 1.2.1 HTML 目前结构化标准中的常见标准有 HTML、XML 以及 XHTML 等,其中最流行的就是我们常 说的 HTML. 1.HTML 的早期版本 HTML(HyperText Mark-up Language,超文本标记语言)是一种基本的网页设计语言. 1990 年, HTML 语言和 WWW (万维网) 一起诞生, 它是众多标记语言的一种. 1993 年, IETF (因特网工程部)起草了 HTML 的第 1 个版本,但是它并没有成为正式的标准.1995 年,IETF 推出了和浏览器相适应的 HTML 2.0 作为正式的 Internet 标准. HTML 3.0 由W3C 制定,它提供了很多新的功能,同时兼容 HTML 2.0,但是由于它的设计 过于复杂,所以最终没有正式公布.1996 年,由W3C 联合 Netscape 公司、Microsoft 公司、Novell 公司、Sun 公司和 IBM 公司等共同开发的 HTML 3.2 建议标准,因为放弃了一些新特征和复杂元 素,采用实际的适应 IE、Netscape 和Mozilla 等浏览器发展的特殊元素和性质,而得到发展,并于1997 年1月被发布为正式标准. 1997 年12 月,具有严谨、过渡和架构 3 个特性的 HTML 4.0 建议标准问世,该标准废弃了 一些旧元素,增加了一些适应发展的新元素,同时允许使用和架构相关的大部分元素. 2.HTML 4.01 1999 年12 月,W3C 推出 HTML 4.01 标准.在HTML5 广泛流行之前,几乎所有的最新版浏 览器在解析 HTML 时,都支持 HTML 4.01 标准. HTML 从1.0 版到 4.01 版,标准在不断完善,功能也越来越强大,但是它的规范化要求依然不 是很严格,存在很多缺陷和不足.例如,代码琐碎、臃肿,尤其是标记使用不规范,浏览器需要有 足够的容错能力才能够正确显示页面,导致运行效率很低,速度变慢.而且,随着 Web 的发展,面 对越来越多的发布、处理和显示文档方法的要求,HTML 4.01 及更低版本逐渐显得力不能及.当面 HTML5 与ASP.NET 程序设计教程(第2版) 6 对多样的数据和复杂的表现时更是显得无能为力,但这些都在 HTML5 中得到改进、增强和完善. 3.HTML5 从HTML5 开始,Web 设计又进入了一个崭新的时代. HTML5 是近 10 年来 Web 标准最巨大的飞跃.与以前的 HTML 版本不同,HTML 5.0 的使命 是取代 1999 年所制定的 HTML 4.01 和XHTML 1.0 标准,以期能在互联网应用迅速发展的时候, 使网络标准达到符合当代的网络需求,将Web 带入一个成熟的富互联网应用平台,并希望在这个 平台上,文本、图像、音频、视频、动画以及同计算机和移动设备的网络交互都被标准化. 在HTML 5.0 标准草案发布之前,各种浏览器发生了很多变化,Netscape 在浏览器生产厂家 的残酷竞争中灰飞烟灭,IE5 作为赢家后来又陆续推出 IE6、IE7、IE8、IE9 一直到本书成稿前尚 处于平台预览版阶段的 IE10.另外,Mozilla 的Firefox 也异军突起,成为用户量第 2 的浏览器. 同时,除了 Opera 以外,Google 和苹果也各自推出自己的浏览器 Chrome 和Safari,并很快成为世 界范围内最流行的 5 种主流浏览器(IE、Firefox、Chrome、Opera、Safari)中的两种. 这里需要特别提醒的是, 广义上讲的 HTML5 不仅仅指 HTML 5.0, 而是指包括 HTML 5.0 版、 CSS 3.0 版和 ECMAScipt(JavaScript)在内的一套技术组合.换句话说,HTML5 是HTML 5.0、 CSS 3.0、ECMAScript(JavaScript) 、JQuery 等标准的统称. 2008 年1月,HTML 5.0 版的第一份正式草案发布. 目前主流的浏览器 IE、Firefox、Chrome、Opera、Safari 均已支持 HTML5.但是,由于浏览 器的版本不同, 对HTML5 的支持程度还不完全相同. 相信随着 HTML5 的广泛流行, 以及 HTML5 的不断完善,我们将会陆续看到各种现代新版浏览器对 HTML5 更为全面的支持. HTML5 包含的 HTML 5.0 标准提供的标记非常多,早期版本 HTML 4.01 支持的大部分标记 在HTML5 中仍然被继续支持,但是有些标记在 HTML5 中增强了功能,对HTML 4.01 支持的部 分标记的特性做了补充和修改,同时 HTML 5.0 又增加了一些新的标记. 4.XML 和XHTML XML 是为了对信息进行自我描述而设计的一种新语言.同HTML 一样,XML 也是一种基于 文本的标记语言,但是 XML 可以让用户根据要表现的文档,自由地定义标记来表现具有实际意义 的内容.而且 XML 不像 HTML 那样具有固定的标记集合,也就是说,使用 XML 的用户可以自己 定义各种标记,来描述文档中的任何数据元素,从而将文档的内容组织成丰富完整的信息体系. XML 具有便于存储的数据格式、可扩展、高度结构化以及方便的网络传输等特点. 在XML 标准中,要求标记必须成对出现,但标记的名称可以根据需要自定义.下面的示例 代码利用 XML 描述了个人的基本信息. 李四 男 28 尽管 XML 有很多优点,但是,在XML 1.0 标准推出时,由于仍然有大量的人员采用早期版 本的 HTML,而且在英特网中已存在数以百万计的页面是采用 HTML 来编写的,所以不能抛弃 HTML,由此 XHTML 应运而生了. XHTML 是为了适应 XML 而重新改造的 HTML.2000 年1月,W3C 推出 XHTML 1.0 标准. 该标准与 HTML 4.01 具有相同的特性,但是做了一些限制,该标准要求在网页中出现的任何元素 都要用标记表示出来. W3C 制定 XHTML 标准的目的是为了让浏览器以 XML 序列化的形式传输 HTML. 目前最流 第1章概述 7 行的是 XHTML 1.0 标准. 2001 年5月,W3C 推出 XHTML 1.1 标准,它以 XHTML 1.0 的严谨为基础,并做了一些改 进,同时对 XHTML 的模块化重新定义.但是使用该标准的开发人员并不多. 这里还要特别说明一点,随着 HTML5 的广泛流行,XHTML 2.0 标准的制定者已经停止了工 作,所以我们学习的主要目标是 HTML5.对XHTML 来说,读者只需要有一个初步的了解即可. 1.2.2 CSS 网页设计中的第 2 种标准是表现标准,主要使用 CSS 控制页面元素的样式. CSS (Cascading Style Sheets) 称为层叠样式表, 也叫级联式样式表. 通过 CSS 可以控制 HTML 元素的表现形式.W3C 创建 CSS 标准的目的是以 CSS 取代 HTML 表格布局和其他表现语言.将CSS 与HTML 相结合能帮助开发人员分离页面的外观与结构,使站点的访问及维护更加容易. CSS 的优势及作用主要有以下几个方面. (1)提高页面浏览速度.以前必须通过图片转换才能实现的功能,可以用 CSS 轻松实现,从 而使页面的浏览速度更快. (2)易于维护和改版.采用 CSS,可以有效地对页面的布局、字体、颜色、背景和其他效果 进行更加精确的控制.利用 CSS,只需对相应的代码做一些简单修改,就可以改变同一页面多个 部分的格式,或者同时改变多个网页的外观. (3)表现和内容相分离.Web 开发人员可以利用 CSS 控制页面中一个或多个元素的外观,进 而统一控制页面的布局.由于更改样式表中任何一个元素的显示样式,网页中所有与该样式级联 的元素都会自动改变,因此使用样式表可以减少很多具有相同外观元素的重复设置工作,从而给 网页的设计和维护带来很大的方便. 在CSS 第3版(CSS 3.0,简称 CSS3)流行之前,最流行的表现标准是 W3C 于1998 年推荐 的CSS 第2版的更新版(CSS 2.1 版,简称 CSS2) . CSS3 是近年来互联网发展的一个流行趋势.CSS3 将CSS 划分为更小的模块,把很多以前需 要使用图片和脚本才能实现的效果,变为只需要短短几行代码就能实现.比如圆角、图片边框以 及文字阴影和边框阴影等.同时,利用 CSS3,还能实现以前需要很多代码才能完成的二维、三 维图形操作以及动画等高级图形控制功能. CSS3 不仅能简化前端开发工作人员的设计过程,还能加快页面加载到内存中的速度. 1.2.3 JavaScript 和jQuery 网页设计的第三种标准是行为标准,主要包括 DOM 和ECMAScript. 1.JavaScript 在ECMAScript 标准之前,我们所说的 JavaScript 是指 Netscape 公司设计的 JavaScript,就像 C#最初是由 Microsoft 公司设计,后来成为 ECMA(欧洲计算机制造联合会)和ISO(国际标准 化组织)规定的高级语言开发标准那样,ECMAScript 是ECMA 规定的 JavaScript 标准.当时工 作于 Netscape 公司的 Brendan Eich,开始着手为即将发行的 Netscape Navigator 2.0 开发一个称之 为LiveScript 的脚本语言.就在 Netscape Navigator 2.0 正式发布前,Netscape 公司将其更名为 JavaScript 1.0,目的是为了利用 Java 这个在当时非常时髦的词汇.Netscape 公司的努力最终得到 了回报,使JavaScript 变成了最流行的脚本语言. 因为 JavaScript 1.0 获得了巨大成功,Netscape 公司在 Netscape Navigator 3.0 中发布了 JavaScript 1.1 版.恰巧在那个时候,Microsoft 公司发布了 IE 3.0,同时设计了 JScript(这样命名 是为了避免与 Netscape 公司潜在的许可纠纷) .可以说,JScript 是Microsoft 公司在 IE 浏览器中 HTML5 与ASP.NET 程序设计教程(第2版) 8 实现的 JavaScript,当时的版本看起来既像 JavaScript,但又有一些区别. 在Microsoft 公司推出 JScript 后, 同时有 3 种不同的 JavaScript 版本存在, 即Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase.与C语言和其他编程语言不同的 是,当时的 JavaScript 并没有一个标准来统一其语法或特性,而这 3 种不同的版本恰恰不完全一 致.随着浏览器版本的提高,脚本语言的标准化工作显然势在必行. 1997 年, JavaScript 1.1 作为一个草案提交给 ECMA. 由来自 Netscape、 Sun、 Microsoft、 Borland 和其他一些对脚本编程感兴趣的公司共同制定了 ECMA-262 标准,并将其命名为 ECMAScript. 随后,W3C 也及时出版了标准的 DOM 规范.在接下来的几年里,国际标准化组织(ISO)以及 国际电工委员会(IEC)也采纳 ECMAScript 作为标准(ISO/IEC-16262) .从此,各公司的浏览器 就开始将 ECMAScript 作为 JavaScript 实现的标准. Microsoft 公司早期版本的 JScript 并不完全符合 ECMAScript 标准,但是后来 Microsoft 公司 抛弃了不符合规定的内容, 而全部采用符合 ECMAScript 标准的语法提供 JavaScript 的实现. 所以 Microsoft 公司后来提供的高版本 JScript 就改名叫 ECMAScript(JavaScript) ,这样命名是为了强 调高版本 JScript 并不是一种新语言,而是说 JScript 就是指符合 ECMAScript 标准的 JavaScript. 但是这种写法很让人糊涂,容易让人误解为 ECMAScript 是一种具体实现,又容易让人误解为 JScript 仍然是一种新的语言. 为了简化起见,在本书后面的内容中,不再解释 JScript、ECMAScript 以及 JavaScript 到底有 什么联系与区别了.而是将符合 ECMAScript 标准的具体实现称为 JavaScript. 2.jQuery jQuery 是在 JavaScript 的基础上,提供的免费、开源的 JavaScript 库,它兼容 CSS3,还兼容 各种浏览器.使用 jQuery 可大大简化 JavaScript 编程的复杂性. jQuery 最初由两个美国人和一个德国人共同开发,目前已经成为一个强大的研发团队.由于 jQuery 易于使用,逐渐从各种 JavaScript 库中脱颖而出,成为开发人员的最佳选择.到2011 年年 底,jQuery 已经发布到 1.7.1 版,网址为 http://jquery.com/. 2006 年,jQuery 1.0 面世,具有对 CSS 选择符、事件处理和 AJAX 交互的稳健支持. 2007 年,陆续发布了 jQuery 1.1、jQuery 1.1.3、jQuery 1.2.这些版本大幅简化了 API,合并 了许多较少使用的方法,包含了对 jQuery 选择符引擎执行速度的显著提升,去除了对 XPath 选择 符的支持,改为完全用 CSS 语法来实现.同时,能够支持对效果更灵活的控制,而且借助新增的 事件,也使插件开发变得更容易. 2008 年,发布了 jQuery 1.2.6.这一版主要是将某些插件的功能移植到了核心库中. 2009 年,陆续发布了 jQuery 1.3、jQuery 1.3.2.新版使用了全新的选择符引擎 Sizzle,库的性 能也有了极大提升.同时,正式支持事件委托特性.另外,也支持查询的元素按文档顺序返回. 2010 年,陆续发布了 jQuery 1.4、1.4.1、1.4.2、1.4.3、1.4.4.新版代码库进行了内部重写组 织,开始建立一些风格规范.速度和性能有了极大的提升,同时增加了一些 API,开始提供对 HTML5 的部分支持. 2011 年,又陆续发布了 jQuery 1.5 版、1.6 版、1.7 版. 2011 年底, 发布了 jQuery 1.7.1 版. 该版本除了继续提升性能外, 又增加了对 HTML5 和CSS3 的全面支持. 1.2.4 DOM 使用 JavaScript 脚本语言能够动态修改 HTML 文档中的元素、属性等.但是仅仅依靠 JavaScript 并不能完全完成这一目标, 它还需要一个适用于所有浏览器的通用模型来操作 HTML 第1章概述 9 文档中的所有元素对象, 这种模型就称为 HTML DOM (HTML Document Object Model) , 简称 DOM. DOM 是一种与浏览器、平台和语言无关的接口,使Web 开发人员可以访问页面中的任何一 个文档对象.DOM 解决了不同浏览器之间的冲突,给Web 开发者提供一个标准的方法来访问站 点中的数据、脚本和表现层对象. 1998 年,W3C 发布了 DOM Level 1 标准.它专注于 HTML 和XML 文档模型,通过一套常 用的函数集,提供操作或控制文档中所有元素的能力. 2000 年,W3C 发布了 DOM Level 2 标准,简称 DOM2.该标准通过对象接口增加了对鼠标 和用户界面事件和层叠式样式表(CSS)的支持.同时也对 DOM 1 的核心进行了扩展. 2003 年, W3C 发布了 DOM Level 3, 简称 DOM3. DOM3 规定了内容模型 (DTD 和Schemas) 和文档验证.同时规定了文档加载和保存、文档查看、文档格式化和关键事件. 1.2.5 C#语言 C#语言是一种完全面向对象、基于.NET 框架的高级编程语言. 2001 年,C#成为 ECMA 标准,并发布了 ECMA-334 C#语言规范. 2003 年,C#成为 ISO(国际标准化组织)标准,并发布了 ISO/IEC 23270. 除了微软实现的、运行在 Windows 各种平台的 C#外,在其他平台上运行的 C#比较著名的是 由Novell 公司赞助的开源项目 Mono,Mono 的C#编译器接近百分之百地实现了.NET Framework 类库. Mono 项目的目标是创建一系列符合 ECMA 标准 (ECMA-334 和ECMA-335) 的.NET 工具, 包括 C#编译器和公共语言执行平台.与微软的.NET Framework 不同,Mono 项目不仅可以运行于 Windows 系列操作系统上,还可以运行于 Linux(openSUSE、Ubuntu 等) 、FreeBSD、UNIX、Mac OS X 和Solaris 等操作系统上. Mono 目前的稳定版本是 2011 年12 月推出的 2.10.8 版, 网址为 http://www.mono-project.com. C#语言的发展过程主要经历了以下阶段. ? 2000 年,C#语言正式发布. ? 2003 年,微软公司发布了 C#语言规范 1.2(简称 C#1.2) ,VS.NET 2003 使用的是 C#1.2. ? 2005 年,微软公司发布了 C#语言规范 2.0(简称 C#2.0) ,VS2005 使用的是 C#2.0. ? 2007 年,微软公司发布了 C#语言规范 3.0(简称 C#3.0) ,VS2008 使用的是 C#3.0. ? 2010 年,微软公司发布了 C#语言规范 4.0(简称 C#4.0) ,VS2010 使用的是 C#4.0. 在服务器端,利用 ASP.NET 架构以及.NET 框架提供的强大类库和强类型的 C#语言,可以简 单高效地实现各种业务功能,而如果将这些业务处理功能全部直接用 JavaScript 来实现,虽然也 能够实现,但是会严重影响 Web 开发的速度和质量,无法在短期内完成项目要求.特别是随着逻 辑功能越来越复杂, JavaScript 代码的维护工作也会越来越让程序员难以承受. 也正是因为这个原 因,才促使各大软件生产厂家推出各种基于服务器端技术的 Web 开发架构,以简化 Web 处理的 复杂度,提高开发的效率. 这里再次强调一下, JavaScript 的真正用途是在客户端实现与用户动态交互的功能, 而对于服 务器端的业务处理,还是使用强类型的高级语言比较方便.例如在 ASP.NET 中使用 C#语言,在JSP 中使用 Java 语言. 在基于 ASP.NET 架构的 Web 开发中,C#语言主要用于以下用途. (1)在代码隐藏类中,使用 C#提供的所有功能,在服务器端实现后台管理和前台控制. (2)创建、使用.NET 提供的所有类和对象,实现企业级复杂业务处理. (3)通过事件动态控制服务器控件和 html 元素. (4)动态控制 CSS 和服务器控件的外观. HTML5 与ASP.NET 程序设计教程(第2版) 10 (5)快速访问文件、XML、SQL Server 数据库、Oracle 数据库. (6)与其他服务器的数据传递. (7)与JavaScript 和jQuery 交互,实现客户端动态控制. 1.3 VS2010 集成开发环境 Microsoft Visual Studio 2010(简称 VS2010)使开发人员能够快速创建高质量、用户体验丰富 而又紧密联系的应用程序.借助 VS2010 开发环境,采集和分析信息将变得更为简单便捷,业务 决策也会因此变得更为有效.任何规模的组织都可以使用它快速创建更安全、更易于管理并且更 可靠的应用程序. 1.3.1 安装集成开发环境 在学习如何开发之前,我们首先需要安装本书所用的开发环境和工具. 1.安装 VS2010 开发工具 ASP.NET 是VS2010 开发环境的一部分,利用"ASP.NET 空Web 应用程序"模板,或者利用 自动包含学习代码的"ASP.NET Web 应用程序"模板,来设计 HTML 页、CSS、JavaScript 以及 ASP.NET 页面时,首先需要安装的就是 VS2010 开发工具. VS2010 的安装过程比较简单,这里不再介绍具体安装步骤. VS2010 安装环境要求如下. (1)操作系统:Windows 7(32 位或者 64 位) . (2)内存:最低 1GB,建议 2GB,或者更高. 在Windows 7 操作系统下,建议采用 IE 9.0 或更高版本的浏览器,或FireFox 最新版本的浏览 器, 或Chrome 最新版本的浏览器. 因为这些浏览器都属于现代浏览器, 都支持 HTML5 和CSS 3.0. IE 9.0 浏览器不支持 Windows XP 操作系统. 本书所有的示例程序都是在 WIndows 7 操作系统、IE 9.0 浏览器,以及 Visual Studio 2010 简 体中文旗舰版开发环境下调试通过的. 在FireFox浏览器和Chrome浏览器下运行的效果与在IE 9.0 下运行的效果完全相同. 2.安装 VS2010 SP1 在微软官方网站上下载 Microsoft Visual Studio 2010 Service Pack1 镜像文件, 然后打开安装文 件安装即可. VS2010 SP1 的安装过程也比较简单,这里也不再介绍具体安装步骤. 1.3.2 安装扩展开发工具 除了安装 VS2010 和VS2010 SP1 外,为了使用 HTML5、CSS3 以及 jQuery,还需要安装一 些扩展工具. 1.安装 jQuery 共有两个版本的 jQuery 可供下载和安装,一种是精简的压缩版,例如 jquery-1.7.1-mini.js,该 版本去除了 jQuery 注释, 文件体积较小, 供发布时使用; 另一种是未压缩版, 例如 jquery-1.7.1.js, 供开发和调试时使用. 另外,还有一个与 jQuery 版本对应的名称包含-vsdoc 的文件,例如 jquery-1.7.1-vsdoc.js,它 是针对 Visual Studio 开发环境的 jQuery 智能提示, 把它与 jquery-1.7.1.js 文件放在同一个文件夹下, VS2010 就会自动找到 jquery-1.7.1-vsdoc.js 文件,从而实现智能提示功能. 第1章概述 11 这3个文件都可从 jQuery 的官方网站 http://jQuery.com 上免费下载. 2.安装 AJAX 控件工具包 ASP.NET AJAX Control Toolkit 是由 Microsoft 公司开发人员和其他第三方开发人员共同开发 的用于 ASP.NET 的AJAX 控件工具包,这是一个开源、免费的 AJAX 控件工具包. 本书使用的是 2011 年11 月发布的适用于在 VS2010 下使用的版本.下载网址为: http://ajaxcontroltoolkit.codeplex.com 下面介绍具体下载和安装步骤.注意下 载和安装步骤中介绍的其他下载页面,都是 进入"http://ajaxcontroltoolkit.codeplex.com" 这个页面后,再转入相应页面. (1)下载 AjaxControlToolkit.Binary. NET4.zip.下载页面如图 1-2 所示. 下载完成后, 将其解压到某个文件夹下, 例如将其解压到 C:\AjaxControlToolkit 文件 夹下.然后打开该文件夹,可以看到其中一 个AjaxControlToolkit.dll 文件,我们主要就 是使用它来扩展 AJAX 控件.另外,该文件夹下还包 含一个 AjaxControlToolkitSampleSite.zip 文件, 它是如 何使用这些控件的简单的代码示例. (2)运行 VS2010,创建一个 ASP.NET 空Web 应 用程序. (3)在【解决方案资源管理器】中,用鼠标右击 项目名,在弹出的快捷窗口中选择【添加】→【新建 项】→【Web 窗体】, 创建一个文件名为"WebForm1.aspx"的文件.然后用鼠标右键单击【工 具箱】中的某个位置,在弹出的快捷菜单中选择【添加 选项卡】命令,添加一个名为"AjaxControlToolkit"的 选项卡,如图 1-3 所示. (4)用鼠标右键单击该选项卡,在弹出的快捷菜单中选择【选择项】命令,此时会弹出一个 新窗口, 在新窗口中选择 【浏览】 , 找到 "C:\AjaxControlToolkit" 文件夹下的 "AjaxControlToolkit.dll" 文件,单击【打开】按钮,得到如图 1-4(a)所示的效果. (a)将AJAX 控件库添加到工具箱中 (b)添加后的工具箱 图1-4 添加 AJAX 控件库到工具箱中 图1-2 AjaxControlToolkit.Binary.NET4.zip 下载页面 图1-3 添加"AjaxControlToolkit"的选项卡 HTML5 与ASP.NET 程序设计教程(第2版) 12 (5)单击图 1-4(a)所示对话框中的【确定】按钮,即将 AJAX 控件工具包提供的控件添加 到【工具箱】中,添加后的效果如图 1-4(b)所示. 按照上述安装步骤后,就可以在 ASP.NET Web 应用项目中像使用其他 ASP.NET 服务器控件 一样使用这些控件了. 3.安装 HTML Web Standards Update for VS2010 SP1 这一步安装的目的是为了在 VS2010 下使用 HTML5、CSS3 和JavaScript,该工具对 HTML 网页和 ASP.NET Web 窗体都提供了对应的智能提示支持. 从微软的MSDN 上下载HTML Web Standards Update for VS2010 SP1,网址为: http://visualstudiogallery.msdn.microsoft.com/ a15c3ce9-f58f-42b7-8668-53f6cdc2cd83 本书使用的是 2011 年10 月4日发布的 1.0.4 版,图1-5 为该网址的下载页面.下载完 成后,直接运行安装即可. 1.3.3 安装客户端浏览器 调试本书的例子时,需要在浏览器中查看运行效果.由于本书成稿时,W3C 只是发布了 HTML5 的标准版候选草案,有些标准可能还会变化,因此不同的浏览器对 HTML5 的支持还存在一 些差别,所以需要安装不同的最新版本的浏览器,以便观察在各种不同的浏览器下网页运行的效果. 本书设计的内容适用于以下浏览器:IE 9.0、Chrome、Firefox、Opera 和Safari 等. 1.安装最新版 IE 浏览器 目前的最新正式版为 IE 9.0.本书的例子都是在 IE 9.0 版的浏览器下查看运行效果的. 读者可以从微软的官方网站上下载 IE 9.0 正式版浏览器,下载后直接安装即可. 2.安装最新版 Chrome 浏览器 如果读者想查看本书的示例在谷歌的 Chrome 浏览器下运行的效果,可以从谷歌的官方网站 上下载最新版的 Chrome 浏览器,下载后直接安装即可. 3.安装最新版 Firefox 浏览器 如果读者想查看本书的示例在 Firefox 浏览器下运行的效果,可以从 Firefox 的官方网站上下 载最新版的 Firefox 浏览器,下载后直接安装即可. 至此,我们完成了本书所需要的全部开发和调试环境的安装. 1.3.4 安装扩展管理工具 在VS2010 开发环境下,也可以不用上述介 绍的 安装步骤, 而是只下 载NuGet Package Manager,然后再通过它下载和安装各种插件和 扩展工具. NuGet Package Manager 是一个免费的 辅助工具包,用于在 VS2010 中自动添加第三方 插件许可证. 如果已经按上述的安装步骤安装了各种扩展 工具,可以直接跳过这一节. 1.安装 NuGet Package Manager 下载方法是: 图1-5 HTML5 智能提示下载页面 图1-6 NuGet Package Manager 下载页面 第1章概述 13 运行 VS2010→工具→扩展管理器→联机库→ NuGet Package Manager(一般第 1 个就是它)→下载. 选中将要下载的 NuGet Package Manager 以后,可 以先单击窗口右侧的 "详细信息" , 观察下载页面中将要 下载的详细信息.如图 1-6 所示. 下载完成后, 直接运行安装, 它就会自动在 VS2010 主菜单的【项目】下添加对应的子菜单项,如图 1-7 所示.在实际的项目开发中,利用该工具可以很方便地管 理各种插件,例如在线安装、卸载、在线自动更新、查 看最近安装的插件等. 还可以打开 VS2010,在主菜单的【工具】→Library Package Manager,打开"Manage NuGet Packages for Solution" ,同样可以打开"Manage NuGet Packages" ,如图 1-8 所示. 2.通过 NuGet 更新 jQuery 打开 NuGet Package Manager,单击左侧"Online"选项卡,右侧会列出目前所有能下载使用 的插件工具,单击"jQuery"右侧"Install"按钮,如图 1-9 所示. 图1-8 安装 NuGet Package Manager 后在 VS2010 图1-9 通过 NuGet Package Manager 安装 jQuery 中【工具】下自动添加的子菜单项 3.通过 NuGet 更新 ASP.NET AJAX Control ToolKit 通过NuGet下载并安装最新版的ASP.NET AJAX Control ToolKit 的办法与下载并安装最 新版的 jQuery 的办法相同. 4.通过 NuGet 安装 Web Standards Update for Microsoft Visual Studio 2010 SP1 运行 VS2010→工具→扩展管理器→联机 库→工具→Web Standards Update for Microsoft Visual Studio 2010 SP1→下载,将其保存到某 个位置,再单击"运行" ,即可自动安装.如图 1-10 所示. 图1-7 安装 NuGet Package Manager 后在 VS2010 中"项目"下自动添加的子菜单项 图1-10 安装 Web Standards Update for Microsoft Visual Studio 2010 SP1 HTML5 与ASP.NET 程序设计教程(第2版) 14 1.4 网页分类与基本代码交互技术 这一节我们学习网页设计的基本概念,并学习如何设计最简单的网页. 1.4.1 静态网页与动态网页 许多初学者认为,包含各种动画、滚动字幕等视觉上具有"动态效果"的网页就是动态网 页,否则是静态网页.其实这样理解是错误的,无论是动态网页还是静态网页,实际上都可以 展示基本的文字和图片等信息,但从网站开发、管理和维护的角度来看,静态网页和动态网页却 有着很大的差别. 1.静态网页 静态网页是指客户端从 Web 服务器获取网页后, 该网页与 Web 服务器没有任何交互的 HTML 页.在静态网页上,也可以出现各种动态的效果,如.gif 格式的动画、滚动字幕等. 静态网页的特点是 URL 固定、内容相对稳定、容易被搜索引擎检索.图1-11 所示为静态网 页的工作原理.由于它只用于展现界面,在功能方面有较大的限制. 图1-11 静态网页工作原理 2.动态网页 动态网页是指网页与 Web 服务器协同工作,随不同用户、不同时间的操作,返回不同信息的 网页.图1-12 所示为动态网页的工作原理示意图. 图1-12 动态网页工作原理 采用动态网页技术的网站可以实现比静态网页更多的功能,如用户注册和登录、在线调查、 用户管理、订单管理等. 由于动态网页 URL 的不确定性,对搜索引擎来说,对其检索存在一定的难度,因此采用动态 网页的网站,需要搜索引擎做一定的技术处理才能找到所有的网页. 3.静态网页与动态网页的适用范围 静态网页和动态网页各有特点,网站采用哪一种技术,主要取决于网站的功能需求和网站内 容的多少.如果网站功能比较简单,内容更新量不是很大,采用静态网页的方式会更简单,反之 第1章概述 15 一般采用动态网页技术来实现. 实际上,静态网页和动态网页之间也并不矛盾,为了使网站适应搜索引擎检索的需要,即使 采用动态网站技术,也可以将网页内容转化为静态网页发布. 动态网站也可以采用静动结合的原则,把一些简单而且不经常变化内容的网页用静态网页技 术来实现,其他采用动态网页技术实现. 在同一个网站上,动态网页内容和静态网页内容同时存在是很常见的事情. 1.4.2 HTML 页与 Web 窗体 如果设计的网页不需要服务器端的处理,使用 HTML 页比较方便.如果希望在服务器端处理后 台代码,使用 Web 窗体比较方便.在本书第一部分的所有章节中,主要使用"HTML 页"模板来介 绍HTML、 CSS、 JavaScript 和jQuery 等基本用法, 但是, 在实际的项目开发中, 开发人员一般用 "Web 窗体"模板来开发 Web 应用程序.从本书的第 2 部分开始,我们基本上使用的都是 Web 窗体. 1. "HTML 页"模板 这一节我们先简单了解一下"HTML 页"模板和"Web 窗体"模板的不同之处,然后通过例 子加深对相关概念的理解. "HTML 页"模板的主要用途是设计与服务器交互比较少的网页. 用"HTML 页"模板创建的 HTML 网页扩展名默认为.htm,在Windows 操作系统平台下, 可以直接双击.htm 文件查看网页运行的效果,此时操作系统会自动调用默认的浏览器来显示网页 的内容. 由于.htm 页面只包含 HTML 和JavaScript 代码,所以也可以直接将设计的网页复制到其他开 发工具和语言支持的架构和开发环境中, 例如 JSP 架构和 Eclipse 开发工具等, 复制后不需要修改 任何代码,就可以在新的开发环境中运行. 在"HTML 页" 模板中, 无法使用 ASP.NET 服务器控件, 也无法用 C#语言编写服务器端的代码. 下面通过例子介绍在 VS2010 中如何创建和编辑 HTML5 网页. 【例1-1】 HTML5 的基本用法及项目创建. (1)运行 VS2010,选择【新建项目】 ,在左侧单击"Visual C#"下的"Web"选项,在中间 选择【ASP.NET 空Web 应用程序】 ,输入项目名为"FirstWebApplication" ,注意修改项目保存的 文件夹位置为自己需要的位置,最后单击【确定】按钮.如图 1-13 所示. 图1-13 创建 ASP.NET 空Web 应用程序项目 HTML5 与ASP.NET 程序设计教程(第2版) 16 注意这里我们之所以选择"ASP.NET 空Web 应用程序"模板而不选择"ASP.NET Web 应用 程序" 模板, 是因为 ASP.NET 的其他相关知识还没有介绍. 在学习相关内容之前, 使用 "ASP.NET 空Web 应用程序"模板就已经能满足学习 HTML 网页设计的需要了. (2)在【解决方案资源管理器】中,用鼠标右键单击项目名"FirstWebApplication" ,选择【添加】→【新建文件夹】命令,添加一个名为"S04"的文件夹,意思是在该文件夹下保存本章第 4 节(Section)的例子.然后用鼠标右键单击该文件夹,选择【添加】→【新建项】命令,在弹出 的窗口中选择【HTML 页】模板,如图 1-14 所示.修改文件名为"HtmlExample.htm" ,最后单击 【添加】按钮. 图1-14 添加新项 (3)在HtmlExample.htm 的编辑状态下,确认快捷工具栏中【验证的目标架构】中选择的是 "HTML5" ,如图 1-15 所示. 图1-15 HTML4.01 目标验证架构 由于 VS2010 自动生成的代码默认是针对 XHTML 1.0 目标架构,HTML5 目标架构 是安装 VS2010 SP1 后才有的, 所以它自动生成的代码并不是 HTML5 的架构, 还需要开 发人员对自动生成的代码进行一些修改. VS2010 中提供的页面编辑方式有 3 种,一种为【设计】视图,另一种采用直接编写代码的 第1章概述 17 方式即【源】视图,还有一种是同时显示设计视图和源视图,即【拆分】视图. (4)将自动生成的【源】视图中的代码替换为下面的内容.

游子吟

孟郊

---

慈母手中线,游子身上衣. 临行密密缝,意恐迟迟归. 谁言寸草心,报得三春晖.

下一页