从0到1 HTML5+CSS3修炼之道 PDF下载

第 一部分　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