《零基础学HTML5+CSS3》是针对零基础编程学习者全新研发的HTML5+CSS3入门教程。从初学者角度出发,通过通俗易懂的语言、流行有趣的实例,详细地介绍了使用HTML5+CSS3进行程式开发需要掌握的知识和技术。全书共分20章,包括HTML基础、文本、图像和超连结、CSS3概述、CSS3高级套用、表格与<div>标记、列表、表单、多媒体、HTML5新特性、离线Web应用程式、回响式网页设计以及51购商城等。书中所有知识都结合具体实例进行讲解,设计的程式代码给出了详细的注释,可以使读者轻鬆领会HTML5+CSS3程式开发的精髓,快速提高开发技能。
基本介绍
- 书名:零基础学HTML5+CSS3
- 作者:明日科技
- ISBN:ISBN 978-7-5692-1270-9
- 页数:400
- 定价:79.80
- 出版社:吉林大学出版社
- 出版时间:2017-12
- 开本:16
主要内容
本书通过大量实例及一个完整项目案例,帮助读者更好地巩固所学知识,提升能力;随书附赠的《小白实战手册》中给出了3个流行且实用的案例的详细开发流程,力求让学习者能学以致用,真正获得开发经验;附赠的光碟中给出视频讲解、实例及项目源码、代码查错器、练一练和动手纠错答案等,方便读者学习;书中设定了170多个二维码,扫描二维码观看视频讲解,解决学习疑难;不易理解的专业术语、代码难点只需手机扫描文字下方的e学码获得更多扩展解释,随时扫除学习障碍。
图书与《小白实战手册》+光碟+二维码+e学码+明日学院等内容,实现立体化、全方位的教学模式,降低编程门槛,让零基础者轻鬆跨入编程领域。
目录
第1章HTML基础 2
1.1 HTML概述 3
1.1.1 什幺是HTML 3
1.1.2 HTML的发展历程 3
1.2 HTML档案的基本结构 4
1.2.1 HTML的基本结构 4
1.2.2 HTML的基本标记 5
1.3 编写第一个HTML档案 9
1.3.1 HTML档案的编写方法 9
1.3.2 手工编写页面 9
1.3.3 使用可视化软体WebStorm
製作页面 10
1.4 难点解答 19
1.4.1 HTML档案中注释的种类 19
1.4.2 topmargin属性和margin-top属性的
区别 19
1.5 小结 19
1.6 动手纠错 20
第2章文本 21
2.1 标题 22
2.1.1 标题标记 22
2.1.2 标题的对齐方式 24
2.2 文字 26
2.2.1 文字的斜体、下划线、删除线 26
2.2.2 文字的上标与下标 28
2.2.3 特殊文字元号 29
2.3 段落 31
2.3.1 段落标记 31
2.3.2 段落的换行标记 32
2.3.3 段落的原格式标记 34
2.4 水平线 35
2.4.1 水平线标记 35
2.4.2 水平线标记的宽度 37
2.5难点解答 39
2.5.1 可以使用<font>标记设定文字的
字型和颜色吗? 39
2.5.2 大写的<H1>标记和小写的<h1>标记
有区别吗? 39
2.6小结 39
2.7动手纠错 39
第3章图像与超连结 41
3.1 添加图像 42
3.1.1 图像的基本格式 42
3.1.2 添加图像 42
3.2 设定图像属性 44
3.2.1 图像大小与框线 44
3.2.2 图像间距与对齐方式 46
3.2.3 替换文本与提示文字 47
3.3 连结标记 49
3.3.1 文本连结 49
3.3.2 书籤连结 51
3.4 图像的超连结 53
3.4.1 图像的超连结 53
3.4.2 图像热区连结 55
3.5 难点解答 57
3.5.1 单击超连结时,页面显示
找不到页面 57
3.5.2 为图片添加了热区连结,但是单击
连结位置并没有跳转页面 57
3.6 小结 58
3.7 动手纠错 58
第4章CSS3概述 59
4.1 CSS3概述 60
4.1.1 CSS的发展史 60
4.1.2 一个简单的CSS示例 60
4.2 CSS3中的选择器 64
4.2.1 属性选择器 64
4.2.2 类和ID选择器 67
4.2.3 伪类和伪元素选择器 69
4.2.4 其他选择器 72
4.3 常用属性 75
4.3.1 文本相关属性 75
4.3.2 背景相关属性 78
4.3.3 列表相关属性 81
4.5 难点解答 84
4.5.1 类和ID选择器是不是用的
越多越好 84
4.5.2 背景图片无法正常显示 84
4.6 小结 84
4.7 动手纠错 84
第5章CSS3高级套用 85
5.1 框模型 86
5.1.1 外边距margin 86
5.1.2 内边距padding 89
5.1.3 框线border 92
5.2 布局常用属性 96
5.2.1 浮动 96
5.2.2 定位相关属性 98
5.3 动画与特效 100
5.3.1 变换(transform) 100
5.3.2 过渡(transition) 103
5.3.3 动画(animation) 105
5.4 难点解答 109
5.4.1 设定了浮动效果,可是元素
“岿然不动”? 109
5.4.2 动画无法正常播放 109
5.5 小结 110
5.6 动手纠错 110
第6章表格与<div>标记 111
6.1 简单表格 112
6.1.1 简单表格的製作 112
6.1.2 表头的设定 115
6.2 表格的高级套用 117
6.2.1 表格的样式 117
6.2.2 表格的合併 119
6.2.3 表格的分组 121
6.3 <div>标记 123
6.3.1 <div>标记的介绍 123
6.3.2 <div>标记的套用 125
6.4 <span>标记 126
6.4.1 <span>标记的介绍 127
6.4.2 <span>标记的套用 128
6.5难点解答 129
6.5.1 有必要使用<th>表格标记吗?
用<tr>标记替换不也一样吗? 129
6.5.2 <div>标记和<span>标记
有什幺区别? 130
6.6小结 130
6.7动手纠错 130
第7章列表 131
7.1 列表的标记 132
7.2 无序列表 132
7.2.1 无序列表标记 133
7.2.2 无序列表属性 134
7.3 有序列表 136
7.3.1 有序列表标记 136
7.3.2 有序列表属性 137
7.4 列表的嵌套 139
7.4.1 定义列表的嵌套 140
7.4.2 无序列表和有序列表的嵌套 141
7.5 小结 144
7.6 动手纠错 144
第8章表单 145
8.1 表单概述 146
8.1.1 概述 146
8.1.2 表单标记<form> 146
8.2 输入标记 149
8.2.1 文本框 149
8.2.2 单选按钮和複选框 151
8.2.3 按钮 154
8.2.4 档案域和图像域 156
8.3 文本域和列表 158
8.3.1 文本域 159
8.3.2 列表/选单 160
8.4 难点解答 163
8.4.1 单行文本框与文本域的区别? 163
8.4.2 档案域控制项上显示的文字“选择
档案”能否更改为其他文字? 163
8.5 小结 163
8.6 动手纠错 163
第9章多媒体 165
9.1 HTML5多媒体的简述 166
9.1.1 HTML4中多媒体的套用 166
9.1.2 HTML5页面中的多媒体 166
9.2 多媒体元素基本属性 168
9.3 多媒体元素常用方法 171
9.3.1 媒体播放时的方法 171
9.3.2 canPlayType(type)方法 174
9.4 多媒体元素重要事件 175
9.4.1 事件处理方式 175
9.4.2 事件介绍 175
9.4.3 事件实例 176
9.5 难点解答 179
9.5.1 <source>标记有哪些重要属性? 179
9.5.2 如何运用controls属性、width属性
和height属性? 179
9.6 小结 179
9.7 动手纠错 180
第10章HTML5新特性 182
10.1 谁在开发HTML5 183
10.2 HTML5的新特性 183
10.3 HTML5和HTML4的区别 185
10.3.1 HTML5的语法变化 185
10.3.2 HTML5中的标记方法 185
10.3.3 HTML5语法中需要掌握的
几个要点 186
10.4 新增和废除的元素 190
10.4.1 新增的结构元素 190
10.4.2 新增的块级(block)的
语义元素 193
10.4.3 新增的行内(inline)的
语义元素 195
10.4.4 新增的嵌入多媒体元素与
互动性元素 197
10.4.5 新增的input元素的类型 198
10.4.6 废除的元素 199
10.5 新增的属性和废除的属性 199
10.5.1 新增的属性 199
10.5.2 废除的属性 202
10.6难点解答 203
10.6.1 在HTML5中设定字元编码
注意事项? 203
10.6.2 可以省略标记的元素有哪些? 204
10.7 小结 204
10.8动手纠错 204
第11章JavaScript基础 205
11.1 JavaScript概述 206
11.1.1 JavaScript的发展史 206
11.1.2 JavaScript在HTML中的使用 208
11.2 JavaScript语言基础 210
11.2.1 数据类型 210
11.2.2 运算符与表达式 214
11.2.3 流程控制 217
11.3 JavaScript对象编程 220
11.3.1 Window视窗对象 221
11.3.2 Document文档对象 223
11.4 JavaScript事件处理 226
11.4.1 滑鼠键盘事件 226
11.4.2 页面事件 229
11.5难点解答 232
11.5.1 如何分别在JavaScript中和
HTML中调用事件处理程式? 232
11.5.2 如何在JavaScript中验证
表单数据? 232
11.6小结 232
11.7动手纠错 232
第12章绘製图形 233
12.1 认识HTML5中的画布Canvas 234
12.1.1 Canvas概述 234
12.1.2 使用Canvas绘製矩形 234
12.2 绘製基本图形 236
12.2.1 绘製直线 236
12.2.2 绘製曲线 239
12.2.3 绘製圆形 242
12.3 绘製变形图形 244
12.3.1 绘製平移效果的图形 244
12.3.2 绘製缩放效果的图形 245
12.3.3 绘製旋转效果的图形 247
12.4 绘製文字 248
12.4.1 绘製轮廓文字 248
12.4.2 绘製填充文字 250
12.4.3 文字相关属性 251
12.5 疑难解答 253
12.5.1 beginPath()和closePath()的
使用? 253
12.5.2 绘製平移缩放和旋转效果图形时
需要注意什幺? 253
12.6 小结 253
12.7 动手纠错 254
第13章档案与拖放 255
13.1 选择档案 256
13.1.1 通过file对象选择档案 256
13.1.2 使用BIob接口获取档案的
类型与大小 257
13.2 读取档案 259
13.2.1 FileReader接口的方法
以及事件 259
13.2.2 使用readAsDataURL方法
预览图片 260
13.2.3 使用readAsText方法读取
文本档案 263
13.3 拖放档案 264
13.3.1 拖放页面元素 264
13.3.2 DataTransfer对象的属性
与方法 266
13.3.3 使用effectAllowed和dropEffect属性
设定拖放效果 267
13.4 疑难解答 268
13.4.1 FileReader接口中的事件执行时
有顺序吗? 268
13.4.2 实现拖放功能时,每个拖放相关的
事件都要编写吗 268
13.5 小结 269
13.6 动手纠错 269
第14章离线Web应用程式 272
14.1 离线Web套用介绍 273
14.1.1 离线Web套用 273
14.1.2 套用快取技术 274
14.2 创建离线套用 275
14.2.1 快取清单 275
14.2.2 applicationCache对象 277
14.2.3 applicationCache对象的事件 278
14.3难点解答 280
14.3.1 本地快取与浏览器
网页快取的区别? 280
14.3.2 Internet临时保存功能可以指定
保存特定类型的档案吗? 280
14.4小结 280
14.5动手纠错 280
第15章使用Web Worker
处理执行绪 281
15.1 Web Worker概述 282
15.1.1 创建和使用Worker 282
15.1.2 Worker对象处理执行绪 283
15.2 执行绪中可用的对象和方法 286
15.3 多个JavaScript档案的载入与执行 287
15.4 执行绪嵌套 287
15.4.1 使用执行绪的单层嵌套 287
15.4.2 使用执行绪嵌套互动数据 290
15.5难点解答 294
15.5.1 如何使用API创建Worker,如何实现
多个子执行绪之间的互动? 294
15.5.2 Worker对象的onmessage事件
有什幺作用? 294
15.6小结 294
15.7动手纠错 294
第16章Web伺服器通信 295
16.1 WebSocket通信 296
16.1.1 WebSocket API介绍 296
16.1.2 HTTP通信和WebSocket通信比较 297
16.2 跨文档讯息传输 298
16.2.1 使用postMessageAPI 298
16.2.2 跨文档讯息传输流程 298
16.3小结 300
第17章本地存储数据 301
17.1 初识Web Storage 302
17.1.1 Web Storage概述 302
17.1.2 Web Storage中API的使用 302
17.2 本地资料库 306
17.2.1 Web SQL资料库概述 306
17.2.2 Web SQL Database中API的使用 306
17.3 疑难解答 311
17.3.1 sessionStorage、localStorage
与web SQL的异同? 311
17.3.2 本地存储等于离线快取吗? 311
17.4 小结 312
17.5 动手纠错 312
第18章回响式网页设计 313
18.1 概述 314
18.1.1 回响式网页设计的概念 314
18.1.2 回响式网页设计的优缺点和
技术原理 315
18.2 像素和萤幕解析度 315
18.2.1 像素和萤幕解析度 316
18.2.2 设备像素和CSS像素 317
18.3 视口 317
18.3.1 视口 318
18.3.2 视口常用属性 318
18.3.3 媒体查询 319
18.4 回响式网页的布局设计 320
18.4.1 常用布局类型 321
18.4.2 布局的实现方式 321
18.4.3 回响式布局的设计与实现 323
18.5小结 324
第19章回响式组件 325
19.1 回响式图片 326
19.1.1 方法1:使用<picture>标记 326
19.1.2 方法2:使用CSS图片 328
19.2 回响式视频 330
19.2.1 方法1:使用<meta>标记 330
19.2.2 方法2:使用HTML5手机播放器 332
19.3 回响式导航选单 334
19.3.1 方法1:CSS3回响式选单 335
19.3.2 方法2:JavaScript回响式选单 337
19.4 回响式表格 340
19.4.1 方法1:隐藏表格中的列 340
19.4.2 方法2:滚动表格中的列 343
19.4.3 方法3:转换表格中的列 345
19.5小结 347
19.6动手纠错 347
第20章51购商城 350
20.1 项目的设计思路 351
20.1.1 项目概述 351
20.1.2 界面预览 351
20.1.3 功能结构 353
20.1.4 资料夹组织结构 353
20.2 主页的设计与实现 354
20.2.1 主页的设计 354
20.2.2 顶部区和底部区功能的实现 355
20.2.3 商品分类导航功能的实现 357
20.2.4 轮播图功能的实现 359
20.2.5 商品推荐功能的实现 361
20.2.6 适配移动端的实现 362
20.3 商品列表页面的设计与实现 363
20.3.1 商品列表页面的设计 363
20.3.2 分类选项功能的实现 364
20.3.3 商品列表区的实现 365
20.4 商品详情页面的设计与实现 367
20.4.1 商品详情页面的设计 368
20.4.2 商品概要功能的实现 369
20.4.3 商品评价功能的实现 371
20.4.4 猜你喜欢功能的实现 373
20.5 购物车页面的设计与实现 374
20.5.1 购物车页面的设计 375
20.5.2 购物车页面的实现 375
20.6 付款页面的设计与实现 376
20.6.1 付款页面的设计 377
20.6.2 付款页面的实现 377
20.7 登录注册页面的设计与实现 379
20.7.1 登录注册页面的设计 380
20.7.2 登录页面的实现 381
20.7.3 注册页面的实现 382
20.8小结 385
实例索引 386