HTML5簡介，C/S與B/S架構(gòu)

HTML5簡介：

成都創(chuàng)新互聯(lián)，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、成都響應(yīng)式網(wǎng)站建設(shè)公司、展示型做網(wǎng)站、成都網(wǎng)站建設(shè)等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。

HTML5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言的第五個版本，所以才稱為HTML5。在HTML4之前都不會帶上版本的都統(tǒng)一稱為HTML，但是因為在HTML的第五個版本改動比較大，與HTML4和之前的版有較大的區(qū)別，在這一版本中新功能不斷推出并且進(jìn)行了近百項的修改，所以這一版本的HTML才統(tǒng)一被稱為HTML5。

HTML5的第一份正式草案是在2008年1月22日公布的，到2014年10月29日萬維網(wǎng)聯(lián)盟才宣布改標(biāo)準(zhǔn)規(guī)范制定完成。HTML5最大的一個優(yōu)勢在于手機(jī)、平板這種移動終端上的應(yīng)用開發(fā)，可以在網(wǎng)頁上直接調(diào)試和修改。原先應(yīng)用的開發(fā)人員可能需要花費非常大的力氣才能達(dá)到HTML5的效果，不斷地重復(fù)編碼、調(diào)試和運行，這是首先得解決的一個問題。因此也有許多手機(jī)雜志客戶端是基于HTML5標(biāo)準(zhǔn)，開發(fā)人員可以輕松調(diào)試修改。

HTML5的設(shè)計目的是為了在移動設(shè)備上支持多媒體。新的語法特征被引進(jìn)以支持這一點，如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能，可以真正改變用戶與文檔的交互方式，包括：

· 新的解析規(guī)則增強(qiáng)了靈活性

· 新屬性

· 淘汰過時的或冗余的屬性

· 一個HTML5文檔到另一個文檔間的拖放功能

· 離線編輯

· 信息傳遞的增強(qiáng)

· 詳細(xì)的解析規(guī)則

· 多用途互聯(lián)網(wǎng)郵件擴(kuò)展（MIME）和協(xié)議處理程序注冊

· 在SQL數(shù)據(jù)庫中存儲數(shù)據(jù)的通用標(biāo)準(zhǔn)（Web SQL）

HTML5特性

語義特性（Class：Semantic）

HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對程序、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web。

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

基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術(shù)之一）和API說明文檔。

設(shè)備兼容特性 (Class: DEVICE ACCESS)

從Geolocation功能的API文檔公開以來，HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗功能的優(yōu)勢。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。

連接特性（Class: CONNECTIVITY）

更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網(wǎng)頁游戲體驗，更優(yōu)化的在線交流得到了實現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。

網(wǎng)頁多媒體特性(Class: MULTIMEDIA)

支持網(wǎng)頁端的Audio、Video等多媒體功能， 與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。

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

基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。

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

沒有用戶會永遠(yuǎn)等待你的Loading——HTML5會通過XMLHttpRequest2等技術(shù)，解決以前的跨域等問題，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。

CSS3特性(Class: CSS3)

在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。

程序架構(gòu)問題：

現(xiàn)在最常見的兩種程序架構(gòu)方式就是C/S和B/S架構(gòu)，C/S也就是Client/Server架構(gòu)，即客戶端/服務(wù)器架構(gòu)。是大家熟知的軟件系統(tǒng)體系結(jié)構(gòu)，通過將任務(wù)合理分配到Client端和Server端，降低了系統(tǒng)的通訊開銷，需要安裝客戶端才可進(jìn)行管理操作?？蛻舳撕头?wù)器端的程序不同，用戶的操作主要在客戶端，服務(wù)器端主要是提供數(shù)據(jù)管理、數(shù)據(jù)共享、數(shù)據(jù)及系統(tǒng)維護(hù)和并發(fā)控制等，客戶端程序主要完成用戶的具體的業(yè)務(wù)。

所以C/S架構(gòu)的程序?qū)δ軌驕p輕服務(wù)器壓力，而且客戶端是安裝在用戶本地的電腦上，調(diào)用本地的一些硬件設(shè)備就比較方便，適合用于大型游戲、音頻軟件、各種工具類軟件的程序架構(gòu)方式。

