一、网络程序开发体系结构
C/S（Client/Server）即客户端/服务器结构。在这种结构中，服务器通常采用高性能的PC或工作站，并采用大型数据库系统，客户端则需要安装专用的客户端软件。这种结构可以充分利用两端硬件环境的优势，将任务合理分配到客户端和服务器，从而降低了系统的通信开销。在2000年以前，C/S结构占据网络程序开发领域的主流。
B/S（Brower/Server）即浏览器/服务器结构。在这种结构中，客户端不需要开发任何用户界面，而统一采用如IE和火狐等浏览器，通过Web浏览器向Web服务器发送要求，由Web服务器进行处理，并将处理结果逐级传回客户端。这种结构利用不断成熟和普及的浏览器技术实现原来需要复杂专用软件才能实现的强大功能，从而节约了开发成本，是一种全新的软件体系结构。这种体系结构已经成为当今应用软件的首选体系结构。
C/S结构和B/S结构是当今世界网络程序开发体系结构的两大主流。目前，这两种结构都有自己的市场份额和客户群。但是，这两种体系结构又各有各的优点和缺点，下面将从以下3个方面进行比较说明。
1.开发和维护成本方面
C/S结构的开发和维护成本都比B/S高。采用C/S结构时，对于不同客户端要开发不同的程序 ，而且软件的安装、调试和升级均需要在所有的客户机上进行。而B/S结构的软件则不必在客户端进行安装及维护，软件升级后只需要将服务器的软件升级到最新版本，对于其他客户端，只要重新登录系统就可以使用最新版本的软件了。
2.客户端负载
C/S的客户端不仅负责与用户的交互，收集用户信息，而且还需要完成通过网络向服务器请求对数据库、电子表格或文档等信息的处理工作。由此可见，应用程序的功能越复杂，客户端程序也就越庞大，这也给软件的维护工作带来了很大的困难。而B/S结构的客户端把事务处理逻辑部分交给了服务器，由服务器进行处理，客户端只需要进行显示，这样，将使应用程序服务器的运行数据负荷较重，一旦发生服务器“崩溃”等问题，后果不堪设想。因此，许多单位都备有数据库存储服务器，以防万一。
3.安全性
C/S结构适用于专人使用的系统，可以通过严格的管理派发软件，达到保证系统安全的目的，这样的软件相对来说安全性比较高。而对于B/S结构的软件，由于使用的人数较多，且不固定，相对来说安全性就会低些。
由此可见，B/S相对于C/S具有更多的优势，现今大量的应用程序开始转移到应用B/S结构，许多软件公司也争相开发B/S版的软件，也就是Web应用程序。随着Internet的发展，基于HTTP协议和HTML标准的Web应用呈几何数量级增长，而这些Web应用又是由各种Web技术所开发。
二、Web应用程序的工作原理
Web应用程序大体上可以分为静态网站和动态网站两种。早期的Web应用主要是静态页面的浏览，即静态网站。这些网站使用HTML编写，放在Web服务器上，用户使用浏览器通过HTTP协议请求服务器上的Web页面，服务器上的Web服务器将接收到的用户请求处理后，再发送客户端浏览器，显示给用户。
随着网络的发展，很多线下业务开始向网上发展，基于Internet的Web应用也变得越来越复杂，用户所访问的资源已不能只是局限于服务器上保存的静态网页，更多的内容需要根据用户的请求动态生成页面信息，即动态网站。这些网站通常使用HTML和动态脚本语言编写，并将编写后的程序部署到Web服务器上，由Web服务器对动态脚本代码进行处理，并转化为浏览器可以解析的HTML代码，返回给客户端浏览器，显示给用户。
三、认识HBuilder前端开发工具
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。
四、使用HBuilder新建项目
依次点击文件→新建→选择Web项目
五、创建第一个网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
Hello world!
</body>
</html>
六、网页文件格式详解
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<html>此元素可告知浏览器其自身是一个 HTML 文档。<html> 与 </html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
<head>标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在 head 部分：<base>,
<link>, <meta>, <script>, <style>, 以及 <title>。<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
<title>元素可定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
<body>所有主流浏览器都支持<body> 标签。body元素定义文档的主体。body元素包含文档的所有内容，比如文本、超链接、图像、表格和列表等等。
七、Google Chrome浏览器
Google Chrome是由Google开发的一款设计简单、高效的Web浏览工具。
Google Chrome的特点是简洁、快速。GoogleChrome支持多标签浏览，每个标签页面都在独立的“沙箱”内运行，在提高安全性的同时，一个标签页面的崩溃也不会导致其他标签页面被关闭。此外，Google Chrome基于更强大的JavaScript V8引擎，这是当前Web浏览器所无法实现的。
一般预估，Google Chrome是Google公司扩张互联网控制力的重要战略举措。Google公司一面扶持Mozilla Firefox，一面开发自有的Google
Chrome浏览器，将对微软公司仍然占据统治地位的Internet Explorer产生深远且致命的打击。而且，随着软件web化，新的浏览器很有可能实现很多人期望的Google操作系统的类似功能，从而取代微软公司在个人电脑方面的霸主地位。
网友评论