作者：韩旭,高飞,孙桂杰
出版社：信息技术第二出版分社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5程序开发范例宝典(附光盘)试读：
前言
前些年，笔者参加了一个项目的开发工作，项目要求时间很紧，开发团队几乎是挑灯夜战。当时关于HTML的开发资料很少，网络也不发达，常常为了解决一个问题，大家连续奋战几天、十几天，甚至几十天。之后，笔者又参加了多个项目的开发工作。在开发过程中深刻地感觉到：编程是一门创造性较强的活动，因其涉及面广，开发者往往需要学习、研究各方面的技术和问题；编程水平的提高与开发时间成正比，需要长时间经验的积累和磨炼；编程是一项需要相互学习、相互交流的工作，在交流过程中，不但可分享他人的编程经验、体会，更会产生新的灵感，达到事半功倍的效果。
总之，项目开发从来不是一件容易的事，即使是非常有经验的开发人员，也经常会遇到一些技术难题。要成为一名合格的程序员，就必须不断吸取和借鉴其他开发者的成功经验。通过阅读别人编写的程序，从中吸取编程思想的精华，这也是学习程序设计最好的方法。
本书内容
本书精选了383个典型实例，所选实例覆盖了项目开发中的热点问题和关键问题。全书按实际应用进行分类，可以使读者在短时间内掌握更多有用的技术，快速提高编程水平。本书所选内容均来源于实际项目的开发，有的实例是作者开发实践的积累，有的实例来源于公司的开发项目，还有的来自读者的问题。通过对这些实例进行详细分析和讲解，可以让读者迅速掌握Web程序设计的开发经验和技巧，迅速提高程序设计的综合水平。
全书分为16章，涵盖了HTML网页布局、HTML基本元素、HTML基本元素、表单的使用、列表的使用、超链接、表格应用、图形图像处理、文字及图片特效、多媒体应用、文件与拖放、Web API 与通信API、Web Workers 处理线程、离线应用和地理位置定位、RGraph 插件制作统计图、HTML游戏开发等方面内容。
在实例讲解上，全书采用了统一的编排方式，每个实例都包括“实例说明”、“技术要点”、“实现过程”和“举一反三”4个部分。在“实例说明”中，以图文结合的方式给出了实例的功能说明及运行效果。在“技术要点”中给出了实例的重点、难点技术和相关编程技巧。在“实现过程”中介绍了该实例的设计过程和主要程序代码。在“举一反三”中给出了相关实例的扩展应用。
本书特色
● 所有实例内容都以解决开发人员在编程中遇到的实际问题和开发中应该掌握的技术为中心，每个实例都可以解决某一方面的问题，有的可以解决工作中的难题，有的可以提高工作效率，有的可以提升工作价值。
● 所选实例都具有极强的扩展性，能够给读者以启发，使读者举一反三，开发出非常实用的软件。
● 所选实例都具有代表性，所有实例都提供了源代码，方便读者使用。
本书的约定
书中每个实例的标题栏都给出了程序的特色和所在光盘中的路径，读者可根据需要学习和使用。
书中可能有多个实例用到了同一主要技术，为节省篇幅，相关技术的讲解只在一个实例中介绍。
因篇幅限制，书中有些实例只给出了关键代码，其他代码参见光盘中实例的源程序。
使用本书实例光盘前，请仔细阅读光盘中的“光盘使用说明”。
本书的服务
本书由明日科技组织编写，参加编写的有张鑫、辛洪郁、王小科、王国辉、周佳星、赛奎春、高春艳、杨丽、刘佳、刘丽艳、刘红艳、宋晶、孙雨婷等。由于编者水平有限，书中错漏之处在所难免，请广大读者批评指正。
如果读者在使用本书时遇到问题，可以访问明日科技网站，我们将通过该网站为读者全面提供网上服务和支持。对于读者使用本书时遇到的问题，我们将在5个工作日内回复。
服务网站：www.mingribook.com
服务信箱：mingrisoft@mingrisoft.com
服务电话：4006751066作者2014年11月第1章HTML网页布局1.1页面背景和布局实例001 统一站内网页风格
这是一个提高基础技能的实例
实例位置：光盘\mingrisoft\01\001
实例说明
虽说个性突出的网站能吸引用户的眼球，但是如果将一个网站的每个页面都制作得花花绿绿，就会给人很“晕”的感觉，所以在设计网站时，一定要在突出个性的同时，统一风格。本实例将介绍如何在设计网站时，应用CSS样式统一网站风格。运行结果如图1.1所示。图1.1 统一站内网页风格
技术要点
本实例主要应用CSS样式的字体属性、颜色属性、边框属性实现，下面对这些属性进行详细的介绍。（1）字体属性
字体属性主要包括字体综合设置、字体名称、字体大小、字体风格、字体加粗、字体英文大小写转换等，如表1.1所示。表1.1 字体属性（2）颜色和背景属性
CSS的颜色属性允许设计者指定页面元素的颜色，背景属性用于指定页面的背景颜色或者背景图像的属性。颜色和背景属性如表1.2所示。表1.2 颜色和背景属性（3）边框属性
边框属性用于设置一个元素边框的宽度、样式和颜色。边框属性如表1.3所示。表1.3 边框属性
下面对边框样式的值进行详细的说明，如表1.4所示。表1.4 边框样式属性值续表
注意：CSS 样式中的 td{ font-size: 9pt;}表示应用于页面中所有的
实现过程（1）利用标记，引用CSS样式文件。代码如下：
（2）CSS样式表文件的代码如下：
td{
font-size: 9pt; color:#3c7796;
}
a:hover {
font-size: 9pt; color:#FFC000;
}
a{
font-size: 9pt; text-decoration: none; color:#0000FF;
}
.btn_grey{
font-family:"宋体"; font-size: 9pt;color: #333333;
background-color: #eeeeee;cursor:hand;padding:1px;height:19px;
border-top: 1pxsolid #FFFFFF;border-right:1px solid #666666;
border-bottom: 1pxsolid #666666;border-left: 1px solid#FFFFFF;
}
input{
font-family:"宋体";
font-size: 9pt;
color:#333333;
border: 1px solid #999999;
}
.tableBorder {
background-color:#f 7f 7f 7; border: #dedede1px solid; width:750px
}
-->（3）在页面布局的表格中利用class来调用CSS文件中的样式。代码如下：
空车信息→车辆信息发布
请不要重复发布信息，如果重复发布信息，
系统将把重复的信息删除，而且将拒绝用户发布信息48小时。
举一反三
根据本实例，读者可以进行以下操作。
统一网站的背景图片及背景颜色。
保持网站标志性元素的一致性。实例002 网页换肤
本实例是一个实用的程序
实例位置：光盘\mingrisoft\01\002
实例说明
在Internet 上很多网页都具有换肤功能。所谓网页换肤就是指用户可以根据自己的喜好选择页面的风格，例如 Go 购电子商城首页中的网页换肤功能。运行本实例，单击“[秋叶飘香/经典]”超级链接，整个页面将以橘黄色系为主，如图 1.2 所示。单击“[灰色畅想/舒畅]”超级链接，整个页面将以灰色系为主，如图1.3所示。图1.2“秋叶飘香”风格的页面图1.3“灰色畅想”风格的页面
技术要点
本实例主要应用样式表对象的href属性实现。通过样式表对象的href属性可以很方便地改变网页中应用的外部样式表文件，具体代码如下：
document.getElementById("myCss").href="css1.css";
参数说明：
● myCss：外部样式表对象的id，用于指定外部样式表对象。
● css1.css：外部样式表文件名。
实现过程（1）定义 CSS 样式。由于应用外部 CSS 样式表文件可以很方便地修改网页的整体风格，所以为了动态改变网页的整体风格，可以根据需要将各种风格的样式定义为单独的外部样式表文件。本实例中共定义了两个外部样式表文件，分别是“css1.css”（“秋叶飘香”风格）和“css.css”（“灰色畅想”风格），详细代码请参见本书附带的光盘。（2）在页面中引用外部样式表文件css1.css，并将其id属性设置为myCss，代码如下：
（4）编写自定义函数 readCookie ()，用于从 Cookie 中读取使用的外部样式文件名。ReadCookie()函数只有一个用于指定Cookie 名称的参数，无返回值，代码如下：
（5）编写自定义的函数ifCookie()，用于初始化页面风格，关键代码如下：
（6）编写自定义的函数change()，用于改变页面的整体风格，关键代码如下：
（7）在
标记的 onLoad 事件中调用ifCookie()方法初始化页面风格，关键代码如下：自选风格：
举一反三
根据本实例，读者可以进行以下操作。
统一改变网页文字的大小。
改变图片的显示样式。实例003 制作渐变背景
这是一个提高基础技能的实例
实例位置：光盘\mingrisoft\01\003
实例说明
在浏览网页时，经常会看见页面背景的渐变效果，它可以使页面更加美观。本实例将通过CSS样式来设置页面的渐变效果。运行结果如图1.4所示。图1.4 制作渐变背景
技术要点
本实例主要应用CSS样式的Alpha滤镜实现。
Alpha滤镜的语法格式：
{filter：Alpha(Opacity=value，Finishopacity=value，Style=value，Startx=value，Starty=value，Finishx=value，Finishy=value)}
参数说明：
● Opacity：代表透明水准。默认的范围是0～100，0 代表完全透明，100 代表完全不透明。
● Finishopacity：一个可选参数。设置渐变的透明效果时，就用这个参数来指定结束时的透明度，范围是0～100。
● Style：指定透明区域的形状特征，0 代表统一形状，1 代表线形，2 代表放射状，3 代表长方形。
● Startx：渐变透明效果的开始x 坐标。
● Starty：渐变透明效果的开始y 坐标。
● Finishx：渐变透明效果的结束x 坐标。
● Finishy：渐变透明效果的结束y 坐标。
功能：设置透明层次。Alpha属性是把一个目标元素与背景混合。可以通过指定数值来控制。
实现过程
定义使页面背景渐变的CSS样式。代码如下：
body{
background:blue;/*设置页面的背景颜色*/
filter:Alpha(Opacity=20,Finishopacity=80,Style=3,Startx=100,Starty=100,Finishx=0,Finishy=0);/*设置透明的样式及透明的大小*/
}
-->
举一反三
根据本实例，读者可以进行以下操作。
设置背景渐变的表格。
设置文字渐变的效果。实例004 把两个div并排显示在浏览器中
本实例可以提高工作效率
实例位置：光盘\mingrisoft\01\004
实例说明
div元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。本实例将实现把两个div并排显示在浏览器中。其运行结果如图1.5所示。图1.5 两个div 并排
技术要点
本实例主要应用CSS中的float属性，该属性定义元素在哪个方向浮动。在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。float属性的可选值及其说明如表1.5所示。表1.5 float属性的可选值及其说明
实现过程
在页面中定义两个
举一反三
根据本实例，读者可以进行以下操作。
把两个div显示在浏览器的两端。
把多个图像并排显示在浏览器中。实例005 通过DIV+CSS对电子商城的页面进行布局
本实例可以提高网站安全性
实例位置：光盘\mingrisoft\01\005
实例说明
论坛、门户网站的个人主页以及电子商务的购物车等一般都是采用一行两列的浮动布局。采用这种布局方式的主要好处是页面简洁，功能按钮丰富，展示内容空间大。本实例将通过DIV+CSS采用一行两列的布局模式设计一个电子商城的页面，运行结果如图1.6所示。图1.6 一行两列浮动布局
技术要点
实现电子商城页面一行两列的布局主要应用的是CSS中的float属性，关于该属性的介绍请参考实例006，这里不再赘述。
实现过程（1）创建index.html文件，设计页面编码格式为UTF-8，通过标签载入CSS样式文件，设计页面的标题。在
标签中定义3个@CHARSET"UTF-8";
body{
margin:0px auto; /*设置外边框距各边的距离*/
width:800px; /*设置容器宽度*/
height:700px; /*设置容器高度*/
}
.one{ /*设置class等于one的容器*/
margin:10px auto; /*设置外边距各边的距离*/
width:800px; /*设置容器宽度*/
height:200px; /*设置容器高度*/
border:1px solid #e7e7e7; /*设置边框*/
background-image:url(../images/top.jpg);/*设置背景图片*/
}
.two{ /*设置class等于two的容器*/
margin:1px auto; /*设置外边距各边的距离*/
width:200px; /*设置容器宽度*/
height:500px; /*设置容器高度*/
border:1px solid #e7e7e7; /*设置边框*/
float:left; /*设置容器向左浮动*/
background-image:url(../images/left.jpg);/*设置背景图片*/
}
.three{ /*设置class等于three的容器*/
margin:1px auto; /*设置外边距各边的距离*/
width:593px; /*设置容器宽度*/
height:500px; /*设置容器高度*/
border:1px solid #e7e7e7; /*设置边框*/
float:right; /*设置容器向右浮动*/
background-image:url(../images/right.jpg);/*设置背景图片*/
}
举一反三
根据本实例，读者可以进行以下操作。
采用一行两列布局模式设计网站主页。
应用
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\01\006
实例说明
要设置4张图片并排显示在浏览器中，可以把这4张图片放在一个一行四列的表格内，但这并不是我们想要的方式。本实例将4张图片放置在4个
技术要点
在本实例中主要应用了CSS的float属性、margin属性和border属性，分别用来设置
div{
float:left; margin-right:10px; border:1px #000 solid;
}
实现过程
在页面中定义4个
举一反三
根据本实例，读者可以进行以下操作。
通过DIV设计网站横向导航。
通过DIV设计网站竖向导航。实例007 应用
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\01\007
实例说明
在进行网页排版中，用户可以使用
技术要点
本实例的关键点是对
body{
margin:0px;
text-align:center;
}
.one{
position:absolute;
margin-top:100px;
width:595px;
height:448px;
background:url(../pic/bg.jpg);
}
input{
width:150px;
height:18px;
border-left:0;
border-top:0;
border-right:0;
border-bottom:1px#CCCCCCsolid;
background:#6BACCC;
}
.two{
margin-top:200px;
margin-left:200px;
font-family:"楷体_GB2312";
font-size:16px;
color:#0000FF;
}
#pic{
border:0;
background:url(../pic/bt.jpg);
width:39px;
}
.three{
margin-right:170px;
}
实现过程（1）创建index.html文件，在文件中利用
昵称：
密码：
QQ：
住址：
（2）编写CSS样式，对文本标签和标签位置定位进行设置，代码如技术要点中所示。举一反三
根据本实例，读者可以进行以下操作。
通过
通过
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\01\008
实例说明
下面是一个应用div元素构建一个完整表格的实例。在该实例中，通过将许多 div元素的类型指定为表格相关各种类型，使这些div元素共同构成了一个完整的表格。其运行结果如图1.9所示。图1.9 div元素构建的表格
技术要点
本实例主要应用的是 CSS3 中与表格相关的元素及其所属类型。在CSS3 中所有与表格相关的元素及其所属类型如表1.6所示。表1.6 CSS3中所有与表格相关的元素及其所属类型
实现过程
创建index.html文件，在文件中通过
.table{
display: table;
border: solid 3px #00aaff;
}
.caption{
display: table-caption;
text-align: center;
font-size:26px;
}
.tr{
display:tablerow
}
.td {
display: table-cell;
border: solid 2px #aaff00;
padding: 10px;
}
.thead{
display: table-header-group;
background-color:#ffffaa;
}
举一反三
根据本实例，读者可以进行以下操作。
应用div元素构建表格完成页面主页的设计。实例009 使用column-count属性实现分栏的实例
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\01\009
实例说明
本实例将应用column-count属性对页面内容进行分栏布局。在Opera浏览器中运行本实例，可以看到页面中的内容被分成左右两部分进行输出，运行结果如图1.10所示。图1.10 对页面内容进行分栏布局
技术要点
本实例主要应用CSS3中的column-count属性实现页面内容的分栏显示。通过CSS3实现分栏非常简单，只要简单地增加column-count属性即可。column-count属性规定元素应该被划分的列数。语法如下：
column-count: number|auto;
● number：元素内容将被划分的列数。
● auto：由其他属性决定列数，比如“column-width”。
实现过程
创建index.html文件，在文件中定义一个
div#content {
column-count: 2;
-moz-column-count: 2;
-o-column-count:2;
-webkit-column-count: 2;
}
编程词典软件介绍
编程词典个人版系列产品是专门为各级程序员和编程爱好者开发的专业编程资源库。它提供了海量的开发资源、丰富的实例项目、灵活的查询方式、多样的学习模式，既可以帮助零基础者快速入门，又可以帮助有一定基础者快速提升开发水平，更适合程序开发人员随时检索查询，随时粘贴复用。
编程词典是程序开发人员的左膀右臂，软件工程师必备的专业指南。
举一反三
根据本实例，读者可以进行以下操作。
对文章进行分栏显示输出。
对页面内容进行左、中、右的分栏布局。实例010 文字和图片完整居中
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\01\010
实例说明
下面是一个在页面中使文字和图片完整居中的实例。运行实例，结果如图1.11所示。由图可以看到，文字和图片不仅在div中居中显示，而且div相对于整个页面也是居中的。图1.11 文字和图片完整居中显示
技术要点
本实例主要应用CSS中的text-align、margin、vertical-align属性使文字和图片实现居中显示。CSS代码如下：
body{
text-align:center;
margin:0 auto;
}
.main {
color:#0066CC;
margin:5px auto;
width:500px;
border:1px solid #000000;
}
.main img {
vertical-align:middle;
}
-->
实现过程
创建index.html文件，首先在文件中定义一个
body{
text-align:center;
margin:0 auto;
}
.main {
color:#0066CC;
margin:5px auto;
width:500px;
border:1px solid #000000;
}
.main img {
vertical-align:middle;
}
-->
编程词典让您编程无忧
举一反三
根据本实例，读者可以进行以下操作。
设置div水平垂直居中。
使文字和图片显示在页面两端。实例011 应用CSS控制登录页面显示样式
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\01\011
实例说明
为了整个项目页面的规范性，通常会将项目的页面都应用一种样式。本实例实现应用CSS样式控制登录页面样式的功能。运行程序，效果如图1.12所示。图1.12 应用CSS 控制登录页面显示样式
技术要点
本实例主要使用CSS中的选择器定义页面中表格文字的样式、按钮的样式以及页面的边距等来控制登录页面的显示样式。CSS代码如下：
实现过程（1）在页面中定义CSS样式，实现控制页面中表格文字的样式，并定义按钮显示样式等，代码如下：
（2）在登录页面中，定义表单元素，此时页面中定义的标记选择器就自动为页面元素添加样式。代码如下：
使用CSS样式设置登录页面样式
<%--定义页头信息--%><%--在页面中定义用户名文本框--%>
<%--在页面中定义密码文本框--%>
举一反三
根据本实例，读者可以进行以下操作。
应用CSS样式添加图像边框。
应用CSS样式修饰表格。1.2框架的应用实例012 框架集的嵌套
这是一个可以提高基础技能的实例
实例位置：光盘\mingrisoft\01\012
实例说明
在进行网络程序开发时，在网页中使用一个框架集是非常简单的。但如果要在同一个网页中应用更多的框架集时，应该怎样进行框架集的嵌套呢？本实例将解决这一问题。运行结果如图1.13所示。图1.13 框架集的嵌套
技术要点
本实例主要介绍框架集的嵌套应用，下面对框架集进行详细介绍。
框架集主要包含如何组织各个框架的信息，可以通过
在水平方向上将浏览器分割成多个窗口，这可以通过框架的左右分割窗口属性cols实现。其语法格式如下：
参数说明：
● value：用于指定各个框架的列宽，取值有3 种形式：像素、百分比（%）和相对尺寸（*）。
例如，若要通过框架将浏览器窗口划分为3列，其中第1列占浏览器窗口宽度的20%，第2列为120像素，第3列为浏览器窗口剩余部分的框架，代码如下：
技巧：如果将cols属性设置为“*，*，*”，则表示将窗口划分成3个等宽的框架；如果将 cols属性设置为“*，2*，3*”，则表示左边的框架占窗口宽度的 1/6，中间的框架占窗口宽度的1/3，右边的框架占窗口宽度的1/2。（2）上下分割窗口属性rows。
在垂直方向上将浏览器分割成多个窗口，这可以通过框架的上下分割窗口属性rows实现。其语法格式如下：
参数说明：
● value：用于指定各个框架的行高，取值有3种形式：像素、百分比（%）和相对尺寸（*），设置方法与cols属性类似。例如，若要通过框架将浏览器窗口划分为3行，其中的第1行占浏览器窗口宽度的20%，第2行为120像素，第3行为浏览器窗口剩余部分的框架，代码如下：
（3）框架边框显示属性frameborder。试读结束[说明：试读内容隐藏了图片]