学习的HTML5技术有哪些？

随着这两年HTML5火爆程度，争相讨论HTML的人也是越来越多。讨论的问题也主要围绕着：“如何区分HTML5开发和前端开发？学习HTML5需要掌握的专业技术有哪些？”今天，java课程就和大家聊聊！

HTML5，超文本标记语言HTML新标准，主要用于前端开发及游戏制作。从技术本身分析来看，现在完成一些页面制作、WebAPP、微网站开发以及网页游戏等，现在都是使用HTML5标准完成的。虽然开发这类的应用其实是以JS为主，但因为HTML5这个概念很流行，所以微网站开发、小游戏开发、WebAPP或是公众号等应用，很多人都会说使用HTML5开发。

前端开发

前端开发一般指网页开发，学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。学习Java、DOM、BOM等用建立开发基础。学习photoshop和Axure等软件应用，完成页面UI设计。也要认识一下NodeJS和PHP加上数据库等这样的后端语言，方便前后端开发配合;学习HTML5、CSS3、响应式页面布局、微网站制作等开发移动互联网的应用。像Ajax、JQuery、jQueryMobile、Bootstrap、AngularJS等更是前端开发必学的高级技术。

前端包含HTML5

当然，HTML5其实只是前端开发中重要的一部分技术，是现在前端开发的标准组件，特别是在移动端的特效开发、游戏开发，以及APP的开发方向上非常流行。如果把前端开发比作要建设的一座“大厦”，HTML5就相当于“钢筋水泥”。现在好多人都说开发“XX功能”使用“HTML5”技术，其实理解的有一些问题，他们所说的HTML5其实说的就是前端技术，只不过HTML5这个词比较活跃也比较流行，所以多数人都将前端技术叫成了HTML5了。

那么想要学好html5前端开发，那么需要掌握的专业技术有：

1、前端页面重构：PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局；

2、JavaScript高级程序设计：原生JavaScript交互功能开发、面向对象开发与ES5/ES6、JavaScript工具库自主研发；

3、PC端全栈项目开发：jQuery经典特效交互开发、HTTP协议，Ajxa进阶与后端开发、前端工程化与模块化应用、PC端网站开发、PC端管理信息系统前端开发；

4、移动端webAPP开发：Touch端项目、微信场景项目、应用Vuejs开发WebApp项目、应用Ionic开发WebApp项目、应用Reactjs开发WebApp；

5、混合（Hybrid）开发：各类混合应用开发；

6、NodeJS全栈开发：WebApp后端系统开发；

7、大数据可视化：数据可视化入门、D3jS详解及项目实战。

主要思想：\x0d\首先要准备一张有连续帧的，然后利用HTML5Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。\x0d\关键技术点：\x0d\JavaScript函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，\x0d\另外一个参数代表间隔时间，单位为毫秒数。代码示例：\x0d\setTimeout(update,1000/30);\x0d\Canvas的API-drawImage()方法，需要指定全部9个参数：\x0d\ctxdrawImage(myImage,offw,offh,width,height,x2,y2,width,height);\x0d\其中offw,offh是指源图像的起始坐标点，width,height表示源图像的宽与高，x2,y2表\x0d\示源图像在目标Canvas上的起始坐标点。\x0d\\x0d\\x0d\\x0d\\x0d\\x0d\CanvasMouseEventDemo\x0d\\x0d\\x0d\varctx=null;//globalvariable2dcontext\x0d\varstarted=false;\x0d\varmText_canvas=null;\x0d\varx=0,y=0;\x0d\varframe=0;//2255+2\x0d\varimageReady=false;\x0d\varmyImage=null;\x0d\varpx=300;\x0d\varpy=300;\x0d\varx2=300;\x0d\vary2=0;\x0d\windowonload=function(){\x0d\varcanvas=documentgetElementById("animation_canvas");\x0d\consolelog(canvasparentNodeclientWidth);\x0d\canvaswidth=canvasparentNodeclientWidth;\x0d\canvasheight=canvasparentNodeclientHeight;\x0d\if(!canvasgetContext){\x0d\consolelog("CanvasnotsupportedPleaseinstallaHTML5compatiblebrowser");\x0d\return;\x0d\}\x0d\//get2Dcontextofcanvasanddrawrectangel\x0d\ctx=canvasgetContext("2d");\x0d\ctxfillStyle="black";\x0d\ctxfillRect(0,0,canvaswidth,canvasheight);\x0d\myImage=documentcreateElement('img');\x0d\myImagesrc="/robinpng";\x0d\myImageonload=loaded();\x0d\}\x0d\functionloaded(){\x0d\imageReady=true;\x0d\setTimeout(update,1000/30);\x0d\}\x0d\functionredraw(){\x0d\ctxclearRect(0,0,460,460)\x0d\ctxfillStyle="black";\x0d\ctxfillRect(0,0,460,460);\x0d\//findtheindexofframesinimage\x0d\varheight=myImagenaturalHeight/5;\x0d\varwidth=myImagenaturalWidth/5;\x0d\varrow=Mathfloor(frame/5);\x0d\varcol=frame-row5;\x0d\varoffw=colwidth;\x0d\varoffh=rowheight;\x0d\//firstrobin\x0d\px=px-5;\x0d\py=py-5;\x0d\if(px

