柳珺

摘要：在互聯(lián)網(wǎng)已經(jīng)進(jìn)入Web3.0時(shí)代的今天，HTML5和CSS3作為新一代的網(wǎng)頁(yè)前端技術(shù)已走上前臺(tái)，成為主流網(wǎng)頁(yè)前端技術(shù)。HTML5和CSS3為網(wǎng)頁(yè)帶來了更加豐富的表現(xiàn)能力，更加賞心悅目的互動(dòng)效果，并且簡(jiǎn)化了網(wǎng)頁(yè)前端的設(shè)計(jì)過程，使網(wǎng)頁(yè)結(jié)構(gòu)更加清晰明確、簡(jiǎn)單易讀，使搜索引擎更容易抓取網(wǎng)頁(yè)中的有用信息。HTML5和CSS3已經(jīng)成為高職網(wǎng)頁(yè)前端課程的核心內(nèi)容。

關(guān)鍵詞：網(wǎng)頁(yè)前端技術(shù)；HTML5；CSS3

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）36-0198-03

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，尤其是進(jìn)入了移動(dòng)互聯(lián)網(wǎng)時(shí)代，網(wǎng)頁(yè)技術(shù)在變革，如今的互聯(lián)網(wǎng)已經(jīng)進(jìn)入了web3.0的時(shí)代，網(wǎng)站的前端發(fā)生了翻天覆地的變化，網(wǎng)頁(yè)不再只是承載單一的文字和圖片，頁(yè)面上內(nèi)容生動(dòng)的動(dòng)畫、聲音、視頻以及軟件化的交互形式都是基于前端技術(shù)實(shí)現(xiàn)的。如今社會(huì)對(duì)網(wǎng)頁(yè)人才的需求，已經(jīng)從最初的制作網(wǎng)頁(yè)，發(fā)展到面向網(wǎng)頁(yè)的開發(fā)工作。[1]網(wǎng)頁(yè)前端技術(shù)在變，社會(huì)對(duì)網(wǎng)頁(yè)前端人才的需求在變，傳授網(wǎng)頁(yè)前端技術(shù)的網(wǎng)頁(yè)前端課程的內(nèi)容也必須隨之變化、更新。

1 移動(dòng)互聯(lián)網(wǎng)時(shí)代網(wǎng)頁(yè)的特點(diǎn)

隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展和移動(dòng)終端設(shè)備的智能化，移動(dòng)終端設(shè)備（手機(jī)、平板電腦）上網(wǎng)的便捷性優(yōu)勢(shì)逐漸顯現(xiàn)，越來越多的人更傾向于通過移動(dòng)終端訪問互聯(lián)網(wǎng)，移動(dòng)終端已經(jīng)成為人們接觸網(wǎng)絡(luò)的重要渠道之一。據(jù)統(tǒng)計(jì)當(dāng)前移動(dòng)終端設(shè)備的用戶數(shù)量已超越PC端，移動(dòng)終端的網(wǎng)頁(yè)瀏覽需求量上升，因此怎么讓網(wǎng)頁(yè)能夠兼容更多類型的終端設(shè)備已經(jīng)成為當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)中的重要問題。為了解決這個(gè)問題，響應(yīng)式網(wǎng)頁(yè)應(yīng)運(yùn)而生。

所謂響應(yīng)式網(wǎng)頁(yè)就是根據(jù)瀏覽網(wǎng)頁(yè)的設(shè)備不同，自動(dòng)對(duì)網(wǎng)頁(yè)進(jìn)行響應(yīng)和調(diào)整，包括分辨率、圖片的尺寸、頁(yè)面寬度、頁(yè)面布局和相關(guān)腳本功能的調(diào)整。即響應(yīng)式網(wǎng)頁(yè)就是一個(gè)網(wǎng)站能夠兼容多種終端，而不是為每種終端做一個(gè)特定的版本。

響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)應(yīng)該成為當(dāng)前網(wǎng)頁(yè)前端技術(shù)課程中不可缺少的內(nèi)容。

2 網(wǎng)頁(yè)前端技術(shù)的核心內(nèi)容分析

