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

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

中圖分類號：TP316文獻標識碼：A文章編號：2095-1302〔2022〕06-00-02

0引言

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

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

1設(shè)計思路

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

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

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

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

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

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

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

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

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

效勞器：InternetInformationServices；

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

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

3.2jQueryMobile技術(shù)

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

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

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

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

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

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

〔3〕縮減網(wǎng)頁文件的大??；

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

4結(jié)語

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