基于HTML5與CSS3高?；ヂ?lián)網(wǎng)移動(dòng)端網(wǎng)站優(yōu)化

基于HTML5與CSS3高校互聯(lián)網(wǎng)移動(dòng)端網(wǎng)站優(yōu)化基于HTML5與CSS3高?；ヂ?lián)網(wǎng)移動(dòng)端網(wǎng)站優(yōu)化

中圖分類號(hào)：TP316文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：2095-1302〔2022〕06-00-02

0引言

由于移動(dòng)互聯(lián)網(wǎng)技術(shù)的開展和移動(dòng)智能設(shè)備的遍及，很多用戶開始選擇在移動(dòng)端進(jìn)行瀏覽、娛樂和學(xué)習(xí)。據(jù)谷歌2022第一季度與市場(chǎng)調(diào)研機(jī)構(gòu)IPSOS〔益普索〕對(duì)關(guān)于人們?nèi)绾问褂弥悄茉O(shè)備進(jìn)行全世界范圍的調(diào)查，得到的信息包括對(duì)移動(dòng)設(shè)備手機(jī)的遍及和使用情況記錄的一些相關(guān)數(shù)據(jù)。人們利用智能設(shè)備進(jìn)行對(duì)互聯(lián)網(wǎng)的使用，包括對(duì)資源的搜索及視頻的搜索、移動(dòng)商務(wù)、移動(dòng)廣告和人們的社交網(wǎng)絡(luò)與網(wǎng)絡(luò)學(xué)習(xí)等。截止目前，中國(guó)智能手機(jī)的使用率已到達(dá)90%，它已經(jīng)在人們的生活中扮演著一個(gè)重要角色，為此，人們對(duì)智能設(shè)備的依賴程度也隨之增加，其中約64%的用戶每天都會(huì)用智能手機(jī)訪問互聯(lián)網(wǎng)。在辦公室時(shí)、乘坐公共交通工具時(shí)、在餐館時(shí)或在回家路上等，超過50%的使用者每天都會(huì)使用智能移動(dòng)設(shè)備對(duì)互聯(lián)網(wǎng)進(jìn)行至少一次訪問，主要行為包括對(duì)搜索引擎的使用，對(duì)電子郵件的收發(fā)，登錄社交網(wǎng)站等，越來(lái)越多的用戶將在未來(lái)更加頻繁的使用智能手機(jī)訪問互聯(lián)網(wǎng)。

隨著移動(dòng)終端〔智能手機(jī)〕的不斷擴(kuò)增和使用，顯然PC機(jī)終端〔開發(fā)〕不能滿足市場(chǎng)需求，越來(lái)越多的用戶，特別是在校學(xué)生大多都選擇使用移動(dòng)瀏覽器如Safari，UC，Opera，Chorme等上網(wǎng)娛樂、辦公。許多豐盛的網(wǎng)頁(yè)內(nèi)容將在移動(dòng)瀏覽器端顯示，它支持www規(guī)范協(xié)議，其中主要采用兩種布局來(lái)顯示PC網(wǎng)站的內(nèi)容：①通過對(duì)網(wǎng)頁(yè)的放大或縮小來(lái)顯示；②通過自適應(yīng)手機(jī)屏幕寬度，將PC版?zhèn)鹘y(tǒng)網(wǎng)站進(jìn)行重新布局，利用手機(jī)出現(xiàn)的滾動(dòng)條，對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行查看，但是這樣顯示的內(nèi)容將會(huì)被打亂，而布局也隨之變得混亂。面對(duì)這種情況，假如摒棄傳統(tǒng)PC版網(wǎng)站的資源，重新開發(fā)新的移動(dòng)設(shè)備端網(wǎng)站，就需要投入更多的時(shí)間、精力、金錢等開發(fā)本錢，其中對(duì)人力、資源的浪費(fèi)是巨大的。該設(shè)計(jì)在不變動(dòng)PC版網(wǎng)站相關(guān)業(yè)務(wù)及數(shù)據(jù)訪問的根底上，提出一個(gè)基于CSS3+HTML5+jQueryMobile的新移動(dòng)技術(shù)實(shí)現(xiàn)平臺(tái)的開發(fā)創(chuàng)立，對(duì)HTML5相關(guān)核心技術(shù)等的導(dǎo)入，讓移動(dòng)端平臺(tái)的建立實(shí)現(xiàn)跨平臺(tái)有了新的思路。

1設(shè)計(jì)思路

本設(shè)計(jì)繼續(xù)沿用現(xiàn)在主流的MVC三層架構(gòu)思想進(jìn)行修改設(shè)計(jì)，即將該程序分為三個(gè)層次，分別是顯示層、業(yè)務(wù)層和數(shù)據(jù)持久層。

〔1〕界面層：負(fù)責(zé)顯示用戶界面；

〔2〕業(yè)務(wù)層：根據(jù)用戶需要的業(yè)務(wù)處理相關(guān)業(yè)務(wù)邏輯關(guān)系；

〔3〕數(shù)據(jù)持久層：對(duì)數(shù)據(jù)庫(kù)的訪問交互，示例查詢數(shù)據(jù)、插入、刪除和修改數(shù)據(jù)庫(kù)中的數(shù)據(jù)。

該計(jì)劃只增加一個(gè)與PC顯示層同層的移動(dòng)設(shè)備界面層，不改變傳統(tǒng)網(wǎng)站的業(yè)務(wù)邏輯層和數(shù)據(jù)持久層，其應(yīng)用程序架構(gòu)如圖1所示。

