11html5開發(fā)精要與實例詳解

4個部分，讀者既能根據(jù)步驟動手實踐，又能重點學習案例中用到的理論知識，同時還能源代碼的設(shè)計思路和方法；第二部分講解了jWebSocket、RGraph、WebGL等3個重要框架和技術(shù)的詳細使用方法。講，HTML5Web開發(fā)標準的一次重要飛躍，它不僅能提供更加豐富、強大、而HTML5提供了對這些功能的原生支持。插件的方式存在很多問題：插件可以被禁用或（例如Apple的iPad就不支持Flash插件。應(yīng)的HTML5，如<audio>和<>等各種，不需要任何插件，就可以像使用<img>一樣方便地在頁面內(nèi)嵌入音頻和。過去，網(wǎng)頁中顯示的圖像來自于直接的GIF或JPG圖像，而在HTML5中，圖像可能發(fā)人員可以在JavaScript層針對動態(tài)數(shù)據(jù)進行計算后繪制出各種復(fù)雜的圖形。另外，目前已經(jīng)開發(fā)出一些針對HTML5的類似工具，這些工具將進一步提高Web開發(fā)人員駕馭圖像的Web程序其實早就可以利用瀏覽器端的本地空間很多信息，比如IE允許最多300個，最多4096字節(jié)的內(nèi)容。不過，要開發(fā)真正實用的Web應(yīng)用，需要的存儲空間。通過HTML5，可以實現(xiàn)這種需求。序都可以照常運行，因為之前已經(jīng)從服務(wù)器上了HTML5應(yīng)用的JavaScript代碼，這部Web開發(fā)人員都知道，HTML5之前的HTML結(jié)構(gòu)除了告訴瀏覽器HTML5中所謂的微格式（microformat）引入了一種新的機制，它在HTML中新增了一些專門的，以幫助程序員分析中數(shù)據(jù)的真實含Web應(yīng)用。如果有一個好的、標準的置服務(wù)可以很好地解決這個問題。HTML5允許JavaScript詢問瀏覽器用戶的地理位置，比Fi，讓Web更流HTML5中的 引起了很多Web開發(fā)人員的強烈，越來越多的開發(fā)人員開始學習并在實際工作中嘗本書。希望本書能夠為致力于利用HTML5Web應(yīng)用的讀者提供一些參考，使讀者對HTML5有一個比較深入的了解，并能夠在未來的互聯(lián)網(wǎng)開發(fā)工作中充分運用這些知識。目前HTML5的應(yīng)用在國內(nèi)還處于初級階段，市面上已經(jīng)的相關(guān)幾乎都以講際案例的更是少之又少。HTML5的功能豐富而強大，掌握了它的基本功能并不代表能自如例為主，針對HTML5的每個重要知識點都設(shè)計了大型的案例，這些案例不僅實踐性極強，HTML5HTML5開設(shè)Web設(shè)計相關(guān)課程的大專院校學生的作用。讀者也可以向某些Web或Web應(yīng)用程序添加一些調(diào)試代碼，或者在源代碼的HTML5API有一個比較深入的理解，進而更快地編寫出屬于自己的HTML5或Web應(yīng)用程序。Chrome12.0、Safari5.0以及IE9.0）HTML5的支持情況。批評指正。筆者號碼為，聯(lián)系郵箱為 ，歡迎讀者通過QQ或E-mail與筆者聯(lián)系，期待得到讀者的反饋。謹以此書獻給眾多熱愛HTML5的朋友們，以及國內(nèi)致力于Web及Web應(yīng)用程序開發(fā)第1章用HTML5中的結(jié)構(gòu)元素構(gòu) 2WebHTML 第5章 第6章本地 78WebWorkers 11RGraph概述 繪 附錄五大瀏覽器 1HTML5中的結(jié)構(gòu)元素構(gòu)建本章主要通過一個博客與一個企業(yè)的制作來向讀者展示如何合理運用HTML中的各種結(jié)構(gòu)元素，搭建出一個語義清晰、結(jié)構(gòu)分明的Web3.0時代 HTML5中的各種結(jié)構(gòu)元素來構(gòu)建博客的案例，旨在通過該從而構(gòu)建出與之相類似的、結(jié)構(gòu)分明的、語義清晰的HTML5。在介紹具體案例之前，先概要介紹一下HTML5中的網(wǎng)頁結(jié)構(gòu)與HTML4中的網(wǎng)頁結(jié)構(gòu)的區(qū)別；HTML5HTML5與CSS .1案例知識點<h1>1HTML5的基礎(chǔ)知識<h2>1.1HTML5概述<h3>1.1.1HTML5<h2>1.2HTML5快速入門<h3>1.2.1HTML1-2<div<h1>1HTML5的基礎(chǔ)知識<div<h2>1.1HTML5概述<div<h3>1.1.1HTML5<div<div<h2>1.2HTML5快速入門<div<h3>1.2.1HTML.1案例知識點qsection例如，針對1-2中的代碼，我們可以使用section元素進行頁面文檔結(jié)構(gòu)的劃1-3<h1>1HTML5的基礎(chǔ)知識<h2>1.1HTML5概述<h3>1.1.1HTML5<h2>1.2HTML5快速入門<h3>1.2.1HTML不要將section元素與div元 使用。當一個容器需要直接定義樣式或通定divsection廓工具HTML5的說明中有“untitledsection”（沒有標題的section）文字，這個section就可能屬于使用不當（nav元素或aside元素沒有標題是合理的）。在一個section元素或article元素內(nèi)，應(yīng)該只有一個標題，如果有兩個標題，則第二個標題會被隱式放入一個新的section元 內(nèi)，如下面的代碼所示，h2元 在article .1案例知識點headerheader的一個article元素或section元素的標題，也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表。3.HTML5頁的大綱。因此，在組織這份大綱的時候，不能使用頁的大綱。因此，在組織這份大綱的時候，不能使用div元素，因為div”1-4<!DOCTYPE（正文（正文（正文.1案例知識點 <!DOCTYPE1-21-2加入網(wǎng)頁標題后的頁面大綱和headerh1～h61-6<!DOCTYPE<title>企業(yè)<imgsrc="title.jpg"alt="用來顯示企業(yè)名稱的圖圖1- .1案例知識點 <h1><imgsrc="title.jpgalt="企業(yè)名稱 HTML5 1-4header另外，在HTML5中，body元素、blockquote元素、fieldset元素、td元素、details獨立的大綱，并且這些元素內(nèi)的獨立的大綱，并且這些元素內(nèi)的section元素、article元素、標題元素(h1～h6元素)、nav.1案例知識點在代1-7中，blockquote元素內(nèi)部有一個h1元素，正是因為這個h1元素是于blockquote元素內(nèi)部的，所以在針對blockquote元素的父元素body生成頁面大綱時<!DOCTYPE基礎(chǔ)知識來搭建一個語義清晰、結(jié)構(gòu)分明的HTMLHTML .2博客首頁的實現(xiàn)1-7的1-81-91-9博客首頁生成的大綱1-10（點擊查看大圖）（點擊查看大圖）1-101-111-11前面介紹過，header頁面或頁面內(nèi)的一個article元素或section元素的標題。在博客首頁中，一般將博客的標 nav1.1.2博客首頁的實現(xiàn)1.1.2博客首頁的實現(xiàn)<h1>HTML5Web開1-12博客首頁的網(wǎng)頁標題部分生成的大綱由1-12博客首頁的網(wǎng)頁標題部分生成的大綱由于該網(wǎng)頁使用了一個header元素來顯示網(wǎng)頁標題，并且在header元素 h1元素，元素中的文字為“HTML5Web開 ”，因此整個大綱的標題為“1.HTML5開”。在header元素內(nèi)部，使用nav元素來顯示整的導(dǎo)，并且沒給nav元素添加標題（在HTML5中，并不強求對nav元素添加標題），所以這個沒有標題的nav元素在大綱中生成標題為“1.UntitledSection”的節(jié)。 1-8網(wǎng)頁標題部分的代碼<!DOCTYPE<title>HTML5Web開發(fā)<metacontent="" <metacontent=""<linkhref="main.css"type="text/css"<div<header<div<h1id="blogname">HTML5Web開發(fā)<div<nav<ul<a<a作為容器的div元素，以顯示該網(wǎng)頁的背景圖，樣式代碼如下所示。div#blogdiv#blogbackground-position:50%width:6.}1.1.2博客首頁的實現(xiàn)3.1-14 1-15側(cè)邊欄部分生成的大綱1-15側(cè)邊欄部分生成的大綱.2博客首頁的實現(xiàn)由于沒有對側(cè)邊欄添加標題（HTML5），而且側(cè)邊欄位于 在博主介紹欄目中，使用在博主介紹欄目中，使用figure元素來顯示博主頭像。在HTML5中，figurefigcaption元素表示figure元素的標題，它從屬于figure元素，必須書寫在元素內(nèi)部，可以書寫在figure元素內(nèi)的其他從屬元素的前面或后面。一個figure元素內(nèi)最多允許放置一個figcaption元素，但允許放置多個其他元素。<imgsrc="images\tyl.jpg"alt="HTML5Web開發(fā)4.9.在在網(wǎng)友評論欄目中，使用time元素與pubdate屬性來顯示每篇評論 。在HTML中，time元素代表24小時中的某個時刻或某個日期，time元素的putdate屬性代表了評論的發(fā)布日期和時間（關(guān)于figure元素與time元素的詳細介紹，可以參閱筆者所著《HTML5 <timedatetime="2011-04-01T16:59"pubdate>04-014. 1-9博客首頁的側(cè)邊欄部分的代<div<div<section<header<div<imgsrc="images\html5.jpgalt="HTML5Web<div<a /product.aspx? ;ref=search-1-pub《HTML5與CSS3指南 <div<section<header<span<a<div<nav<li"<li<ahref="#"target="_blank">HTML<li<ahref="#"<li<ahref="#"<li<ahref="#"<div<section<header<div<nav<ul<li<div<span><ahref="#"target="_blank"pubdate>04-01<div<div<ahref="#" <li<div<span><ahref="#" <timedatetime="2011-03-"pubdate>03-31<div<div<ahref="#" 哈<li<div<span>[]新浪網(wǎng)pubdate>03-31<div<div<ahref="#"<li<div<span>[]新浪網(wǎng)pubdate>03-31<div<div<ahref="#"<div.2博客首頁的實現(xiàn)在這段代碼中，第一行的id為“blogbody”的divmargin:3.“</div>idcolumn_1divid“blogbody”的div元素的結(jié)束。5.9.1-16 1.1.2博客首頁的實現(xiàn)1.1.2博客首頁的實現(xiàn)header3.分類”的節(jié)。這據(jù)據(jù)”，所以在大綱中分別生成標題為“1.HTML5中新增number元素的屬性”、“2.HTML5使用step、“3.如何將元素與datetime-local元素應(yīng)用在Web程序?”和“4.ASP.NETMVC3書店—第四節(jié);”的四個節(jié)。另外，四個section元素中又各自有一個footer 分的section元素的結(jié)尾處又使用了一個footer元素，顯示對文 列表進行分頁。于footer元素中沒有標題元素（h1～h6元素）用于生成大綱，所以在大綱中沒有根據(jù)這些顯示博客首頁的主體內(nèi)容部分的section1-10碼<div<section<header<span<a<div<div<div<h1<ahref="#"">(2011-04-05<div<atarget="_blank"<div 設(shè)置和該元素中的數(shù)值。 number <footer<div<ahref="#"target="_blank">閱讀 <atarget="_blankhref="#">評論 <ahref="javascript:;"onclick="return <div<span<div<h1<ahref="#"">(2011-04-04<div<atarget="_blank"<div<footer<div<atarget="_blankhref="#">評論<ahref="javascript:;"onclick="returnfa<div<spanid="smore2"><ahref="#"target="_bl<div<h1<ahref="#""