但是C/S架構(gòu)也有缺點，升級更新還有維護(hù)比較麻煩，系統(tǒng)升級的話，全部的客戶端都需要升級，而且沒有客戶端的話就無法使用任何的功能，設(shè)備需要提前安裝、更新客戶端。

因為這些特性，數(shù)據(jù)管理軟件、網(wǎng)上購物、信息交互部分都不適合使用C/S架構(gòu)。

C/S程序架構(gòu)示意圖：

另外一種B/S架構(gòu)，即Browser/Server (瀏覽器/服務(wù)器) 結(jié)構(gòu)，是隨著Internet技術(shù)的興起，對C/S結(jié)構(gòu)的一種變化或者改進(jìn)的結(jié)構(gòu)。在這種結(jié)構(gòu)下，用戶界面完全通過瀏覽器實現(xiàn)。在這種結(jié)構(gòu)下，用戶工作界面是通過瀏覽器來實現(xiàn)，極少部分事務(wù)邏輯在前端(Browser)實現(xiàn)，但是主要事務(wù)邏輯在服務(wù)器端(Server)實現(xiàn)，形成所謂三層3-tier結(jié)構(gòu)。B/S結(jié)構(gòu)是WEB興起后的一種網(wǎng)絡(luò)結(jié)構(gòu)模式，WEB瀏覽器是客戶端最主要的應(yīng)用軟件。這種模式統(tǒng)一了客戶端，將系統(tǒng)功能實現(xiàn)的核心部分集中到服務(wù)器上，簡化了系統(tǒng)的開發(fā)、維護(hù)和使用。

客戶機(jī)上只要安裝一個瀏覽器（Browser），如Chrome，F(xiàn)irefox或Internet Explorer，服務(wù)器安裝Oracle、Sybase、Informix或 SQL Server等數(shù)據(jù)庫。瀏覽器通過Web Server同數(shù)據(jù)庫進(jìn)行數(shù)據(jù)交互。 以為頁面上的內(nèi)容全部都是從服務(wù)器上下載下來的，以后客戶端沒有什么更新這一說，這樣就大大簡化了客戶端電腦載荷，減輕了系統(tǒng)維護(hù)與升級的成本和工作量，降低了用戶的總體成本，在瀏覽器上只需要刷新一下就能看到最新的內(nèi)容，不用更新客戶端。

但是B/S架構(gòu)也有相應(yīng)的缺點，游戲方面只能做網(wǎng)頁小游戲，如果是大型游戲的話瀏覽器受不了，而且網(wǎng)絡(luò)和服務(wù)器也支撐不了，因為全部的特效渲染、數(shù)據(jù)計算都得在服務(wù)器上完成后通過網(wǎng)絡(luò)發(fā)送到瀏覽器上，這是不可能完成的，所以B/S架構(gòu)不適合做大型游戲。B/S架構(gòu)不能像C/S架構(gòu)那樣方便的訪問、調(diào)用用戶本地的硬件設(shè)備，訪問起來很麻煩。B/S架構(gòu)把系統(tǒng)功能實現(xiàn)的核心部分集中到服務(wù)器上，所以服務(wù)器的壓力也比較大。

B/S程序架構(gòu)示意圖：

兩種程序架構(gòu)的思維導(dǎo)圖：

網(wǎng)頁技術(shù)：

在網(wǎng)頁開發(fā)上，最基本的三大技術(shù)就是：HTML5、CSS3和JavaScript。HTML5上面已經(jīng)介紹過了，是一種超文本標(biāo)記語言，它負(fù)責(zé)構(gòu)建一個網(wǎng)頁的頁面結(jié)構(gòu)，也就是相當(dāng)于一個骨架、框架。

CSS3簡介：

CSS3是層疊樣式表（CascadingStyleSheet），在網(wǎng)頁制作時采用層疊樣式表技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。

CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個模塊實在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。

所以CSS3是負(fù)責(zé)網(wǎng)頁的畫面以及色彩和畫面渲染效果，用于給每個標(biāo)記增加各種外觀上的效果，使得網(wǎng)頁看起來比較美觀、漂亮。

JavaScript簡介：

JavaScript是一種直譯式的腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。

在1995年時，由Netscape公司的Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計實現(xiàn)而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風(fēng)格與Self及Scheme較為接近，和Java沒有實際的直接關(guān)系。

JavaScript特性：