其中，網(wǎng)頁(yè)顯示主要放在移動(dòng)界面端，頁(yè)面顯示由.aspx文件管理，內(nèi)容包含jQueryMobile和前端開發(fā)，微軟自帶的效勞器端控件等，后臺(tái)使用C#語(yǔ)言編程，通過調(diào)用相應(yīng)的業(yè)務(wù)功能邏輯層實(shí)現(xiàn)功能。移動(dòng)設(shè)備界面層如圖2所示。

2移動(dòng)開發(fā)環(huán)境搭建

開發(fā)工具：VisualStudio2022或者VisualStudio2022；

操作系統(tǒng)：Windows7旗艦版；

效勞器：InternetInformationServices；

數(shù)據(jù)庫(kù)：MicrosoftSQLServer2022R2；

開發(fā)語(yǔ)言：C#。

3核心技術(shù)和關(guān)鍵代碼分析

3.1HTML5技術(shù)

HTML5是基于HTML4.01和XHTML1.0規(guī)范的最新HTML版本，由WHATWG在2022年提出，被W3C組織于2022年接納。2022年1月22日頒布了HTML5的第一份正式草案，但HTML5仍處于完善之中，其中HTML5.1是在2022完成的。目前為止，很多瀏覽器都已經(jīng)開始支持HTML5，譬如Safari，Chrome以及火狐瀏覽器等。

HTML5包含了像，這一類新的元素和屬性標(biāo)簽，有利于搜索引擎的結(jié)果優(yōu)化，在小屏幕設(shè)備上使用支持更方便，增強(qiáng)了互動(dòng)性，減少了不必要的開發(fā)本錢。HTML5標(biāo)簽中的header，footer，dialog等使開發(fā)者更容易地創(chuàng)立文檔并幫忙文檔改善。其中Canvas繪圖提升了移動(dòng)平臺(tái)的繪圖能力，并逐漸被各種瀏覽器所兼容。HTML5新元素的特性如表1所列。

3.2jQueryMobile技術(shù)

jQueryMobile是一個(gè)在線應(yīng)用于智能手機(jī)與平板電腦的Website前端開發(fā)框架，同時(shí)jQuerymobile也是基于jQuery以及jQueryUI類庫(kù)之上的開發(fā)框架，它提供一個(gè)UI接口系統(tǒng)，讓前端開發(fā)人員可以簡(jiǎn)單方便的使用。該框架可以創(chuàng)立出網(wǎng)站以及WebApp所需要的UI組件，包括對(duì)話框、工具欄及各種格調(diào)的表單元素等，其優(yōu)點(diǎn)是擁有輕量化、可訪問性以及漸進(jìn)增強(qiáng)特性，以提高用戶的體驗(yàn)。

在使用該技術(shù)時(shí)，我們應(yīng)該在區(qū)域段中參加標(biāo)簽設(shè)定viewport，告訴瀏覽器顯示頁(yè)面尺寸的大小以及能否控制縮放，可自動(dòng)根據(jù)用戶所使用的瀏覽器顯示相關(guān)頁(yè)面。標(biāo)簽定義如下：3.3CSS3技術(shù)

CSS是1994年哈坤利本人提出的，那時(shí)他與伯特《波斯合作，在一起設(shè)計(jì)瀏覽器的同時(shí)發(fā)展了CSS的設(shè)計(jì)工作。之后，CSS便作為第一個(gè)含有層疊意識(shí)的語(yǔ)言，對(duì)很多開發(fā)者、作者、讀者等放出很大的空間，使得他們對(duì)設(shè)計(jì)的實(shí)現(xiàn)效益得以提高。且于1994在芝加哥的一次會(huì)議上向人們展出了CSS，不久之后，兩人便開始籌劃，成立技術(shù)小組，隨后CSS技術(shù)于1996年完成，并在次年12月份CSS作為第一本公開版本被出版。最后在1998年W3C管理下推出CSS2.1版本。它是CSS2的升級(jí)版本，在原來(lái)的根底上增加了一些功能。

CSS被稱為層疊樣式表，在網(wǎng)頁(yè)界面中可以很輕松的使用。它的特性主要概括為下列四點(diǎn)：

〔1〕別離網(wǎng)頁(yè)的表示層和結(jié)構(gòu)層，讓它們彼此都不會(huì)受到對(duì)方的影響；

〔2〕對(duì)很多網(wǎng)頁(yè)的外觀實(shí)現(xiàn)同時(shí)更改；

〔3〕縮減網(wǎng)頁(yè)文件的大?。?/p>

〔4〕對(duì)網(wǎng)頁(yè)的響應(yīng)速度以及加載速度等方面起到了向上的作用。

4結(jié)語(yǔ)

借助原網(wǎng)站代碼的二次開發(fā)，增加一個(gè)移動(dòng)界面端顯示，為了能夠使該平臺(tái)支持不的移動(dòng)設(shè)備和瀏覽器，利用HTML5和CSS3等技術(shù)實(shí)現(xiàn)跨平臺(tái)以提高用戶的交互體驗(yàn)，利用眾多瀏覽器端都可以支持HTML5的趨勢(shì)，讓傳統(tǒng)模式網(wǎng)站轉(zhuǎn)向HTML5。對(duì)于傳統(tǒng)網(wǎng)站，使用HTML5+CSS3+jQ