第1章 Web开发基础
图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结构的客户端把事务处 理逻辑部分交给了服务器，由服务器进行处理，客户端只需要进行显示，这样，将使应用程序 服务器的运行数据负荷较重，一旦发生服务器“崩溃”等问题，后果不堪设想。因此，许多单 位都备有数据库存储服务器，以防万一。
<meta charset="utf-8">
1.2.3
CSS简介
CSS（级联样式表）主要用来定义网页中元素的样式，比如通常使用CSS来定义网页中控件、超链接 、文本等的样式。通常情况下，在网站中引入CSS样式有以下两种方法，一种是在页面 中直接定义CSS样式，另一种是链接外部CSS样式文件。下面分别介绍。 1．在页面中直接定义CSS样式 在页面中，可以使用<style>...</style>标记对封装CSS样式，例如，在<style>中指定page 页面样式的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
而在HTML 5的文档中，指定文档类型的代码则更加简短和美观，仅仅使用下面的15个字符就可以实 现了。
<script language="javascript">…</script>
2．链接外部JavaScript脚本文件 在中引入JavaScript的另一种方法是采用链接外部JavaScript脚本文件的形式。如果脚本 代码比较复杂或是同一段代码可以被多个页面所使用，则可以将这些脚本代码放置在一个单独的文件中 ，该文件的扩展名为.js，然后在需要使用该代码的页面中链接该JavaScript脚本文件即可。在 页面中链接外部JavaScript脚本文件的语法格式如下：
3．安全性 C/S结构适用于专人使用的系统，可以通过严格的管理派发软件，达到保证系统安全的目的 ，这样的软件相对来说安全性比较高。而对于B/S结构的软件，由于使用的人数较多，且不固定 ，相对来说安全性就会低些。 由此可见，B/S相对于C/S具有更多的优势，现今大量的应用程序开始转移到应用B/S结构， 许多软件公司也争相开发B/S版的软件，也就是Web应用程序。随着Internet的发展，基于HTTP协 议和HTML标准的Web应用呈几何数量级的增长，而这些Web应用又是由各种Web技术所开发。
图1-3所示代码的运行结果如图1-4所示。
文档的标题
文档的主 体内容
图1-4 一个基本的HTML 5文档的运行结果
在对HTML 5文档有了一个基本的了解以后，我们再来看一看，组成HTML 5文档的各元素。 文档类型 一个标准的HTML文档，它的起始元素为指定文档类型的标记。在HTML 5以前的HTML文档中，用于指 定文档类型的标记代码如下：
第1章
本章要求：
Web开发基础
Web的基本概念 B/S结构和C/S结构的概念 B/S结构和C/S结构的区别 Web浏览器和HTTP协议 HTML5、CSS和JavaScript基础 三层架构的概念及使用 MVC架构的使用
第1章
主要内容
Web开发基础
1、Web简介 2. Web程序运行机制
图1-1 B/S体系结构
1.1.3
C/S结构简介
C/S是Client/Server的缩写，即客户端/服务器结构。在这种结构中，服务器通常采用高性能 的PC机或工作站，并采用大型数据库系统（如Oracle或SQL Server），客户端则需要安装专用的客 户端软件，如图1-2所示。这种结构可以充分利用两端硬件环境的优势，将任务合理分配到客户端 和服务器，从而降低了系统的通讯开销。在2000年以前，C/S结构占据网络程序开发领域的主流。
<!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。
<style> .page { width: 960px; background-color: #fff; margin: 20px auto 0px auto; border: 1px solid #496077; } </style>
2．链接外部CSS样式文件 在中引入CSS样式的另一种方法是采用链接外部CSS样式文件的形式。如果样式比较复杂 或者可以被多个页面所使用，则可以将这些样式代码放置在一个单独的文件中，该文件的扩展名为.css ，然后在需要使用该样式的页面中链接该CSS样式文件即可。在页面中链接外部CSS样式 文件的语法格式如下：
1.1.2
B/S结构简介
B/S是Browser/Server的缩写，即浏览器/服务器结构。在这种结构中，客户端不需要开发任何 用户界面，而统一采用如IE和火狐等浏览器，通过Web浏览器向Web服务器发送请求，由Web服务器进 行处理，并将处理结果逐级传回客户端，如图1-1所示。这种结构利用不断成熟和普及的浏览器技术 实现原来需要复杂专用软件才能实现的强大功能，从而节约了开发成本，是一种全新的软件体系结 构。这种体系结构已经成为当今应用软件的首选体系结构。
文档类型 根元素
头元素 主体元素
图1-3 一个基本的HTML 5文档 在图1-3所示的代码中，第一行代码用于指定的是文档的类型；第二行和第11行，为HTML 5文档 的根元素，也就是<html>标记；第3行和第6行为头元素，也就是<head>标记；第8行和第10行为主体 元素，也就是<body>标记。
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
1.2.4
JavaScript简介
JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本语言，在Web应用中得到了非 常广泛的应用。它不但可以用于编写客户端的脚本程序，由Web浏览器解释执行，而且还可以编写在服 务器端执行的脚本程序，在服务器端处理用户提交的信息并动态地向浏览器返回处理结果，通常在 网站中应用JavaScript编写客户端脚本程序。 通常情况下，在网站中引入JavaScript有以下两种方法，一种是在页面中直接嵌入 JavaScript脚本，另一种是链接外部JavaScript脚本文件。下面分别介绍。 1．在页面中直接嵌入JavaScript 在页面中，可以使用<script>...</script>标记对封装脚本代码，当浏览器读取到<script> 标记时，将解释执行其中的脚本。 在使用<script>标记时，还需要通过其language属性指定使用的脚本语言。例如，在<script>中指 定使用JavaScript脚本语言的代码如下：
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.2
Web程序运行机制
