第一章 网站开发基础知识、 网站运行环境配置及代码编辑工具介绍 - 网站开发基础知识

一、网站开发基础知识

（一）、客户端和服务端、前端代码和后端代码、网站前台和网站后台

    客户端（Client）也称为用户端，是指与服务端相对应，为客户提供本地服务的程序。比如您电脑上所安装的QQ软件，手机上所安装的微信APP，在银行里的ATM取款机等等，都是客户端。
    服务端（Server），是指为客户端服务的、运行于服务器中、提供数据存取和业务逻辑的程序。比如您填写QQ号码和密码登录QQ，它实际过程是由客户端将登录信息发送到服务端进行验证，通过后则从服务端传送回相关的数据信息（比如个人资料、好友列表）。一旦服务端停止运行，那么客户端的大多数功能都不能正常使用。这种客户端（Client）+服务端（Server）的软件运行模式，称为C/S模式。C/S模式的软件应用非常广泛，如网络游戏、网络通讯软件、手机银行等等。
    通俗来讲，以C/S模式为架构的应用或软件，安装在用户端的应用或软件，即是客户端；运行于服务器上，接受客户端数据进行处理的程序，即是服务端。
    浏览器（Browser）也属于客户端。浏览器打开一个网站的过程大致是这样：浏览器请求访问网址→该请求经过一系列的解析被送达网址（域名）所指向的服务器，服务器根据请求进行运算处理，返回前端代码→前端代码返回到浏览器，浏览器解析和处理前端代码，最终将前端代码所描述的内容，包括文本、图片、多媒体等等呈现出来。这种浏览器（Browser）客户端（Client）+服务端（Server）的软件运行模式，称为B/S模式。现在越来越多的C/S模式的软件重新开发成B/S模式，比如网页版的OA（在线办公系统）、网页版的CRM（客户关系管理系统）、网页版的网络游戏（页游）等。相比之下，C/S模式需要安装客户端软件（比如60M的QQ客户端，100M的微信APP，1.8G的游戏客户端等），若运营方对客户端进行了升级则用户还需要升级客户端后才能正常使用；而B/S模式的程序不需要用户安装客户端软件，直接用浏览器打开即可运行，并且运营方对程序的升级是对服务端进行升级，用户无需进行升级更新操作。B/S模式的程序应用也越来越广泛，作为网站开发人员，有许多的事情可以做、许多的价值可以实现。
    在B/S模式里，前端也称为前端代码，是指运行于客户端，能被客户端所识别、解析和呈现的代码，通常指HTML+CSS+JavaScript的代码；后端则指后端代码，它运行于服务端，通常指网站所使用的编程语言代码或脚本语言代码，如ASP代码、PHP代码、.Net代码、JSP代码。浏览器只能识别前端代码（HTML、CSS、JavaScript），无法识别后端代码（ASP、PHP、JSP、.NET）；任何后端代码在服务器中经过一系列解析和运算后，都是生成前端代码返回给浏览器。比如一段后端代码实现计算：将从1累加到100的数值显示在浏览器上，实际的交互方式为：浏览器打开网页发起访问请求→访问请求到达服务器→服务器里运行后端代码进行累加计算→最终返回数值“5050”给浏览器→浏览器则负责显示该数值出来。浏览器不负责执行后端代码、也执行不了后端代码。
    网站前台是指供用户浏览的网页页面的集合，比如一个企业站的网站栏目为“首页、关于我们、新闻资讯、公司产品、在线留言、联系我们”，这些所有的页面都是前台页面，统称为网站前台。网站后台是指管理前台页面数据内容的系统、平台，是只提供给网站管理人员使用的操作平台(凭管理员帐号和密码登录后使用)。现在的网站很少使用纯静态（.html或.htm）开发，多会使用程序语言编写，并根据前台的栏目而定制有一个相应的管理后台，网站管理员凭帐号和密码登录后可以增加、修改、删除网站前台里的数据内容。

 

（二）、关于网页文件.html和.htm扩展名

图1-1

    文件扩展名（filename extension）也称为文件的后缀名，是操作系统用来标志文件类型的一种机制。如“我的简历.doc”，其中点号后的“doc”便是文件扩展名，代表这是一个word文件，当我们双击这个文件的时候，操作系统会自行判断后使用word软件来打开这个文件；又如“我的毕业照.jpg”，该文件的扩展名是“jpg”，代表这是一张图片，当我们双击这个文件的时候，操作系统会自行判断后使用照片查看器来打开该文件。即：操作系统是根据文件的扩展名来判断这个文件是什么类型的文件，该用什么软件来打开它。当操作系统里没有安装能正确打开相应文件的软件时，双击打开文件会提示“Windows无法打开此文件”，如（图1-2）：

