11html5开发精要与实例详解

4个部分，读者既能根据步骤动手实践，又能重点学习案例中用到的理论知识，同时还能源代码的设计思路和方法；第二部分讲解了jWebSocket、RGraph、WebGL等3个重要框架和技术的详细使用方法。讲，HTML5Web开发标准的一次重要飞跃，它不仅能提供更加丰富、强大、而HTML5提供了对这些功能的原生支持。插件的方式存在很多问题：插件可以被禁用或（例如Apple的iPad就不支持Flash插件。应的HTML5，如<audio>和<>等各种，不需要任何插件，就可以像使用<img>一样方便地在页面内嵌入音频和。过去，网页中显示的图像来自于直接的GIF或JPG图像，而在HTML5中，图像可能发人员可以在JavaScript层针对动态数据进行计算后绘制出各种复杂的图形。另外，目前已经开发出一些针对HTML5的类似工具，这些工具将进一步提高Web开发人员驾驭图像的Web程序其实早就可以利用浏览器端的本地空间很多信息，比如IE允许最多300个，最多4096字节的内容。不过，要开发真正实用的Web应用，需要的存储空间。通过HTML5，可以实现这种需求。序都可以照常运行，因为之前已经从服务器上了HTML5应用的JavaScript代码，这部Web开发人员都知道，HTML5之前的HTML结构除了告诉浏览器HTML5中所谓的微格式（microformat）引入了一种新的机制，它在HTML中新增了一些专门的，以帮助程序员分析中数据的真实含Web应用。如果有一个好的、标准的置服务可以很好地解决这个问题。HTML5允许JavaScript询问浏览器用户的地理位置，比Fi，让Web更流HTML5中的 引起了很多Web开发人员的强烈，越来越多的开发人员开始学习并在实际工作中尝本书。希望本书能够为致力于利用HTML5Web应用的读者提供一些参考，使读者对HTML5有一个比较深入的了解，并能够在未来的互联网开发工作中充分运用这些知识。目前HTML5的应用在国内还处于初级阶段，市面上已经的相关几乎都以讲际案例的更是少之又少。HTML5的功能丰富而强大，掌握了它的基本功能并不代表能自如例为主，针对HTML5的每个重要知识点都设计了大型的案例，这些案例不仅实践性极强，HTML5HTML5开设Web设计相关课程的大专院校学生的作用。读者也可以向某些Web或Web应用程序添加一些调试代码，或者在源代码的HTML5API有一个比较深入的理解，进而更快地编写出属于自己的HTML5或Web应用程序。Chrome12.0、Safari5.0以及IE9.0）HTML5的支持情况。批评指正。笔者号码为，联系邮箱为 ，欢迎读者通过QQ或E-mail与笔者联系，期待得到读者的反馈。谨以此书献给众多热爱HTML5的朋友们，以及国内致力于Web及Web应用程序开发第1章用HTML5中的结构元素构 2WebHTML 第5章 第6章本地 78WebWorkers 11RGraph概述 绘 附录五大浏览器 1HTML5中的结构元素构建本章主要通过一个博客与一个企业的制作来向读者展示如何合理运用HTML中的各种结构元素，搭建出一个语义清晰、结构分明的Web3.0时代 HTML5中的各种结构元素来构建博客的案例，旨在通过该从而构建出与之相类似的、结构分明的、语义清晰的HTML5。在介绍具体案例之前，先概要介绍一下HTML5中的网页结构与HTML4中的网页结构的区别；HTML5HTML5与CSS .1案例知识点<h1>1HTML5的基础知识<h2>1.1HTML5概述<h3>1.1.1HTML5<h2>1.2HTML5快速入门<h3>1.2.1HTML1-2<div<h1>1HTML5的基础知识<div<h2>1.1HTML5概述<div<h3>1.1.1HTML5<div<div<h2>1.2HTML5快速入门<div<h3>1.2.1HTML.1案例知识点qsection例如，针对1-2中的代码，我们可以使用section元素进行页面文档结构的划1-3<h1>1HTML5的基础知识<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元素内，应该只有一个标题，如果有两个标题，则第二个标题会被隐式放入一个新的section元 内，如下面的代码所示，h2元 在article .1案例知识点headerheader的一个article元素或section元素的标题，也可以包含其他内容，例如数据表格、搜索表。3.HTML5页的大纲。因此，在组织这份大纲的时候，不能使用页的大纲。因此，在组织这份大纲的时候，不能使用div元素，因为div”1-4<!DOCTYPE（正文（正文（正文.1案例知识点 <!DOCTYPE1-21-2加入网页标题后的页面大纲和headerh1～h61-6<!DOCTYPE<title>企业<imgsrc="title.jpg"alt="用来显示企业名称的图图1- .1案例知识点 <h1><imgsrc="title.jpgalt="企业名称 HTML5 1-4header另外，在HTML5中，body元素、blockquote元素、fieldset元素、td元素、details独立的大纲，并且这些元素内的独立的大纲，并且这些元素内的section元素、article元素、标题元素(h1～h6元素)、nav.1案例知识点在代1-7中，blockquote元素内部有一个h1元素，正是因为这个h1元素是于blockquote元素内部的，所以在针对blockquote元素的父元素body生成页面大纲时<!DOCTYPE基础知识来搭建一个语义清晰、结构分明的HTMLHTML .2博客首页的实现1-7的1-81-91-9博客首页生成的大纲1-10（点击查看大图）（点击查看大图）1-101-111-11前面介绍过，header页面或页面内的一个article元素或section元素的标题。在博客首页中，一般将博客的标 nav1.1.2博客首页的实现1.1.2博客首页的实现<h1>HTML5Web开1-12博客首页的网页标题部分生成的大纲由1-12博客首页的网页标题部分生成的大纲由于该网页使用了一个header元素来显示网页标题，并且在header元素 h1元素，元素中的文字为“HTML5Web开 ”，因此整个大纲的标题为“1.HTML5开”。在header元素内部，使用nav元素来显示整的导，并且没给nav元素添加标题（在HTML5中，并不强求对nav元素添加标题），所以这个没有标题的nav元素在大纲中生成标题为“1.UntitledSection”的节。 1-8网页标题部分的代码<!DOCTYPE<title>HTML5Web开发<metacontent="" <metacontent=""<linkhref="main.css"type="text/css"<div<header<div<h1id="blogname">HTML5Web开发<div<nav<ul<a<a作为容器的div元素，以显示该网页的背景图，样式代码如下所示。div#blogdiv#blogbackground-position:50%width:6.}1.1.2博客首页的实现3.1-14 1-15侧边栏部分生成的大纲1-15侧边栏部分生成的大纲.2博客首页的实现由于没有对侧边栏添加标题（HTML5），而且侧边栏位于 在博主介绍栏目中，使用在博主介绍栏目中，使用figure元素来显示博主头像。在HTML5中，figurefigcaption元素表示figure元素的标题，它从属于figure元素，必须书写在元素内部，可以书写在figure元素内的其他从属元素的前面或后面。一个figure元素内最多允许放置一个figcaption元素，但允许放置多个其他元素。<imgsrc="images\tyl.jpg"alt="HTML5Web开发4.9.在在网友评论栏目中，使用time元素与pubdate属性来显示每篇评论 。在HTML中，time元素代表24小时中的某个时刻或某个日期，time元素的putdate属性代表了评论的发布日期和时间（关于figure元素与time元素的详细介绍，可以参阅笔者所著《HTML5 <timedatetime="2011-04-01T16:59"pubdate>04-014. 1-9博客首页的侧边栏部分的代<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>[]新浪网pubdate>03-31<div<div<ahref="#"<li<div<span>[]新浪网pubdate>03-31<div<div<ahref="#"<div.2博客首页的实现在这段代码中，第一行的id为“blogbody”的divmargin:3.“</div>idcolumn_1divid“blogbody”的div元素的结束。5.9.1-16 1.1.2博客首页的实现1.1.2博客首页的实现header3.分类”的节。这据据”，所以在大纲中分别生成标题为“1.HTML5中新增number元素的属性”、“2.HTML5使用step、“3.如何将元素与datetime-local元素应用在Web程序„”和“4.ASP.NETMVC3书店—第四节;”的四个节。另外，四个section元素中又各自有一个footer 分的section元素的结尾处又使用了一个footer元素，显示对文 列表进行分页。于footer元素中没有标题元素（h1～h6元素）用于生成大纲，所以在大纲中没有根据这些显示博客首页的主体内容部分的section1-10码<div<section<header<span<a<div<div<div<h1<ahref="#"">(2011-04-05<div<atarget="_blank"<div 设置和该元素中的数值。 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书店--第四节;"<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="跳转至第2"><a<lititle="跳转至第3"><a<lititle="跳转至第4"><a<liid="SG_pgnexttitle="跳转至第2页<ahref="#">下一页<liid="SG_pgttltitle="">4页<divid="connFoot4">.2博客首页的实现4.除了这个除了这个充当容器的div外，代码中的其他地方也使用了比较多的div元素来行的“</div这个结束标记，用于结束代码1-9中的id为“blogbodydiv 5.构 1-191-111-<footer<p>:HTML5Web开&;&;Copyright2005All .3文章显示页面的实现 显示的效果如图1-20所示。 1-201-211-221-221-24的section1-231.1.3文章显示页面的实现1.1.3文章显示页面的实现 素字为用了一个header元素。在这个header元 另外，在标题为“评论”的另外，在标题为“评论”的section元素中，使用了一个Iframe最后，通过代码1-12来了解显示文章内容与网友评论的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来作为我们的数据库引擎。EntityFrameworkcode-objectrelationalmap）作。<p>&;&;&;EntityFramework4支持一种被称ASP.NETMVC3时会同时自动被安装）来在本应用程序中添“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%"本节通过一个使用HTML5中各种结构元素构建企业的案例来讲述如何使用HTML5图1-26的首 HTML5的各种结构元素来搭建这个首图1-29首页的网页标题部该部分被放置在一个header元素中。在企业中，通常将企业名称、企业logo、整1-30.1首页的实现。<imgid="imglogo1src="images/logo.jpgalt="常州蓝博纺织机械h1 添加标题，因此生成“1.UntitledSection1-13网页标题部分的完整代码<!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元素内部，使用了ul列表来显示导航，为了避免在li列表项目元素的背景中使用的与之间存在裂痕，必须将前一个li元素的结束标记</li>li元素的开始标记<li>写在同一行中，书写成“</li><li>”的形式。另外，在样式代码中，需要使用如下的代码，使li列表项目元素的项目编号不显示，并且并排显示。li{list-}该侧边栏部分的结构图如图1-33所示。1-33nav元素，第二部分为该企业的联系信息。由于直接使用ul列表元素直接显示企业的联系1-34nav元素生成的大纲该侧边栏元素的内部代码如代码1-14所示。代码1- 、 .1首页的实现4.构建主体内容 <imgsrc="images/in_c2.gifid="section1_img1alt="公司动态<imgsrc="images/in_c3.gif"id="section2_img2"alt="<imgsrc="images/in_c4.gifid="section3_img3alt="推荐产 代码1- <section<div""<div<divid="div1"