HTML5无疑是当前最受宠的一项技术，每个web设计者都在热烈的讨论这种神奇的标记语言的兴起。HTML5是一种学起来毫不费力的标记语言，但它却能提供迷人的、富有艺术性的特征，帮助web设计人员完成他们的构思想象。HTML5对于一个设计人员来说能毫不费力的理解，轻松的掌握。

草绘和制图是设计工作者工作中一个重要的特征。HTML5将会这方面显露出不可限量的前途。

今天，我给web设计人员收集了几款最好的HTML5绘图或涂鸦工具。这些绘图工具大多数是用HTML5画布(Canvas)实现的，部分辅以Javascript。我想，对每个web设计者来说，制图和草绘是他们工作中最喜欢的一件事情了。

1Zwibbler

这款工具提供了各种图形的快捷方式，有点像Photoshop的工具面板。你可以从工具栏上拖着想要的图形形状，然后在画布上修改。方的，圆的，点、线等。这款神奇的HTML5绘图工具还能让你给图形配置阴影效果。拷贝，粘贴，重做，恢复等功能应有尽有。

2涂鸦壁

这是一款用纯HTML5实现的强大绘图工具。它的界面看起来很复杂，因为它提供了很多预设定的特殊绘图效果，比如气泡，变形文字，镂空，编织线等，非常的漂亮。如果说这不是用flash实现的，可能有很多人不相信。

3游丝定长仪

这是一个非常有趣的绘图工具，它不是由你来使用画笔，而是让设定绘图参数，这个工具能根据你的参数绘制有规律的数学图案，这些图案如果用手绘制可能非常的复杂，但通过自动设定的条件让它重复变换的一遍一遍的重复执行，你会得到各种很神奇的图案。你可以设定它的绘画速度——慢，中，快。设定画笔的颜色，宽度。

4多人画板

这是一个谷歌浏览器实验项目，你需要用谷歌浏览器才能获得最佳效果。这个工具是开源的，它使用了nodejs，websocket，threejs等先进技术，这款工具的特点是它支持多人分布式绘画，互联网上不认识的几个人可以通过它共同创作一幅画。

5Bomomo

Bomomo更像是一个涂鸦工具，娱乐性很强，用它可以画出色彩缤纷的各种奇异图案、纹饰，它提供了很多种预设的涂鸦工具。每种工具都具有动画效果，让你快乐的画出赏心悦目的美丽图案。

6草绘板

这款绘图工具看起来就更像是Photoshop了，它的工具栏，画笔，配色工具，历史记录都有点Photoshop的味道，当然了，只是像是没有价值的，它的确提供了很多可以替代Photoship的绘画功能，不信你就试一试。

7SketchyStructures

这个工具能让会绘制出复杂的由线条组成的各种结构，你可以设置线条的密度以达到不同的效果。

8MrDoob’sHarmony

这个工具的画笔有点像铅笔，但有毛边，而且是不规则的细毛，在我这个不懂绘画的人来说，它更适合画抽象画。但如果放在高人的手中，我想它能创造出惊人的铅笔风格的图案。

9贝齐尔画笔

这是一种能非常漂亮的画出贝齐尔线条的绘制工具。你只需要点几下，拖拽几下，再加上你的想象力，你就能画出如上图那样有创意的图案。

10绘图玩具

这是一个出色的HTML5杰作。你能用它绘制出迷人的作品时而又不失乐趣。你甚至能用它画出3D作品。

提到H5，很多人认为H5是HTML5的简称，但事实上这是错误的，两者关系并不等同。

通常我们所说的H5就是H5广告，大多是在微信上宣传营销使用的，而HTML5第五代HTML的标准，一种规范，可以说，H5都是用 HTML5编写

的，也就是所有H5都遵循HTML5这个规范，不然就会出现问题。