目前，網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)化的理念已經(jīng)形成，基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)成為主流的網(wǎng)頁(yè)前端設(shè)計(jì)技術(shù)?；赪eb標(biāo)準(zhǔn)制作網(wǎng)頁(yè)，便于程序設(shè)計(jì)者設(shè)計(jì)出具有規(guī)范的文件，便于瀏覽器廠家研發(fā)出適應(yīng)Web標(biāo)準(zhǔn)的瀏覽器，進(jìn)而使得網(wǎng)頁(yè)文件可以在不同的瀏覽器或終端設(shè)備展示信息。

Web標(biāo)準(zhǔn)即網(wǎng)站標(biāo)準(zhǔn)，其用來創(chuàng)建、規(guī)范網(wǎng)頁(yè)的基本內(nèi)容，其是一系列標(biāo)準(zhǔn)的集合。通常網(wǎng)頁(yè)由內(nèi)容結(jié)構(gòu)、表現(xiàn)和行為三方面構(gòu)成，那么Web標(biāo)準(zhǔn)主要由結(jié)構(gòu)化標(biāo)準(zhǔn)語言、表現(xiàn)標(biāo)準(zhǔn)語言和行為標(biāo)準(zhǔn)三方面的標(biāo)準(zhǔn)構(gòu)成。

結(jié)構(gòu)化標(biāo)準(zhǔn)語言包括：超文本標(biāo)記語言（HTML）、可擴(kuò)展的超文本標(biāo)記語言（XHTML）和可擴(kuò)展的標(biāo)記語言（XML）；表現(xiàn)標(biāo)準(zhǔn)語言包括：層疊樣式表（CSS）；行為標(biāo)準(zhǔn)包括：DOM（文檔對(duì)象模型）和JavaScript。網(wǎng)頁(yè)前端開發(fā)中，HTML、CSS和JavaScript是三種支柱型的語言，即在整個(gè)開發(fā)過程中扮演著十分重要的角色。[2]因此HTML、CSS和JavaScript三種語言是網(wǎng)頁(yè)前端課程的主要內(nèi)容。

從前端開發(fā)技術(shù)角度來看，互聯(lián)網(wǎng)的發(fā)展經(jīng)歷了以HTML和CSS為主的Web1.0時(shí)代，以Ajax應(yīng)用為主的Web2.0時(shí)代，正在邁進(jìn)以HTML5為主的嶄新時(shí)代。[3]

HTML5是HTML（超文本標(biāo)記語言）的第五個(gè)版本，其作為新時(shí)代的web設(shè)計(jì)技術(shù)，為網(wǎng)頁(yè)帶來了更加豐富的表現(xiàn)能力，更加賞心悅目的互動(dòng)效果。目前的網(wǎng)頁(yè)前端設(shè)計(jì)中，HTML5已經(jīng)逐漸的取代了HTML4.01和XHTML1.0成為主流的結(jié)構(gòu)化標(biāo)準(zhǔn)語言。CSS3也逐漸走到了前臺(tái)，成為主流的表現(xiàn)標(biāo)準(zhǔn)語言。在此發(fā)展趨勢(shì)下，HTML5和CSS3技術(shù)已經(jīng)成為Web前端技術(shù)的重要組成部分。

3 網(wǎng)頁(yè)前端設(shè)計(jì)相關(guān)的HTML5和CSS3的新特性

HTML是目前在網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要語言。HTML5以HTML為基礎(chǔ)，對(duì)HTML進(jìn)行了大量的修改，增加了許多新元素，擴(kuò)展了許多新功能，使網(wǎng)頁(yè)結(jié)構(gòu)更加清晰明確、更加簡(jiǎn)單易讀。HTML5的應(yīng)用給網(wǎng)頁(yè)的前端設(shè)計(jì)理念和技術(shù)帶來了沖擊。

3.1 HTML5增加了結(jié)構(gòu)類元素

在HTML5中，為了使文檔的結(jié)構(gòu)更加清晰明確，定義了一組新的語義化結(jié)構(gòu)元素：header元素、nav元素、section元素、article元素、footer元素和aside元素等。這些新的結(jié)構(gòu)類元素可以簡(jiǎn)化頁(yè)面的設(shè)計(jì)，使HTML文檔更容易加載，使搜索引擎更容易抓取網(wǎng)頁(yè)中的有用信息。

3.2 HTML5擴(kuò)展了表單元素的功能

表單的功能是進(jìn)行數(shù)據(jù)采集實(shí)現(xiàn)人機(jī)交互，其是網(wǎng)頁(yè)不可缺少的組成部分。

