《从0到1：HTML5+CSS3修炼之道》配套资源

编辑推荐

源自阅读量破600万的人气教程 ·全面透彻介绍HTML5与CSS3的新技术 ·每一张都配有对应练习，并附赠几十道前端面试题 ·通俗易懂、风趣幽默的写作风格，让你以很快的速度上手 ·配套网站 配套练习 课件PPT 源码素材 作者答疑，轻松上手web前端开发

内容简介

作者根据自己多年的前后端开发经验，站在完全零基础读者的角度，详尽介绍了HTML5和CSS3的基础知识、新技术及各种高级开发技巧。 全书分为两大部分：*部分介绍HTML5的新技术，主要包括新增元素、新增属性、元素拖放、文件操作、本地存储、音频视频、离线应用等；第二部分介绍CSS3的新技术，主要包括新增选择器、CSS3变形、CSS3过渡、CSS3动画、多列布局、滤镜效果、弹性盒子模型等。 为了方便高校老师教学，本书不但配备了所有案例的源代码，还提供了配套的PPT 课件。本书适合作为前端开发人员的参考书，也可以作为大中专院校相关专业的教学参考书。

作者简介

莫振杰,从事前后端开发4年多，开发过绿叶学习网、广州智能工程研究会网站、大量在线应用工具以及各种类型网站，著有多本编程书。 现为绿叶学习网的站长，该网站用于分享前后端开发经验和前后端开发的在线教程，在互联网引起广泛关注，受到网友推崇。

目录