JavaScript腳本語言具有以下特點:

(1)腳本語言。JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯后執(zhí)行,而JavaScript是在程序的運行過程中逐行進(jìn)行解釋。

(2)基于對象。JavaScript是一種基于對象的腳本語言,它不僅可以創(chuàng)建對象,也能使用現(xiàn)有的對象。

(3)簡單。JavaScript語言中采用的是弱類型的變量類型,對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求,是基于Java基本語句和控制的腳本語言,其設(shè)計簡單緊湊。

(4)動態(tài)性。JavaScript是一種采用事件驅(qū)動的腳本語言,它不需要經(jīng)過Web服務(wù)器就可以對用戶的輸入做出響應(yīng)。在訪問一個網(wǎng)頁時,鼠標(biāo)在網(wǎng)頁中進(jìn)行鼠標(biāo)點擊或上下移、窗口移動等操作JavaScript都可直接對這些事件給出相應(yīng)的響應(yīng)。

(5)跨平臺性。JavaScript腳本語言不依賴于操作系統(tǒng),僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫后可以帶到任意機(jī)器上使用,前提上機(jī)器上的瀏覽器支持JavaScript腳本語言,目前JavaScript已被大多數(shù)的瀏覽器所支持。

不同于服務(wù)器端腳本語言，例如PHP與ASP，JavaScript主要被作為客戶端腳本語言在用戶的瀏覽器上運行，不需要服務(wù)器的支持。所以在早期程序員比較青睞于JavaScript以減少對服務(wù)器的負(fù)擔(dān)，而與此同時也帶來另一個問題：安全性。

而隨著服務(wù)器的強(qiáng)壯，雖然程序員更喜歡運行于服務(wù)端的腳本以保證安全，但JavaScript仍然以其跨平臺、容易上手等優(yōu)勢大行其道。同時，有些特殊功能（如AJAX）必須依賴Javascript在客戶端進(jìn)行支持。隨著引擎如V8和框架如Node.js的發(fā)展，及其事件驅(qū)動及異步IO等特性，JavaScript逐漸被用來編寫服務(wù)器端程序。

所以JavaScript在網(wǎng)頁上是擔(dān)任一個能夠在瀏覽器上進(jìn)行異步運算，并且處理一些與用戶動態(tài)交互工作的角色，讓一個網(wǎng)頁能夠有動態(tài)的效果。

一個網(wǎng)頁的示意圖：

以上這三種技術(shù)是開發(fā)網(wǎng)頁必須要掌握的基本技術(shù)，做個簡單的比喻就是：HTML5相當(dāng)于構(gòu)建了一個機(jī)器人，CSS3則給這個機(jī)器人穿上了好看的衣服或裝飾，而JavaScript則是給這個機(jī)器人通上電，能夠然后這個機(jī)器人做出一些動作，能和我們握手、擁抱、玩耍等動作的交互。

關(guān)于手機(jī)端app的應(yīng)用開發(fā)：

由于HTML5的崛起，現(xiàn)在很多的手機(jī)端的應(yīng)用都采用內(nèi)嵌網(wǎng)頁或者半嵌入網(wǎng)頁的方式來開發(fā)應(yīng)用了，這樣節(jié)省成本能省去很多麻煩。如果使用原生開發(fā)的方式開發(fā)應(yīng)用，不僅人工成本高，而且維護(hù)、升級都比較麻煩。

Native 開發(fā)也即原生開發(fā)，如果你是做 Android 開發(fā)，那么大部分都是用 Java 語言來編寫的，如果你是做 iOS 開發(fā)，則是使用 Objecttive C 或者 Swift 來進(jìn)行編寫的，這些都是官方的標(biāo)準(zhǔn)，好處顯而易見，利用官方提供的 api ，開發(fā)的 app 有更好的性能，可以實現(xiàn)各種酷炫的效果，有更好的兼容性，對用戶來說體驗更好。

但是如果你使用原生開發(fā)的方式開發(fā)一個 app ，一定是要 Android 端開發(fā)一個，iOS 端開發(fā)一個，從開發(fā)成本來說有點大，而且我們知道一旦程序出現(xiàn) bug ，我們一般就只有重新發(fā)布一個版本來進(jìn)行更新，對于 Android 端還好，但是對于需要漫長審核的 iOS 來說簡直是噩夢。所以為了解決這個問題，涌現(xiàn)了各種熱修復(fù)框架，但是畢竟都不是官方的，而且難免會有學(xué)習(xí)門檻，而且不可避免的是這類為修復(fù) bug 而生的熱修復(fù)框架本身也有 bug 風(fēng)險。