H5和HTML5并不是一个意思，H5并不是一项技术，而是一项标准，其中所包含的技术主要有页面素材预加载技术，音乐加载播放技术，可

以滑动的页面，可以涂抹擦除，有动态的文字和，可以填表报名，可以支持分享自定义的文案和等一系列技术。HTML是“超文本标记语

言”的英文缩写。我们上网所看到的网页，多数都是由HTML写成。

简单的讲：H5不=HTML5

H5 是一个产品名词

HTML5是一个技术名词

《HTML5从入门到精通》系统、全面地讲解了HTML语言及其最新版本HTML5的新功能与新特性，技术新颖实用。

目 录

　　第1篇 HTML基础

　　第1章 HTML基础 3

　　教学录像：22分钟

　　11 HTML的基本概念 4

　　12 HTML发展史 4

　　13 HTML的基本结构 5

　　131 HTML文件的编写方法 5

　　132 文件开始标签<html> 7

　　133 文件头部标签<head> 7

　　134 文件标题标签<title> 7

　　135 文件主体标签<body> 7

　　136 编写文件的注意事项 8

　　14 编写第一个HTML文件 8

　　141 HTML文件的编写方法 8

　　142 手工编写页面 9

　　143 使用可视化软件制作页面 10

　　144 使用浏览器浏览HTML文件 14

　　145 使用HTML开发的明日图书网 14

　　15 小结 15

　　16 习题 16

　　第2章 HTML文件基本标记 17

　　教学录像：44分钟

　　21 HTML头部标记 18

　　22 标题标记<title> 18

　　23 元信息标记<meta> 19

　　231 设置页面关键字 19

　　232 设置页面描述 20

　　233 设置编辑工具 20

　　234 设定作者信息 21

　　235 限制搜索方式 22

　　236 设置网页文字及语言 22

　　237 设置网页的定时跳转 23

　　238 设定有效期限 24

　　239 禁止从缓存中调用 24

　　2310 删除过期的cookie 25

　　2311 强制打开新窗口 25

　　2312 设置网页的过渡效果 26

　　24 基底网址标记<base> 29

　　25 页面的主体标记<body> 30

　　251 设置文字颜色——text 31

　　252 背景颜色属性——bgcolor 32

　　253 背景图像属性——background 32

　　254 设置链接文字属性——link 35

　　255 设置边距——margin 37

　　26 页面的注释标记 38

　　27 实例演练——创建基本的HTML网页 38

　　28 小结 39

　　29 习题 40

　　第3章 设计网页文本内容 41

　　教学录像：29分钟

　　31 标题文字的建立 42

　　311 标题文字标记<h> 42

　　312 标题文字的对齐方式——align 43

　　32 设置文字格式 44

　　321 设置文字字体——face 44

　　322 设置字号——size 45

　　323 设置文字颜色——color 46

　　324 粗体、斜体、下划线——strong、em、u 46

　　325 上标与下标——sup、sub 47

　　326 设置删除线——strike 48

　　327 等宽文字标记——code 49

　　328 空格——&nbsp; 49

　　329 其他特殊符号 50

　　33 设置段落格式 51

　　331 段落标记——p 51

　　332 取消文字换行标记——nobr 52

　　333 换行标记——br 53

　　334 保留原始排版方式标记——pre 53

　　335 居中对齐标记——center 54

　　336 向右缩进标记——blockquote 55

　　34 水平线标记 56

　　341 添加水平线——hr 56

　　342 设置水平线的宽度与高度

　　——width、height 57

　　343 设置水平线的颜色——color 58

　　344 设置水平线的对齐方式——align 59

　　345 去掉水平线阴影——noshade 60

　　35 其他文字标记 60

　　351 文字标注标记——ruby 60

　　352 声明变量标记——var 61

　　353 忽视HTML标记

　　——plaintext、xmp 62

　　36 小结 63

　　37 习题 63

　　第4章 使用列表 65

　　教学录像：35分钟

　　41 列表的标记 66

　　42 使用无序列表 66

　　421 无序列表标记——ul 66

　　422 无序列表的符号类型——type 67

　　43 使用有序列表 69

　　431　有序列表标记——ol 69

　　432　有序列表的属性——type 70

　　433　有序列表的起始数值——start 72

　　44 定义列表标记——dl 73

　　45 菜单列表标记——menu 74

　　46 目录列表——dir 75

　　47 使用嵌套列表 76

　　471　定义列表的嵌套 77

　　472　无序列表和有序列表的嵌套 78

　　48 小结 79

　　49 习题 80

　　第5章 超链接 81

　　教学录像：22分钟

　　51 超链接的基本知识 82

　　511 超链接 82

