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是層疊樣式表（Cascading StyleSheet），在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。

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的結合架構方式也一樣，所以說沒有最好的架構模式，只有最適合的架構模式。