• 第 一部分　HTML5实战
• 第 1章　HTML5简介 3
• 1.1　HTML、XHTML和HTML5 3
• 1.1.1　HTML和XHTML 3
• 1.1.2　HTML5 4
• 1.2　学前准备 7
• 1.3　本章练习 8
• 第 2章　新增元素 9
• 2.1　结构元素 9
• 2.1.1　header元素 9
• 2.1.2　nav元素 12
• 2.1.3　article元素 13
• 2.1.4　aside元素 14
• 2.1.5　section元素 14
• 2.1.6　footer元素 14
• 2.2　表单元素 15
• 2.2.1　新增input元素类型 15
• 2.2.2　新增其他表单元素 26
• 2.3　其他新增元素 29
• 2.3.1　address元素 29
• 2.3.2　time元素 31
• 2.3.3　progress元素 32
• 2.3.4　meter元素 34
• 2.3.5　figure和figcaption元素 34
• 2.3.6　fieldset和legend元素 35
• 2.4　改良后的元素 36
• 2.4.1　a元素 36
• 2.4.2　ol元素 37
• 2.4.3　small元素 38
• 2.4.4　script元素 39
• 2.5　本章练习 40
• 第3章　新增属性 42
• 3.1　公共属性 42
• 3.1.1　hidden属性 42
• 3.1.2　draggable属性 43
• 3.1.3　contenteditable属性 44
• 3.1.4　data-*属性 45
• 3.2　input元素的新增属性 47
• 3.2.1　autocomplete属性 47
• 3.2.2　autofocus属性 48
• 3.2.3　placeholder属性 49
• 3.2.4　required属性 50
• 3.2.5　pattern属性 51
• 3.3　form元素的新增属性 52
• 3.4　本章练习 54
• 第4章　元素拖放 56
• 4.1　元素拖放简介 56
• 4.2　dataTransfer对象 58
• 4.2.1　dataTransfer对象简介 58
• 4.2.2　dataTransfer对象应用 59
• 4.3　本章练习 62
• 第5章　文件操作 63
• 5.1　文件操作简介 63
• 5.2　File对象 68
• 5.3　FileReader对象 70
• 5.4　Blob对象 77
• 5.5　本章练习 81
• 第6章　本地存储 83
• 6.1　本地存储简介 83
• 6.2　localStorage 84
• 6.3　sessionStorage 88
• 6.4　indexedDB 90
• 6.4.1　操作“数据库” 91
• 6.4.2　操作“对象仓库” 94
• 6.4.3　增删查改 97
• 6.5　实战题：计数器 107
• 6.6　本章练习 108
• 第7章　音频视频 109
• 7.1　视频音频简介 109
• 7.1.1　Flash时代的逝去 109
• 7.1.2　HTML5时代的来临 110
• 7.2　开发视频 110
• 7.2.1　video元素 110
• 7.2.2　视频格式 112
• 7.2.3　自定义视频 113
• 7.3　开发音频 122
• 7.3.1　audio元素 122
• 7.3.2　音频格式 123
• 7.3.3　自定义音频 124
• 7.4　本章练习 125
• 第8章　离线应用 126
• 8.1　搭建服务器环境 126
• 8.2　离线存储 128
• 8.3　更新缓存 131
• 8.4　本章练习 132
• 第9章　多线程处理 133
• 9.1　Web Worker简介 133
• 9.2　Web Worker应用 135
• 9.3　实战题：后台计算 137
• 9.4　本章练习 138
• 第 10章　地理位置 139
• 10.1　地理位置简介 139
• 10.1.1　getCurrentPosition()方法 139
• 10.1.2　watchPosition()方法 143
• 10.1.3　clearWatch()方法 145
• 10.2　百度地图 147
• 10.2.1　API简介 147
• 10.2.2　API应用 151
• 10.3　本章练习 152
• 第 11章　桌面通知 153
• 11.1　Notification API简介 153
• 11.2　Notification API应用 155
• 11.3　本章练习 157
• 第 12章　Canvas 158
• 12.1　Canvas是什么 158
• 12.1.1　Canvas简介 158
• 12.1.2　Canvas与SVG 160
• 12.2　Canvas元素 160
• 12.2.1　Canvas元素 161
• 12.2.2　Canvas对象 162
• 12.3　直线 164
• 12.3.1　Canvas坐标系 164
• 12.3.2　直线的绘制 165
• 12.4　矩形 170
• 12.4.1　描边矩形 170
• 12.4.2　填充矩形 173
• 12.4.3　rect()方法 176
• 12.4.4　清空矩形 178
• 12.5　多边形 180
• 12.5.1　Canvas绘制箭头 181
• 12.5.2　Canvas绘制正多边形 182
• 12.5.3　Canvas绘制五角星 184
• 12.6　实战题：绘制调色板 186
• 12.7　本章练习 188
• 第二部分　CSS3实战
• 第 13章　CSS3简介 191
• 13.1　CSS3简介 191
• 13.2　浏览器私有前缀 192
• 13.3　一个酷炫的CSS3效果 194
• 13.4　本章练习 197
• 第 14章　新增选择器 198
• 14.1　CSS3选择器简介 198
• 14.2　属性选择器 199
• 14.3　子元素伪类选择器 201
• 14.3.1　
• :first-child、:last-child、:nth-child(n)、:only-child 201
• 14.3.2　
• :first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type 204
• 14.4　UI伪类选择器 205
• 14.4.1　:focus 205
• 14.4.2　::selection 206
• 14.4.3　:checked 209
• 14.4.4　:enabled和:disabled 210
• 14.4.5　:read-write和:read-only 211
• 14.5　其他伪类选择器 212
• 14.5.1　:root 212
• 14.5.2　:empty 213
• 14.5.3　:target 214
• 14.5.4　:not() 217
• 14.6　本章练习 218
• 第 15章　文本样式 220
• 15.1　文本样式简介 220
• 15.2　文本阴影：text-shadow 220
• 15.2.1　W3C坐标系 220
• 15.2.2　text-shadow属性简介 221
• 15.2.3　定义多个阴影 224
• 15.3　文本描边：text-stroke 224
• 15.4　文本溢出：text-overflow 226
• 15.5　强制换行：word-wrap、
• word-break 228
• 15.6　嵌入字体：@font-face 230
• 15.7　实战题：火焰字 232
• 15.8　本章练习 233
• 第 16章　颜色样式 234
• 16.1　颜色样式简介 234
• 16.2　opacity透明度 234
• 16.3　RGBA颜色 235
• 16.4　CSS3渐变 239
• 16.4.1　线性渐变 240
• 16.4.2　径向渐变 242
• 16.5　实战题：渐变按钮 248
• 16.6　实战题：鸡蛋圆 249
• 16.7　本章练习 250
• 第 17章　边框样式 251
• 17.1　边框样式简介 251
• 17.2　圆角效果：border-radius 251
• 17.2.1　border-radius实现圆角 252
• 17.2.2　border-radius实现半圆和圆 256
• 17.2.3　border-radius实现椭圆 258
• 17.2.4　border-radius的派生子属性 260
• 17.3　边框阴影：box-shadow 260
• 17.3.1　box-shadow属性简介 260
• 17.3.2　4个方向阴影独立样式 265
• 17.4　多色边框：border-colors 266
• 17.5　边框背景：border-image 269
• 17.5.1　border-image属性简介 269
• 17.5.2　border-image的派生子属性 272
• 17.6　实战题：3D卡通头像 273
• 17.7　本章练习 276
• 第 18章　背景样式 279
• 18.1　背景样式简介 279
• 18.2　背景大小：background-size 279
• 18.3　背景位置：background-origin 282
• 18.4　背景剪切：background-clip 285
• 18.5　多背景图片 288
• 18.6　本章练习 290
• 第 19章　CSS3变形 291
• 19.1　CSS3变形简介 291
• 19.2　平移：translate() 292
• 19.3　缩放：scale() 296
• 19.4　倾斜：skew() 300
• 19.5　旋转：rotate() 304
• 19.6　中心原点：transform-origin 305
• 19.7　实战题：个性照片墙 307
• 19.8　本章练习 309
• 第 20章　CSS3过渡 310
• 20.1　CSS3过渡简介 310
• 20.2　过渡属性：transition-property 312
• 20.3　过渡时间：transition-duration 313
• 20.4　过渡方式：transition-
• timing-function 315
• 20.5　延迟时间：transition-delay 317
• 20.6　深入了解transition属性 318
• 20.6.1　transition-property取值为all 318
• 20.6.2　transition-delay的省略 320
• 20.6.3　transition属性的位置 320
• 20.7　实战题：鼠标指针移上去显示内容 321
• 20.8　实战题：图片文字介绍滑动效果 323
• 20.9　实战题：白光闪过效果 326
• 20.10　实战题：脉动效果 327
• 20.11　实战题：手风琴效果 328
• 20.12　本章练习 330
• 第 21章　CSS3动画 331
• 21.1　CSS3动画简介 331
• 21.2　@keyframes 333
• 21.3　动画名称：animation-name 335
• 21.4　持续时间：animation-duration 338
• 21.5　动画方式：animation-
• timing-function 340
• 21.6　延迟时间：animation-delay 342
• 21.7　播放次数：animation-
• iteration-count 343
• 21.8　播放方向：animation-direction 345
• 21.9　播放状态：animation-play-state 347
• 21.10　实战题：脉冲动画 348
• 21.11　实战题：loading效果 350
• 21.12　本章练习 352
• 第 22章　多列布局 353
• 22.1　多列布局 353
• 22.2　列数：column-count 354
• 22.3　列宽：column-width 356
• 22.4　间距：column-gap 358
• 22.5　边框：column-rule 360
• 22.6　跨列：column-span 362
• 22.7　实战题：瀑布流布局 364
• 22.8　本章练习 366
• 第 23章　滤镜效果 367
• 23.1　滤镜效果简介 367
• 23.2　亮度：brightness() 368
• 23.3　灰度：grayscale() 369
• 23.4　复古：sepia() 370
• 23.5　反色：invert() 371
• 23.6　旋转：hue-rotate() 372
• 23.7　阴影：drop-shadow() 373
• 23.8　透明度：opacity() 374
• 23.9　模糊度：blur() 375
• 23.10　对比度：contrast() 376
• 23.11　饱和度：saturate() 377
• 23.12　多种滤镜 378
• 23.13　实战题：鬼屋 379
• 23.14　本章练习 381
• 第 24章　弹性盒子模型 382
• 24.1　弹性盒子模型简介 382
• 24.2　放大比例：flex-grow 385
• 24.3　缩小比例：flex-shrink 387
• 24.4　元素宽度：flex-basis 389
• 24.5　复合属性：flex 391
• 24.6　排列方向：flex-direction 392
• 24.7　多行显示：flex-wrap 394
• 24.8　复合属性：flex-flow 396
• 24.9　排列顺序：order 397
• 24.10　水平对齐：justify-content 399
• 24.11　垂直对齐：align-items 401
• 24.12　实战题：水平居中和垂直居中 404
• 24.13　实战题：伸缩菜单 405
• 24.14　本章练习 407
• 第 25章　其他样式 408
• 25.1　outline属性 408
• 25.2　initial取值 409
• 25.3　calc()函数 410
• 25.4　overflow-x和overflow-y 413
• 25.5　pointer-events属性 417
• 25.6　本章练习 418
• 附录A　HTML5新增元素 420
• 附录B　HTML5新增属性 422
• 附录C　CSS3新增选择器 423
• 附录D　CSS3新增属性 425