　　512 绝对路径 82

　　513 相对路径 82

　　52 超链接的建立 83

　　521 超链接标记的基本语法 83

　　522 建立文本超链接 83

　　523 设置超链接的目标窗口 85

　　53 内部链接 87

　　54 书签链接 89

　　541 建立书签 89

　　542 链接到同一页面的书签 91

　　543 链接到不同页面的书签 92

　　55 外部链接 93

　　551 通过HTTP协议 94

　　552 通过FTP 94

　　553 发送E-mail 95

　　554 下载文件 96

　　56 其他链接 98

　　561 脚本链接 98

　　562 空链接 99

　　57 小结 99

　　58 习题 100

　　第6章 使用图像 101

　　教学录像：35分钟

　　61 图像的基本格式 102

　　62 添加图像——img 102

　　63 设置图像属性 103

　　631 图像高度——height 103

　　632 图像宽度——width 104

　　633 图像边框——border 105

　　634 图像水平间距——hspace 107

　　635 图像垂直间距——vspace 108

　　636 图像相对于文字基准线的对齐方式

　　——align 108

　　637 图像的提示文字——alt 110

　　64 图像的超链接 111

　　641　设置图像的超链接 111

　　642　设置图像热区链接 112

　　65 小结 116

　　66 习题 116

　　第7章 表格的应用 118

　　教学录像：48分钟

　　71　创建表格 119

　　711　表格的基本构成——table、tr、td 119

　　712　表格的标题——caption 120

　　713　表格的表头——th 121

　　72　设置表格基本属性 123

　　721　表格的宽度——width 123

　　722　表格的高度——height 125

　　723　表格的对齐方式——align 126

　　73　设置表格的边框 127

　　731　表格边框的宽度——border 127

　　732　表格边框的颜色——bordercolor 128

　　733　表格内框的宽度——cellspacing 130

　　734　表格内文字与边框的间距

　　——cellpadding 131

　　74　设置表格背景 132

　　741　表格的背景颜色——bgcolor 132

　　742　表格的背景图像——background 133

　　75　设置表格的行属性 134

　　751　高度的控制——height 134

　　752　行的边框颜色——bordercolor 135

　　753　行的背景颜色——bgcolor、background 136

　　754　行文字的水平对齐方式——align 137

　　755　行文字的垂直对齐方式——valign 139

　　756 表格标题的垂直对齐方式——align 140

　　76　调整单元格属性 141

　　761　单元格大小——width、height 141

　　762　单元格水平跨度——colspan 142

　　763　单元格垂直跨度——rowspan 143

　　764　单元格对齐方式——align、valign 144

　　765　单元格的背景色 146

　　766　单元格的边框颜色——bordercolor 147

　　767　单元格的亮边框——bordercolorlight 148

　　768　单元格的暗边框——bordercolordark 150

　　769　单元格的背景图像——background 151

　　77　表格的结构 152

　　771　表格的表头标记——thead 153

　　772　表格的表主体标记——tbody 154

　　773　表格的表尾标记——tfoot 156

　　78 表格的嵌套 157

　　79 小结 159

　　710 习题 159

　　第8章 层标记——div 161

　　教学录像：33分钟

　　81 层 162

　　811 层的分类 162

　　812 定义数据块 162

　　82 <div>标签 163

　　821 <div>标签的简介 163

　　822 <div>标签的属性 164

　　823 <span>标签与<div>标签 170

　　83 <iframe>标签 172

　　831 <iframe>标签的简介 172

　　832 <iframe>标签的属性 172

　　84 <layer>标签和<ilayer>标签 174

　　841 标签层的使用 175

　　842 <layer>标签和<ilayer>标签的区别 176

　　85 应用div制作下拉菜单导航条 176

　　86 小结 179

　　87 习题 179

　　第9章 编辑表单 181

　　教学录像：26分钟

　　91　使用表单标签——form 182

　　911　处理动作——action 182

　　912　表单名称——name 183

　　913　传送方法——method 183

　　914　编码方式——enctype 184

　　915　目标显示方式——target 185

　　92 添加控件 185

　　93　输入类的控件 186

　　931　文字字段——text 186

　　932　密码域——password 187

　　933　单选按钮——radio 188

　　934　复选框——checkbox 189

　　935　普通按钮——button 190

　　936　提交按钮——submit 191

　　937　重置按钮——reset 192

　　938　图像域——image 193

　　939　隐藏域——hidden 195

　　9310　文件域——file 195

　　94　列表/菜单标记 197

　　95　文本域标记——textarea 198

　　96　id标记 199