HTML5中增加了表單方面的許多功能，包括增加了input元素的輸入類型以及input元素的屬性。使用這些新的表單特性，前端設(shè)計(jì)人員可以更加省力和高效地制作出標(biāo)準(zhǔn)的Web表單。另外HTML5的表單帶有驗(yàn)證功能，這樣能夠減少表單驗(yàn)證功能的代碼編寫。

3.3 HTML5新增了canvas技術(shù)

canvas是HTML5新增的專門用于繪制圖形的元素，在頁(yè)面上放置一個(gè)canvas元素，就相當(dāng)于在頁(yè)面上放置了一塊畫布，可以在其中進(jìn)行圖形的描繪。既可以實(shí)現(xiàn)最簡(jiǎn)單直接的繪圖，也可以通過編寫腳本實(shí)現(xiàn)極為復(fù)雜的應(yīng)用，繪制出各種美妙絕倫的圖形、精彩紛呈的游戲等。

3.4 HTML5改變了多媒體的應(yīng)用方式

HTML5之前，在網(wǎng)頁(yè)中展示的視頻和音頻等多媒體素材，一般使用第三方開發(fā)的播放器進(jìn)行，但這種方法需要在瀏覽器中安裝各種插件才能完成。HTML5中實(shí)現(xiàn)了音頻和視頻播放和控制的革新，其新增加的audio和video兩個(gè)元素，可以不需要安裝任何插件或工具即能在網(wǎng)頁(yè)中直接播放音頻和視頻。

CSS層疊樣式表用于控制網(wǎng)頁(yè)頁(yè)面的外觀，通過使用CSS樣式控制頁(yè)面各元素的外觀顯示，可實(shí)現(xiàn)頁(yè)面的內(nèi)容結(jié)構(gòu)與表現(xiàn)分離。CSS3是CSS技術(shù)的最新升級(jí)版本，CSS3增加了許多新的功能，使得不僅能簡(jiǎn)化網(wǎng)頁(yè)前端的設(shè)計(jì)過程，還能加快頁(yè)面的載入速度。

1）CSS3增加并完善了選擇器的功能

在CSS3中，提倡使用選擇器將樣式與元素直接綁定起來，這樣在樣式表中什么樣式與什么元素相匹配變得一目了然，修改起來很方便。通過選擇器還可以實(shí)現(xiàn)各種復(fù)雜的指定，同時(shí)能大量減少樣式表代碼書寫量，最終書寫出來的樣式表變得簡(jiǎn)潔明了。

2）CSS3增加了文本屬性

在文本樣式控制方面，CSS3新增了幾個(gè)文本屬性：text-shadow屬性用于為文字添加陰影或模糊效果；text-overflow屬性用于設(shè)置超長(zhǎng)文本省略顯示；word-wrap屬性用于設(shè)置文本超過指定容器的邊界時(shí)是否斷開轉(zhuǎn)行。

3）完善了顏色控制

在CSS3之前，只能使用RGB模式定義顏色值，只能通過opacity屬性設(shè)置元素的不透明度。而CSS3增加了3種顏色定義模式：RGBA顏色值、HSL顏色值和HSLA顏色值，并且可以通過對(duì)RGBA顏色值和HSLA顏色值設(shè)定Alpha通道的方法更容易地實(shí)現(xiàn)將半透明文字與圖像互相重疊的效果。

4）CSS3完善了盒模型功能

CSS3增強(qiáng)了元素邊框的控制能力，主要包括其支持圓角邊框、圖片邊框和多層邊框等。圓角邊框的繪制是美化頁(yè)面效果的常用手法之一，在CSS3之前，需要使用圖像文件才能達(dá)到圓角的效果，而CSS3則可以直接使用border-radius屬性創(chuàng)建圓角邊框。

為了方便靈活地設(shè)計(jì)網(wǎng)頁(yè)效果，CSS3增強(qiáng)了background屬性的功能，允許在同一個(gè)元素內(nèi)疊加多個(gè)背景圖像，還可以通過控制背景圖片的尺寸來實(shí)現(xiàn)完美的視覺效果。

5）CSS3增加了新的布局方式

