第1章 Web开发基础
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<meta charset="utf-8">
1.2.3
CSS简介
CSS（级联样式表）主要用来定义网页中元素的样式，比如通常使用CSS来定义网页中控件、超链接 、文本等的样式。通常情况下，在ASP.NET网站中引入CSS样式有以下两种方法，一种是在ASP.NET页面 中直接定义CSS样式，另一种是链接外部CSS样式文件。下面分别介绍。 1．在页面中直接定义CSS样式 在ASP.NET页面中，可以使用<style>...</style>标记对封装CSS样式，例如，在<style>中指定page 页面样式的代码如下：
1.2.2
HTML 5标记语言
HTML 5是下一代的HTML，它将会取代HTML 4.0和XHTML 1.1，成为新一代的Web语言。HTML5自从 2010年正式推出以来，就以一种惊人的速度被迅速的推广，世界各知名浏览器厂商也对HTML 5有很 好的支持。例如，微软就对下一代IE 9做了标准上的改进，使其能够支持HTML5。而且HTML5还有一 个特点是在老版本的浏览器上也可以正常运行。 1．HTML 5文档结构 在介绍HTML 5文档结构以前，我们先来看一个基本的HTML 5文档，具体代码如图1-3所示。
1.1.2
B/S结构简介
B/S是Browser/Server的缩写，即浏览器/服务器结构。在这种结构中，客户端不需要开发任何 用户界面，而统一采用如IE和火狐等浏览器，通过Web浏览器向Web服务器发送请求，由Web服务器进 行处理，并将处理结果逐级传回客户端，如图1-1所示。这种结构利用不断成熟和普及的浏览器技术 实现原来需要复杂专用软件才能实现的强大功能，从而节约了开发成本，是一种全新的软件体系结 构。这种体系结构已经成为当今应用软件的首选体系结构。
第1章
本章要求：
Web开发基础
Web的基本概念 B/S结构和C/S结构的概念 B/S结构和C/S结构的区别 Web浏览器和HTTP协议 HTML5、CSS和JavaScript基础 三层架构的概念及使用 MVC架构的使用
第1章
主要内容
Web开发基础
1、Web简介 2. Web程序运行机制
3．安全性 C/S结构适用于专人使用的系统，可以通过严格的管理派发软件，达到保证系统安全的目的 ，这样的软件相对来说安全性比较高。而对于B/S结构的软件，由于使用的人数较多，且不固定 ，相对来说安全性就会低些。 由此可见，B/S相对于C/S具有更多的优势，现今大量的应用程序开始转移到应用B/S结构， 许多软件公司也争相开发B/S版的软件，也就是Web应用程序。随着Internet的发展，基于HTTP协 议和HTML标准的Web应用呈几何数量级的增长，而这些Web应用又是由各种Web技术所开发。
<!DOCTYPE HTML>
说明：在HTML 5文档中，如果您喜欢使用以前版本中提供的指定文档类型的代码，也是可以的。 根元素 HTML文档的根元素是<html>标记。所有HTML文件都是以<html>标记开头，以</html>标记结束 。HTML页面的所有标记都要放置在<html>与</html>标记中，虽然<html>标记并没有实质性的功能。但 却是HTML文件不可缺少的内容。 说明：HTML标记是不区分大小写的。 头元素 HTML文件的头元素是<head>标记，作用是放置HTML文档的信息。在<head>标记中，可以使用 <title>标记来指定文档的标题，也可以使用<meta>标记来指定字符编码。例如，在HTML 5的文档中， 我们可以在<head>标记中使用下面的代码的指定字符编码为UTF-8。
文档类型 根元素
头元素 主体元素
图1-3 一个基本的HTML 5文档 在图1-3所示的代码中，第一行代码用于指定的是文档的类型；第二行和第11行，为HTML 5文档 的根元素，也就是<html>标记；第3行和第6行为头元素，也就是<head>标记；第8行和第10行为主体 元素，也就是<body>标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
而在HTML 5的文档中，指定文档类型的代码则更加简短和美观，仅仅使用下面的15个字符就可以实 现了。
图1-1 B/S体系结构
1.1.3
C/S结构简介
C/S是Client/Server的缩写，即客户端/服务器结构。在这种结构中，服务器通常采用高性能 的PC机或工作站，并采用大型数据库系统（如Oracle或SQL Server），客户端则需要安装专用的客 户端软件，如图1-2所示。这种结构可以充分利用两端硬件环境的优势，将任务合理分配到客户端 和服务器，从而降低了系统的通讯开销。在2000年以前，C/S结构占据网络程序开发领域的主流。
1.2
Web程序运行机制
1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7
Web浏览器 HTML 5标记语言 CSS简介 JavaScript简介 HTTP协议 Web系统的三层架构 MVC架构
1.2.1
Web浏览器
浏览器主要是用于客户端用户访问Web应用的工具，与开发ASP.NET网站不存在很大的关系 ，所以开发ASP.NET网站对浏览器的要求并不是很高，任何支持HTML的浏览器都可以。现在比较 流行的Web浏览器主要有微软的IE浏览器、Firefox火狐浏览器、谷歌的Chrome浏览器、360安全 浏览器等。
<style> .page { width: 960px; background-color: #fff; margin: 20px auto 0px auto; border: 1px solid #496077; } </style>
2．链接外部CSS样式文件 在ASP.NET中引入CSS样式的另一种方法是采用链接外部CSS样式文件的形式。如果样式比较复杂 或者可以被多个页面所使用，则可以将这些样式代码放置在一个单独的文件中，该文件的扩展名为.css ，然后在需要使用该样式的ASP.NET页面中链接该CSS样式文件即可。在ASP.NET页面中链接外部CSS样式 文件的语法格式如下：
<script language="javascript">…</script>
2．链接外部JavaScript脚本文件 在ASP.NET中引入JavaScript的另一种方法是采用链接外部JavaScript脚本文件的形式。如果脚本 代码比较复杂或是同一段代码可以被多个页面所使用，则可以将这些脚本代码放置在一个单独的文件中 ，该文件的扩展名为.js，然后在需要使用该代码的ASP.NET页面中链接该JavaScript脚本文件即可。在 ASP.NET页面中链接外部JavaScript脚本文件的语法格式如下：
1.1
Web简介
1.1.1 1.1.2 1.1.3 1.1.4
什么是Web B/S结构简介 C/S结构简介 B/S结构与C/S结构比较
1.1.1
什么是Web
Web的本意是网和网状物，现在被广泛译作网络、万维网或互联网等技术领域。它是一种基于 超文本方式工作的信息系统。作为一个能够处理文字，图像，声音和视频等多媒体信息的综合系统 ，它提供了丰富的信息资源，这些信息资源通常表现为以下三种形式。 超文本（hypertext） 超文本一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方 式搜索。 超媒体（hypermedia） 超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合，有了超媒体用户不仅能从一个文 本跳到另一个文本，而且可以显示图像、播放动画、音频和视频等。 超文本传输协议（HTTP） 超文本传输协议是超文本在互联网上的传输协议。
图1ห้องสมุดไป่ตู้3所示代码的运行结果如图1-4所示。
文档的标题
文档的主 体内容
图1-4 一个基本的HTML 5文档的运行结果
在对HTML 5文档有了一个基本的了解以后，我们再来看一看，组成HTML 5文档的各元素。 文档类型 一个标准的HTML文档，它的起始元素为指定文档类型的标记。在HTML 5以前的HTML文档中，用于指 定文档类型的标记代码如下：
图1-2 C/S体系结构
1.1.4
B/S结构与C/S结构比较
C/S结构和B/S结构是当今世界网络程序开发体系结构的两大主流。目前，这两种结构都有 自己的市场份额和客户群。但是，这两种体系结构又各有各的优点和缺点，下面将从以下3个 方面进行比较说明。 1．开发和维护成本方面 C/S结构的开发和维护成本都比B/S高。采用C/S结构时，对于不同客户端要开发不同的程 序，而且软件的安装、调试和升级均需要在所有的客户机上进行。例如，如果一个企业共有10 个客户站点使用一套C/S结构的软件，则这10个客户站点都需要安装客户端程序。当这套软件 进行了哪怕很微小的改动后，系统维护员都必须将客户端原有的软件卸载，再安装新的版本并 进行配置，最可怕的是客户端的维护工作必须不折不扣的进行10次。若某个客户端忘记进行这 样的更新，则该客户端将会因软件版本不一致而无法工作。而B/S结构的软件，则不必在客户 端进行安装及维护。如果我们将前面企业的C/S结构的软件换成B/S结构的，这样在软件升级后 ，系统维护员只需要将服务器的软件升级到最新版本，对于其他客户端，只要重新登录系统就 可以使用最新版本的软件了。 2．客户端负载 C/S的客户端不仅负责与用户的交互，收集用户信息，而且还需要完成通过网络向服务器 请求对数据库、电子表格或文档等信息的处理工作。由此可见，应用程序的功能越复杂，客户 端程序也就越庞大，这也给软件的维护工作带来了很大的困难。而B/S结构的客户端把事务处 理逻辑部分交给了服务器，由服务器进行处理，客户端只需要进行显示，这样，将使应用程序 服务器的运行数据负荷较重，一旦发生服务器“崩溃”等问题，后果不堪设想。因此，许多单 位都备有数据库存储服务器，以防万一。
<script language="javascript" src="javascript.js"></script>
1.2.5
HTTP协议
超文本传输协议（Hyper Text Transfer Proctocal,HTTP），是www浏览器（客户机）和服务器 之间的应用层通信协议。HTTP是用于分布式协作超媒体信息系统的快速实用协议，是通用的、无状 态的、面向对象的协议。只要在网站中单击了某一个超级链接，HTTP的工作就开始了。www客户机通 过HTTP与www的服务器建立连接。 连接建立后，客户机发出需要服务或需要信息的请求，还包括一些地址信息和补充信息，传递给 服务器。 服务处理请求，返回所请求的信息或返回一个响应指出不能答复该请求，其中包括影响客 户的要求、提供信息和服务，以及一些记录状态的信息。 www上的客户端接收服务器所返回的应答信息并通过浏览器显示在显示屏上，然后客户端和服务器 自动关闭连接。如果在上述过程中某一步发生错误，则产生错误信息返回到客户端由显示屏输出。 但对于用户来说，这些过程是由HTTP自己完成的，用户要做的只是用鼠标单击，然后等待信息输出 到用户的显示屏上。 HTTP协议是基于TCP/IP的协议，它不仅需要保证正确传送超文本文档，还必须能够确定传送文档 中的哪一部分、以及哪部分内容首先显示等。
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
1.2.4
JavaScript简介
JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本语言，在Web应用中得到了非 常广泛的应用。它不但可以用于编写客户端的脚本程序，由Web浏览器解释执行，而且还可以编写在服 务器端执行的脚本程序，在服务器端处理用户提交的信息并动态地向浏览器返回处理结果，通常在 ASP.NET网站中应用JavaScript编写客户端脚本程序。 通常情况下，在ASP.NET网站中引入JavaScript有以下两种方法，一种是在ASP.NET页面中直接嵌入 JavaScript脚本，另一种是链接外部JavaScript脚本文件。下面分别介绍。 1．在页面中直接嵌入JavaScript 在ASP.NET页面中，可以使用<script>...</script>标记对封装脚本代码，当浏览器读取到<script> 标记时，将解释执行其中的脚本。 在使用<script>标记时，还需要通过其language属性指定使用的脚本语言。例如，在<script>中指 定使用JavaScript脚本语言的代码如下：
1.2.3
CSS简介
CSS（级联样式表）主要用来定义网页中元素的样式，比如通常使用CSS来定义网页中控件、超链接 、文本等的样式。通常情况下，在ASP.NET网站中引入CSS样式有以下两种方法，一种是在ASP.NET页面 中直接定义CSS样式，另一种是链接外部CSS样式文件。下面分别介绍。 1．在页面中直接定义CSS样式 在ASP.NET页面中，可以使用<style>...</style>标记对封装CSS样式，例如，在<style>中指定page 页面样式的代码如下：
1.2.2
HTML 5标记语言
HTML 5是下一代的HTML，它将会取代HTML 4.0和XHTML 1.1，成为新一代的Web语言。HTML5自从 2010年正式推出以来，就以一种惊人的速度被迅速的推广，世界各知名浏览器厂商也对HTML 5有很 好的支持。例如，微软就对下一代IE 9做了标准上的改进，使其能够支持HTML5。而且HTML5还有一 个特点是在老版本的浏览器上也可以正常运行。 1．HTML 5文档结构 在介绍HTML 5文档结构以前，我们先来看一个基本的HTML 5文档，具体代码如图1-3所示。
1.1.2
B/S结构简介
B/S是Browser/Server的缩写，即浏览器/服务器结构。在这种结构中，客户端不需要开发任何 用户界面，而统一采用如IE和火狐等浏览器，通过Web浏览器向Web服务器发送请求，由Web服务器进 行处理，并将处理结果逐级传回客户端，如图1-1所示。这种结构利用不断成熟和普及的浏览器技术 实现原来需要复杂专用软件才能实现的强大功能，从而节约了开发成本，是一种全新的软件体系结 构。这种体系结构已经成为当今应用软件的首选体系结构。
第1章
本章要求：
Web开发基础
Web的基本概念 B/S结构和C/S结构的概念 B/S结构和C/S结构的区别 Web浏览器和HTTP协议 HTML5、CSS和JavaScript基础 三层架构的概念及使用 MVC架构的使用
第1章
主要内容
Web开发基础
1、Web简介 2. Web程序运行机制
3．安全性 C/S结构适用于专人使用的系统，可以通过严格的管理派发软件，达到保证系统安全的目的 ，这样的软件相对来说安全性比较高。而对于B/S结构的软件，由于使用的人数较多，且不固定 ，相对来说安全性就会低些。 由此可见，B/S相对于C/S具有更多的优势，现今大量的应用程序开始转移到应用B/S结构， 许多软件公司也争相开发B/S版的软件，也就是Web应用程序。随着Internet的发展，基于HTTP协 议和HTML标准的Web应用呈几何数量级的增长，而这些Web应用又是由各种Web技术所开发。
<!DOCTYPE HTML>
说明：在HTML 5文档中，如果您喜欢使用以前版本中提供的指定文档类型的代码，也是可以的。 根元素 HTML文档的根元素是<html>标记。所有HTML文件都是以<html>标记开头，以</html>标记结束 。HTML页面的所有标记都要放置在<html>与</html>标记中，虽然<html>标记并没有实质性的功能。但 却是HTML文件不可缺少的内容。 说明：HTML标记是不区分大小写的。 头元素 HTML文件的头元素是<head>标记，作用是放置HTML文档的信息。在<head>标记中，可以使用 <title>标记来指定文档的标题，也可以使用<meta>标记来指定字符编码。例如，在HTML 5的文档中， 我们可以在<head>标记中使用下面的代码的指定字符编码为UTF-8。
文档类型 根元素
头元素 主体元素
图1-3 一个基本的HTML 5文档 在图1-3所示的代码中，第一行代码用于指定的是文档的类型；第二行和第11行，为HTML 5文档 的根元素，也就是<html>标记；第3行和第6行为头元素，也就是<head>标记；第8行和第10行为主体 元素，也就是<body>标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
而在HTML 5的文档中，指定文档类型的代码则更加简短和美观，仅仅使用下面的15个字符就可以实 现了。
图1-1 B/S体系结构
1.1.3
C/S结构简介
C/S是Client/Server的缩写，即客户端/服务器结构。在这种结构中，服务器通常采用高性能 的PC机或工作站，并采用大型数据库系统（如Oracle或SQL Server），客户端则需要安装专用的客 户端软件，如图1-2所示。这种结构可以充分利用两端硬件环境的优势，将任务合理分配到客户端 和服务器，从而降低了系统的通讯开销。在2000年以前，C/S结构占据网络程序开发领域的主流。
1.2
Web程序运行机制
1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7
Web浏览器 HTML 5标记语言 CSS简介 JavaScript简介 HTTP协议 Web系统的三层架构 MVC架构
1.2.1
Web浏览器
浏览器主要是用于客户端用户访问Web应用的工具，与开发ASP.NET网站不存在很大的关系 ，所以开发ASP.NET网站对浏览器的要求并不是很高，任何支持HTML的浏览器都可以。现在比较 流行的Web浏览器主要有微软的IE浏览器、Firefox火狐浏览器、谷歌的Chrome浏览器、360安全 浏览器等。
<style> .page { width: 960px; background-color: #fff; margin: 20px auto 0px auto; border: 1px solid #496077; } </style>
2．链接外部CSS样式文件 在ASP.NET中引入CSS样式的另一种方法是采用链接外部CSS样式文件的形式。如果样式比较复杂 或者可以被多个页面所使用，则可以将这些样式代码放置在一个单独的文件中，该文件的扩展名为.css ，然后在需要使用该样式的ASP.NET页面中链接该CSS样式文件即可。在ASP.NET页面中链接外部CSS样式 文件的语法格式如下：
<script language="javascript">…</script>
2．链接外部JavaScript脚本文件 在ASP.NET中引入JavaScript的另一种方法是采用链接外部JavaScript脚本文件的形式。如果脚本 代码比较复杂或是同一段代码可以被多个页面所使用，则可以将这些脚本代码放置在一个单独的文件中 ，该文件的扩展名为.js，然后在需要使用该代码的ASP.NET页面中链接该JavaScript脚本文件即可。在 ASP.NET页面中链接外部JavaScript脚本文件的语法格式如下：
1.1
Web简介
1.1.1 1.1.2 1.1.3 1.1.4
什么是Web B/S结构简介 C/S结构简介 B/S结构与C/S结构比较
1.1.1
什么是Web
Web的本意是网和网状物，现在被广泛译作网络、万维网或互联网等技术领域。它是一种基于 超文本方式工作的信息系统。作为一个能够处理文字，图像，声音和视频等多媒体信息的综合系统 ，它提供了丰富的信息资源，这些信息资源通常表现为以下三种形式。 超文本（hypertext） 超文本一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方 式搜索。 超媒体（hypermedia） 超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合，有了超媒体用户不仅能从一个文 本跳到另一个文本，而且可以显示图像、播放动画、音频和视频等。 超文本传输协议（HTTP） 超文本传输协议是超文本在互联网上的传输协议。
图1ห้องสมุดไป่ตู้3所示代码的运行结果如图1-4所示。
文档的标题
文档的主 体内容
图1-4 一个基本的HTML 5文档的运行结果
在对HTML 5文档有了一个基本的了解以后，我们再来看一看，组成HTML 5文档的各元素。 文档类型 一个标准的HTML文档，它的起始元素为指定文档类型的标记。在HTML 5以前的HTML文档中，用于指 定文档类型的标记代码如下：
图1-2 C/S体系结构
1.1.4
B/S结构与C/S结构比较
C/S结构和B/S结构是当今世界网络程序开发体系结构的两大主流。目前，这两种结构都有 自己的市场份额和客户群。但是，这两种体系结构又各有各的优点和缺点，下面将从以下3个 方面进行比较说明。 1．开发和维护成本方面 C/S结构的开发和维护成本都比B/S高。采用C/S结构时，对于不同客户端要开发不同的程 序，而且软件的安装、调试和升级均需要在所有的客户机上进行。例如，如果一个企业共有10 个客户站点使用一套C/S结构的软件，则这10个客户站点都需要安装客户端程序。当这套软件 进行了哪怕很微小的改动后，系统维护员都必须将客户端原有的软件卸载，再安装新的版本并 进行配置，最可怕的是客户端的维护工作必须不折不扣的进行10次。若某个客户端忘记进行这 样的更新，则该客户端将会因软件版本不一致而无法工作。而B/S结构的软件，则不必在客户 端进行安装及维护。如果我们将前面企业的C/S结构的软件换成B/S结构的，这样在软件升级后 ，系统维护员只需要将服务器的软件升级到最新版本，对于其他客户端，只要重新登录系统就 可以使用最新版本的软件了。 2．客户端负载 C/S的客户端不仅负责与用户的交互，收集用户信息，而且还需要完成通过网络向服务器 请求对数据库、电子表格或文档等信息的处理工作。由此可见，应用程序的功能越复杂，客户 端程序也就越庞大，这也给软件的维护工作带来了很大的困难。而B/S结构的客户端把事务处 理逻辑部分交给了服务器，由服务器进行处理，客户端只需要进行显示，这样，将使应用程序 服务器的运行数据负荷较重，一旦发生服务器“崩溃”等问题，后果不堪设想。因此，许多单 位都备有数据库存储服务器，以防万一。
<script language="javascript" src="javascript.js"></script>
1.2.5
HTTP协议
超文本传输协议（Hyper Text Transfer Proctocal,HTTP），是www浏览器（客户机）和服务器 之间的应用层通信协议。HTTP是用于分布式协作超媒体信息系统的快速实用协议，是通用的、无状 态的、面向对象的协议。只要在网站中单击了某一个超级链接，HTTP的工作就开始了。www客户机通 过HTTP与www的服务器建立连接。 连接建立后，客户机发出需要服务或需要信息的请求，还包括一些地址信息和补充信息，传递给 服务器。 服务处理请求，返回所请求的信息或返回一个响应指出不能答复该请求，其中包括影响客 户的要求、提供信息和服务，以及一些记录状态的信息。 www上的客户端接收服务器所返回的应答信息并通过浏览器显示在显示屏上，然后客户端和服务器 自动关闭连接。如果在上述过程中某一步发生错误，则产生错误信息返回到客户端由显示屏输出。 但对于用户来说，这些过程是由HTTP自己完成的，用户要做的只是用鼠标单击，然后等待信息输出 到用户的显示屏上。 HTTP协议是基于TCP/IP的协议，它不仅需要保证正确传送超文本文档，还必须能够确定传送文档 中的哪一部分、以及哪部分内容首先显示等。
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
1.2.4
JavaScript简介
JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本语言，在Web应用中得到了非 常广泛的应用。它不但可以用于编写客户端的脚本程序，由Web浏览器解释执行，而且还可以编写在服 务器端执行的脚本程序，在服务器端处理用户提交的信息并动态地向浏览器返回处理结果，通常在 ASP.NET网站中应用JavaScript编写客户端脚本程序。 通常情况下，在ASP.NET网站中引入JavaScript有以下两种方法，一种是在ASP.NET页面中直接嵌入 JavaScript脚本，另一种是链接外部JavaScript脚本文件。下面分别介绍。 1．在页面中直接嵌入JavaScript 在ASP.NET页面中，可以使用<script>...</script>标记对封装脚本代码，当浏览器读取到<script> 标记时，将解释执行其中的脚本。 在使用<script>标记时，还需要通过其language属性指定使用的脚本语言。例如，在<script>中指 定使用JavaScript脚本语言的代码如下：