HTML5简介，C/S与B/S架构

HTML5简介：

成都创新互联，专注为中小企业提供官网建设、营销型网站制作、成都响应式网站建设公司、展示型做网站、成都网站建设等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五个版本，所以才称为HTML5。在HTML4之前都不会带上版本的都统一称为HTML，但是因为在HTML的第五个版本改动比较大，与HTML4和之前的版有较大的区别，在这一版本中新功能不断推出并且进行了近百项的修改，所以这一版本的HTML才统一被称为HTML5。

HTML5的第一份正式草案是在2008年1月22日公布的，到2014年10月29日万维网联盟才宣布改标准规范制定完成。HTML5最大的一个优势在于手机、平板这种移动终端上的应用开发，可以在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括：

· 新的解析规则增强了灵活性

· 新属性

· 淘汰过时的或冗余的属性

· 一个HTML5文档到另一个文档间的拖放功能

· 离线编辑

· 信息传递的增强

· 详细的解析规则

· 多用途互联网邮件扩展（MIME）和协议处理程序注册

· 在SQL数据库中存储数据的通用标准（Web SQL）

HTML5特性

语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

本地存储特性（Class: OFFLINE & STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。

设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。

三维、图形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

性能与集成特性（Class: Performance & Integration）

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

程序架构问题：

现在最常见的两种程序架构方式就是C/S和B/S架构，C/S也就是Client/Server架构，即客户端/服务器架构。是大家熟知的软件系统体系结构，通过将任务合理分配到Client端和Server端，降低了系统的通讯开销，需要安装客户端才可进行管理操作。客户端和服务器端的程序不同，用户的操作主要在客户端，服务器端主要是提供数据管理、数据共享、数据及系统维护和并发控制等，客户端程序主要完成用户的具体的业务。

所以C/S架构的程序对能够减轻服务器压力，而且客户端是安装在用户本地的电脑上，调用本地的一些硬件设备就比较方便，适合用于大型游戏、音频软件、各种工具类软件的程序架构方式。

但是C/S架构也有缺点，升级更新还有维护比较麻烦，系统升级的话，全部的客户端都需要升级，而且没有客户端的话就无法使用任何的功能，设备需要提前安装、更新客户端。

因为这些特性，数据管理软件、网上购物、信息交互部分都不适合使用C/S架构。

C/S程序架构示意图：

另外一种B/S架构，即Browser/Server (浏览器/服务器) 结构，是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户界面完全通过浏览器实现。在这种结构下，用户工作界面是通过浏览器来实现，极少部分事务逻辑在前端(Browser)实现，但是主要事务逻辑在服务器端(Server)实现，形成所谓三层3-tier结构。B/S结构是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。

客户机上只要安装一个浏览器（Browser），如Chrome，Firefox或Internet Explorer，服务器安装Oracle、Sybase、Informix或 SQL Server等数据库。浏览器通过Web Server同数据库进行数据交互。 以为页面上的内容全部都是从服务器上下载下来的，以后客户端没有什么更新这一说，这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本，在浏览器上只需要刷新一下就能看到最新的内容，不用更新客户端。

但是B/S架构也有相应的缺点，游戏方面只能做网页小游戏，如果是大型游戏的话浏览器受不了，而且网络和服务器也支撑不了，因为全部的特效渲染、数据计算都得在服务器上完成后通过网络发送到浏览器上，这是不可能完成的，所以B/S架构不适合做大型游戏。B/S架构不能像C/S架构那样方便的访问、调用用户本地的硬件设备，访问起来很麻烦。B/S架构把系统功能实现的核心部分集中到服务器上，所以服务器的压力也比较大。

B/S程序架构示意图：

两种程序架构的思维导图：

网页技术：

在网页开发上，最基本的三大技术就是：HTML5、CSS3和JavaScript。HTML5上面已经介绍过了，是一种超文本标记语言，它负责构建一个网页的页面结构，也就是相当于一个骨架、框架。

CSS3简介：

CSS3是层叠样式表（CascadingStyleSheet），在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

所以CSS3是负责网页的画面以及色彩和画面渲染效果，用于给每个标记增加各种外观上的效果，使得网页看起来比较美观、漂亮。

JavaScript简介：

JavaScript是一种直译式的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近，和Java没有实际的直接关系。

JavaScript特性：

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。

而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。