　　97　小结 200

　　98　习题 200

　　第10章 多媒体页面 202

　　视频讲解：18分钟

　　101 设置滚动文字 203

　　1011 滚动文字标签——marquee 203

　　1012 滚动方向属性——direction 203

　　1013 滚动方式属性——behavior 204

　　1014 滚动速度属性——scrollamount 205

　　1015 滚动延迟属性——scrolldelay 206

　　1016 滚动循环属性——loop 207

　　1017 滚动范围属性——width、height 208

　　1018 滚动背景颜色属性——bgcolor 209

　　1019 滚动空间属性——hspace、vspace 209

　　102 添加背景音乐 211

　　1021　设置背景音乐——bgsound 211

　　1022　设置循环播放次数——loop 212

　　103 添加多媒体文件 213

　　1031 添加多媒体文件标记——embed 213

　　1032 设置自动运行——autostart 214

　　1033 设置媒体文件的循环播放——loop 215

　　1034 隐藏面板——hidden 216

　　1035 添加其他类型的媒体文件 217

　　104 小结 217

　　105 习题 218

　　第2篇 HTML 5高级应用

　　第11章 HTML 5的新特性 221

　　视频讲解：6分钟

　　111 谁在开发HTML 5 222

　　112 HTML 5的新认识 222

　　1121 兼容性 222

　　1122 实用性和用户优先 222

　　1123 化繁为简 223

　　113 无插件范式 223

　　114 HTML 5的新特性 224

　　115 小结 224

　　第12章 HTML 5与HTML 4的区别 225

　　视频讲解：51分钟

　　121 语法的改变 226

　　1211 HTML 5的语法变化 226

　　1212 HTML 5中的标记方法 226

　　1213 HTML 5语法中的3个要点 227

　　1214 标签实例 228

　　122 新增的元素和废除的元素 228

　　1221 新增的结构元素 228

　　1222 新增的块级的语义元素 230

　　1223 新增的行内的语义元素 231

　　1224 新增的嵌入多媒体元素与交互性元素 231

　　1225 新增的input元素的类型 232

　　1226 废除的元素 233

　　123 新增的属性和废除的属性 234

　　1231 新增的属性 234

　　1232 废除的属性 236

　　124 全局属性 237

　　1241 contentEditable属性 237

　　1242 designMode属性 238

　　1243 hidden属性 239

　　1244 spellcheck属性 239

　　1245 tabindex属性 240

　　125 小结 240

　　126 习题 240

　　第13章 HTML 5的结构 242

　　视频讲解：20分钟

　　131 新增的主体结构元素 243

　　1311 article元素 243

　　1312 section元素 245

　　1313 nav元素 247

　　1314 aside元素 248

　　1315 time元素 250

　　1316 pubdate属性 250

　　132 新增的非主体结构元素 251

　　1321 header元素 251

　　1322 hgroup元素 252

　　1323 footer元素 252

　　1324 address元素 253

　　133 小结 253

　　134 习题 254

　　第14章 HTML 5中的表单 255

　　视频讲解：50分钟

　　141 新增表单元素与属性 256

　　1411 新增的属性 256

　　1412 增加与改良的input元素的种类 259

　　1413 output元素的添加 264

　　1414 应用新增元素制作注册表单 264

　　142 对表单的验证 266

　　1421 自动验证 266

　　1422 checkValidity显式验证法 267

　　1423 避免验证 268

　　1424 使用setCustomValidity方法自定义

　　错误信息 268

　　143 增加的页面元素 269

　　1431 新增的figure元素 270

　　1432 新增的details元素 271

　　1433 新增的mark元素 272

　　1434 新增的progress元素 274

　　1435 新增的meter元素 275

　　1436 改良的ol列表 276

　　1437 改良的dl列表 276

　　1438 加以严格限制的cite元素 277

　　1439 重新定义的small元素 278

　　144 小结 278

　　145 习题 279

　　第15章 HTML 5中的文件与拖放 280

　　视频讲解：40分钟

　　151 选择文件 281

　　1511 通过file对象选择文件 281

　　1512 使用blob接口获取文件的类型与大小 282

　　1513 通过类型过滤选择的文件 283

　　152　使用FileReader接口读取文件 285

　　1521 检测浏览器是否支持FileReader接口 285

　　1522　FileReader接口的方法 285

　　1523 使用readAsDataURL方法预览 286

　　1524　使用readAsText方法读取文本文件 287

　　1525　FileReader接口中的事件 288

　　153 拖放API 290

　　1531 实现拖放的步骤 290

　　1532 通过拖放显示欢迎信息 291

