提到H5，很多人认为H5是HTML5的简称，但事实上这是错误的，两者关系并不等同。
通常我们所说的H5就是H5广告，大多是在微信上宣传营销使用的，而HTML5第五代HTML的标准，一种规范，可以说，H5都是用 HTML5编写
的，也就是所有H5都遵循HTML5这个规范，不然就会出现问题。
H5和HTML5并不是一个意思，H5并不是一项技术，而是一项标准，其中所包含的技术主要有页面素材预加载技术，音乐加载播放技术，可
以滑动的页面，可以涂抹擦除，有动态的文字和，可以填表报名，可以支持分享自定义的文案和等一系列技术。HTML是“超文本标记语
言”的英文缩写。我们上网所看到的网页，多数都是由HTML写成。
简单的讲：H5不=HTML5
H5 是一个产品名词
HTML5是一个技术名词
一、首先从功能与设计目标来看， 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从入门到精通》系统、全面地讲解了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 空格—— 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分钟
欢迎分享，转载请注明来源：表白网
微信扫一扫
支付宝扫一扫
评论列表（0条）