CSS3增加了多列自動(dòng)布局屬性column，利用該屬性可以自動(dòng)將內(nèi)容按指定的列數(shù)進(jìn)行排列。CSS3還增加了box屬性，通過該屬性可以實(shí)現(xiàn)彈性盒布局，利用該功能可以輕松地創(chuàng)建自適應(yīng)瀏覽器容器的流動(dòng)布局或自適應(yīng)字體大小的彈性布局。CSS3還新增了Media Queries模塊，利用該功能可以根據(jù)不同的媒體類型選擇相應(yīng)的樣式，從而實(shí)現(xiàn)響應(yīng)式布局。

6）CSS3提供了動(dòng)畫功能

CSS3所提供的動(dòng)畫功能，主要包括變形、轉(zhuǎn)換和動(dòng)畫技術(shù)。使用動(dòng)畫功能，可以實(shí)現(xiàn)在屬性值的開始值與結(jié)束值之間進(jìn)行平滑過渡，從而使頁(yè)面上的文字、圖像或背景具有動(dòng)畫效果。

從可用性的角度方面考慮，HTML5和CSS3可以更好地促進(jìn)用戶與網(wǎng)站間的互動(dòng)，特別是能夠提供更多、更加優(yōu)秀的交互性用戶體驗(yàn)。HTML5和CSS3已經(jīng)成為移動(dòng)互聯(lián)網(wǎng)時(shí)代網(wǎng)頁(yè)前端的核心技術(shù)，因此也必將成為網(wǎng)頁(yè)前端技術(shù)課程的主要內(nèi)容。

4 移動(dòng)互聯(lián)網(wǎng)時(shí)代網(wǎng)頁(yè)前端課程教學(xué)內(nèi)容設(shè)計(jì)

由以上分析可知，HTML、CSS和JavaScript三種語言在網(wǎng)頁(yè)前端技術(shù)中起著支撐作用，是網(wǎng)頁(yè)前端課程的主要內(nèi)容。隨著HTML5和CSS3的日趨成熟，HTML5+CSS3+JavaScript已經(jīng)成為移動(dòng)互聯(lián)網(wǎng)時(shí)代網(wǎng)頁(yè)前端開發(fā)的主流技術(shù)。

為了跟隨網(wǎng)頁(yè)前端技術(shù)的發(fā)展，讓學(xué)生學(xué)到實(shí)用的網(wǎng)頁(yè)前端技術(shù)，我們對(duì)我院高職軟件專業(yè)的網(wǎng)頁(yè)前端課程進(jìn)行的整合和教學(xué)內(nèi)容重構(gòu)，將該專業(yè)網(wǎng)頁(yè)前端相關(guān)課程《網(wǎng)頁(yè)設(shè)計(jì)與制作》和《JavaScript》整合為《網(wǎng)頁(yè)前端技術(shù)》，有效地將HTML、CSS和JavaScript三種語言融合在一起，達(dá)到三種語言的無縫銜接。在新的課程體系中，繼續(xù)將已經(jīng)成熟并普遍使用的DIV+CSS網(wǎng)頁(yè)制作模式貫穿課程始終，并將HTML、CSS的基礎(chǔ)知識(shí)和HTML5、CSS3的新特性融入Dreamweaver CS6網(wǎng)頁(yè)編輯軟件的講解中，注重HTML5、CSS3新特性的引用與思維模式的遷移。

《網(wǎng)頁(yè)前端技術(shù)》的教學(xué)內(nèi)容分為四個(gè)模塊：網(wǎng)頁(yè)前端基礎(chǔ)、網(wǎng)頁(yè)前端基本操作、網(wǎng)頁(yè)前端高級(jí)操作和JavaScript語言與jQuery。

1）網(wǎng)頁(yè)前端基礎(chǔ)模塊包括網(wǎng)頁(yè)入門知識(shí)、HTML基礎(chǔ)和CSS基礎(chǔ)三部分。

（1）網(wǎng)頁(yè)入門知識(shí)部分：主要學(xué)習(xí)網(wǎng)站網(wǎng)頁(yè)相關(guān)的概念、Web標(biāo)準(zhǔn)、內(nèi)容結(jié)構(gòu)與表現(xiàn)相分離的理念等。（2）HTML基礎(chǔ)部分：主要學(xué)習(xí)HTML概念、HTML5文檔結(jié)構(gòu)、HTML常見元素（包括HTML5新增加的多媒體類元素和結(jié)構(gòu)類元素）。（3）CSS基礎(chǔ)部分：主要學(xué)習(xí)CSS概念、CSS語法、盒模型（包括CSS3新增的控制盒模型外觀的屬性）、CSS選擇器（包括CSS3新增加的屬性選擇器）。

