基于HTML5與CSS3的工業(yè)物聯(lián)網(wǎng)工程中心網(wǎng)站開發(fā)

邢增智+郭龍+杜豪+劉順林+彭永鳳+段興悅

摘 要：隨著Web技術(shù)的快速發(fā)展，前端框架已被廣泛使用，如JQuery、Grunt、React.js、HTML5、CSS3等。因開源框架較多，框架本身也逐步完善和優(yōu)化，HTML5和CSS3成為當下最適用的兩種新技術(shù)。HTML5增加了許多標簽，擁有良好的語音化標簽，搭配最新的CSS3可以展示無與倫比的顯示效果。其中，CSS3主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等，使網(wǎng)頁開發(fā)變得不再單調(diào)，在內(nèi)容、布局、顯示方面變得更多樣化，更美觀、簡潔。

關(guān)鍵詞：HTML5；CSS3；jQuery；響應(yīng)式設(shè)計；Java Web

中圖分類號：TP311 文獻標識碼：A 文章編號：2095-1302（2017）03-00-02

0 引 言

傳統(tǒng)Web頁面的交互性較差，后來更新的HTML5與CSS3為網(wǎng)頁增加了諸多新功能，頁面的交互效果得到明顯提升，但因為兼容性問題，HTML5和CSS3并沒有大規(guī)模普及，但得到了市場上主流瀏覽器的支持，這為網(wǎng)頁發(fā)展奠定了良好的基礎(chǔ)。隨著科技不斷進步，技術(shù)一直在更新，智能手機、平板電腦、智能家電等新設(shè)備層出不窮，這為網(wǎng)頁設(shè)計帶來了新的挑戰(zhàn)，在面對形形色色的終端設(shè)備、千差萬別的屏幕分辨率以及良莠不齊的網(wǎng)絡(luò)鏈接質(zhì)量時，網(wǎng)頁設(shè)計受到了前所未有的挑戰(zhàn)。2015年5月25日，伊桑·馬科特發(fā)表在A List Apart上的一篇文章為我們打開了思路。在這篇名為《Responsive Web Design》的文章中，伊桑·馬科特將三種已有技術(shù)整合在一起，提出了響應(yīng)式網(wǎng)頁設(shè)計的概念，用以解決我們當前遇到的設(shè)計難題。響應(yīng)式網(wǎng)頁設(shè)計概念一經(jīng)提出就大受歡迎（當然也有爭議），很多設(shè)計師和開發(fā)者紛紛實踐并完善這種理念。在兩年多的時間里，涌現(xiàn)出越來越多的響應(yīng)式網(wǎng)站，針對響應(yīng)式設(shè)計的工具和資源也日漸豐富。截止2016年底，響應(yīng)式設(shè)計是使用一套代碼為各類設(shè)備提供良好設(shè)計效果和使用體驗的最佳設(shè)計方法。

雖然響應(yīng)式設(shè)計模式的出現(xiàn)改變了人們對網(wǎng)頁的看法，但這遠遠不夠，就像人永遠不能滿足現(xiàn)狀一般。隨著jQuery、BootStrap等優(yōu)秀前端框架的誕生，網(wǎng)頁設(shè)計與開發(fā)模式發(fā)生了翻天覆地的變化。不僅網(wǎng)頁的開發(fā)速度變快，其整體性能也得到大幅提升，交互性也隨之變強，這些改變都得益于jQuery這個基于JS框架的使用，它大大減輕了前端人員開發(fā)的工作壓力，讓網(wǎng)頁大放光彩。

1 設(shè)計思路

本次程序設(shè)計采用基于Java Web的MVC軟件架構(gòu)模式，把軟件系統(tǒng)分為三個基本部分，即模型（Model）、視圖（View）和控制器（Controller）。控制器控制請求的處理邏輯，對請求進行處理，負責請求轉(zhuǎn)發(fā)，視圖是用戶看到并與之交互的界面，而模型代表著一種規(guī)范。應(yīng)用程序架構(gòu)圖如圖1所示。

Browser為瀏覽器，因為請求和響應(yīng)都在瀏覽器產(chǎn)生，所以程序都從瀏覽器端發(fā)起。JSP將請求裝入JavaBean、Servlet等程序中進行業(yè)務(wù)邏輯處理和數(shù)據(jù)處理，若需要和數(shù)據(jù)庫交互，則會調(diào)用Dao層的程序?qū)?shù)據(jù)庫進行操作。

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

開發(fā)工具：Eclipse、Navicat、Redis；

操作系統(tǒng)：Microsoft Windows 10 Ultimate；

服務(wù)器：Apache Tomcat；

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

開發(fā)語言：Java。

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

3.1 HTML5技術(shù)

HTML5是基于HTML 4.01和XHTML 1.0標準的最新HTML版本，由WHATWG于2004年提出，并于2007年被W3C組織接納。作為新一代HTML語言，HTML5繼承了HTML的標簽并在這之上重新開發(fā)了許多標簽，增強了頁面標簽的功能。標簽體讓開發(fā)者能更容易的創(chuàng)建元素區(qū)域，并極大地兼容移動端的頁面設(shè)計。Canvas繪圖模塊通過與JS結(jié)合，使得PC端或移動端在制圖方面的技術(shù)得到增強，并逐漸被各大瀏覽器廠商兼容。HTML5新元素的特性見表1所列。

3.2 jQuery、JavaScript技術(shù)

jQuery是網(wǎng)頁設(shè)計最常用的動畫設(shè)計框架，它基于JavaScript開發(fā)，jQuery里封裝了許多事件，如鼠標的事件mouseout、mouseover等，因為基于JavaScript開發(fā)，所以jQuery在未來可以進行功能擴充和完善。在網(wǎng)頁中使用jQuery很方便，只需把jQuery的源文件通過標簽引入頁面即可，再另建一個JS文件進行功能上的自定義。相對于JavaScript而言，jQuery不僅減少了代碼量，還能讓網(wǎng)頁元素的動作執(zhí)行更加完美和穩(wěn)定，兼容性更強。

為了能讓頁面有效執(zhí)行響應(yīng)式的頁面開發(fā)，需要在頁面的head標簽內(nèi)部加入一些標簽，并引入所需的jQuery庫。

標簽定義如下：

引入函數(shù)庫：

簡單網(wǎng)頁的基本組成：