<timedatetime="2011-04-04T00:25"pubdat(2011-04-04<div<atarget="_blank"<div <footer <div <atarget="_blankhref="#">評論 <ahref="javascript:;"onclick="returnfa<div<span<div<h1<ahref="#" ;MVC3書店--第四節(jié);"<div"店<div ; SQL EntityFrameworkcode-<footer<div<ahreftarget="_blank">閱讀<atarget="_blankhref>評論<ahref="javascript:;"onclick="returnfal<div<spanid="smore4"><ahref="#"target="_bla<footer<ul<liid="SG_pgontitle="當前所在頁<lititle="跳轉(zhuǎn)至第2"><a<lititle="跳轉(zhuǎn)至第3"><a<lititle="跳轉(zhuǎn)至第4"><a<liid="SG_pgnexttitle="跳轉(zhuǎn)至第2頁<ahref="#">下一頁<liid="SG_pgttltitle="">4頁<divid="connFoot4">.2博客首頁的實現(xiàn)4.除了這個除了這個充當容器的div外，代碼中的其他地方也使用了比較多的div元素來行的“</div這個結(jié)束標記，用于結(jié)束代碼1-9中的id為“blogbodydiv 5.構(gòu) 1-191-111-<footer<p>:HTML5Web開&;&;Copyright2005All .3文章顯示頁面的實現(xiàn) 顯示的效果如圖1-20所示。 1-201-211-221-221-24的section1-231.1.3文章顯示頁面的實現(xiàn)1.1.3文章顯示頁面的實現(xiàn) 素字為用了一個header元素。在這個header元 另外，在標題為“評論”的另外，在標題為“評論”的section元素中，使用了一個Iframe最后，通過代碼1-12來了解顯示文章內(nèi)容與網(wǎng)友評論的section<div<section<header<span <ahref="javascript:;"onclick="window.CateDialog.showreturn<div<article<div<h1<ahref="#""

<imgtitle="此博文包含<timedatetime="2011-04-05T18:30" (2011-04-05<div<atarget="_blank"<divSQLServerExpress來作為我們的數(shù)據(jù)庫引擎。EntityFrameworkcode-objectrelationalmap）作。<p>&;&;&;EntityFramework4支持一種被稱ASP.NETMVC3時會同時自動被安裝）來在本應(yīng)用程序中添“LibraryManager"子菜單下的“AddLibraryPackageReference"菜單選項,<div<div<ahreftarget="_blank">閱<atarget="_blankhref="#">評論<ahref="javascript:;"onclick="returnfalse;<div <div <ul<li<div友<span2011-03-26<div->Library&;<li<div<span<ahref="#"<span2011-03-27<div<li<div友 <span 2011-03-31 <div { <div<span<p <li<div友 <span 2011-04-01 <div <div<span<li<div<span<ahref="#"<span2011-04-01 <div ;= ; <div<span2011-04-01 過程<div <iframem.jsp"width="90%"本節(jié)通過一個使用HTML5中各種結(jié)構(gòu)元素構(gòu)建企業(yè)的案例來講述如何使用HTML5圖1-26的首 HTML5的各種結(jié)構(gòu)元素來搭建這個首圖1-29首頁的網(wǎng)頁標題部該部分被放置在一個header元素中。在企業(yè)中，通常將企業(yè)名稱、企業(yè)logo、整1-30.1首頁的實現(xiàn)。<imgid="imglogo1src="images/logo.jpgalt="常州藍博紡織機械h1 添加標題，因此生成“1.UntitledSection1-13網(wǎng)頁標題部分的完整代碼<!DOCTYPE<metacharset=utf-8<linkhref="main.css"type="text/css"<header<div<div<imgid="imglogo1"<div<divid="TopRight"><imgid="imglogo2"<map<areashape="rect"coords="32,5,93,21"<areashape="rect"coords="103,3,167,22"alt="常州藍博紡織機械"<ul<ahref="index.asp"><img</li><li><imgid="img_old1"src="images//<a></li><li><imgid="img_old2"src="images//<ahref="product.asp"><img

</li><li><imgid="img_old3"src="images//<ahref="news.asp"><img

</li><li><imgid="img_old4"src="images//<ahref="download.asp"><img

</li><li><imgid="img_old5"src="images//<ahref="gbook.asp"><img</li><li><imgid="img_old6"src="images//_13.jpg<ahref="contact.asp"><img

</li><li><imgid="img_old7"src="images//<a "><img</li><li><imgid="img_old8"src="images//_17.jpg<div<divid="Bottom1"><img<div /pub/shockwave/width="900"height="200"<paramname="movie"<paramname="quality"<paramname=wmode<embed<divid="Bottom2"><img 在這段代碼中，在nav元素內(nèi)部，使用了ul列表來顯示導(dǎo)航，為了避免在li列表項目元素的背景中使用的與之間存在裂痕，必須將前一個li元素的結(jié)束標記</li>li元素的開始標記<li>寫在同一行中，書寫成“</li><li>”的形式。另外，在樣式代碼中，需要使用如下的代碼，使li列表項目元素的項目編號不顯示，并且并排顯示。li{list-}該側(cè)邊欄部分的結(jié)構(gòu)圖如圖1-33所示。1-33nav元素，第二部分為該企業(yè)的聯(lián)系信息。由于直接使用ul列表元素直接顯示企業(yè)的聯(lián)系1-34nav元素生成的大綱該側(cè)邊欄元素的內(nèi)部代碼如代碼1-14所示。代碼1- 、 .1首頁的實現(xiàn)4.構(gòu)建主體內(nèi)容 <imgsrc="images/in_c2.gifid="section1_img1alt="公司動態(tài)<imgsrc="images/in_c3.gif"id="section2_img2"alt="<imgsrc="images/in_c4.gifid="section3_img3alt="推薦產(chǎn) 代碼1- <section<div""<div<divid="div1"

<li2011年春節(jié)放假通知<li<li

<li2010紡織印染行業(yè)年會<li <li

<li<ahref="newsinfo.asp?id=42"class="path"><li <li

<li<li <li

<li<li <li<div <section<div<div<divid="div3"

<li <liid="li7">&;& 先進節(jié)能環(huán)保技術(shù),通過我們的不斷努力,相繼開發(fā)出印染污水熱能<section<div""<div

<a<img

<a<img

<a<img

g"

<a<img.1首頁的實現(xiàn)在article元素內(nèi)部的第三個section元素中（“推薦產(chǎn)品”部分），使用了ul列表中嵌套ul列表的布局方式，外層ul列表中的li列表項目元素的排列方向為縱向排列，內(nèi)層font-weight:font-size:color:line-height:font-family宋體9.article#mainsectiondisplay:-moz-display:-webkit-15.section#section3#bottomdiv3{display:-moz-display:-webkit--moz-box-align:24.section#section3#bottomdiv329.section#section3#bottomdiv3ul32.section#section3#bottomdiv3ullidisplay:-moz-display:-webkit-39.section#section3#bottomdiv3ulliul42.5.構(gòu)建信5.構(gòu)建信本部分代碼相對來說比較簡單，只需使用適當?shù)膁iv元素，然后在其中放入 1-40的1-<articleid="main"<header><h1>您的位置：首頁>>們<divid="top"><imgid="img3"<divid="left"><imgid="img4"<div <li<imgid="img_1"<li><imgid="img_line1"<imgid="img_2"&;<li><imgid="img_line2"生<li><imgid="img_line3"<imgid="img_4"&;<li><imgid="img_line4"<imgid="img_5"<li><imgid="img_line5"本中其他幾個主要頁面的整體結(jié)構(gòu)均與這個頁面的整體結(jié)構(gòu)大致相同，只不過本章通過利用HTML5制作的一個博客與一個企業(yè)，重點闡述了如何使用HTML5HTML5中的結(jié)構(gòu)元素以及使用這些結(jié)構(gòu)元素所制作出來的網(wǎng)頁大綱有一個比較詳細的了解，能夠利用這些結(jié)構(gòu)元素與網(wǎng)頁大綱的知識制作出屬于自己的HTML5。下一章將通過兩個案例來闡述如何使用HTML5Web應(yīng)用程正確獲取用戶在HTML5中新增表單元素中輸入的內(nèi)容并將其保存在數(shù)據(jù)庫中。4：綜HTML5、jQueryASP.NETWeb應(yīng)用程序本章通過兩個案例來介紹如何在Web表單中使用HTML5的新增結(jié)構(gòu)元素和新增表單元HTML5HTML5、CSS3jQuery制作的比較典型的WebHTML5CSS3jQuery以及ASP.NET服務(wù)器端 中。該頁面使用一個目前在Web 或Web應(yīng)用廣泛使用的、使用jQuery 案例3：用結(jié)構(gòu)元素制作Web應(yīng)用程序中的菜 單。該Web應(yīng)用程序在瀏覽器中的總體效果如圖2-1所示。2-32-4所示，再次單擊該主菜單項時其子菜單項會被隱藏。些菜單視為一個組，并將其放置在nav元素中。在nav元素中，再由ul列表元素及其li列表項目元素來具體顯示每一個菜單項。代碼2-1菜單頁面的HTML5代<body<nav<li

<a <a

<a

<a <a <a .2代碼剖析2-2菜單頁面所使用的樣式代碼<stylebody58.navul63.navulli68.navul72.navulliul76.ulliulfont-size:color:text-align:}ulliullifont-size:color:89.90.2-3菜單頁面中使用到的function{}function{}function{}4：綜合運用HTML5、jQueryASP.NET構(gòu)建Web在本案例中，制作Web應(yīng)用程序中的一個數(shù)據(jù)輸入頁面。該頁面主要在企業(yè)內(nèi)部的Web表單中輸入一條數(shù)據(jù)，然后單擊追加按鈕，該數(shù)據(jù)將會在頁面下2.2.2頁面顯示效果2.2.2頁面顯示效果（點擊查看大圖）2-52-8訂單輸入頁面的結(jié)構(gòu)圖 （ 容進行驗證，當驗證沒通過時給出具有懸浮效果的驗證錯誤提示信息，如圖2-9所示。jQuery驗證插件，因此當用戶提交表單時，會對表單中所有元素進行驗證。當驗證沒有通過時，給出具有懸浮效果的驗證錯誤提示信息，如“2.2.2頁面顯示效果”中的圖2-6所示。規(guī)則的js文件，內(nèi)置基本驗證規(guī)則）（文件夾）\formValidator.2.1\css\validationEngine.jquery.css（驗證插件所使用的樣式$(function() 們?yōu)樗砑恿巳缦碌腸lass屬性。<inputtype="text"id="tbxCode"name="tbxCode"maxlength="8" ]]] minSize：該元素中至少必須輸入的字符數(shù)。maxSize：該元素中最多允許輸入的字符數(shù)。min：該元素max：該元素中輸入的數(shù)值必須小于等于指定數(shù)值。past：該元素中輸入的執(zhí)行ajax提交，驗證用戶名是否有效。ajax提交，驗證用戶名是否有效?？筛鶕?jù)文件類型修改這個驗證規(guī)則的驗證名，例如，向asp文件執(zhí)行ajax提交時，可改成ajaxUserCallAsp。ajaxNameCallPhpfileajax提件執(zhí)行ajax提交時，可改成ajaxNameCallAsp。<inputtype="text"id="userName"name="userName"maxlength="20"/*file屬性值為提交的文件，插件會提交三個參數(shù)："alertTextOk":"*Thisusernameisavailable","alertTextLoad":"*Loading,pleasewait","alertText":"*Thisusernameisalreadytaken"}，必須返回固定格式的json數(shù)據(jù)。提供的作為示例的php文件內(nèi)容如代碼2-代碼2- /*$validateError="Thisusernameisalready/*==" // //echo //返回成功時的json}{ f($x==990000){echojson_encode($arrayToJs);//返回失敗時的json}}}$(function()//inlineValidation:truesuccess:false,$(function()success:false,$(function()"success:false,由于從官方網(wǎng)站上下載的壓縮包中的驗證錯誤提示信息文件［在（文件夾）\加中文版的驗證錯誤提示信息文件。筆者添加的中文版驗證錯誤提示信息文件如代碼2-5所示。代碼2- {newLang:"required"regex":"alertText":"*必須輸入內(nèi)容","alertTextCheckboxMultiple"*必須選擇一個選項","alertTextCheckboxe":"*必須為選取狀態(tài)""regex":"alertText"*","alertText2":"個字符""regex":"alertText"*","alertText2":"個字符""regex":"alertText"*"max":"regex":"alertText"*"past":"regex":"alertText"*"future":"regex":"alertText"*{"alertText"*超出允許選取的項目個數(shù){"alertText"*","alertText2":"個選項""equals":"regex":"alertText"*輸入的內(nèi)容不一致"phone":"alertText":"*請輸入有效的"":{"alertText"*請輸入有效的郵件地址"regex":/^[\-\+]?\d+$/,"alertText"*請輸入一個整數(shù)""number":"alertText"*請輸入一個數(shù)值"date":"ipv4":"url":"alertText":"*請輸入一個有效的"{"regex":/^[0-9\]+$/,"alertText"*只能輸入數(shù)字"regex":/^[a-zA-Z\\']+$/,"alertText"*只能輸入字母""onlyLetterNumber":{"alertText"*只能輸入數(shù)字或字母"url":"ajaxValidateFieldUser","extraData":"name=eric","alertText"*用戶名已被使用","alertTextLoad"*正在驗證，請稍候"extraData":"name=eric","alertTextOk":"*用戶名有效","alertText":"**用戶名已被使用","alertTextLoad"*正在驗證，請稍候""url":"ajaxValidateFieldName","alertText":"*這個名字已被使用","alertTextOk":"*這個名字可以使用","alertTextLoad"*正在驗證，請稍候""alertText":"*這個名字已被使用","alertTextLoad":"*正在驗證，請稍候""alertText":"*請輸入}}.4代碼剖析1.HTML5HTML5HTML5section2-1頁面中所有控件的信息該頁面中的HTML5頁面代碼如代碼2-6所示代碼2- 頁面中的HTML5頁面代<%@PageTitle="訂單信息Language="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="HTML5TEST.Default"%><body<form

<li<inputtype="text"id="tbxCode"name="tbxCode" <li<inputtype="date"id="tbxDate"name="tbxDate" <li<li<inputtype="text" <li<label<li <li<li<inputtype="number"id="tbxNum"name="tbxNum"maxlength="6"value="0"<li<li<inputtype="textid="tbxPricename="tbxPrice"maxlength="6"value="0"

<li<label<li <li<li<inputtype="text"id="tbxName"<li<labelfor="tbx"><li"<inputtype=""id="tbx"name="tbxmaxlength="20"class="validate[optional,custom[ "

<div <asp:ButtonID="btnAdd" <asp:ButtonID="btnUpdate" <asp:ButtonID="btnDelete" <asp:ButtonID="btnClear" runat="serverText="清除"Enabled=false<divPageSize="10" <asp:BoundColumnDataField="orderDate"<asp:BoundColumnDataField="goodsCode" Text="編輯"/><PagerStyleHorizontalAlign="Right"Width="100%"橫向布局，每行顯示三個label與三個TextBox文本框，外層的ul列表用于豎向布局，將內(nèi)層的ul列表進行豎向排列。這兩個ul列表的樣式代碼如下所示。display:-moz-box;}ullidisplay:-moz-box;}}liHTML代碼，表單中所有放置標liid都是以“titleliid<li<inputtype="text"name="tbxCode"id="tbxCode"maxlength="8"font-size:12px;color:}}}}font-size:12px;width:68px;height:20px;cursor:hand; color:white;}font-size:12px;width:68px;height:20px;cursor:hand; color:white;}}nth-child(even)選擇器與nth-child(odd)選擇器分別控制一覽表中nth-child(1)選擇器單獨控制標題行的背景div#infoTabletabletr:nth-color:} tabletr:nth-color:} tabletr:nth-child(1){background-} child(1){width:15%;}代碼2- body{}}}}

margin-left:0px;display:-moz-box;ullidisplay:-moz-box;}font-size:14px;font-weight:bold;}font-size:12px;color:}}color:}width:95%;border-top-color:#426C7C;border-right-color:#CCCCCC;border-left-color:#426C7C;border-width:1px;height:18px;}}}}}}}}}font-size:12px;width:68px;height:20px;cursor:hand; color:white;}}divfont-size:12px;text-align:center;}divtablecolor:#FFFFFF;}divtable}div#infoTabletabletr:nth-color:} tabletr:nth-color:} tabletr:nth-child(1){background-} child(1){width:15%;} <inputtype="text"id="tbxCode"name="tbxCode"maxlength="8" <inputtype="date"id="tbxDate"name="tbxDate"maxlength="10" <inputtype="text" class="validate[required]"placeholder="必須輸入商品編號" <inputtype="number"id="tbxNum"name="tbxNum"maxlength="6"value="0"<inputtype="text"id="tbxPrice"name="tbxPrice"maxlength="6"value="0"<inputtype=""id="tbx"name="tbx"maxlength="20"的JavaScript函數(shù)，它們的功能是當數(shù)量文本框或單價文本框失去焦點時將金額文本框中的目前該頁面中的JavaScript代碼如代碼2-8所示。代碼2-8 頁面中的JavaScript代碼type="text/css"media="screen"/><scriptsrc="Scripts/jquery.va $(function()varnum=parseInt($("#tbxNum").val());varprice=parseFloat($("#tbxPrice").val());if(isNaN(num*price)

varnum=parseInt($("#tbxNum").val());varprice=parseFloat($("#tbxPrice").val());if(isNaN(num*price))

<inputtype="date"id="tbxDate"name="tbxDate"maxlength="10" <inputtype="number"id="tbxNum"name="tbxNum"maxlength="6"value="0"<inputtype=""id="tbx"name="tbx"maxlength="20" 對于這些元素，在目前版本的ASP.NET服務(wù)器端控件中，沒有與之相對應(yīng)的服務(wù)器端runat的屬性值設(shè)為server的方法呢？<inputtype="date"id="tbxDate"name="tbxDate"maxlength="10" required<inputtype="numberid="tbxNumname="tbxNummaxlength="6value="0"class="validate[required,custom[integerplaceholder="必須輸入一個整數(shù)值"<inputtype=""id="tbx"name="tbx"maxlength="20"runatserver，然后在瀏覽器中運行該頁面，瀏覽器顯示一個報錯頁面，如圖2-10所示。值設(shè)為server后，ASP.NET服務(wù)器會將這幾個元素視為服務(wù)器端控件，而在目前版本的ASP.NET中，是沒有這幾個服務(wù)器端控件的。<inputtype="date"id="tbxDate"name="tbxDate"maxlength="10"placeholder="必須輸入一個有效的日期"required（點擊查看大圖（點擊查看大圖圖2- 將HTML5中新增元素的runat屬性值設(shè)為 {{}}圖2-11所示。 stringSqlStr="insertintoorders";SqlStr+="values('";+//SqlStr語句中添加dateSqlStr+=SqlStr+="'"http://SqlStr語句中添加numberSqlStr+=Request.Form["tbxPrice"].ToString()+",";SqlStr+="'"+//向SqlStr語句中添加元素的輸入SqlStr+=SuccessFlag=此外還有一點需要補充，因為頁面中各文本框控件均直接使用了客戶端元素（input元素，publicpartialclassDefault:{publicstringCode;publicstringdate;publicstringGoodsCode;publicstringbrandName;publicstringnum="0";publicstringprice="0";publicstringmoney="0";publicstringName;publicstring{if{this.Code=Request.Form["tbxCode"].ToString();this.date=Request.Form["tbxDate"].ToString();this.GoodsCode=Request.Form["tbxGoodsCode"].ToString();this.brandName=Request.Form["tbxBrandName"].ToString();this.num=Request.Form["tbxNum"].ToString();this.price=doubletemp=double.Parse(this.num)*double.Parse(this.price);this.money=Math.Round(temp,2).ToString();this.Name=Request.Form["tbxName"].ToString();this.=Request.Form["tbx"].ToString();}}} 然后在JavaScript代碼中，在裝載頁面時將表單中的各元素內(nèi)容設(shè)為提交前保存在服務(wù)$(function()按鈕以及對一覽表執(zhí)行某個動作后服務(wù)器端所應(yīng)執(zhí)行的處理，如表2-2所示。 <addname="dbConnection"connectionString="DataSource=lln\sqlexpress;providerName="System.Data.SqlClient"/>下面來看一下該頁面完整的ASP.NET服務(wù)器端代碼，如代碼2-9所示。代碼2-9 頁面中完整的ASP.NET服務(wù)器端代碼usingusingSystem.Linq;usingSystem.Web;usingSystem.Configuration;usingnamespaceHTML5TEST{publicpartialclassDefault:{privateSystem.Data.SqlClient.SqlConnectionSqlCon;privateSystem.Data.SqlClient.SqlDataAdapterDataAdapter;privateSystem.Dat mandCommand;privateintmyErrorNumber=0;//數(shù)據(jù)庫返回的錯誤號publicstringCode;publicstringpublicstringGoodsCode;publicstringbrandName;publicstringnum="0";publicstringprice="0";publicstringmoney="0";publicstringName;public publicboolcodeRead=false;{this.SqlCon=newSystem.Data.SqlClient.SqlConnection();this.SqlCon.ConnectionString=Constr;if(SuccessFlag==false){}{}

//從數(shù)據(jù)庫中所有訂單數(shù)據(jù)，裝入一覽表this.datatable.DataSourceCreateDataSource();if{this.Code=Request.Form["tbxCode"].ToString();this.date=Request.Form["tbxDate"].ToString();this.GoodsCode=Request.Form["tbxGoodsCode"].ToString();this.brandName=Request.Form["tbxBrandName"].ToString();this.num=Request.Form["tbxNum"].ToString();this.price=doubletemp;this.money=Math.Round(temp,2).ToString(); }}{this.datatable.SelectedIndex=-1;this.btnDelete.Enabled=false;//刪除按鈕變?yōu)閱螕魻顟B(tài)this.btnClear.Enabled=false;//清除按鈕變?yōu)閱螕魻顟B(tài)this.btnAdd.Enabled=true;//追加按鈕變?yōu)樵试S單擊狀態(tài)}{DataSetds;SqlStr="selectcount(*)countfromorderswhere+strFormat(Request.Form["tbxCode"].ToString())+"'";ds=this.GetDataFromDB(SqlStr);if(ds=={}{}SqlStr="insertintoorders";SqlStr+="values('"+strFormat(Request.Form["tbxCode"].ToString())+"',";SqlStr+="'"+Request.Form["tbxDate"].ToString()+"',";SqlStr+=SqlStr+="'"SqlStr+=Request.Form["tbxNum"].ToString()+",";SqlStr+=Request.Form["tbxPrice"].ToString()+",";SqlStr+="'"SqlStr+="'"+strFormat(Request.Form["tbx SuccessFlag=this.ExecSingleSql(SqlStr);{}{this.codeRead=true;//訂單編號文本框變?yōu)橹蛔x狀態(tài)this.btnDelete.Enabledtrue;//刪除按鈕變?yōu)樵试S單擊狀態(tài)this.btnClear.Enabled=true;//清除按鈕變?yōu)樵试S單擊狀態(tài)this.btnAdd.Enabled=false;//追加按鈕變?yōu)閱螕魻顟B(tài)this.datatable.DataSourceCreateDataSource();}}{stringSqlStr="updateorders";SqlStr+="goodsCode='"+strFormat(Request.Form["tbxGoodsCode"].ToString())+"',";SqlStr+="brandName='"+strFormat(Request.Form["tbxBrandName"].ToString())+"',";SqlStr+="num="+Request.Form["tbxNum"].ToString()+",";SqlStr+="price="+Request.Form["tbxPrice"].ToString()+",";SqlStr+=" + SqlStr+="+strFormat(Request.Form["tbx SqlStr+="wherecode='"+strFormat(Request.Form["tbxCode"].ToString())+"'";SuccessFlag=this.ExecSingleSql(SqlStr);{}{=this.datatable.DataSourceCreateDataSource();}}{stringSqlStr;SqlStr="deletefromorders";SqlStr+="wherecode='"+strFormat(Request.Form["tbxCode"].ToString())+"'";SuccessFlag=this.ExecSingleSql(SqlStr);{}{=this.datatable.SelectedIndex=-1;this.Code=string.Empty;//清除訂單編號文本框中的內(nèi)容this.btnUpdate.Enabled=false;//修改按鈕變?yōu)閱螕魻顟B(tài)this.btnDelete.Enabled=false;//刪除按鈕變?yōu)閱螕魻顟B(tài)=}}{this.codeRead=true;}protectedvoid mandEventArgse){if mandName=={this.Code=e.Item.Cells[0].Text;this.date=e.Item.Cells[1].Text;if(e.Item.Cells[3].Text=="")this.brandName=this.brandName=this.num=e.Item.Cells[4].Text;doublenum=double.Parse(this.num);doublepricedouble.Parse(this.price);doubletemp=num*price;this.money=Math.Round(temp,2).ToString();if(e.Item.Cells[7].Text=="") Name=this.Name=this.="";this.=this.codeRead=true;//訂單編號文本框變?yōu)橹蛔x狀態(tài)=this.btnClear.Enabledtrue;//清除按鈕變?yōu)樵试S單擊狀態(tài)this.btnAdd.Enabledfalse;//追加按鈕變?yōu)樵试S單擊狀態(tài)}}protectedvoiddatatable_PageIndexChanged(objectsource,DataGridPageChangedEventArgse){this.datatable.CurrentPageIndex=e.Ne this.datatable.DataSource=CreateDataSource();}privatevoiddataInit(){this.date=string.Empty;this.brandName=string.Empty;this.num="0";this.price=this.money= this.=}privatebool{{}

returntrue;{this.myErrorNumber=e.Number;returnfalse;}catch(Exception{this.myErrorMessage=e.Message;returnfalse;}}{stringstrErrMsg;strErrMsg=this.myErrorNumber+":"+strErrMsg="<scriptlanguage='JavaScript'>alert('"+strErrMsg+}{DataSetds;DataTabledt=newDataTable();DataRowdr;doubledt.Columns.Add(newD olumn("code"));dt.Columns.Add(newD olumn("orderDate"));dt.Columns.Add(newD olumn("goodsCode"));dt.Columns.Add(newD olumn("brandName"));dt.Columns.Add(newD olumn("num"));dt.Columns.Add(newD olumn("price"));dt.Columns.Add(newD olumn("money"));dt.Columns.Add(newD dt.Columns.Add(newD olumn(""));SqlStr="select*fromordersorderbycode";ds=this.GetDataFromDB(SqlStr);if(ds=={dv=null;dt=null;return}for(inti=0;i<ds.Tables[0].Rows.Count;{dr=dr[0]=dr[2]=ds.Tables[0].Rows[i]["goodsCode"].ToString();dr[3]=dr[4]=dr[5]=temp=dr[6]=Math.Round(temp,2).ToString();dr[8]=ds.Tables[0].Rows[i][" }dv=newDataView(dt);returndv;}{{ds=newthis.DataAdapter=newSqlDataAdapter(SqlStr,returnds;}{this.myErrorNumber=e.Number;returnnull;}catch(Exception{this.myErrorMessage=e.Message;returnnull;}}{{}

mand=new returntrue;{this.myErrorNumber=e.Number;returnfalse;}catch(Exception{this.myErrorMessage=e.Message;returnfalse;}}{return}}}} codeRead變量來控制訂單編號文本框的只讀狀態(tài)，當表單處于修改或刪除數(shù)據(jù)狀態(tài)時該變量為True，訂單編號文本框為只讀狀態(tài)，當表單處于新<%{<%現(xiàn)在該頁面的完整JavaScript代碼如代碼2-10所示。代碼2-10頁面的完整JavaScript代碼type="text/css"media="screen"/><scriptsrc="Scripts/jquery.va $(function()<%{<%varnum=parseInt($("#tbxNum").val());if(isNaN(num*price))

$("#tbxMoney").val(Math.round(num*price*100,0)/varnum=parseInt($("#tbxNum").val());if

$("#tbxMoney").val(Math.round(num*price*100,0)/2.3本章小結(jié)本章首先通過一個利用HTML5中的結(jié)構(gòu)元素制作Web應(yīng)用程序中的菜單的案例來闡述HTML5的結(jié)構(gòu)元素和表單元素、jQueryASP.NET制作HTML5Web用程序的案例來闡述如何使用HTML5中的結(jié)構(gòu)元素搭建Web應(yīng)用程序的框架結(jié)構(gòu)，如何對下一章將通過一些案例來闡述如何HTML5canvas素與CanvasAPI在頁面上繪制圖形、圖像及動畫，以及如何利用CanvasAPIWeb頁面上的小游戲。3canvas元素繪制圖形、圖像與動畫案例7：使用canvas元素制作簡單小游戲9：用動畫的形式裝載圖像canvas元素在網(wǎng)頁上進行圖形、圖像與動畫繪制的案例，玫瑰線。當然，n值不同，繪制出的玫瑰線的形狀也不相同。節(jié)將向讀者介紹如何使用HTML5中的canvas元素的圖形繪制功能，在網(wǎng)頁中繪 荷花”選項，單擊繪制按鈕，頁面顯示效果如圖3-3所示。 （點擊查看大圖）（點擊查看大圖）3-4canvasCanvasAPI中全部屬性與方法的全面介紹，可以查看筆者所著的《HTML5與CSS3權(quán)canvas元素，并將其保存到某個變量中（canvas即在大多數(shù)程序中進行圖形繪制時，都需要使用圖形上下文（graphicscontext）對象。圖形上canvas元素進行圖形繪制時，需要使用canvas對象的getContext方法來獲得圖形上下文對象，方法如下所示。canvas元素進行圖形或圖像的繪制時，當需要對當前所繪制的圖形或圖像執(zhí)行以下 該方法使用四個參數(shù)：x是指定的矩形區(qū)域起點的橫坐標；y是指定的矩形區(qū)域起點的縱坐canvas畫布的左上角，width是指定的矩形區(qū)域的長度，height是指定的矩因此在繪制前需要使用這個函數(shù)擦除之前利用canvas元素繪制好的圖形。translate方法有兩個參數(shù)，x表示將坐標軸原點向左移動多少個單位，默認單位為像素；y的繪制。使用圖形上下文對象的beginPath方法開始路徑的創(chuàng)建工作，代碼如下所示。（style直線后，光標自動移動到lineTo方法的參數(shù)所指定的直線終點?；騭troke方法（繪制圖形邊框）執(zhí)行的。，代碼剖析 案例頁面的HTML5頁面代碼如代碼3-1所示。代碼3-1 案例頁面的HTML5頁面代碼<script<select"代碼3- 案例的完整JavaScript代碼（左邊的數(shù)字表示行號<scriptvar{varvarvarvarvar for(var{ {var{casecasecase 代碼剖析 變量代表畫面中canvas元素的圖形上下文對象，A變量被用來控制花朵的半徑長度（半徑程式來計算半徑長度。另外，在本案例中，n變量將被賦值為10，表示繪制20片花瓣。在代碼中，從第331btn_onclick標單擊繪制按鈕時將調(diào)用該函數(shù)在canvas元素中進行花朵的繪制。從第5行開始到第9行結(jié)束的代碼，定義了本函數(shù)中使用的變量。其中變量canvas代表案例頁面中的canvas元素，變量width與height表示canvas元素的寬度與高度，Xo為canvas元素的寬度值的一半，Yo為canvas元素的高度值的一半，由這兩個變量所構(gòu)成的坐標點即為canvask代表用戶在花類型選擇框中所選項的value值，繪制蓬萊菊時該值為1，繪制令箭荷花時該值為2，繪制大麗花時該值為3。在第10行開始到第20行結(jié)束的代碼中，分別取得了頁面中的canvas元素并保存在變量canvas中，取得canvas元素的寬度與高度并保存在變量width與變量height中，取得kr=Asin(nBA前繪制的花朵擦除。在代碼第23行中，將繪制圖形的坐標原點移動到canvas元素 樣才可能以canvas元素的中心點為花朵的中心點進行花朵繪制。從第24行開始到第30行結(jié)束的代碼先創(chuàng)建圖形路徑，使方程式ASin(nB)中的另一個參數(shù)B在從0開始到2結(jié)束的范圍內(nèi)進行變動，每次將B增加0.01，并在變動過程中循環(huán)調(diào)用draw函數(shù)進行花朵繪制。在代碼中，從第32行開始到第55行結(jié)束的代碼為draw函數(shù)。當用戶用鼠標單擊繪制按鈕后，該函數(shù)接受一個參數(shù)B，在btn_onclick函數(shù)中使方程式ASin(nB)中的另一個參數(shù)B在從0開始到2π結(jié)束的范圍內(nèi)進行變動，在這個變動過程中，會循環(huán)調(diào)用draw函數(shù)進行花朵繪制，并把每一個處于變動狀態(tài)的參數(shù)Bdraw為10，表示繪制20片花瓣。接下來，在第35行到第45行代碼中，根據(jù)用戶所選擇的花的類型，使用不同的方程式來計算花朵半徑的長度。在第4748行代碼中，將r*Math.cos(Br*Math.sin(B)計算式的計算結(jié)果分別保存在變量x與變量y中。在第50行到第54行代碼中，在當前坐標點與（-x,-y）坐標點之間繪制一條直線，同時這樣，通過不斷變動參數(shù)B值來繪制直線，最終實現(xiàn)了花朵的繪制。canvas元素繪制圖形動畫的案例，該案例將繪制一個時鐘，該時鐘可1秒鐘該時鐘的秒針會自動更3-5canvasCanvasAPI的屬性與方法之外，還使用了以下屬性與CanvasAPI中，繪制半徑與弧形時指定的參數(shù)為開始弧度與結(jié)束弧度，如果習慣使用角var可以直接使用canvasfontcanvas元素中繪制文字時context.fontbold16px宋體CanvasAPICanvasAPIcanvasmeasureText方法來得到某個指定measureText方法接受一個參數(shù)text，該參數(shù)為需要指定的字符串，該方法返回一個在CanvasAPI中,canvas元素的圖形上下文對象的fillText方法或strokeText方法來繪制文字。其中fillText方法以填充方式繪制字符串，代碼如下所示。divdivh1元素，在canvasdivcanvas元素進行樣式的指定。該案例的HTML頁面代碼與樣式代碼如代碼3-3所示。代碼3- <script??代碼稍后介紹display:-moz-box;-webkit-box-pack:center;}}<body<div><h1>使用canvas元素繪制指針式動畫時鐘 代碼3- 案例的完整的JavaScript代<scriptvarvar{ {varradius=Math.min(canvas.width/2,canvas.height/2)-varvarvarr=radius-context.fontbold16px宋體Drawtext('1',centerx+(0.5*r),centery-(0.88*Drawtext('2',centerx+(0.866*r),centery-(0.5*Drawtext('3',centerx+radius-Drawtext('4',centerx+(0.866*r),centery+(0.5*Drawtext('5',centerx+(0.5*r),centery+(0.866*Drawtext('6',centerx,centery+Drawtext('7',centerx-(0.5*r),centery+(0.866*Drawtext('8',centerx-(0.866*r),centery+(0.49*Drawtext('9',centerx-radius+10,Drawtext('10',centerx-(0.866*r),centery-(0.50*Drawtext('11',centerx-(0.51*r),centery-(0.88*vardate=newvarh=varm=varvara=((h/12)*Math.PI*2)-1.57+