HTML5简介，CS与BS架构
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⽂档到另⼀个⽂档间的拖放功能
· 离线编辑
· 信息传递的增强
手机上可以打html与css的app· 详细的解析规则
· 多⽤途互联⽹邮件扩展（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是层叠样式表（C ascading S tyle S heet），在⽹页制作时采⽤层叠样式表技术，可以有效地对页⾯的布局、字体、颜⾊、背景和其它效果实现更加精确的控制。
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开发，要求充分利⽤设备特性的适合使⽤原⽣开发。
⽹页是如何在浏览器上解析的：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。