　　154 dataTransfer对象应用详解 293

　　1541 使用effectAllowed和dropEffect属性

　　设置拖放效果 293

　　1542 使用setDragImage方法设置拖放图标 294

　　155 小结 295

　　156 习题 295

　　第16章 多媒体播放 296

　　视频讲解：35分钟

　　161 HTML 5多媒体的简述 297

　　1611 HTML 4中多媒体的应用 297

　　1612 HTML 5页面中的多媒体 297

　　162 多媒体元素基本属性 298

　　163 多媒体元素常用方法 302

　　1631 媒体播放时的方法 302

　　1632 canPlayType(type)方法 304

　　164 多媒体元素重要事件 304

　　1641 事件处理方式 304

　　1642 事件介绍 305

　　1643 事件实例 306

　　165 小结 308

　　166 习题 309

　　第17章 绘制图形 310

　　视频讲解：1小时32分钟

　　171 canvas的基础知识 311

　　1711 canvas是什么 311

　　1712 在页面中放置canvas元素 311

　　1713 绘制带边框的矩形 312

　　172 在画布中使用路径 314

　　1721 使用arc方法绘制圆形 314

　　1722 使用moveTo与lineTo路径绘制火柴人 316

　　1723 贝塞尔和二次方曲线 317

　　173 运用样式与颜色 319

　　1731 fillStyle 和 strokeStyle属性 319

　　1732 透明度 globalAlpha 321

　　1733 线型 Line styles 323

　　174 绘制渐变图形 325

　　1741 绘制线性渐变 325

　　1742 绘制径向渐变 326

　　175 绘制变形图形 328

　　1751 坐标的变换 328

　　1752 矩阵变换 330

　　176 组合多个图形 333

　　177 给图形绘制阴影 335

　　178 应用图像 336

　　1781 绘制图像 336

　　1782 图像的局部放大 338

　　1783 图像平铺 339

　　1784 图像裁剪 341

　　1785 像素的处理 342

　　179 绘制文字 344

　　1710 保存与恢复状态 345

　　1711 文件的保存 346

　　1712 对画布绘制实现动画 347

　　1713 综合实例——桌面时钟 348

　　1714 小结 350

　　1715 习题 351

　　第18章 数据存储 352

　　视频讲解：50分钟

　　181 初识Web Storage 353

　　1811 什么是Web Storage 353

　　1812 使用Web Storage中的API 353

　　1813 sessionStorage和localStorage的实例

　　——计数器 355

　　1814 Web Storage综合实例——留言本 357

　　1815 JSON对象的存数实例——用户信息卡 359

　　182 本地数据库 361

　　1821 Web SQL数据库简介 361

　　1822 使用Web SQL Database API 362

　　1823 本地数据库实例——用户登录 363

　　183 小结 367

　　184 习题 367

　　第19章 离线应用程序 368

　　视频讲解：13分钟

　　191 HTML 5离线Web应用概述 369

　　1911 离线Web应用概述 369

　　1912 本地缓存与浏览器网页缓存的区别 370

　　192 创建HTML 5离线应用 370

　　1921 缓存清单（manifest） 370

　　1922 配置IIS服务器 372

　　1923 浏览缓存清单 372

　　193 浏览器与服务器的交互过程 373

　　194 applicationCache对象 374

　　1941 swapCache方法 375

　　1942 applicationCache对象的事件 376

　　195 小结 379

　　196 习题 379

　　第20章 使用Web Worker处理线程 380

　　视频讲解：25分钟

　　201 Web Worker概述 381

　　2011 创建和使用Worker 381

　　2012 Web Worker应用实例——求和运算 382

　　202 在Worker内部能做什么 383

　　203 多个JavaScript文件的加载与执行 384

　　204 线程嵌套 384

　　2041 单层嵌套 385

　　2042 在多个子线程中进行数据的交互 387

　　205 小结 390

　　206 习题 390

　　第21章 通信API 391

　　视频讲解：4分钟

　　211 跨文档消息通信 392

　　2111 使用postMessageAPI 392

　　2112 跨文档消息传输 392

　　212 小结 394

　　第22章 获取地理位置信息 395

　　视频讲解：12分钟

　　221 Geolocation API的概述 396

　　2211 使用getCurrentPosition方法获取

　　当前地理位置 396

　　2212 持续监视当前地理位置的信息 398

　　2213 停止获取当前用户的地理位置信息 398

　　222 position对象 398

　　223 在google地图上显示“我在这里” 399

　　224 小结 401

　　225 习题 401

　　第3篇 HTML 5项目实战