图1-2

    静态网页文件的扩展名是“html”或“htm”。假如电脑里有一个文件叫“个人主页.html”，当我们双击它的时候，操作系统会自动使用浏览器来打开这个文件，因为它是一个网页文件。其中“htm”这个扩展名是历史的兼容问题造成，早期的操作系统如DOS、Windows 95等，限制扩展名最多为3个字符，即正确的“html”扩展名被缩写为“htm”。现在的操作系统自然不受限制，我们如果制作和保存静态网页文件，则建议保存为“html”扩展名，它能更精确的表述网页文件类型，并且对非Windows系列的操作系统具更好的兼容性（如Unix系统）。

    补充知识点：同样的代码，在不同的操作系统、平台里，产生不完全相同的结果或效果，这种差异称为“兼容问题”。同样的网页前端代码，在不同的浏览器里，产生不完全相同的结果或效果，这种差异称为“网页的兼容问题”。产生网页兼容问题的根源在于：各种浏览器以及同一浏览器的不同版本对前端代码的理解方式不统一，对W3C标准的遵守程度也不相同。

（三）、静态网页与动态网页的区别

    除了静态网页文件，还有动态网页文件。动态网页文件则视网页编程语言或脚本语言而定，扩展名各不相同。比如使用ASP为语言编写的网页，文件扩展名为“asp”；（C#）.NET的文件扩展名为“aspx”；JSP的文件扩展名为“jsp”或“do”；PHP的文件扩展名为“php”。我们在浏览各种网站时，凭网址就能知道该网站使用什么动态语言开发的。比如：http://www.taobao.com/index.php，这是一个使用动态语言PHP开发的网站。
    讲一个网站是“静态的”即是讲这个网站“没有使用服务端网页编程语言或脚本语言”，“动态的”则是指“网站使用了服务端网页编程语言或脚本语言”，而不是说网站的页面里有图片在动就是“动态的”。没有使用服务端网页编程语言或脚本语言的网站，整站所有网页都由.html或.htm的文件构成。
最早的网页都是静态网页，假如制作一个介绍班级40位学生的网站，则至少需要制作41个页面，其中1个页面为首页、其余40个页面每个页面介绍一位学生。这样当网站需要升级修改的时候，工作量非常大，新转学进来一位学生，则需要再制作1个新页面以介绍该学生，并且需要修改原来的41个页面以增加上新学生页面的链接。这也要求了网站的维护人员必须具备网站编辑修改的基本知识，或者网站维护更新内容时，严重依赖于网站的开发人员。
    网页编程语言或脚本语言出现后，解决了静态网页的诸多不足。网页编程语言或脚本语言能够连接数据库，对数据进行归类存取，从而使网站的开发和维护分开：网站的维护者登录网站管理后台进行数据的增、改、删，实现对网站内容的更新维护（网站管理后台，也称网站管理系统，或称网站管理平台，由网站开发人员根据前台页面的维护需要而开发制作）。网页编程语言或脚本语言可以进行复杂的计算，从而能够协助解决现实生活、企业管理及业务开展的诸多问题，实现管理或业务上的自动化或半自动化，如：自动解多元多次方程式，在线购物自动计算商品价格和运费，在线办公、在线打卡，企业库存管理等。由网页编程语言或脚本语言编写的页面则称为动态页面，整站称为动态网站。
    既然动态网站更先进，是不是只要学习动态网站开发技术就可以了？不是的，动态网站开发技术建立在静态网站开发技术的基础上，动态网站开发技术包含了静态网站开发技术。打比方来说，静态网站是1楼，动态网站是2楼，2楼不能跳过1楼而单独存在。浏览器如果访问网站的静态页，服务器会将前端代码返回给浏览器（静态网页里面所有的代码就是前端代码），浏览器识别该前端代码并渲染显示出来；浏览器如果访问网站的动态页，服务器上的代码解释器或代码执行程序会读取动态页里的代码做一系列的运算，最终生成前端代码返回给浏览器，浏览器识别并渲染显示出来。即：无论动态网页做了多么复杂的计算、处理，最终返回给浏览器的永远是前端代码。静态网页与动态网页的包含关系大致如下：

图1-3

    补充知识点：网站程序语言按网站的编译模式分为两种，编程语言和脚本语言。编程语言与脚本语言的最大区别是，编程语言编写的程序应用在执行之前需要一个专门的编译过程。即编程语言编写的程序应用运行模式是：①代码②编译③运行，“②编译”只需要执行一遍，尔后每次运行时都是执行“③运行”。脚本语言编写的程序应用运行模式是：①代码②解释③运行，每次运行时都是执行“②解释③运行”。所以编程语言对任何代码的修改，都必须重新再编译一次才能生效运行，而脚本语言对代码的任何修改都能即时生效。从其运行原理上讲，脚本语言的代码维护修改会更加快捷方便；但脚本语言由于每次运行都必须解释一次，理论上在速度和性能上会比编程语言差。不过实际情况不一定是这样，脚本语言的运算速度很大程度上取决于脚本语言解析器的执行速度。很多脚本语言的解释器使用C或C++编写，在速度和性能上并不会比编程语言的执行差多少，甚至在某些计算机环境条件下比编程语言还快。常见的编程语言有.NET、Java、C、C++，常见的脚本语言有JavaScript、ASP、PHP。