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

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

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

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

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2095-1302（2017）03-00-02

0 引 言

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

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

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

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

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

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

3.2 jQuery、JavaScript技術(shù)

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

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

標(biāo)簽定義如下：

引入函數(shù)庫：

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