具体描述
《HTML5+CSS3从入门到精通》(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,
讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南、高级程序设计、开发指南同类图书,本书是一本适合快速入手的自学教程。内容有:创建HTML5文档,实战HTML5表单,实战HTML5绘画,HTML5音频与视频,Web存储,离线应用,Workers多线程处理,Geolocation地理位置等技术。CSS3部分主要介绍了CSS3概述,CSS选择器,文本、字体与颜色,背景和边框,2D变形,设计动画,网页布局、用户界面以及CSS3的其他新特性。
《HTML5+CSS3从入门到精通》内容涵盖了HTML5+CSS3的所有重要特性,通过大量实际案例对HTML5+CSS3的重要特性进行了详细讲解,内容全面丰富,易于理解,能够帮助读者提升实际应用技能。
本书内容翔实、结构清晰、循序渐进,基础知识与案例实战紧密结合,既可作为HTML5+CSS3初学者的入门教材,也适合作为中高级用户对新技术作进一步学习的参考用书。本书显著特色有:
1.同步视频讲解,让学习更为直观高效。227节大型高清同步视频讲解,先看视频再学习效率更高。
2.海量精彩实例,用实例学更轻松快捷。225个精彩实例,模仿练习是最快捷的学习方式。
3.精选实战案例,为高薪就业牵线搭桥。31个实战案例展示可为以后就业积累经验。
4.完整学习套餐,为读者提供贴心服务。参考手册11部、网页模版83类、素材源程序,让学习更加方便。
5.讲解通俗翔实,看得懂学得会才是硬道理。
作者简介
参与本书编写的人员包括咸建勋、奚晶、文菁、李静、钟世礼、李增辉、甘桂萍、刘燕、杨凡、李爱芝、余乐、孙宝良、余洪萍、谭贞军、孙爱荣、何子夜、赵美青、牛金鑫、孙玉静、左超红、蒋学军、邓才兵、袁江和李东博等。由于作者水平有限,书中疏漏和不足之处在所难免,欢迎读者朋友不吝赐教。广大读者如有好的建议、意见,或在学习本书时遇到疑难问题,可以联系我们,我们会尽快为您解答,服务邮箱为:design1993@163.com,liulm75@163.com。
目录信息
1.1 HTML5概述 2
1.1.1 HTML5新特性 2
1.1.2 HTML5组织 3
1.1.3 HTML5构成 4
1.2 HTML5设计原理 4
1.2.1 HTML开发历程 5
1.2.2 HTML5开发动力 6
1.2.3 HTML5设计理念 7
1.3 编写第一个HTML5页面 14
1.3.1 搭建上机练习环境 14
1.3.2 检测浏览器是否支持 14
1.3.3 使用HTML5编写简单的Web页面 15
1.4 HTML5页面的特征 17
1.4.1 使用HTML5结构化元素 17
1.4.2 使用CSS美化HTML5文档 19
第2章 从HTML、XHTML到HTML5 21
视频讲解:2小时
2.1 HTML基础 22
2.1.1 HTML简介 22
2.1.2 HTML特性 22
2.1.3 HTML结构 23
2.1.4 HTML语法 23
2.1.5 HTML标签 25
2.1.6 HTML属性 29
2.2 XHTML基础 32
2.2.1 XHTML结构 32
2.2.2 XHTML语法 33
2.2.3 XHTML类型 34
2.2.4 DTD解析 35
2.2.5 命名空间 37
2.3 HTML5基础 38
2.3.1 HTML5语法 38
2.3.2 HTML5元素 40
2.3.3 HTML5增加及废除的属性 46
2.3.4 HTML5全局属性 48
2.3.5 HTML5其他功能 50
第3章 创建HTML5文档 54
视频讲解:1小时13分钟
3.1 认识HTML5文档结构 55
3.2 HTML5元素分类 58
3.3 构建主体内容 59
3.3.1 标识文章 59
3.3.2 给内容分段 61
3.3.3 设计导航信息 64
3.3.4 设计辅助信息 66
3.3.5 设计微格式 67
3.3.6 添加发布日期 68
3.4 添加语义模块 69
3.4.1 添加标题块 69
3.4.2 给标题分组 70
3.4.3 添加脚注块 70
3.4.4 添加联系信息 71
3.5 综合实战:使用HTML5设计博客主页 72
3.5.1 设计大纲 73
3.5.2 设计样式 76
第4章 实战HTML5表单 79
视频讲解:1小时08分钟
4.1 新增的input输入类型 80
4.1.1 email类型的应用 80
4.1.2 url类型的应用 82
4.1.3 number类型的应用 83
4.1.4 range类型的应用 84
4.1.5 日期检出器类型的应用 85
4.1.6 search类型的应用 90
4.1.7 tel类型的应用 91
4.1.8 color类型的应用 92
4.2 新增的input属性 93
4.2.1 新增的autocomplete属性 93
4.2.2 新增的autofocus属性 95
4.2.3 新增的form属性 96
4.2.4 新增的表单重写属性 97
4.2.5 新增的height与width属性 98
4.2.6 新增的list属性 98
4.2.7 新增的min、max和step属性 99
4.2.8 新增的multiple属性 100
4.2.9 新增的pattern属性 101
4.2.10 新增的placeholder属性 101
4.2.11 新增的required属性 102
4.3 新增的form元素 103
4.3.1 新增的datalist元素 103
4.3.2 新增的keygen元素 103
4.3.3 新增的output元素 104
4.4 新增的form属性 105
4.4.1 新增的autocomplete属性 105
4.4.2 新增的novalidate属性 105
第5章 实战HTML5画布 106
视频讲解:2小时
5.1 认识HTML5 canvas元素 107
5.1.1 在页面中添加canvas元素 107
5.1.2 Canvas如何绘制图形 108
5.1.3 认识Canvas坐标 109
5.1.4 何时不用Canvas 109
5.1.5 如果浏览器不支持Canvas 110
5.1.6 检测浏览器支持 110
5.2 绘制简单图形 111
5.2.1 绘制直线 111
5.2.2 绘制矩形 112
5.2.3 绘制圆形 113
5.2.4 绘制三角形 115
5.2.5 清空画布 116
5.3 绘制贝塞尔曲线 117
5.3.1 绘制二次方贝塞尔曲线 118
5.3.2 绘制三次方贝塞尔曲线 119
5.4 图形的变换 120
5.4.1 保存与恢复Canvas状态 120
5.4.2 移动坐标空间 121
5.4.3 旋转坐标空间 123
5.4.4 缩放图形 125
5.4.5 矩阵变换 126
5.5 图形的组合与裁切 129
5.5.1 图形的组合 129
5.5.2 裁切路径 132
5.6 更多的颜色和样式选项 133
5.6.1 应用不同的线型 133
5.6.2 绘制线性渐变 138
5.6.3 绘制径向渐变 139
5.6.4 绘制图案 140
5.6.5 设置图形的透明度 141
5.6.6 创建阴影 142
5.7 绘制文字 144
5.7.1 绘制填充文字 144
5.7.2 文字相关属性 145
5.7.3 绘制轮廓文字 145
5.7.4 测量文字宽度 146
5.8 操作与使用图像 147
5.8.1 向Canvas中引入图像 147
5.8.2 改变图像大小 149
5.8.3 创建图像切片 150
第6章 HTML5音频与视频 152
视频讲解:50分钟
6.1 HTML5多媒体技术概述 153
6.1.1 关于编解码器 153
6.1.2 音频编解码器 153
6.1.3 视频编解码器 154
6.2 浏览器支持概述 156
6.2.1 用JavaScript检测音频格式支持情况 157
6.2.2 用JavaScript检测视频格式支持情况 158
6.3 在HTML5中播放音频 159
6.3.1 认识audio元素 159
6.3.2 播放音频 160
6.4 在HTML5中播放视频 161
6.4.1 认识video元素 161
6.4.2 播放视频 162
6.5 音频与视频相关属性、方法与事件 164
6.5.1 音频与视频相关属性 164
6.5.2 音频与视频相关方法 167
6.5.3 音频与视频相关事件 168
6.6 综合实战 169
6.6.1 用脚本控制音乐播放 169
6.6.2 查看视频帧画面 170
第7章 Web存储 175
视频讲解:1小时20分钟
7.1 认识Web Storage 176
7.1.1 Cookie存储机制的优缺点 176
7.1.2 为什么要用Web Storage 176
7.1.3 Web Storage的优缺点 177
7.1.4 浏览器支持概述 177
7.2 使用Web Storage 178
7.2.1 检查浏览器的支持性 178
7.2.2 设置和获取数据 180
7.2.3 防止数据泄露 181
7.2.4 Web Storage的其他用法 181
7.2.5 Web Storage事件监测 182
7.2.6 实例1:设计网页皮肤 183
7.2.7 实例2:跟踪localStorage数据 184
7.2.8 实例3:设计计数器 186
7.2.9 综合应用:Web应用项目实时跟踪 187
7.3 Web SQL数据库 192
7.3.1 Web SQL数据库概述 192
7.3.2 使用Web SQL数据库 193
7.3.3 实例1:创建简单的本地数据库 195
7.3.4 实例2:批量存储本地数据 198
7.3.5 综合应用:Web Storage和
Web SQL混合开发 199
第8章 离线应用 207
视频讲解:23分钟
8.1 HTML5离线应用概述 208
8.1.1 为什么要学习HTML5离线应用 208
8.1.2 浏览器支持概述 209
8.2 HTML5离线应用详解 210
8.2.1 解析manifest文件 210
8.2.2 搭建离线应用程序 213
8.2.3 检查浏览器是否支持 213
8.2.4 离线缓存更新实现 213
8.2.5 JavaScript接口实现 214
8.2.6 离线存储事件监听 217
8.3 实战1:缓存首页 218
8.4 实战2:离线编辑内容 221
8.5 实战3:离线跟踪 225
第9章 Workers多线程处理 231
视频讲解:1小时01分钟
9.1 认识Web Workers 232
9.1.1 Web Workers概述 232
9.1.2 浏览器支持概述 233
9.1.3 熟悉Web Workers成员 233
9.2 使用Web Workers 234
9.2.1 检查浏览器支持性 234
9.2.2 创建Web Workers 234
9.2.3 与Web Workers通信 235
9.2.4 使用Web Workers上机练习 237
9.3 案例实战 240
9.3.1 使用多线程实现后台运算 240
9.3.2 在后台过滤值 242
9.3.3 多任务并发处理 243
9.3.4 在多线程之间通信 246
9.3.5 使用线程技术计算Fibonacci数列 248
9.3.6 使用多线程绘图 249
9.4 综合应用:模拟退火算法 253
9.4.1 认识模拟退火算法 253
9.4.2 编写应用主页面 254
9.4.3 编写worker.js 256
9.4.4 与Web Workers通信 257
第10章 Geolocation地理位置 261
10.1 位置信息概述 262
10.1.1 为什么要学习Geolocation 262
10.1.2 位置信息表示方式 262
10.1.3 位置信息来源 262
10.1.4 IP定位 263
10.1.5 GPS定位 263
10.1.6 Wi-Fi定位 263
10.1.7 手机定位 264
10.1.8 自定义定位 264
10.2 使用Geolocation API 264
10.2.1 检查浏览器支持性 264
10.2.2 获取当前地理位置 265
10.2.3 监视位置信息 267
10.2.4 停止获取位置信息 267
10.2.5 隐私保护 267
10.2.6 处理位置信息 267
10.2.7 使用position对象 268
10.3 案例实战 269
10.3.1 使用Google地图 269
10.3.2 跟踪行走速度 271
第11章 CSS3概述 277
视频讲解:1小时01分钟
11.1 回顾CSS 278
11.1.1 CSS发展简史 278
11.1.2 CSS 1.0和CSS 2.0概述 278
11.1.3 CSS与DIV标记之缘 285
11.1.4 CSS编码规范 288
11.2 了解CSS3新增特性 289
11.2.1 属性选择器 289
11.2.2 RBGA 透明度 291
11.2.3 多栏布局 292
11.2.4 多背景图片 294
11.2.5 字符串溢出 295
11.2.6 块阴影与圆角阴影 296
11.2.7 圆角 297
11.2.8 边框图片 298
11.2.9 形变 299
11.3 CSS3前景展望 301
11.3.1 CSS3的应用范围 302
11.3.2 当前支持CSS3的浏览器 303
11.4 案例实战:设计漂亮的表单 305
第12章 CSS选择器 310
视频讲解:34分钟
12.1 属性选择器 311
12.1.1 认识属性选择器 311
12.1.2 案例实战 312
12.2 结构伪类选择器 314
12.2.1 认识结构伪类选择器 314
12.2.2 案例实战 315
12.3 UI伪类选择器 321
12.3.1 认识常用UI伪类选择器 321
12.3.2 案例实战 322
12.4 其他选择器 324
第13章 文本、字体与颜色 330
视频讲解:49分钟
13.1 设计文本阴影 331
13.1.1 定义text-shadow属性 331
13.1.2 应用阴影效果 333
13.1.3 综合实战:设计黑客网站首页 339
13.2 定义文本样式 341
13.2.1 文本样式简介 341
13.2.2 溢出文本 345
13.2.3 文本换行 347
13.3 设计颜色样式 353
13.3.1 使用RGBA颜色值 353
13.3.2 使用HSL颜色值 355
13.3.3 使用HSLA颜色值 359
13.3.4 定义opacity属性 360
13.3.5 定义transparent颜色值 363
第14章 背景和边框 365
视频讲解:1小时09分钟
14.1 设计多色边框 366
14.1.1 用法详解 366
14.1.2 案例实战 368
14.2 设计边框背景 368
14.2.1 用法详解 369
14.2.2 案例实战 372
14.3 设计圆角 375
14.3.1 用法详解 376
14.3.2 案例实战:设计椭圆图形 379
14.4 设计阴影 380
14.4.1 用法详解 380
14.4.2 案例实战:设计Windows7界面效果 385
14.5 设计背景 390
14.5.1 定义背景坐标 390
14.5.2 定义背景裁剪区域 392
14.5.3 定义背景图像大小 395
14.5.4 定义背景图像循环方式 396
14.5.5 定义多背景图像 398
第15章 2D变形 400
视频讲解:31分钟
15.1 认识transform 401
15.2 2D变形 402
15.2.1 旋转动画 403
15.2.2 缩放动画 404
15.2.3 移动动画 406
15.2.4 倾斜动画 408
15.2.5 变形动画 410
15.2.6 案例实战:设计涂鸦墙 412
15.3 自定义变形 414
15.4 定义复杂变形 416
第16章 设计动画 420
视频讲解:1小时20分钟
16.1 平滑过渡 421
16.1.1 定义过渡属性 421
16.1.2 定义过渡时间 422
16.1.3 定义过渡延迟时间 423
16.1.4 定义过渡效果 424
16.1.5 案例实战:设计Mac OS导航器 426
16.2 3D动画 428
16.2.1 定义动画名称 429
16.2.2 定义动画时间 429
16.2.3 定义动画播放方式 429
16.2.4 定义动画延迟时间 429
16.2.5 定义动画播放次数 430
16.2.6 定义动画播放方向 430
16.2.7 案例实战:设计图片翻转特效 430
16.3 渐变效果 431
16.3.1 设计Webkit渐变 432
16.3.2 Webkit案例实战 437
16.3.3 设计Gecko渐变 440
16.3.4 Gecko案例实战 446
16.3.5 设计IE渐变 447
16.3.6 设计W3C渐变 449
16.4 案例综合实战 449
16.4.1 设计礼品盒 450
16.4.2 设计折叠面板 452
16.4.3 设计易拉罐 454
16.4.4 设计光盘滑动动画 457
16.4.5 设计下拉菜单 461
16.4.6 设计精致按钮 465
第17章 网页布局 468
视频讲解:40分钟
17.1 设计多列布局 469
17.2 设置多列显示样式 471
17.2.1 定义列宽 471
17.2.2 定义列数 472
17.2.3 定义列间距 473
17.2.4 定义列边框样式 475
17.2.5 定义跨列显示 476
17.2.6 定义列高度 478
17.2.7 定义打印列 480
17.3 设计盒布局 481
17.4 设置盒布局格式 485
17.4.1 定义自适应宽度 485
17.4.2 定义列显示顺序 487
17.4.3 定义列排列方向 489
17.4.4 定义模块大小自适应 491
17.4.5 消除空白 493
17.4.6 定义对齐方式 497
17.5 综合实战:设计多列网页 498
第18章 用户界面 506
视频讲解:35分钟
18.1 改变盒模型组成方式 507
18.2 调节元素尺寸 507
18.3 设计轮廓 509
18.3.1 定义轮廓线 509
18.3.2 定义轮廓线宽度 512
18.3.3 定义轮廓线样式 512
18.3.4 定义轮廓线颜色 513
18.3.5 定义轮廓线位移 513
18.4 设计导航 516
18.4.1 定义导航顺序 516
18.4.2 定义方向键控制顺序 519
18.5 添加显示内容 521
18.6 恢复默认样式 522
18.6.1 取消元素样式 522
18.6.2 慎用initial的情况 524
第19章 CSS3其他新特性 527
视频讲解:40分钟
19.1 溢出处理 528
19.2 自定义字体类型 530
19.2.1 使用@font-face规则 530
19.2.2 开放字体 532
19.3 定义设备类型 532
19.3.1 认识Media Queries模块 532
19.3.2 认识@media规则 533
19.3.3 使用@media规则 535
19.3.4 在网站中应用@media规则 537
19.4 添加语音功能 543
19.5 设计倒影 545
· · · · · · (收起)
读后感
虽然所谓“入门到精通”,没有Html基础的千万别买此书。按照目录来说体系看上去分得很好,但很多术语都是不作解释即默认你已经会的。前三章内容基本纯文字,只告诉你这么打,不告诉你为什么,不显示输出效果。视频内容更是帮助不大,只是照本宣科,并非我原先想象中的手打代码...
虽然所谓“入门到精通”,没有Html基础的千万别买此书。按照目录来说体系看上去分得很好,但很多术语都是不作解释即默认你已经会的。前三章内容基本纯文字,只告诉你这么打,不告诉你为什么,不显示输出效果。视频内容更是帮助不大,只是照本宣科,并非我原先想象中的手打代码...
虽然所谓“入门到精通”,没有Html基础的千万别买此书。按照目录来说体系看上去分得很好,但很多术语都是不作解释即默认你已经会的。前三章内容基本纯文字,只告诉你这么打,不告诉你为什么,不显示输出效果。视频内容更是帮助不大,只是照本宣科,并非我原先想象中的手打代码...
虽然所谓“入门到精通”,没有Html基础的千万别买此书。按照目录来说体系看上去分得很好,但很多术语都是不作解释即默认你已经会的。前三章内容基本纯文字,只告诉你这么打,不告诉你为什么,不显示输出效果。视频内容更是帮助不大,只是照本宣科,并非我原先想象中的手打代码...
虽然所谓“入门到精通”,没有Html基础的千万别买此书。按照目录来说体系看上去分得很好,但很多术语都是不作解释即默认你已经会的。前三章内容基本纯文字,只告诉你这么打,不告诉你为什么,不显示输出效果。视频内容更是帮助不大,只是照本宣科,并非我原先想象中的手打代码...
用户评价
这本技术书籍的装帧设计实在让人眼前一亮,封面的配色大胆而富有现代感,那种深沉的底色配上活泼的色彩点缀,立刻就传达出“前沿”和“实用”的信号。拿到手里的时候,能感受到纸张的质感相当不错,不是那种廉价的哑光纸,略带一点光泽,翻阅起来非常顺滑,让人忍不住想立刻翻开正文。我特别留意了排版细节,页边距的处理很合理,字体的大小和行间距也经过了精心调整,即便是长时间阅读,眼睛也不会感到明显的疲劳。尤其值得称赞的是,书中大量的代码示例部分,它们的缩进和高亮样式做得非常清晰,即便是初学者也能迅速分辨出HTML标签、CSS属性和值,这在很多同类书籍中是难以做到的。作者显然在用户体验上下了很大功夫,让枯燥的技术学习过程变得更加愉悦和高效。这种对细节的极致追求,让我对后续的学习内容充满了期待,感觉这不是一本匆忙赶工出来的教材,而是一份用心打磨的作品。
我通常对这类声称“从入门到精通”的书籍持保留态度,因为很多时候“精通”的部分往往流于表面,堆砌了一些过时的或不常用的高级特性。然而,这本书在内容深度的把握上,展现出了一种非常成熟和老道的经验。它不仅仅停留在讲解基础标签和属性的“是什么”和“怎么用”,更深入地探讨了背后的“为什么”。例如,在讲解CSS布局时,它并没有仅仅满足于Flexbox和Grid的简单应用,而是花了相当大的篇幅去对比它们在不同场景下的性能差异和最佳实践,甚至还穿插了一些关于浏览器渲染原理的浅层介绍,这对于想深入理解底层机制的读者来说,简直是宝藏。我试着按照书中的步骤搭建了一个稍微复杂一点的响应式布局,发现书中提供的解决方案不仅优雅,而且在移动端和桌面端切换时的过渡非常平滑,这让我对作者的实战经验深信不疑。这种由浅入深、层层递进的知识结构,真正体现了“精通”二字的重量。
作为一名已经工作了几年的前端开发者,我购买这本书的初衷是想系统性地查漏补缺,尤其是想看看是否有关于HTML5新API的详尽介绍。这本书在这方面完全超出了我的预期。它对Web Workers、Canvas 2D API,特别是地理定位(Geolocation API)的讲解,不仅提供了标准用法,还结合了当下流行的Web App开发模式进行了案例演示。最让我感到惊喜的是,书中对于一些常见的性能优化陷阱,比如图片懒加载的最佳实现方式、异步脚本加载的最佳实践等,都给出了非常具体的代码优化建议,并且附带了优化前后的性能对比数据,这种量化的分析比空泛的理论更有说服力。我立刻将书中关于事件委托和性能节流的优化方案应用到了我目前维护的一个旧项目中,发现页面响应速度确实有了肉眼可见的提升。这本书提供的知识点完全是面向现代Web开发的,没有丝毫的“陈旧感”。
坦白讲,我学习编程时,最怕的就是那种干巴巴的、纯粹的理论堆砌。这本书在理论的阐述和实践的结合上找到了一个非常微妙的平衡点。每一章的理论讲解之后,几乎都紧跟着一个精心设计的实战项目或者一个“动手挑战”。这些挑战的难度设置非常巧妙,它们不会让你感到气馁,但又足以让你跳出复制粘贴的舒适区。比如,在CSS动画与过渡那一章,它引导读者去模仿一个复杂的交互效果,这个过程迫使我去深入研究`cubic-bezier`函数的具体含义,以及如何利用`requestAnimationFrame`来控制动画的精确度。这种“边学边做,做中学”的节奏感,极大地提高了我的学习兴趣和记忆深度。我感觉自己不是在读一本教材,而是在跟随一位经验丰富的导师进行一对一的辅导,每完成一个小练习,都会有一种“我掌握了这个”的成就感,这种积极反馈机制对于保持学习的连贯性至关重要。
我得说,这本书的辅助学习资源和售后支持服务(如果包含在内的话,或者仅仅是作者在社区的活跃度)给我留下了极佳的印象。虽然我指的是实体书本身,但从书中提到的在线源码仓库的组织结构来看,就能推断出作者的专业素养。源码库的文件结构清晰,注释详尽,每个案例都能独立运行,这为我进行二次开发和深入研究提供了极大的便利。此外,书中很多复杂概念的解释,都配有详细的流程图或结构示意图,这对于视觉学习者来说是无价的。例如,介绍CSS选择器优先级和继承规则时,那个层级图画得非常直观,一下子就理清了多年来困扰我的小困惑。总而言之,这本书的价值远远超过了其定价,它提供了一套完整的、可执行的学习路径图,从一个完全的新手到能够独立构建复杂前端界面的开发者,它都提供了坚实的阶梯,是一本值得反复翻阅的工具书和参考手册。
内容有点零散,不过还不错。
可以当参考书
这书我简直服了,到处是重复的,几句话的简单东西说好几页,而真正重要的东西却不解释,直接贴大段代码,强忍着看了三个小时实在忍不下去,书扔了。
别人推荐买的,看了两章,看不动。不是看不懂 是看不动。
111