2）網(wǎng)頁(yè)前端基本操作模塊包括文本操作、圖像操作和網(wǎng)頁(yè)布局與定位三部分。

（1）文本操作部分：主要學(xué)習(xí)網(wǎng)頁(yè)中文字的插入、各類超鏈接的創(chuàng)建、控制文本外觀的CSS基本屬性、CSS3新增的文本控制特性（文本陰影設(shè)置，溢出文本的截?cái)啵谋镜膿Q行）、列表的插入及列表的應(yīng)用。（2）圖像操作部分：主要學(xué)習(xí)網(wǎng)頁(yè)中圖像及圖像效果的插入、與圖像相關(guān)的CSS基礎(chǔ)屬性、CSS3新增的圖像控制特性（重新設(shè)定背景圖像的大小，多背景圖像設(shè)置）、圖文混排及圖文信息列表。（3）網(wǎng)頁(yè)的布局與定位部分：主要學(xué)習(xí)網(wǎng)頁(yè)元素浮動(dòng)的實(shí)現(xiàn)、網(wǎng)頁(yè)元素各種定位的概念及實(shí)現(xiàn)、網(wǎng)頁(yè)CSS+DIV排版基礎(chǔ)、不同版式網(wǎng)頁(yè)的布局操作。

3）網(wǎng)頁(yè)的前端高級(jí)操作模塊包括表格與表單、模板與CSS3新增布局、HTML5與CSS3進(jìn)階三部分。

（1）表格與表單部分：主要學(xué)習(xí)網(wǎng)頁(yè)中表格的創(chuàng)建與編輯方法、CSS在表格中的應(yīng)用、網(wǎng)頁(yè)中表單的概念、常見的表單對(duì)象、HTML5新增的表單自動(dòng)驗(yàn)證功能、使用CSS樣式美化表單元素。（2）模板與CSS3新增布局部分：主要學(xué)習(xí)模板的概念、使用模板創(chuàng)建網(wǎng)頁(yè)、CSS3新增布局方法。（3）HTML5與CSS3進(jìn)階部分：主要學(xué)習(xí)實(shí)戰(zhàn)HTML5畫布、CSS3漸變的實(shí)現(xiàn)、CSS3的2D變形、CSS3過渡動(dòng)畫制作。

4）JavaScript語言與jQuery模塊包括JavaScript語言、jQuery兩部分。

（1）JavaScript語言部分：主要學(xué)習(xí)JS基礎(chǔ)、事件處理、JS動(dòng)畫。（2）jQuery部分：主要學(xué)習(xí)jQuery基礎(chǔ)、jQuery插件、Ajax基礎(chǔ)。

基于HTML5的《網(wǎng)頁(yè)前端技術(shù)》課程內(nèi)容體系，使學(xué)生能夠?qū)W到網(wǎng)頁(yè)前端的最新技術(shù)，掌握網(wǎng)頁(yè)前端的最實(shí)用的技能。為了切實(shí)讓學(xué)生學(xué)到實(shí)用的網(wǎng)頁(yè)前端技術(shù)，強(qiáng)化學(xué)生的動(dòng)手能力，在《網(wǎng)頁(yè)前端技術(shù)》的教學(xué)過程中，我們采用的是“任務(wù)引領(lǐng)、教學(xué)做一體”教學(xué)模式，用任務(wù)作為載體，讓學(xué)生在學(xué)中做、做中學(xué)，逐步掌握所學(xué)知識(shí)，提高操作技能，取得了較好的教學(xué)效果。

參考文獻(xiàn)：

[1] 聶宇.從Web發(fā)展探索高職軟件專業(yè)的網(wǎng)頁(yè)課教改之路[J].福建電腦，2011（8）.

[2] 陳月 秦福建.Web前端開發(fā)技術(shù)以及優(yōu)化方向探究[J].信息與電腦，2016（4）.

[3] 網(wǎng)頁(yè)設(shè)計(jì)與制作（Dreamweaver CS6+HTML5+CSS3版）[M].北京：清華大學(xué)出版社，2015.