所以JavaScript在网页上是担任一个能够在浏览器上进行异步运算，并且处理一些与用户动态交互工作的角色，让一个网页能够有动态的效果。

一个网页的示意图：

以上这三种技术是开发网页必须要掌握的基本技术，做个简单的比喻就是：HTML5相当于构建了一个机器人，CSS3则给这个机器人穿上了好看的衣服或装饰，而JavaScript则是给这个机器人通上电，能够然后这个机器人做出一些动作，能和我们握手、拥抱、玩耍等动作的交互。

关于手机端app的应用开发：

由于HTML5的崛起，现在很多的手机端的应用都采用内嵌网页或者半嵌入网页的方式来开发应用了，这样节省成本能省去很多麻烦。如果使用原生开发的方式开发应用，不仅人工成本高，而且维护、升级都比较麻烦。

Native 开发也即原生开发，如果你是做 Android 开发，那么大部分都是用 Java 语言来编写的，如果你是做 iOS 开发，则是使用 Objecttive C 或者 Swift 来进行编写的，这些都是官方的标准，好处显而易见，利用官方提供的 api ，开发的 app 有更好的性能，可以实现各种酷炫的效果，有更好的兼容性，对用户来说体验更好。

但是如果你使用原生开发的方式开发一个 app ，一定是要 Android 端开发一个，iOS 端开发一个，从开发成本来说有点大，而且我们知道一旦程序出现 bug ，我们一般就只有重新发布一个版本来进行更新，对于 Android 端还好，但是对于需要漫长审核的 iOS 来说简直是噩梦。所以为了解决这个问题，涌现了各种热修复框架，但是毕竟都不是官方的，而且难免会有学习门槛，而且不可避免的是这类为修复 bug 而生的热修复框架本身也有 bug 风险。

不过如果开发一个内嵌 HTML5 应用的话，那很简单，你只需要在外面包裹一个壳就好了。拿 Android 来说，最简单的直接包个 WebView 处理下就可以算是一个简单的 H5 应用了，其他的交给 web 前端工程师就好了。

HTML5 应用的好处也是显而易见，跨平台，因为只需要在 Android 和 iOS 直接写个壳就好了，大大减小了开发成本，而且 web 是实时渲染的，即使有 bug ，可以直接发布就好了，也解决了热修复的问题。

不过使用内嵌 HTML5方式开发的应用也不是完美的，在性能体验上是不如原生开发的应用的，IOS相对好一些，但是Android本身版本的碎片化比较严重，所以HTML5应用在Android上的体检比起原生开发的Android应用性能体验相差明显，所以现在还是原生结合HTML5来开发的APP居多，当然任何的应用开发都得看这个应用使用于什么场景来选择开发模式，要求布局复杂多变的适合使用HTML5开发，要求充分利用设备特性的适合使用原生开发。

网页是如何在浏览器上解析的：

我们在打开一个网页的时候，只需要在浏览器上输入一个网址也即是域名，然后回车键一按网站的页面就显示出来了。看着很简单实际上这个过程有好几个步骤，首先域名要经过DNS解析出服务器的IP，然后浏览器才能通过http协议请求服务器，而底层的网络连接则是用TCP/IP协议来保持网络的连接状态，http只是在应用层上的一个超文本传输协议。

与服务器建立连接后，浏览器首先从服务器上下载的是HTML代码，浏览器会解析这些标记代码形成网页的结构，在解析的过程中会下载页面素材和JS&CSS代码，一般用户计算机上会有一个本地缓存，一些素材音频文件会缓存到本地缓存中，只有本地缓存没有的素材才会去服务器下载，这样可以减轻服务器和网络压力。

网页全部加载完成后，用户在网页上的操作会提交到服务器上进行处理，服务器处理完成后再将结果返回给浏览器。所以B/S架构的程序，用户只需要网络和一个浏览器就能使用不同网页的不同功能，只要F5刷新一下页面就能看到最新的内容，对客户机的要求也不高，所以很多数据交互性的程序都逐渐采用B/S架构。

页面解析示意图：

OSI网络七层协议模型：

以上谈论了C/S和B/S架构，我们就知道了无论是C/S还是B/S架构都不是完美的，都是各有千秋和优缺点，C/S内嵌B/S的结合架构方式也一样，所以说没有最好的架构模式，只有最适合的架构模式。

网站题目：HTML5简介，C/S与B/S架构
文章链接：http://cdiso.cn/article/pioopo.html