　　第23章 旅游信息网前台页面 405

　　视频讲解：20分钟

html5新增的一些语义话标签，可以使用比如头部可以使用header标签，导航nav，主体部分可以使用section，底部footer，中间文章article。

div，ul li标签都是使用比较频繁的标签，span，i,em可以对文字进行单独的描述，表示等。

<article>标签定义外部的内容，比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

<canvas> 标签定义图形，比如图表和其他图像，这个 HTML 元素是为了客户端矢量图形而设计的。

它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

标签定义元素的细节，用户可进行查看，或通过点击进行隐藏与 <legend> 一起使用，来制作 detail 的标题，该标题对用户是可见的，当在其上点击时可打开或关闭 detail。

一、首先从功能与设计目标来看， H5专网页主要有以下4大类型：

1活动运营型

为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。

2品牌宣传型

不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。

3产品介绍型

聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。

这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。

4总结报告型

自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。

二．形式为功能服务

在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。如何有的放矢地进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。

1简单图文

简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。

2礼物/贺卡/邀请函

每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。

3问答/评分/测试

问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。

4游戏

从 “围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。

三．为设计加分的4个要点

一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点：

1细节与统一

要成就高品质的用户体验，必须考虑到细节与整体的统一性。复古拟物的视觉风格，那字体就不能过于现代；幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨。

2紧跟热点，利用话题效应

想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。

3讲个好故事，引发情感共鸣

不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。

4合理运用技术，打造流畅的互动体验

随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。

结语

随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、低成本、快迭代等优势被进一步凸显，这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说，都将是一个最好的时代。

起首，我们通过HTML5表达什么？Firstoff，whatdowemeanbyHTML5理论上，我们表达所有De事——新De语义布局标签，例如canvas或者离线储存等API规范，以及新De内联语义标签。虽然如斯，我们把现实De缘由（PS：浏览器支撑问题）仅仅局限于布局标签。canvas，离线储存，当地视频或者地舆定位API都很绝妙，然而他们还不克不及被所有浏览器分歧De支撑。

“但shi等等”你说，“大大都浏览器也都不支撑新De布局元素！”这shi实De，但他们中De绝大大都将会很愿意去接管你想要建立De任何标签。以至连IE6也能够处置新标签，虽然若是你想要利用CSS设置样式，你需要一点JavaScriptDe协帮。

当你对新标签设置样式时，你需要记住一件事，那就shi未知标签正在大部门浏览器中没有默认样式。他们同时被认为shi行级元素。虽然如斯，因为大部门HTML5De新标签能够构制，我们将让他们具有块级元素De行为。处理方式shi确认你正在CSS样式中包含了display:block;。

为了协帮领会当今HTML5De一些新玩意儿，我们现正在就进入正题，起头利用一些新De布局元素。

我们建立HTML5文档第一件需要做De工作就shi利用新De文档类型。现正在，若是你还清晰De记得HTML4或者XHTML1xDe文档类型，你实shi一个比我们更强De调皮鬼。每当我们新建一个页面，我们必需打开一个旧De文件，剪切并粘贴文档类型定义。

这实shi疾苦，也shi为什么我们喜好。你预备好了么？他呈现了：

不会太难记。简单而且容易理解。不区分大小写。

这个构思shi遏制HTML版本化，使向后兼容变得更容易。从久远看能否成功shi别的De工作，但至多他节流了你输入De平均时间。

我们曾经将我们De页面定义为HTML5文档。到现正在为止，一切都还不错。现正在，这些我们曾经传闻De新标签到底shi什么？

正在我们研究新标签前，想想你一般网页De布局，大要像如许：

这对于展现用处很好，但若是我们想要晓得一些关于页面元素包含什么De问题，这又怎样办呢？

上面De例子中，我们为我们所有De布局div添加了ID。这正在有见识De设想师中shi很泛泛De事。目De有两个方面，起首，ID供给了能够能用于给页面De特殊段落使用样式De锚，其次，ID充任根基De伪语义布局。高超De解析器将会查看标签DeID属性，做网站找站术（）并测验考试去猜测他们De寄义，但当每个坐点DeID名称分歧De时候很难。

这就shi新布局标签到来De来由。

当认识到这些ID成为了老例，HTML5De缔制者们更进一步，使这些元素中De一部门变成他们独立De标签。这儿有一个HTML5中生效De新标签De快速概要：

头部标签被设想做为关于一个章节或者一整张网页引见消息De容器。<header>标签能够包含从你位于大大都页面顶部De典型标记或者口号，到引见一个章节De口号和开场白De任何工具。若是你还正在你De页面里利用<divid=”header”>，那能够利用<header>替代