不過如果開發(fā)一個內(nèi)嵌 HTML5 應(yīng)用的話，那很簡單，你只需要在外面包裹一個殼就好了。拿 Android 來說，最簡單的直接包個 WebView 處理下就可以算是一個簡單的 H5 應(yīng)用了，其他的交給 web 前端工程師就好了。

HTML5 應(yīng)用的好處也是顯而易見，跨平臺，因為只需要在 Android 和 iOS 直接寫個殼就好了，大大減小了開發(fā)成本，而且 web 是實時渲染的，即使有 bug ，可以直接發(fā)布就好了，也解決了熱修復(fù)的問題。

不過使用內(nèi)嵌 HTML5方式開發(fā)的應(yīng)用也不是完美的，在性能體驗上是不如原生開發(fā)的應(yīng)用的，IOS相對好一些，但是Android本身版本的碎片化比較嚴(yán)重，所以HTML5應(yīng)用在Android上的體檢比起原生開發(fā)的Android應(yīng)用性能體驗相差明顯，所以現(xiàn)在還是原生結(jié)合HTML5來開發(fā)的APP居多，當(dāng)然任何的應(yīng)用開發(fā)都得看這個應(yīng)用使用于什么場景來選擇開發(fā)模式，要求布局復(fù)雜多變的適合使用HTML5開發(fā)，要求充分利用設(shè)備特性的適合使用原生開發(fā)。

網(wǎng)頁是如何在瀏覽器上解析的：

我們在打開一個網(wǎng)頁的時候，只需要在瀏覽器上輸入一個網(wǎng)址也即是域名，然后回車鍵一按網(wǎng)站的頁面就顯示出來了?？粗芎唵螌嶋H上這個過程有好幾個步驟，首先域名要經(jīng)過DNS解析出服務(wù)器的IP，然后瀏覽器才能通過http協(xié)議請求服務(wù)器，而底層的網(wǎng)絡(luò)連接則是用TCP/IP協(xié)議來保持網(wǎng)絡(luò)的連接狀態(tài)，http只是在應(yīng)用層上的一個超文本傳輸協(xié)議。

與服務(wù)器建立連接后，瀏覽器首先從服務(wù)器上下載的是HTML代碼，瀏覽器會解析這些標(biāo)記代碼形成網(wǎng)頁的結(jié)構(gòu)，在解析的過程中會下載頁面素材和JS&CSS代碼，一般用戶計算機(jī)上會有一個本地緩存，一些素材音頻文件會緩存到本地緩存中，只有本地緩存沒有的素材才會去服務(wù)器下載，這樣可以減輕服務(wù)器和網(wǎng)絡(luò)壓力。

網(wǎng)頁全部加載完成后，用戶在網(wǎng)頁上的操作會提交到服務(wù)器上進(jìn)行處理，服務(wù)器處理完成后再將結(jié)果返回給瀏覽器。所以B/S架構(gòu)的程序，用戶只需要網(wǎng)絡(luò)和一個瀏覽器就能使用不同網(wǎng)頁的不同功能，只要F5刷新一下頁面就能看到最新的內(nèi)容，對客戶機(jī)的要求也不高，所以很多數(shù)據(jù)交互性的程序都逐漸采用B/S架構(gòu)。

頁面解析示意圖：

OSI網(wǎng)絡(luò)七層協(xié)議模型：

以上談?wù)摿薈/S和B/S架構(gòu)，我們就知道了無論是C/S還是B/S架構(gòu)都不是完美的，都是各有千秋和優(yōu)缺點，C/S內(nèi)嵌B/S的結(jié)合架構(gòu)方式也一樣，所以說沒有最好的架構(gòu)模式，只有最適合的架構(gòu)模式。

文章標(biāo)題：HTML5簡介，C/S與B/S架構(gòu)
標(biāo)題路徑：http://muchs.cn/article30/pioopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站建設(shè)、面包屑導(dǎo)航、做網(wǎng)站、網(wǎng)站改版、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)