視頻-第11章jquery在html5中的應用

本章要求：第11章jQuery在HTML5中的應用HTML5的基礎知識使用HTML5+jQuery實現(xiàn)文件上傳進度條的顯示使用HTML5+jQuery實現(xiàn)圖片旋轉效果使用HTML5+jQuery實現(xiàn)圖片旋轉效果使用jQuery插件在HTML5中實現(xiàn)聲音的播放WebStorage編程應用旅游信息網前臺頁面的實現(xiàn)主要內容1.HTML5基礎2.jQuery與HTML5編程3.綜合實例：旅游信息網前臺頁面設計第11章jQuery在HTML5中的應用11.1HTML5基礎11.1.1HTML的發(fā)展歷程11.1.2HTML5的新特性11.1.3瀏覽器對HTML5的支持

11.1.1HTML的發(fā)展歷程

1993年HTML首次以因特網草案的形式發(fā)布。20世紀90年代的人見證了HTML的快速發(fā)展，從2.0版，到3.2版和4.0版，再到1999年的4.01版，一直到現(xiàn)在正逐步普及的HTML5。隨著HTML的發(fā)展，W3C（萬維網聯(lián)盟）掌握了對HTML規(guī)范的控制權。致力于將Web平臺提升到一個新的高度，一組人在2004年成立了WHATWG（WebHypertextApplicationTechnologyWorkingGroup，Web超文本應用技術工作組），他們創(chuàng)立了HTML5規(guī)范，同時開始專門針對Web應用開發(fā)新功能——這被WHATWG認為是HTML中最薄弱的環(huán)節(jié)。Web2.0這個新詞也是在那個時候被發(fā)明的。Web2.0實至名歸，開創(chuàng)了Web的第二個時代，舊的靜態(tài)網站逐漸讓位于需要更多特性的動態(tài)網站和社交網站——這其中的新功能數(shù)不勝數(shù)。2006年，W3C又重新介入HTML，并于2008年發(fā)布了HTML5的工作草案。2009年，XHTML2工作組停止工作。又過一年，因為HTML5能解決非常實際的問題，所以在規(guī)范還沒有具體訂下來的情況下，各大瀏覽器廠家就已經按耐不住了，開始對旗下產品進行升級以支持HTML5的新功能。這樣，得益于瀏覽器的實驗性反饋，HTML5規(guī)范也得到了持續(xù)地完善，HTML5以這種方式迅速融入到了對Web平臺的實質性改進中。11.1.2HTML5的新特性

兼容性雖然到了HTML5時代，但并不代表現(xiàn)在用HTML4創(chuàng)建出來的網站必須全部要重建。HTML5并不是顛覆性的革新。相反，實際上HTML5的一個核心理念就是保持一切新特性平滑過渡。盡管HTML5標準的一些特性非常具有革命性，但是HTML5旨在進化而非革命。這一點正是通過兼容性體現(xiàn)出來的。正是因為保障了兼容性才能讓人們毫不猶豫的選擇HTML5開發(fā)網站。實用性和用戶優(yōu)先HTML5規(guī)范是基于用戶優(yōu)先準則編寫的，其主要宗旨是“用戶即上帝”，這意味著在遇到無法解決的沖突時，規(guī)范會把用戶放到第一位，其次是頁面的作者，再次是實現(xiàn)者（或瀏覽器），接著是規(guī)范制定者，最后才考慮理論的純粹實現(xiàn)。因此，HTML5的絕大部分是實用的，只是有些情況下還不夠完美。實用性是指要求能夠解決實際問題。HTML5內只封裝了切實有用的功能，不封裝復雜而沒有實際意義的功能?；睘楹咹TML5要的就是簡單、避免不必要的復雜性。HTML5的口號是“簡單至上，盡可能簡化”。因此，HTML5做了以下改進：以瀏覽器原生能力替代復雜的JavaScript代碼。新的簡化的DOCTYPE。新的簡化的字符集聲明。簡單而強大的HTML5API。11.1.3瀏覽器對HTML5的支持

要測試瀏覽器對HTML5的支持程序，只需要訪問網址即可，例如，使用GoogleChrome36.0.1985.125版本測試HTML5的支持程度，得分為509分（滿分為550分），如圖11-1所示。圖11-1使用GoogleChrome36.0.1985.125版本測試HTML5的支持程度使用目前國外廠商的主流瀏覽器進行測試的結果如表11-1所示。

瀏覽器版本得分Chrome36.0.1985.125509Opera（歐朋瀏覽器）23.0.1522.77505Firefox31.0473InternetExplorer（IE瀏覽器）11.0.9600.17207369Safari（蘋果瀏覽器）260從表11-1可以看到，目前對HTML5支持最好的國外廠商主流瀏覽器是Google公司的Chrome瀏覽器。使用目前國內廠商的主流瀏覽器進行測試的結果如表11-2所示。

說明：表11-1和表11-2中的測試結果是筆者使用各瀏覽器的最新版本測試出來的結果，該測試結果可能會隨時變化；而且，隨著HTML5的普及，相信各瀏覽器廠商會越來越重視對HTML5的支持。

瀏覽器版本得分傲游瀏覽器000515獵豹安全瀏覽器606503360安全瀏覽器04483百度瀏覽器0185439QQ瀏覽器7.7.2333搜狗高速瀏覽器371512711.2jQuery與HTML5編程

