下载掌阅APP，畅读海量书库
立即打开
动态网站的开发需要多种开发技术结合在一起使用，每种技术的功能各自独立而又相互配合才能完成一个动态网站的建立，其中每一种技术称为一个 Web 构件，一个动态网站开发过程中必须用到的Web 构件包括客户端 lE/Firefox/Chrome 等多种浏览器、超文本标记语言（HTML）、层叠样式表（CSS）、客户端脚本编程语言 JavaScript/VBScript/Applet 等其中的一种、Web 服务器Apache/Tomcat/llS/Nginx等其中的一种、服务器端编程语言PHP/JSP/ASP等其中的一种、数据库管理系统MySQL/Oracle/SQL Server/DB2等其中的一种。
客户端浏览器是用户在客户端浏览网页时使用的软件设备。因为浏览器能够解析HTML、CSS和JavaScript等语言来显示网页，所以它是Web开发中不可缺少的构件之一。对B/S架构的软件来说，浏览器就相当于用户端的操作界面，只要在浏览器地址栏输入不同的地址，访问不同的Web服务器，就可以形成不同的用户操作界面。用户计算机都已经默认安装好浏览器，所以这种图形用户界面不但不用安装专用的客户端软件，而且只要在Web服务器上有一些改变，所有访问这个Web服务器的客户端界面通过刷新就会实时更新。Web服务器还可以根据用户不同的请求，为用户返回定制的界面。所以，动态网站都是通过浏览器中的图形用户界面来实现与Web服务器和数据库交互。但是不同的浏览器对网页的解析可能产生不同的界面效果，因此，在开发Web应用时通常都需要用多种浏览器进行测试。常用的客户端浏览器主要有以下种类。
（1）lnternet Explorer浏览器
微软的lnternet Explorer（lE）是Windows操作系统中默认安装的浏览器，是使用最广泛的浏览器。
（2）Safari浏览器
苹果（Apple）公司的Safari浏览器是最快、最便于操作的网页浏览器，也是使用比较广泛的浏览器之一。Safari具有简洁的外观、雅致的用户界面，其速度比lE浏览器的速度高1.9倍，是Apple操作系统中的专属浏览器。现在其他的操作系统也能安装Safari。
（3）Mozilla浏览器
Mozilla浏览器是在Netscape的基础上发展起来的。它是Linux操作系统中的默认浏览器。
（4）Firefox浏览器
Firefox（火狐）浏览器是一个开源的浏览器，是由Mozilla基金会和开源开发者一起开发的。由于是开源的，因此，它集成了很多小插件，开源拓展很多功能，它也是世界上使用率排名前五的浏览器。
（5）Chrome浏览器
Chrome浏览器由谷歌公司开发，测试版本在2008年发布。它虽然是比较“年轻”的浏览器，但是以良好的稳定性、安全性和高效的浏览速度获得使用者的青睐。
（6）Opera浏览器
Opera浏览器是由挪威一家软件公司开发的，它以快速小巧、符合工业标准、适合于多种操作系统等特性而闻名于世。对于一系列小型设备，诸如移动电话和掌上电脑来说，Opera无疑是首选的浏览器。
HTML，即超级文本标记语言或超文本链接标记语言，是构成网页文档的主要语言，也是一种规范，一种标准，是网站软件开发必不可少的Web构件之一。每一个Web开发者都需要熟练掌握它。
HTML文档是一个放置了标记（tags）的ASCll文本文件，通常它的文件扩展名是.html或.htm。生成一个HTML文档主要有以下3种途径：第1种，手工直接编写（例如，文本编辑器记事本或其他HTML的编辑工具Dreamweaver、Editplus等）；第2种，通过某些格式转换工具将现有的其他格式文档（如Word文档）转换为HTML文档；第3种，由Web服务器在用户访问时动态地生成。
HTML通过利用各种“标记”来标识文档的结构和超链接、图片、文字、段落、表单等信息，再通过浏览器读取HTML文档中这些不同的标签来显示页面，形成用户的操作界面。虽然HTML描述了文档的结构格式，但并不能精确地定义文档信息必须如何显示和排列，所以用户端最终的界面效果取决于 Web 浏览器本身的显示风格及其对标记的解释能力。这就是同一文档在不同的浏览器中展示的效果会不一样的原因。
图1-2是一段简单的HTML代码运行在浏览器中所呈现的网页效果。
图1-2 网页效果
代码如下。
＜!DOCTYPE html＞
＜html lang=＂en＂＞
＜head＞
＜meta charset=＂UTF-8＂＞
＜title＞My Document＜/title＞
＜/head＞
＜body＞
＜h1＞Document Heading＜/h1＞
＜p＞This is the first paragraph.
＜a href=＂http://www.w3.org/html/＂＞HTML＜/a＞
不是一种编程语言，
而是一种超文本标记语言。
标记语言使用一套标记标签描述网页。
＜/p＞
＜p＞This is the second paragraph.＜/p＞
＜/body＞
＜/html＞
层叠样式表（CSS,Cascading Style Sheets）也称级联样式表，是一种为网站添加布局效果的工具，可定义HTML元素如何被显示，有效地对页面进行布局和美化，通过设置字体、颜色、背景和其他效果等来实现更加精确的样式控制。CSS不能离开HTML独立工作。
CSS是由W3C的CSS工作组创建和维护的，和HTML一样，也算是一种标记语言，因此也不需要编译，直接由浏览器解释执行。所以在不同的浏览器中展示的效果也会不一样，开发者同样要遵守W3C制定的标准。
CSS 包含了一些 CSS 标记，可以直接在HTML文件中使用，也可以写到扩展名是.css的文本文件中，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者改变网页的整体表现形式，或者改变多个不同页面的外观和布局。
图1-3是给图1-2中的网页增加了CSS样式后的效果。
图1-3 加CSS样式后的网页效果
添加了CSS代码的HTML文档如下。
＜!DOCTYPE html＞
＜html lang=＂en＂＞
＜head＞
＜meta charset=＂UTF-8＂＞
＜title＞My Document＜/title＞
＜style type=＂text/css＂＞
h1 {color: #00ff00; text-decoration: underline;text-align: center;}
body{color: red;}
p{text-indent: 30px;}
p.ex{color: rgb（0,0,255）;font:italic bold 15px/30px Times;}
a{font-family: Times; text-decoration: none;}
＜/style＞
＜/head＞
＜body＞
＜h1＞Document Heading＜/h1＞
＜p＞This is the first paragraph.
＜a href=＂https://www.ptpress.com.cn/＂＞HTML＜/a＞
不是一种编程语言，
而是一种超文本标记语言。
标记语言是使用一套标记标签描述网页。
＜/p＞
＜p class=＂ex＂＞This is the second paragraph.class=＂ex＂ ＜/p＞
＜/body＞
＜/html＞
HTML用来在页面中显示数据，而CSS用来对页面进行布局与美化，客户端脚本语言JavaScript则是一种有关浏览器行为的编程，是用来编写网页功能特效的，能够实现用户和浏览器之间的互动，这样才能传递更多的动态网站内容。客户端脚本编程语言有许多种，如JavaScript、VBScript、Jscript、Applet等，都可以开发同样的交互式Web网页，而Web开发中使用最多、浏览器最支持、案例最丰富的是JavaScript脚本语言，并且Ajax和jQuery框架等技术也都是基于JavaScript开发的产品。
JavaScript是为网页设计者提供的一种编程语言，可以在HTML页面中放入动态的文本，能够对事件进行反应（如鼠标单击、移动等事件操作），可读取并修改HTML元素、元素属性和元素中的内容，并被用来验证数据。
CSS和客户端脚本语言结合使用，能够使HTML文档与用户具有交互性和动态变换性，通常称为动态HTML（DHTML,Dynamic HTML）。层叠样式表和客户端脚本都是直接由浏览器解释执行的，所以同一文档在不同的浏览器中展示的效果也会不一样，编写JavaScript代码时也要遵循W3C标准。JavaScript程序可以直接嵌入HTML页面文档中，也可以写在一个扩展名为.js的文本文件中，然后再链接到HTML页面。
下面的代码使用 JavaScript 脚本代码对某一用户注册页面中的用户名是否为空进行验证。如果用户在提交页面表单内容时未填写用户名，则将出现图1-4所示的提示对话框。
图1-4 用户名输入空值时的验证
＜script＞
function check（）
{
var uname=document.fm.username.value;
if（uname==null || uname==＂＂）
{
alert（＂用户名不能为空！＂）;
return false;
}
return true;
}
＜/script＞
在上述代码中，fm是表单的名字，form中需要添加name属性，取值为fm，同时还要添加onSubmit事件，当单击提交按钮时，将执行函数check（），如果check（）函数返回false，则表单不会被提交到处理页面；如果 check（）函数返回 true，则表单被提交到处理页面。
Web 服务器的主要功能是提供网上信息浏览服务，传送网页给浏览器浏览。确切地说，Web服务器专门处理HTTP请求，解析HTTP报文。当Web服务器接收到一个HTTP请求时，会返回一个HTTP响应，例如，返回一个HTML页面。为了处理一个请求，Web服务器可以响应一个静态页面或图片，进行页面跳转，或者把动态响应的产生委托给其他程序，如PHP脚本、CGl（公共网关接口）、JSP（Java服务器页面）脚本、Servlets（小服务程序）、ASP（动态服务器页面）脚本或者其他服务器端技术。无论它们的目的是什么，这些服务器端的程序通常产生一个HTML的响应来浏览浏览器。
在lnternet中，Web服务器和浏览器通常位于两台不同的机器上，也许它们之间相隔千万里之外。但在开发阶段，一般都会将个人计算机作为Web服务器，即本地服务器。访问远程或本地的Web服务器没有什么差别，工作原理是不变的。目前可用的Web服务器有Apache、NGlNX、llS、Tomcat、Weblogic等。在WAMP（Windows下的Apache+MySQL/MariaDB+Perl/PHP/Python）中使用的Apache服务器，是世界上使用排名第一的Web服务器，它可以运行在几乎所有的计算机平台上。它是开源软件，不断有人来为它开发新的功能、新的特性，修改原来的缺陷。Apache的特点是简单、速度快、性能稳定。
服务器端编程语言是提供访问商业逻辑的途径以供客户端应用的程序，是需要安装应用服务器来解析的，而应用服务器又是Web服务器的一个功能模块，需要和Web服务器安装在同一个系统中。所以服务器端编程语言是用来协助Web服务器工作的编程语言，也可以说是对Web服务器功能的扩展，并外挂在Web服务器上一起工作，用在服务器端执行并完成服务器端的业务处理功能。当Web服务器收到一个HTTP请求时，就会将服务器中这个用户请求的文件原型返回给客户端浏览器，如果是HTML或是图片等浏览器可以解释的文件，浏览器将直接解释，并将结果显示给用户。如果是浏览器不能识别的文件格式，则浏览器将解释成下载的形式，提示用户下载或打开。如果用户想得到动态响应的结果，就要委托服务器端编程语言来完成了。例如，网页中的用户注册、信息查询等功能，都需要对服务器端的数据库中的数据进行操作。而 Web 服务器本身不具有对数据库操作的功能，所以就要委托服务器端程序来完成对数据库的添加和查询的工作，并将处理后的结果生成HTML等浏览器可以解释的内容，再通过Web服务器发送给客户端浏览器。
服务器端脚本编程语言的种类有很多，常用的有JSP、ASP和PHP，本书主要介绍PHP后台脚本编程语言。PHP是一种创建动态交互性站点的强有力的服务器端脚本语言，它是免费的，并且使用非常广泛。PHP极其适合网站开发，其代码可以直接嵌入HTML代码中。PHP的语法类似于Perl语言和C语言，简单、灵活、高效。
如果需要快速、安全地处理大量数据，必须使用数据库管理系统。现在的动态网站都是基于数据库进行编程的，任何程序的业务逻辑实质上都是对数据的处理操作。数据库通过优化的方式，可以很容易地建立、更新和维护数据。数据库管理系统是 Web 开发中比较重要的构件之一，网页上的内容几乎都来自于数据库。数据库管理系统也是一种软件，可以和 Web 服务器安装在同一台机器上，也可以安装在不同机器上，但都需要通过网络相连接。数据库管理系统负责存储和管理网站所需的内容数据，例如，文字、图片及声音等数据。当用户通过浏览器请求数据时，在服务器端程序中接收到用户的请求后，在程序中使用通用标准的结构化查询语言（SQL）对数据库进行添加、删除、修改及查询等操作，并将结果整理成HTML返回到浏览器上显示。
数据库管理系统也有多种，都是使用标准的SQL访问和处理数据库中的数据，如Oracle、DB2、SQL Server、MySQL、Sybase、SQLite、Access等。本书主要介绍MySQL数据库管理系统， MySQL 是一个关系型数据库管理系统，是一个真正多用户、多线程的关系数据库，和 PHP 一样都是开源免费的软件。它的主要特点是执行效率与稳定性高、操作简单、易用，所以有众多用户，同时MySQL 也提供网页形式的 PhpMyAdmin 管理界面和多种图形管理界面，简单易学，管理方便。MySQL和PHP是真正的黄金组合，是网站开发的首选。