nav元素很是较着，这shi你De导航元素。当然什么被算为导航shi有一些争议De，有一个根基De坐点导航，但一些环境下还可能有页面导航元素。HTML5De缔制者WHATWG比来正在点窜<nav>De注释，来表示如何正在统一个页面利用两次。

若是你还正在利用<divid=”nav”>标签来包含你De页面导航，你能够利用简练De<nav>标签来替代。

Section可能shi新标签中最恍惚De。按照，一个章节shi一个内容De从题调集，凡是正在header标签后，正在footer标签前。但shi若是需要，section也能够彼此嵌套。

正在我们上面De例子里，被“content”标识表记标帜Dediv就shi一个变为sectionDe很好De选择。别的正在阿谁section内，按照内容，我们能够添加section。

根绝WHATWGDe正文，article元素能够包含“构成文档或坐点独立部门De一段内容；例如，杂志或者旧事De文章，或者博客条目。”

记住一个页面里能够有多个article标签；例如一个博客首页可能有最新De十篇文章，每一篇包含正在一个article标签内。Article也能够通过利用section标签分为多个段落，然而当你打算你De布局时需要稍微细心一些，不然你容易惹起以一些难看De标签大杂烩结尾De环境。

按照WHATWGDe正文，看起来<aside>能够用于所有De这些环境，虽然你边栏里De援用和标签云有着很大De分歧。

没人说HTML5shi完满De！

让我们利用新标签沉新编写我们本来De例子：

很是清晰，而且容易理解，不shi么？一些正文：我们能够正在header标签中包含我们De<h1>MyArticle</h1>题目。我没有如许做，由于h1元素曾经表达了题目De寄义，但若是你还有发布日期，签名或者其他数据正在你文章De顶部，为标签集添加一个header容器标签shi一个很好De选择。

同时留意我们能够正在article元素下添加第二个footer元从来包含诸如翻页导航，相关文章或者其他内容。

正在大大都浏览器中，

所有你需要做De就shi像你凡是做De那样，为正在新标签上使用样式表，简单De定义你De样式。但请确认为每一个元素添加了display:block;法则，无论若何，从现正在起头。颠末一段时间后，当浏览器起头尺度化，并支撑新元素后，那就不需要了。

例如，让我们正在我们Deheader里使用一些样式：

记住，你仍然能够给这些标签添加类和ID属性。所以，若是你想要零丁为一个导航设置样式，你能够等闲De给这个标签添加一个类或者样式，就象如许：

然后你能够使用一个样式：

但等一下，IE怎样办？这些样式完全不克不及正在IE6下工做。若是你仍然需要支撑像IE6一类遗产般De浏览器，这儿有一个处理方式。IE6解析和显示这些标签还好，但你不克不及对他们设置任何CSS。处理方式shi利用一点JavaScript。

我们只需要让IE去给我们利用createElement方式创制DeDeHTML5标签设置样式。正在HTML5文件Dehead标签内添加这点工具。或者，你能够把他保具有一个特定De文件里，并用这种方式包含。

我晓得你正在想什么：“哥，你底子没无为阿谁脚本标签定义一个MIME类型。”

你底子不需要正在HTML5做这些工作。正在HTML5中，所有De脚本都被假定为type=”text/javascript”，所以没有需要让属性把你De脚本标签搞得参差不齐（除非你De脚本并不shiJavaScript）。

这处理了IEDe问题，但我们并没有脱节窘境。现正在被证明Gecko衬着引擎有一个bug，导致了Firefox2和CaminoDe一些版本正在这些标签上卡住。

记住，虽然Firefox2De利用率很快正在所有网坐流量中降到了10%以下，但纯真忽略这个bug可能还shi需要按照你网坐De拜候者来定。

简短De回覆shi：我们会。

复杂一点Deshi：那要看坐点了。若是你责备沉新制制CNN从页，好吧，你可能会有一点抗拒，曲到浏览器De支撑变好些。但若是你要给你De博客改版，我们支撑你。这儿还有一些能够协帮你DeWordpress插件，若是你正正在利用这么风行De发布系统。这儿shi一个JeffStarr制制De。

同时，尝尝以坐点为从De，而且查看源代码，看看他们做了什么。

虽然如斯，若是IEDe错误谬误阻遏你了，如许考虑吧：就连Google也正在他们De次要搜刮页面上利用了HTML5De文档类型。就算若是你不利用所有新De布局标签，你能够至多操纵一下简练De脚本声明和下次我们会引见De关于一些非布局De语义标签。