11.2.1顯示文件上傳的進度條11.2.2Canvas繪圖11.2.3jQuery+HTML5實現(xiàn)圖片旋轉效果11.2.4基于HTML5播放聲音的jQuery插件audioPlay11.2.5WebStorage編程11.2.1顯示文件上傳的進度條1．HTML5FileAPIHTML5FileAPI的設計初衷，是改善基于瀏覽器的Web應用程序處理文件的上傳方式，使文件直接拖放上傳成為可能。HTML5FileAPI用于對文件進行操作，使程序員可以對選擇文件的表單控件進行操作，更好地通過程序對訪問文件和文件上傳等功能進行控制。在HTML5FileAPI中定義了一組對象，包括FileList對象、File對象、Blob對象、FileReader對象等。（1）FileList：File對象的一個類似數(shù)組的序列。（2）File：表示FileList中的一個單獨的文件，F(xiàn)ile對象的主要屬性如下：name：返回文件名，不包含路徑信息。lastModifiedDate：返回文件的最后修改日期。size：返回File對象的大小，單位是字節(jié)。type：返回File對象媒體類型的字符串。在JavaScript中，獲取file類型的input元素的FileList數(shù)組的方法如下：document.getElementById("file類型的input元素id").files;獲取FileList數(shù)組中的File對象的方法如下：

document.getElementById("file類型的input元素id").files[index];2．向服務器端發(fā)送FormData對象使用XMLHttpRequest對象的send()方法可以使用FormData對象模擬表單向服務器發(fā)送數(shù)據，語法如下：

xmlhttp.send(formData);其中創(chuàng)建FormData對象有如下兩種方法：（1）使用new關鍵字

varformData=newFormData();（2）調用表單對象的getFormData()方法獲取表單對象中的數(shù)據

FormData=formElement.getFormData(document.getElementById("form_id"));向FormData對象中添加數(shù)據可以使用append()方法，語法如下：

formData.append(key,value);例如：

formData.append("username",”輕鴻”);

formData.append("address",”長春市”);在發(fā)送FormData對象之前也需要調用open()方法設置提交數(shù)據的方式以及接收和處理數(shù)據的服務端腳本，例如：

xmlhttp.open("POST","upfile.php");【例11-1】