<li2011年春节放假通知<li<li

<li2010纺织印染行业年会<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">&;& 先进节能环保技术,通过我们的不断努力,相继开发出印染污水热能<section<div""<div

<a<img

<a<img

<a<img

g"

<a<img.1首页的实现在article元素内部的第三个section元素中（“推荐产品”部分），使用了ul列表中嵌套ul列表的布局方式，外层ul列表中的li列表项目元素的排列方向为纵向排列，内层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.构建信5.构建信本部分代码相对来说比较简单，只需使用适当的div元素，然后在其中放入 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"本中其他几个主要页面的整体结构均与这个页面的整体结构大致相同，只不过本章通过利用HTML5制作的一个博客与一个企业，重点阐述了如何使用HTML5HTML5中的结构元素以及使用这些结构元素所制作出来的网页大纲有一个比较详细的了解，能够利用这些结构元素与网页大纲的知识制作出属于自己的HTML5。下一章将通过两个案例来阐述如何使用HTML5Web应用程正确获取用户在HTML5中新增表单元素中输入的内容并将其保存在数据库中。4：综HTML5、jQueryASP.NETWeb应用程序本章通过两个案例来介绍如何在Web表单中使用HTML5的新增结构元素和新增表单元HTML5HTML5、CSS3jQuery制作的比较典型的WebHTML5CSS3jQuery以及ASP.NET服务器端 中。该页面使用一个目前在Web 或Web应用广泛使用的、使用jQuery 案例3：用结构元素制作Web应用程序中的菜 单。该Web应用程序在浏览器中的总体效果如图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构建Web在本案例中，制作Web应用程序中的一个数据输入页面。该页面主要在企业内部的Web表单中输入一条数据，然后单击追加按钮，该数据将会在页面下2.2.2页面显示效果2.2.2页面显示效果（点击查看大图）2-52-8订单输入页面的结构图 （ 容进行验证，当验证没通过时给出具有悬浮效果的验证错误提示信息，如图2-9所示。jQuery验证插件，因此当用户提交表单时，会对表单中所有元素进行验证。当验证没有通过时，给出具有悬浮效果的验证错误提示信息，如“2.2.2页面显示效果”中的图2-6所示。规则的js文件，内置基本验证规则）（文件夹）\formValidator.2.1\css\validationEngine.jquery.css（验证插件所使用的样式$(function() 们为它添加了如下的class属性。<inputtype="text"id="tbxCode"name="tbxCode"maxlength="8" ]]] minSize：该元素中至少必须输入的字符数。maxSize：该元素中最多允许输入的字符数。min：该元素max：该元素中输入的数值必须小于等于指定数值。past：该元素中输入的执行ajax提交，验证用户名是否有效。ajax提交，验证用户名是否有效。可根据文件类型修改这个验证规则的验证名，例如，向asp文件执行ajax提交时，可改成ajaxUserCallAsp。ajaxNameCallPhpfileajax提件执行ajax提交时，可改成ajaxNameCallAsp。<inputtype="text"id="userName"name="userName"maxlength="20"/*file属性值为提交的文件，插件会提交三个参数："alertTextOk":"*Thisusernameisavailable","alertTextLoad":"*Loading,pleasewait","alertText":"*Thisusernameisalreadytaken"}，必须返回固定格式的json数据。提供的作为示例的php文件内容如代码2-代码2- /*$validateError="Thisusernameisalready/*==" // //echo //返回成功时的json}{ f($x==990000){echojson_encode($arrayToJs);//返回失败时的json}}}$(function()//inlineValidation:truesuccess:false,$(function()success:false,$(function()"success:false,由于从官方网站上下载的压缩包中的验证错误提示信息文件［在（文件夹）\加中文版的验证错误提示信息文件。笔者添加的中文版验证错误提示信息文件如代码2-5所示。代码2- {newLang:"required"regex":"alertText":"*必须输入内容","alertTextCheckboxMultiple"*必须选择一个选项","alertTextCheckboxe":"*必须为选取状态""regex":"alertText"*","alertText2":"个字符""regex":"alertText"*","alertText2":"个字符""regex":"alertText"*"max":"regex":"alertText"*"past":"regex":"alertText"*"future":"regex":"alertText"*{"alertText"*超出允许选取的项目个数{"alertText"*","alertText2":"个选项""equals":"regex":"alertText"*输入的内容不一致"phone":"alertText":"*请输入有效的"":{"alertText"*请输入有效的邮件地址"regex":/^[\-\+]?\d+$/,"alertText"*请输入一个整数""number":"alertText"*请输入一个数值"date":"ipv4":"url":"alertText":"*请输入一个有效的"{"regex":/^[0-9\]+$/,"alertText"*只能输入数字"regex":/^[a-zA-Z\\']+$/,"alertText"*只能输入字母""onlyLetterNumber":{"alertText"*只能输入数字或字母"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列表用于竖向布局，将内层的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函数，它们的功能是当数量文本框或单价文本框失去焦点时将金额文本框中的目前该页面中的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服务器端控件中，没有与之相对应的服务器端runat的属性值设为server的方法呢？<inputtype="date"id="tbxDate"name="tbxDate"maxlength="10" required<inputtype="numberid="tbxNumname="tbxNummaxlength="6value="0"class="validate[required,custom[integerplaceholder="必须输入一个整数值"<inputtype=""id="tbx"name="tbx"maxlength="20"runatserver，然后在浏览器中运行该页面，浏览器显示一个报错页面，如图2-10所示。值设为server后，ASP.NET服务器会将这几个元素视为服务器端控件，而在目前版本的ASP.NET中，是没有这几个服务器端控件的。<inputtype="date"id="tbxDate"name="tbxDate"maxlength="10"placeholder="必须输入一个有效的日期"required（点击查看大图（点击查看大图图2- 将HTML5中新增元素的runat属性值设为 {{}}图2-11所示。 stringSqlStr="insertintoorders";SqlStr+="values('";+//SqlStr语句中添加dateSqlStr+=SqlStr+="'"//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代码中，在装载页面时将表单中的各元素内容设为提交前保存在服务$(function()按钮以及对一览表执行某个动作后服务器端所应执行的处理，如表2-2所示。 <addname="dbConnection"connectionString="DataSource=lln\sqlexpress;providerName="System.Data.SqlClient"/>下面来看一下该页面完整的ASP.NET服务器端代码，如代码2-9所示。代码2-9 页面中完整的ASP.NET服务器端代码usingusingSystem.Linq;usingSystem.Web;usingSystem.Configuration;usingnamespaceHTML5TEST{publicpartialclassDefault:{privateSystem.Data.SqlClient.SqlConnectionSqlCon;privateSystem.Data.SqlClient.SqlDataAdapterDataAdapter;privateSystem.Dat mandCommand;privateintmyErrorNumber=0;//数据库返回的错误号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){}{}

//从数据库中所有订单数据，装入一览表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;//删除按钮变为单击状态this.btnClear.Enabled=false;//清除按钮变为单击状态this.btnAdd.Enabled=true;//追加按钮变为允许单击状态}{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;//订单编号文本框变为只读状态this.btnDelete.Enabledtrue;//删除按钮变为允许单击状态this.btnClear.Enabled=true;//清除按钮变为允许单击状态this.btnAdd.Enabled=false;//追加按钮变为单击状态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;//清除订单编号文本框中的内容this.btnUpdate.Enabled=false;//修改按钮变为单击状态this.btnDelete.Enabled=false;//删除按钮变为单击状态=}}{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;//订单编号文本框变为只读状态=this.btnClear.Enabledtrue;//清除按钮变为允许单击状态this.btnAdd.Enabledfalse;//追加按钮变为允许单击状态}}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变量来控制订单编号文本框的只读状态，当表单处于修改或删除数据状态时该变量为True，订单编号文本框为只读状态，当表单处于新<%{<%现在该页面的完整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本章小结本章首先通过一个利用HTML5中的结构元素制作Web应用程序中的菜单的案例来阐述HTML5的结构元素和表单元素、jQueryASP.NET制作HTML5Web用程序的案例来阐述如何使用HTML5中的结构元素搭建Web应用程序的框架结构，如何对下一章将通过一些案例来阐述如何HTML5canvas素与CanvasAPI在页面上绘制图形、图像及动画，以及如何利用CanvasAPIWeb页面上的小游戏。3canvas元素绘制图形、图像与动画案例7：使用canvas元素制作简单小游戏9：用动画的形式装载图像canvas元素在网页上进行图形、图像与动画绘制的案例，玫瑰线。当然，n值不同，绘制出的玫瑰线的形状也不相同。节将向读者介绍如何使用HTML5中的canvas元素的图形绘制功能，在网页中绘 荷花”选项，单击绘制按钮，页面显示效果如图3-3所示。 （点击查看大图）（点击查看大图）3-4canvasCanvasAPI中全部属性与方法的全面介绍，可以查看笔者所著的《HTML5与CSS3权canvas元素，并将其保存到某个变量中（canvas即在大多数程序中进行图形绘制时，都需要使用图形上下文（graphicscontext）对象。图形上canvas元素进行图形绘制时，需要使用canvas对象的getContext方法来获得图形上下文对象，方法如下所示。canvas元素进行图形或图像的绘制时，当需要对当前所绘制的图形或图像执行以下 该方法使用四个参数：x是指定的矩形区域起点的横坐标；y是指定的矩形区域起点的纵坐canvas画布的左上角，width是指定的矩形区域的长度，height是指定的矩因此在绘制前需要使用这个函数擦除之前利用canvas元素绘制好的图形。translate方法有两个参数，x表示将坐标轴原点向左移动多少个单位，默认单位为像素；y的绘制。使用图形上下文对象的beginPath方法开始路径的创建工作，代码如下所示。（style直线后，光标自动移动到lineTo方法的参数所指定的直线终点。或stroke方法（绘制图形边框）执行的。，代码剖析 案例页面的HTML5页面代码如代码3-1所示。代码3-1 案例页面的HTML5页面代码<script<select"代码3- 案例的完整JavaScript代码（左边的数字表示行号<scriptvar{varvarvarvarvar for(var{ {var{casecasecase 代码剖析 变量代表画面中canvas元素的图形上下文对象，A变量被用来控制花朵的半径长度（半径程式来计算半径长度。另外，在本案例中，n变量将被赋值为10，表示绘制20片花瓣。在代码中，从第331btn_onclick标单击绘制按钮时将调用该函数在canvas元素中进行花朵的绘制。从第5行开始到第9行结束的代码，定义了本函数中使用的变量。其中变量canvas代表案例页面中的canvas元素，变量width与height表示canvas元素的宽度与高度，Xo为canvas元素的宽度值的一半，Yo为canvas元素的高度值的一半，由这两个变量所构成的坐标点即为canvask代表用户在花类型选择框中所选项的value值，绘制蓬莱菊时该值为1，绘制令箭荷花时该值为2，绘制大丽花时该值为3。在第10行开始到第20行结束的代码中，分别取得了页面中的canvas元素并保存在变量canvas中，取得canvas元素的宽度与高度并保存在变量width与变量height中，取得kr=Asin(nBA前绘制的花朵擦除。在代码第23行中，将绘制图形的坐标原点移动到canvas元素 样才可能以canvas元素的中心点为花朵的中心点进行花朵绘制。从第24行开始到第30行结束的代码先创建图形路径，使方程式ASin(nB)中的另一个参数B在从0开始到2结束的范围内进行变动，每次将B增加0.01，并在变动过程中循环调用draw函数进行花朵绘制。在代码中，从第32行开始到第55行结束的代码为draw函数。当用户用鼠标单击绘制按钮后，该函数接受一个参数B，在btn_onclick函数中使方程式ASin(nB)中的另一个参数B在从0开始到2π结束的范围内进行变动，在这个变动过程中，会循环调用draw函数进行花朵绘制，并把每一个处于变动状态的参数Bdraw为10，表示绘制20片花瓣。接下来，在第35行到第45行代码中，根据用户所选择的花的类型，使用不同的方程式来计算花朵半径的长度。在第4748行代码中，将r*Math.cos(Br*Math.sin(B)计算式的计算结果分别保存在变量x与变量y中。在第50行到第54行代码中，在当前坐标点与（-x,-y）坐标点之间绘制一条直线，同时这样，通过不断变动参数B值来绘制直线，最终实现了花朵的绘制。canvas元素绘制图形动画的案例，该案例将绘制一个时钟，该时钟可1秒钟该时钟的秒针会自动更3-5canvasCanvasAPI的属性与方法之外，还使用了以下属性与CanvasAPI中，绘制半径与弧形时指定的参数为开始弧度与结束弧度，如果习惯使用角var可以直接使用canvasfontcanvas元素中绘制文字时context.fontbold16px宋体CanvasAPICanvasAPIcanvasmeasureText方法来得到某个指定measureText方法接受一个参数text，该参数为需要指定的字符串，该方法返回一个在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+