顯示文件上傳的進度條（1）創(chuàng)建index.html，構建上傳文件的form表單，以及進度條，主要代碼如下：<h3>上傳文件</h3><formenctype="multipart/form-data"id="form1"name="form1"><p>請選擇您要上傳的文件</p><inputtype="file"name="upload_file"id="upload_file"/><br/><inputtype="button"name="btn"id="btn"value="上傳"/></form><progressid="progress"value="0"max="100"></progress><divid="pro_div"></div>（2）給按鈕添加click事件，創(chuàng)建FormData對象并將文件數(shù)據添加至其中，創(chuàng)建XMLHttpRequest對象向服務端發(fā)送FormData對象實現(xiàn)無刷新上傳，并在<progress>元素中顯示上傳進度，代碼如下：$(document).ready(function(){ $("#btn").click(function(){ varformdata=newFormData(); //創(chuàng)建FormData對象//向FormData中添加數(shù)據 formdata.append("upload_file",document.getElementById("upload_file").files[0]); varxmlhttp; if(window.XMLHttpRequest){ xmlhttp=newXMLHttpRequest(); }else{ xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); }//為progress添加監(jiān)聽事件 xmlhttp.upload.addEventListener("progress",function(event){ if(putable){ varplete=Math.round(event.loaded*100/event.total); document.getElementById("pro_div").innerHTML=plete.toString()+"%"; //顯示上傳百分比 document.getElementById("progress").value=plete; } },false); xmlhttp.addEventListener("load",function(event){ document.write(event.target.responseText); },false); xmlhttp.addEventListener("error",function(event){ alert("上傳出現(xiàn)錯誤！"); },false); xmlhttp.addEventListener("abort",function(event){ alert("取消上傳！"); },false); xmlhttp.open("POST","upfile.php"); xmlhttp.send(formdata); }) })（3）處理上傳文件的服務端腳本upfile.php文件首先定義文件上傳路徑，之后判斷，如果臨時文件存在，那么進行上傳操作，如果上傳成功，返回文件路徑、文件名稱、文件類型、文件大小以及臨時文件組成的字符串，內容如下：<?php $dir=getcwd()."\\upload\\"; //定義上傳目錄

$path=$dir.$_FILES["upload_file"]["name"]; //定義上傳文件路徑

if(!is_dir($dir)){ //如果指定目錄不存在

mkdir($dir); //創(chuàng)建指定目錄

} if(file_exists($_FILES["upload_file"]["tmp_name"])){ move_uploaded_file($_FILES["upload_file"]["tmp_name"],$path);//上傳文件

echo"文件為：".$path."<br/>"; //文件路徑

echo"文件名稱：".$_FILES["upload_file"]["name"]."<br/>"; //文件名稱

echo"文件類型：".$_FILES["upload_file"]["type"]."<br/>"; //文件類型

echo"文件大?。?.$_FILES["upload_file"]["size"]."<br/>"; //文件大小

echo"臨時文件為：".$_FILES["upload_file"]["tmp_name"]."<br/>";//臨時文件

}else{ echo"上傳失敗！"; }?>在如圖11-2所示，選擇要上傳的文件，之后點擊上傳，可以看到如圖11-3所示的進度條。圖11-2選擇上傳文件

圖11-3顯示進度條

文件上傳完畢后會出現(xiàn)如圖11-4所示提示信息。圖11-4顯示上傳文件信息

注意：（1）上傳文件一定要設置enctype="multipary/form-data"，這是使用表單上傳文件的固定編碼格式，如果不設置這項，則服務端獲取不到文件信息。（2）如果客戶端和服務端網速很快的話，很難看到進度信息。因此為了明顯的看到上傳過程的進度信息，建議選擇一個較大的文件上傳。但是在PHP中，上傳較大文件需要修改PHP的配置文件php.ini的upload_max_filesize項，設置為足夠大。否則會上傳失敗。

11.2.2Canvas繪圖

Canvas元素是HTML5中新增的一個重要元素，專門用來繪制圖形。在頁面上放置一個canvas元素，就相當于在頁面上放置了一塊“畫布”，可以在其中進行圖形的描繪。但是，在canvas元素里進行繪畫，并不是指拿鼠標來作畫。在網頁上使用canvas元素時，它會創(chuàng)建一塊矩形區(qū)域。默認情況下該矩形區(qū)域寬為300像素，高為150像素，用戶可以自定義具體的大小或者設置canvas元素的其他特性。在頁面中加入了canvas元素后，我們便可以通過JavaScript來自由地控制它。可以在其中添加圖片、線條以及文字，也可以在里面繪圖設置，還可以加入高級動畫?？煞诺紿TML頁面中的最基本的canvas元素代碼如下所示。<canvasid=”xxx”height=”xx”width=”xx”></canvas>Canvas的元素的常用屬性如下：id：canvas元素的標識id。height：canvas畫布的高度，單位為像素。width：canvas畫布的寬度，單位為像素。<canvas></canvas>之間的字符串指定當前瀏覽器不支持Canvas時顯示的字符。說明：IE9以上的版本、Firefox、Opera、GoogleChrome和Safari支持Canvas元素。IE8及以前的版本不支持canvas元素。

jCanvas插件封裝了CanvasAPI，使Canvas繪圖變得更加簡單。jCanvas插件的腳本文件為jcanvas.min.js，其中jCanvas插件中主要繪圖方法如表11-3所示。

繪圖方法說明drawArc({strokeStyle：邊框顏色，strokeWidth：邊框寬度，x：圓弧的圓心的橫坐標，y：圓弧圓心的縱坐標，radius：圓弧半徑，start：圓弧的起始角度，end：圓弧的結束角度})繪制圓弧drawEllipse({fillStyle：填充顏色，x：圓心的橫坐標，y：圓心的縱坐標，width：寬度，height：高度})繪制橢圓drawRect({fillStyle：填充顏色，x：矩形左上角的橫坐標，y：矩形左上角的縱坐標，width：寬度，height：高度，fromCenter：是否從中心繪制})繪制矩形drawLine({fillStyle：填充顏色，x1：端點1的橫坐標，y1：端點1的縱坐標，x2：端點2的橫坐標，y2：端點2的縱坐標，x3：端點3的橫坐標，y3：端點3的縱坐標，x4：端點4的橫坐標，y4：端點4的縱坐標，strokeWidth：邊框寬度})繪制直線drawText({fillStyle：填充顏色，strokeStyle：邊框顏色，strokeWidth：邊框寬度，x：橫坐標，y：縱坐標，font：字體，text：文本字符串})繪制文本drawImage({source：圖片文件名，x：橫坐標，y：縱坐標，width：寬度，height：高度，scale：縮放比例，fromCenter：是否從中心繪制})繪制圖片Canvas采用HTML顏色表示法，可以使用如下4種方式表示。（1）顏色關鍵字可以使用顏色關鍵字來表示顏色，例如“red”表示紅色、“blue”表示藍色、“green”表示綠色等。（2）十六進制字符串可以使用一個十六進制字符串表示顏色，格式為#RGB。其中，R表示紅色集合，G表示綠色集合,B表示藍色集合。例如：#FFF表示白色，#000表示黑色。（3）RGB顏色值也可以使用rgb(r,g,b)格式表示顏色。其中r表示紅色集合，g表示綠色集合，b表示藍色集合。其中r、g、b都是十進制數(shù)，取值范圍是0-255。常用的RGB如表11-4所示。顏色紅色值綠色值藍色值RGB表示黑色000RGB(0,0,0)藍色00255RGB(0,0,255)紅色25500RGB(255,0,0)綠色02550RGB(0,255,0)黃色2552550RGB(255,255,0)白色255255255RGB(255,255,255)（4）RGBA顏色值指定顏色也可以使用rgba()的方法定義透明顏色，格式如下：

rgba(r,g,b,a,alpha)其中r表示紅色集合，g表示綠色集合，b表示藍色集合。r、g、b都是十進制數(shù)，取值范圍為0-255。Alpha的取值范圍為0-1，用來設置透明度，0表示完全透明，1表示不透明。【例11-2】

使用jcanvas插件繪制一個淺藍色的正方形（1）創(chuàng)建index.html，引入jquery文件和jCanvas插件文件，代碼如下：<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script><scripttype="text/javascript"src="../js/jcanvas.min.js"></script>（2）在頁面中添加<canvas>元素，具體代碼如下：<canvaswidth="300"height="200"></canvas>（3）編寫jQuery代碼，使用jCanvas插件的drawRect()方法實現(xiàn)繪制一個淺藍色的正方形，具體代碼如下：$(function(){ $("canvas").drawRect({ fillStyle:"lightblue", x:150,y:80, width:100, height:100 })})運行本實例，效果如圖11-5所示。

圖11-5繪制一個淺藍色的正方形11.2.3jQuery+HTML5實現(xiàn)圖片旋轉效果

在HTML4中要實現(xiàn)圖片的旋轉效果需要編寫大量的代碼，而在HTML5中，只需要在頁面中創(chuàng)建新增的<canvas>元素，通過導入jQuery庫調用該元素加載圖片的方法就可以輕松實現(xiàn)圖片的旋轉效果了。

【例11-3】

實現(xiàn)圖片旋轉效果（1）創(chuàng)建index.html，引入jquery文件和jquery.rotate.js文件，代碼如下：<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script><scripttype="text/javascript"src="../js/jquery.rotate.js"></script>（2）在頁面中添加待旋轉圖片的<img>元素，并添加一個<ul>元素，通過點擊該元素下的<li>元素實現(xiàn)各種旋轉，具體代碼如下：<divid="imgdiv"><divid="rimg"> <imgsrc="images/11.png"id="bimg"/></div><ul> <li>順時針旋轉90度</li> <li>逆時針旋轉90度</li> <li>旋轉180度</li> <li>旋轉270度</li></ul></div>（3）編寫CSS樣式，詳細請參見光盤。（4）編寫jQuery代碼，分別實現(xiàn)讓圖片順時針旋轉90度、逆時針旋轉90讀、旋轉180度和270度。具體代碼如下：$(document).ready(function(){ $("#imgdivulli").each(function(i){ //遍歷ul下的li元素

$(this).bind("click",function(){ //綁定單擊事件

switch(i){ case0: //第1個li元素

$("#bimg").rotate(90); //將id為bimg的元素順時針旋轉90度

break; case1: //第2個li元素

$("#bimg").rotate(-90); //將id為bimg的元素逆時針旋轉90度

break; case2: //第3個li元素

$("#bimg").rotate(180); //將id為bimg的元素旋轉180度

break; //第4個li元素

case3: $("#bimg").rotate(270); //將id為bimg的元素旋轉270度

break; } }) }) })（5）其中第（4）步中使用的rotate()方法來源于jquery.rotate.js文件，它通過接收用戶傳入的旋轉角度值，在頁面中動態(tài)創(chuàng)建一個canvas元素，并將頁面中的圖片旋轉指定角度，加載至canvas元素中。該文件的具體內容請參見光盤。

在如圖11-6所示頁面，單擊逆時針旋轉90度，效果如圖11-7所示。圖11-6原始圖像

圖11-7逆時針旋轉90度

之后再單擊旋轉270度，效果如圖11-8所示。圖11-8旋轉270度

11.2.4基于HTML5播放聲音的jQuery插件audioPlay

在HTML5出現(xiàn)以前，要在網頁中播放多媒體是需要借助flash插件的，因此瀏覽器需要安裝Flash插件。HTML5提供了新的標簽<audio>，可以很方便的在網頁中播放音頻文件，而不需要安裝插件?？梢允褂胊udioPlay插件的audioPlay()方法在鼠標經過一個HTML元素時自動播放指定的音頻文件，這個音頻文件可以是mp3文件或者ogg文件，方法的具體參數(shù)以及相關說明請參見表11-5參數(shù)默認值說明Name“audioPlay“字符串，用來分組，用在頁面上同時播放多組元素時urlMp3""字符串，必選參數(shù)。Mp3格式的音頻文件地址urlOgg""字符串，必選參數(shù)，ogg格式的音頻文件地址Clone""布爾型。同一組元素是否播放同一個聲源【例11-4】

使用audioPlay插件播放菜單的背景音樂（1）創(chuàng)建index.html，引入jquery文件和jquery-audioPlay.js文件，代碼如下：<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script><scripttype="text/javascript"src="../js/jquery-audioPlay.js"></script>（2）在頁面中制作導航菜單，具體代碼如下：<divid="top"></div><dl> <dt>員工管理</dt> <dd><divclass="item">添加員工信息</div><divclass="item">管理員工信息</div> </dd> <dt>招聘管理</dt> <dd><divclass="item">瀏覽應聘信息</div><divclass="item">添加應聘信息</div><divclass="item">瀏覽人才庫</div> </dd><dtclass="title"><ahref="#">退出系統(tǒng)</a></dt></dl><divid="bottom"></div>（3）編寫CSS樣式，詳細請參見光盤。（4）編寫jQuery代碼，使鼠標經過子菜單時播放指定的音頻文件，具體代碼如下：$(document).ready(function(){ $("dd").audioPlay({ name:"playOnce", urlMp3:"media/test.mp3", urlOgg:"media/test.ogg", clone:true })})運行本實例，當鼠標經過子菜單時，可以聽到音頻文件播放聲音。頁面運行效果如圖11-9所示。

圖11-9使用audioPlay插件播放菜單的背景音樂11.2.5WebStorage編程

Web應用的發(fā)展，使得客戶端存儲使用得也越來越多，而實現(xiàn)客戶端存儲的方式則是多種多樣。最簡單而且兼容性最佳的方案是cookies，但是作為真正的客戶端存儲，cookies還是有些不足：大?。篶ookies的大小被限制在4KB。帶寬：cookies是隨HTTP事物一起發(fā)送的，因此會浪費一部分發(fā)送cookies時使用的帶寬。復雜性：cookies操作起來比較麻煩；所有的信息要被拼到一個長字符串里面。對cookies來說，在相同的站點與多事務處理保持聯(lián)系不是很容易。在這種情況下，在HTML5中提供了一種在客戶端本地保存數(shù)據的功能，它就是WebStorage功能。WebStorage功能，就是在Web上存儲數(shù)據的功能，而這里的存儲，是針對客戶端本地而言的它包含兩種不同的存儲類型：SessionStorage和LocalStorage。不管是SessionStorage還是LocalStorage，它們都能支持在同域下存儲5MB數(shù)據，這相比cookies有著明顯的優(yōu)勢。1．sessionStorage將數(shù)據保存在session對象中。所謂session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是用戶瀏覽這個網站所花費的時間。Session對象可以用來保存在這段時間內所要求保存的任何數(shù)據。2．localStorage將數(shù)據保存在客戶端本地的硬件設備中，即使瀏覽器被關閉了，該數(shù)據仍然存在，下次打開瀏覽器訪問網站時仍然可以繼續(xù)使用。這兩種不同的存儲類型區(qū)別在于，sessionStorage為臨時保存，而localStorage為永久保存下面我們講解如何使用WebStorage的API。目前WebStorage的API有如下這些：length：獲得當前webstorage中的數(shù)目。key(n)：返回webstorage中的第N個存儲條目。getItem(key)：返回指定key的存儲內容，如果不存在則返回null。注意，返回的類型是String字符串類型。setItem(key,value)：設置指定key的內容的值為value。removeItem(key)：根據指定的key，刪除鍵值為key的內容。clear：清空webstorate的內容?？梢钥吹?，webstorageAPI的操作機制實際上是對鍵值對進行的操作。下面是一些相關的應用：數(shù)據的存儲與獲取在localStorage中設置鍵值對數(shù)據可以應用setItem()，代碼如下所示：

localStorage.setItem("key","value);獲取數(shù)據可以應用getItem()，代碼如下所示：

varval=localStorage.getItem("key");當然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下：

localStorage.key="value";

varval=localStorage.key;HTML5存儲是基于鍵值對（key/value）的形式存儲的，每個鍵值對稱為一個項（item）。存儲和檢索數(shù)據都是通過指定的鍵名，鍵名的類型是字符串類型。值可以是包括字符串、布爾值、整數(shù)，或者浮點數(shù)在內的任意JavaScript支持的類型。但是，最終數(shù)據是以字符串類型存儲的。調用結果是將字符串value設置到sessionStorage中，這些數(shù)據隨后可以通過鍵key獲取。調用setItem()時，如果指定的鍵名已經存在，那么新傳入的數(shù)據會覆蓋原先的數(shù)據。調用getItem()時，如果傳入的鍵名不存在，那么會返回null，而不會拋出異常。數(shù)據的刪除和清空removeItem()用于從Storage列表刪除數(shù)據，代碼如下：varval=localStorage.removeItem(key);也可以通過傳入數(shù)據項的key從而刪除對應的存儲數(shù)據，代碼如下：varval=localStorage.removeItem(1);說明：數(shù)字1會被轉換為string，因為key的類型就是字符串。

clear()方法用于清空整個列表的所有數(shù)據，代碼如下：

localStorage.clear();注意：removeItem可以清除給定的key所對應的項，如果key不存在則“什么都不做”；clear會清除所有的項，如果列表本來就是空的就“什么都不做”。

【例11-5】

使用localStorage保存留言內容（1）創(chuàng)建index.html，引入jquery文件，代碼如下：<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）使用<table>元素制作留言頁面，使表單中包含2個type="text"的<input>元素和1個<textarea>元素，分別用于錄入用戶名，標題和留言內容，具體代碼如下：tablewidth="761"border="0"align="center"cellpadding="0"cellspacing="0"bordercolor="#FEFEFE"bgcolor="#FFFFFF"><formaction=""method="post"name="form1"id="form1"><tr><tdwidth="761"align="center"bgcolor="#F9F8EF"><tablewidth="749"border="0"align="center"cellpadding="0"cellspacing="0"style="BORDER-COLLAPSE:collapse"><tr><tdwidth="749"height="57"background="images/a_03.jpg">  </td></tr><tr><tdheight="36"colspan="3"align="left"background="images/a_05.jpg"bgcolor="#F9F8EF"scope="col">        姓

名：

<inputname="username"id="username"value=""maxlength="64"type="text"/></td></tr><tr><tdheight="36"colspan="3"align="left"background="images/a_05.jpg"bgcolor="#F9F8EF">        標題：

<inputmaxlength="64"size="30"name="title"id="title"type="text"/></td>

</tr><tr><tdheight="126"colspan="3"align="left"background="images/a_05.jpg"bgcolor="#F9F8EF">        內

容：

<textareaname="content"cols="60"rows="8"id="content"style="background:url(./images/mrbccd.gif)"></textarea>

<tablewidth="734"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdwidth="703"height="40"align="center"><inputname="button"type="button"id="button"value="填寫留言"/></tr></table> </td></tr><tr><tdheight="35"background="images/a_07.jpg">  </td></tr></table> </td></tr></form></table>（3）編寫CSS樣式，詳細請參見光盤。（4）編寫jQuery代碼，當文本框和文本域的內容變化時觸發(fā)change事件，將文本框和文本域的值寫入localStorage中，加載頁面時判斷，如果localStorage存在，則讀取localStorage中數(shù)據并顯示在文本框和文本域中，具體代碼如下：$(document).ready(function(){ $("input[type=text],textarea").change(function(){//當文本框和文本域內容變化時//將當前元素的值寫入鍵值為當前元素name值的localStorage中

localStorage[$(this).attr("name")]=$(this).val(); }) if(localStorage){//如果存在localStorage if(localStorage.username){//如果localStorage中存在username的值//將用戶名的值設置為localStorage中username的值

$("#username").val(localStorage.username); } if(localStorage.title){//如果localStorage中存在title的值//將標題的值設置為localStorage中title的值

$("#title").val(localStorage.title); } if(localStorage.content){//如果localStorage中存在content的值//將留言內容設置為localStorage中content的值

$("#content").val(localStorage.content); } }})運行本實例，填寫用戶名、標題和留言內容，之后重新加載頁面，可以看到之前填寫的內容都被保存起來，頁面運行效果如圖11-10所示。圖11-10localStorage存儲11.3綜合實例：旅游信息網前臺頁面設計

旅游信息網是介紹關于長春旅游信息的網站，該網站主要包括主頁、自然風光頁、人文氣息頁、美食頁、旅游景點頁、名校簡介頁及留下足跡頁等頁面。旅游信息網由多個網頁構成，下面看一下旅游信息網中主要頁面的運行效果。說明：由于每個子頁面中的header部分和footer部分都是相同的，所以在瀏覽各個子頁面時主要演示其主體部分的運行效果。

網站預覽

首頁主要顯示旅游信息網的介紹及相關圖片，其運行效果如圖11-11所示。

圖11-11旅游信息網首頁自然風光頁面主要是介紹長春的一些自然風光，如地理位置、氣候等，運行效果如圖11-12所示。

圖11-12自然風光頁面

人文氣息頁面主要是對長春的體育事業(yè)和科學教育事業(yè)進行介紹，其運行效果如圖11-13所示。圖11-13人文氣息頁面

美食頁面主要是介紹長春的一些特色美食，其運行效果如圖11-14所示。圖11-14美食頁面

旅游景點頁面主要是介紹長春的一些旅游景點，其運行效果如圖11-15所示。圖11-15旅游景點頁面

名校簡介頁面主要是介紹長春的知名高等院校，其運行效果如圖11-16所示。圖11-16名校簡介頁面

留下足跡頁面主要是添加了一張gif格式的圖片，并在其下方載入一段音頻文件，當打開本頁面時，音頻文件會自動播放；另外，在該頁的右側欄添加了一張留言的表單，訪客可以在此留言，其運行效果如圖11-17所示。圖11-17留下足跡頁面網站主體結構設計

旅游信息網網頁的主體結構如圖11-18所示。圖11-18旅游信息網所有頁面主題結構圖

這些網頁中有幾個主要的HTML5結構，分別是：header元素、aside元素、section元素及footer元素。

HTML5結構元素的使用

在設計旅游信息網前臺頁面時，主要用到了HTML5的一些主體結構元素，分別是header結構元素、aside結構元素、section結構元素和footer結構元素，在大型的網站中，一個網頁通常都由這幾個結構元素組成，下面分別進行介紹。header結構元素：通常用來展示網站的標題、企業(yè)或公司的logo圖片、廣告（Flash等格式）、網站導航條等等。aside結構元素：通常用來展示與當前網頁或整個網站相關的一些輔助信息。例如，在博客網站中，可以用來顯示博主的文章列表和瀏覽者的評論信息等；在購物網站中，可以用來顯示商品清單、用戶信息、用戶購買歷史等；在企業(yè)網站中，可以用來顯示產品信息、企業(yè)聯(lián)系方式、友情鏈接等。Aside結構元素可以有很多種形式，其中最常見的形式是側邊欄。section結構元素：一個網頁中要顯示的主體內容通常被放置在section結構元素中，每個section結構元素都應該有一個標題來顯示當前展示的主要內容的標題信息。每個section結構元素中通常還應該包括一個或多個section元素或article元素，用來顯示網頁主體內容中每一個相對獨立的部分。footer結構元素：通常，每一個網頁中都具有footer結構元素，用來放置網站的版權聲明和備案信息等，也可以放置企業(yè)的聯(lián)系電話和傳真等聯(lián)系信息。在沒有加入任何實際內容之前，這些網頁的代碼的基本結構如下：<!DOCTYPEhtml><head><title>我愛長春</title><metacharset="utf-8"><linkrel="stylesheet"href="css/reset.css"type="text/css"media="all"><linkrel="stylesheet"href="css/grid.css"type="text/css"media="all"><linkrel="stylesheet"href="css/style.css"type="text/css"media="all"></head><body> <header></header> <sectionid="content"> <article></article> </section> <aside></aside> <footer></footer></body></html>說明：上面代碼中，頁面開頭使用了HTML5中的“<!DOCTYPEhtml>”語句來聲明頁面中將使用HTML5。在head標簽中，除了meta標簽中使用了更簡潔的編碼指定方式之外，其他代碼均與HTML4中的head標簽中的代碼完全一致。此頁面中使用了很多結構元素，用來替代HTML4中的div元素，因為div元素沒有任何語義性，而HTML5中推薦使用具有語義性的結構元素，這樣做的好處就是可以讓整個網頁結構更加清晰，瀏覽器、屏幕閱讀器以及其他閱讀此代碼的人也可以直接從這些元素上分析出網頁中什么位置放置了什么內容。網站公共部分設計

在本網站的網頁中，有兩個公共的部分，分別是header元素中的內容和footer元素中的內容這兩部分是本站每個網頁中都包含的內容，下面具體介紹一下這兩個公共部分的主要內容。1．設計網站headerheader元素是一個具有引導和導航作用的結構元素，很多企業(yè)網站中都有一個非常重要的header元素，一般位于網頁的開頭，用來顯示企業(yè)名稱、企業(yè)logo圖片、整個網站的導航條，以及flash形式的廣告條等。在本網站中，header元素中的內容包括：網站的logo圖片、網站的導航以及通過jQuery技術來循環(huán)顯示的特色圖片，同時還為這些圖片添加了說明性關鍵字。

header元素中的內容在瀏覽器中的顯示結果如圖11-19所示。圖11-19旅游信息網header元素在瀏覽器中的顯示網站公共部分的header元素的結構示意圖如圖11-20所示。圖11-20公共部分header元素的結構示意圖說明：關于CSS樣式不是本章講解的重點，因此省略了CSS樣式部分的代碼，讀者可參見光盤。

header元素中顯示網站名稱的代碼分析在div中存放網站的名稱及l(fā)ogo圖片，它在瀏覽器中的頁面顯示如圖11-21所示。圖11-21網站logo及名稱的顯示div元素主要是顯示頁面左邊的logo圖片，同時通過<h2></h2>顯示網站的名稱“我愛長春”，并通過<strong>屬性對“長春”兩個字進行了加粗。其實現(xiàn)的代碼如下：<divclass="logo"> <h2>我愛<strong>長春</strong></h2></div>header元素中nav元素的代碼分析Nav元素是一個可以用作頁面導航的連接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。Nav元素可以被放置在header元素中，作為整個網站的導航條來使用。Nav元素中可以存放列表或導航地圖，或其他任何可以放置一組超鏈接的元素。在本網站中，網站標題部分的nav元素中放置了一個導航地圖，如圖11-22所示。圖11-22應用nav元素實現(xiàn)的網站導航條Header元素中應用到的nav元素的代碼如下：<nav> <ul> <li><ahref="index.html"class="current">主頁</a></li> <li><ahref="index-1.html">自然風光</a></li> <li><ahref="index-2.html">人文氣息</a></li> <li><ahref="index-3.html">美食</a></li> <li><ahref="index-4.html">旅游景點</a></li> <li><ahref="index-5.html">名校簡介</a></li> <li><ahref="index-6.html">留下足跡</a></li> </ul></nav>header元素中顯示宣傳圖片代碼分析接下來，看一下在header元素中顯示宣傳圖片，這些宣傳圖片被放置在div元素中，該元素中放置3張圖片，并通過jQuery技術循環(huán)播放這3張圖片；同時，在宣傳圖片的右側顯示對應的說明性文字，這些文字的顯示時是以列表形式出現(xiàn)的。宣傳圖片在瀏覽器中顯示的結果如圖11-23所示圖11-23通過jQuery技術在header元素中實現(xiàn)圖片的循環(huán)播放實現(xiàn)的主要代碼如下：<divclass="rap"> <ahref="#"><imgsrc="images/big-img1.jpg"alt=""width="571"height="398"></a> <ahref="#"><imgsrc="images/big-img2.jpg"alt=""width="571"height="398"></a> <ahref="#"><imgsrc="images/big-img3.jpg"alt=""width="571"height="398"></a></div><ulclass="pagination"> <li> <ahref="#"rel="0"> <imgsrc="images/f_thumb1.png"alt=""> <spanclass="left">

北國風光<br/>

萬里雪飄<br/> </span> <spanclass="right">

堆雪人<br/>

溜爬犁<br/> </span> </a> </li> <li> <ahref="#"rel="1"> <imgsrc="images/f_thumb2.png"alt=""> <spanclass="left">

凈月潭<br/> 33568平方米<br/>

樟子松

</span> <spanclass="right">

夏避暑<br/>

秋賞葉<br/>

冬玩雪

</span> </a> </li> <li> <ahref="#"rel="2"> <imgsrc="images/f_thumb3.png"alt=""> <spanclass="left">

偽滿洲國<br/>

紅色旅游<br/>

跑馬場

</span> <spanclass="right">

中和門<br/>

同德殿<br/>

懷遠樓

</span>

</a> </li></ul>jQuery代碼如下：$(function(){ //fadedslider $("#faded").faded({ speed:500, autoplay:5000, autorestart:3000, autopagination:false });})本案例中實現(xiàn)圖片切換是使用jQuery的faded插件，其中faded()方法中的speed是設置從一張圖片切換到另一張圖片的速度；autoplay用來設置自動播放，5000毫秒切換一次圖片，如果設置為false則只能手動切換圖片；autopagination是用來設置是否自動添加分頁標記，本實例我們自己書寫了分頁的樣式，因此不需要該插件為我們自動添加分頁圖標。插件中的其他參數(shù)使用插件jquery.faded.js中的默認設置，具體設置為：$.fn.faded.defaults={ speed:300, crossfade:false, bigtarget:false, loading:false, autoheight:false, pagination:"pagination", autopagination:true, nextbtn:"next", prevbtn:"prev", loadingimg:false, autoplay:false, autorestart:false, random:false};2設計網站footerfooter元素專門用來顯示網站、網頁或內容區(qū)塊的腳注信息，在企業(yè)網站中的footer結構元素通常用來顯示版權聲明、備案信息、企業(yè)聯(lián)系電話及網站制作單位等內容。本實例中，網站頁面的footer元素在瀏覽器中的顯示結果如圖11-24所示。圖11-24通過footer元素實現(xiàn)的網站版權說明footer元素中的內容相對來說比較簡單，它存放了兩個div元素，其中上面的div元素僅有來設置footer的樣式的類名為container_16，第二個div元素中存放版權信息、公司地址、公司電話等。其實現(xiàn)的主要代碼如下：<footer> <divclass="container_16"> <divid="main"> ：<strong>吉林省明日科技有限公司</strong>    地址：長春市二道區(qū)東盛大街89號亞泰廣場C座2205室    電話： </div> </div></footer>

網站主頁設計1．網站介紹及相關圖片在HTML5網站中，每個網頁所展示的主體內容通常都存放在section結構元素中，而且通常帶有一個標題元素header。在主頁中，網站介紹及相關圖片的顯示結果如圖11-25所示。圖11-25網站介紹及相關圖片的顯示在主頁中，頁面主體section元素中顯示了長春的簡介，以及一些精美的圖片，其結構相對來說比較簡單，主要是通過article元素組成的。主頁中的section元素內容的代碼如下：<sectionid="mainContent"class="grid_10"> <article> <h2>長春歡迎你</h2> <h3>長春，吉林省省會...中國特大城市之一。</h3> <h4>長春地處東北平原中央，是東北地區(qū)天然地理中心，東北亞幾何中心，東北亞十字經濟走廊核心?？偯娣e20604平方公里。</h4> <p>新的長春，…都注定了長春必定輝煌！</p> <ahref="#"class="button">更多</a> </article> <articleclass="last"> <h2>魅力長春</h2> <h5>長春素有“汽車城”、“電影城”、“光電之城”“科技文化城”、“大學之城”、“森林城”、“雕塑城”的美譽，是中國汽車、電影、光學、生物制藥、軌道客車等行業(yè)的發(fā)源地。</h5> <ulclass="img-listclearfix"> <li><ahref="#"><imgsrc="images/thumb1.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb2.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb3.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb4.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb5.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb6.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb7.jpg"alt=""></a></li>

<li><ahref="#"><imgsrc="images/thumb8.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb9.jpg"alt=""></a></li> </ul> <ahref="#"class="button">更多</a> </article></section>第一個<article>顯示了關于長春的介紹性文字，其主要是通過標題文字標記的使用，來達到文字的層次效果。第二個<article>顯示了關于長春的榮譽稱號，并通過列表的形式來展示圖片，使頁面顯示效果更加美觀。2．左側導航的實現(xiàn)Aside元素用來顯示當前網頁主體內容之外的、與當前網頁顯示內容相關的一些輔助信息。例如，可以是一些關于網站的宣傳語，或者是網站管理者認為比較重要的信息。Aside元素的顯示形式可以是多種多樣的，其中最常用的形式是側邊欄的形式。在主頁中的aside元素內應用到兩個article元素，一個article元素用以顯示對長春一些特點的概述，當單擊這些概述的文字時，將以定義列表的形式，對這些概述的文字進行解釋；另外一個article元素顯示一張長春區(qū)域的地圖，并在圖片的下方對各區(qū)的名稱進行鏈接。

主頁左側導航在瀏覽器中的效果如圖11-26所示。

圖11-26主頁左側導航主頁中的aside元素的代碼如下：<asideclass="grid_6"> <divclass="prefix_1"> <article> <divclass="box"> <h2>長春美譽</h2> <dlclass="accordion"> <dt><imgsrc="images/icon1.gif"alt=""><ahref="#">汽車城</a></dt> <dd>中國第一汽車集團公司是中國最大的汽車工業(yè)科研生產基地，汽車產量占全國總產量的五分之一</dd> <dt><imgsrc="images/icon2.gif"alt=""><ahref="#">電影城</a></dt> <dd>長春電影制片廠是新中國電影事業(yè)的“搖籃”，為弘揚電影文化，長春市政府自九二年以來，每兩年舉辦一屆長春電影節(jié)，邀請國內外電影界知名人士和電影廠商匯聚長春，共創(chuàng)電影輝煌</dd> <dt><imgsrc="images/icon3.gif"alt=""><ahref="#">光電城<