21天学通HTML5+CSS3PDF电子书下载

第1章 了解网页 1

1.1 什么是网页 1

1.1.1 网页概述 1

1.1.2 静态网页 2

1.1.3 动态网页 3

1.1.4 开发动态页面和静态页面的联系 4

1.1.5 网页浏览器的工作原理 6

1.2 HTML和HTML5 6

1.2.1 超文本标识语言HTML 7

1.2.2 可扩展超文本标识语言XHTML 7

1.2.3 HTML5的设计理念 8

1.2.4 HTML页面的开发工具 9

1.3 实战：编写一个简单的页面（HTML＆HTML5） 10

1.4 小结 11

1.5 本章习题 12

第2章 了解HTML网页的结构 13

2.1 用记事本打开一个页面 13

2.2 HTML基础 15

2.2.1 HTML的基础语法 15

2.2.2 HTML文档的结构 15

2.3 HTML文档中的标签 17

2.3.1 样本代码DOCTYPE 17

2.3.2 开始标签＜html＞ 18

2.3.3 头标签和头标签的对象 18

2.3.4 标题标签＜title＞ 21

2.3.5 体标签＜body＞ 21

2.3.6 美化HTML文档 23

2.4 实战：从无到有设计一个页面 23

2.5 小结 24

2.6 本章习题 25

第3章 网页的文本设计 26

3.1 新旧方法对比 26

3.2 文本的排版格式 28

3.2.1 写一行换一行 28

3.2.2 在页面文本中空格 29

3.2.3 文本的段落要对齐 31

3.3 文本的属性样式 33

3.3.1 不一样的文本字体大小 33

3.3.2 奇妙的特殊符号 35

3.3.3 给文本加标注 36

3.4 整齐的文本列表 37

3.4.1 无序列表 37

3.4.2 有序列表 38

3.4.3 定义列表 39

3.4.4 列表嵌套 40

3.5 实战：制作一则HTML网页版的通知 41

3.6 小结 43

3.7 本章习题 43

第4章 网页中的图像设计 44

4.1 图像的基础知识 45

4.1.1 最常用的位图图像 45

4.1.2 在页面中常用的位图格式 45

4.1.3 矢量图 46

4.1.4 图像的分辨率 47

4.1.5 认识一些网页中常用的Banner尺寸 47

4.2 页面中的图像 48

4.2.1 理解图像路径 48

4.2.2 像编辑文本对齐一样在页面中对齐图片 49

4.2.3 图像与文本的对齐方式 50

4.2.4 控制图像与文本的距离 51

4.3 让图像更美观 52

4.3.1 使用画图工具修改图像 52

4.3.2 给图像添加边框 53

4.3.3 独树一帜的水平线 54

4.4 改变页面的背景 54

4.5 实战：把照片放到网页上去 55

4.6 小结 56

4.7 本章习题 57

第5章 网页中的链接 58

5.1 网页链接 58

5.1.1 初识页面链接 59

5.1.2 理解链接地址 60

5.2 链接的种种不同 61

5.2.1 基本的文本链接 61

5.2.2 基本的图像链接 61

5.2.3 把邮箱留给需要联系你的人 62

5.2.4 在同一页面中快速查找信息 63

5.3 提高页面链接的友好度 65

5.3.1 美观链接的状态 65

5.3.2 奇妙特殊的链接方式 67

5.3.3 热点图像区域的链接 69

5.4 在新窗口中显示链接窗口 70

5.5 实战：一个带链接的电影排行榜页面 71

5.6 小结 73

5.7 本章习题 73

第6章 网页中的表单 75

6.1 表单的工作原理 77

6.1.1 ＜script＞标记 77

6.1.2 创建表单 77

6.1.3 表单域 78

6.2 通过表单展示不一样的页面 79

6.2.1 input对象下的多种表单表现形式 79

6.2.2 text文本框的样式表单 80

6.2.3 password输入密码的样式表单 80

6.2.4 checkbox复选框的样式表单 81

6.2.5 radio单选框的样式表单 82

6.2.6 submit提交数据的样式表单 83

6.2.7 hidden隐藏域的样式表单 84

6.2.8 image样式的表单 84

6.2.9 file上传文件的样式表单 85

6.2.10 textarea对象的表单 86

6.2.11 select对象的表单 87

6.2.12 表单域集合 89

6.3 HTML5表单的进化 90

6.3.1 早期的表单发展 90

6.3.2 HTML5表单的出世 90

6.3.3 当前的支持情况 90

6.3.4 新增的表单输入类型 90

6.4 新增表单特性及元素 92

6.4.1 form特性 92

6.4.2 formaction特性 92

6.4.3 formmethod、formenctype、formnovalidate、formtarget特性 93

6.4.4 placeholder特性 93

6.4.5 autofocus特性 93

6.4.6 autocomplete特性 93

6.4.7 list特性和datalist元素 93

6.4.8 keygen元素 94

6.4.9 output元素 94

6.5 表单验证API 95

6.5.1 与验证有关的表单元素特性 95

6.5.2 表单验证的属性 95

6.5.3 ValidityState对象 96

6.5.4 表单验证的方法 97

6.5.5 表单验证的事件 99

6.6 实战：表单构成的HTML页面 99

6.7 实战：表单构成的用户注册页面（HTML5） 104

6.7.1 案例简介 104

6.7.2 页面基本元素 104

6.7.3 实现表单验证 105

6.7.4 其他处理函数 106

6.8 小结 107

6.9 习题 107

第7章 音频和视频 108

7.1 Audio和Video的基础知识 108

7.1.1 在线多媒体的发展 108

7.1.2 多媒体术语 109

7.1.3 HTML5多媒体文件格式 110

7.1.4 功能缺陷及未来趋势 111

7.2 使用HTML5的Audio和Video元素 111

7.2.1 在页面中加入音频和视频 112

7.2.2 使用sourcg元素 112

7.2.3 使用脚本检测浏览器的标签支持情况 112

7.2.4 Audio和Video的特性和属性 113

7.2.5 Audio和Video的方法 115

7.2.6 Audio和Video的事件 117

7.3 实战：自定义播放工具条 118

7.3.1 案例简介 118

7.3.2 网页基本元素 118

7.3.3 定义全局的视频对象 119

7.3.4 添加播放／暂停、前进和后退功能 119

7.3.5 添加慢进和快进功能 119

7.3.6 添加静音和音量的功能 120

7.3.7 添加进度显示功能 120

7.4 小结 121

7.5 习题 121

第8章 拖放功能 123

8.1 拖放API 123

8.1.1 新增的draggable特性 123

8.1.2 新增的鼠标拖放事件 123

8.1.3 DataTransfer对象 124

8.1.4 实战：拖放元素的内容 125

8.2 文件API 127

8.2.1 新增的标签特性 127

8.2.2 FileList对象与File对象 127

8.2.3 Blob对象 128

8.2.4 FileReader接口 129

8.3 实战：把图片拖入浏览器 133

8.3.1 案例简介 133

8.3.2 设计网页基本元素 134

8.3.3 基本函数的实现 134

8.3.4 页面加载处理 135

8.4 小结 135

8.5 本章习题 136

第9章 本地存储 137

9.1 本地存储对象——Web Storage 137

9.1.1 Web Storage简介 137

9.1.2 localStorage和sessionStorage 138

9.1.3 设置和获取Storage数据 139

9.1.4 Storage API的属性和方法 141

9.1.5 存储JSON对象的数据 143

9.1.6 StorageAPI的事件 145

9.1.7 实战：在两个窗口中实现通信 145

9.2 本地数据库——Web SQL Database 147

9.2.1 Web SQLDatabase简介 147

9.2.2 操作Web SQL数据库 147

9.2.3 实战：基本的数据库操作实例 148

9.3 小结 151

9.4 本章习题 151

第10章 利用Canvas绘制图形 153

10.1 认识Canvas 153

10.1.1 Canvas的历史 153

10.1.2 Canvas与SVG，以及VML之间的差异 153

10.2 Canvas基本知识 154

10.2.1 构建Canvas元素 154

10.2.2 使用JavaScript实现绘图的流程 155

10.3 使用Canvas绘图 156

10.3.1 绘制矩形 156

10.3.2 使用路径 159

10.3.3 图形组合 163

10.3.4 绘制曲线 164

10.3.5 使用图像 170

10.3.6 剪裁区域 171

10.3.7 绘制渐变 173

10.3.8 描边属性 175

10.3.9 模式 177

10.3.10 变换 178

10.3.11 使用文本 181

10.3.12 阴影效果 183

10.3.13 状态的保存与恢复 184

10.3.14 操作像素 185

10.4 实验室：在Canvas中实现动画 187

10.5 小结 191

10.6 本章习题 191

第11章 创建框架结构的页面 192

11.1 创建窗口框架页面 192

11.1.1 创建窗口框架的＜frameset＞和＜frame＞标签 193

11.1.2 横向分割窗口 193

11.1.3 纵向分割窗口 194

11.1.4 框架的嵌套 194

11.1.5 将页面放入到窗口框架中 195

11.2 花点心思修饰框架的细节 196

11.2.1 给无法处理框架的浏览器注释说明 196

11.2.2 固定框架的位置 197

11.2.3 框架中设置滚动条 197

11.3 修改框架边框的样式 198

11.3.1 判定边框是否显示 198

11.3.2 改变边框的表现效果 199

11.3.3 边框的边距 199

11.4 框架集中页面之间的链接 200

11.4.1 在指定的框架中打开链接 200

11.4.2 框架内的锚点链接 202

11.5 灵活的＜iframe＞框架 204

11.6 案例：制定自己的链接主页 205

11.7 小结 206

11.8 本章习题 206

第12章 CSS规则 209

12.1 如何学习CSS 209

12.2 CSS基本的规则写法 212

12.2.1 基本的样式表的写法 212

12.2.2 使用类class和标志id链接样式表 212

12.2.3 创建选择器 213

12.2.4 应用CSS样式表 217

12.3 用CSS来修饰页面文本 219

12.3.1 修饰页面文本字体 219

12.3.2 文本的字号 220

12.3.3 文本段落行高 221

12.3.4 禁止文本自动换行 223

12.4 给页面对象添加颜色 224

12.5 CSS3的发展 225

12.5.1 模块化的发展 225

12.5.2 浏览器支持情况 226

12.5.3 CSS3新特性预览 227

12.6 CSS3增强的选择器功能 228

12.6.1 属性选择符 228

12.6.2 结构伪类选择符 230

12.6.3 UI元素状态伪类选择符 233

12.6.4 伪元素选择符 233

12.7 实战：使用CSS制作个人页面 234

12.8 小结 236

12.9 本章习题 236

第13章 文本、背景、边框不再单调 238

13.1 文本与字体 238

13.1.1 多样化的文本阴影——text-shadow属性 238

13.1.2 溢出文本处text-overflow属性 242

13.1.3 对齐的文字才好看——word-wrap和word-break属性 243

13.1.4 使用服务器端的字体——@font-face规则 245

13.1.5 实战：丰富的文字样式 248

13.2 色彩模式和不透明度 249

13.2.1 还在为配色发愁吗？HSL色彩模式 249

13.2.2 含不透明度的——HSLA色彩模式 252

13.2.3 含不透明度的——RGBA色彩模式 253

13.2.4 不透明度——opacity属性 254

13.2.5 实战：半透明的遮蔽层 255

13.3 背景 258

13.3.1 元素里定义多个背景图片 258

13.3.2 指定背景的原点位置 259

13.3.3 指定背景的显示区域 261

13.3.4 指定背景图像的大小 263

13.3.5 实战：设计信纸的效果 265

13.4 边框 268

13.4.1 设计圆角边框——border-radius属性 268

13.4.2 设计图像边框——border-image属性 273

13.4.3 设计多色边框——border-color属性 280

13.4.4 实战：使用新技术设计网页 282

13.5 小结 286

13.6 本章习题 286

第14章 传统的DIV＋CSS设计 288

14.1 理解块级的意义 288

14.2 页面中的层 289

14.2.1 行＜span＞和层＜div＞ 289

14.2.2 层的基本定位 290

14.2.3 层的叠加 291

14.3 框模型 293

14.3.1 理解框模型 293

14.3.2 空padding属性 294

14.3.3 边框border的扩展属性 296

14.3.4 边距（margin） 297

14.3.5 框模型的溢出 297

14.4 定制层的display属性 298

14.5 CSS Hack 300

14.6 实战：简单的CSS＋DIV 301

14.7 小结 303

14.8 本章习题 303

第15章 灵活的盒布局和界面设计 305

15.1 灵活的盒布局 305

15.1.1 开启盒布局 305

15.1.2 元素的布局方向——box-orient属性 307

15.1.3 元素的布局顺序——box-direction属性 308

15.1.4 调整元素的位置——box-ordinal-group属性 309

15.1.5 弹性空间分配——box-flex属性 311

15.1.6 元素的对齐方式——box-pack和box-align属性 314

15.1.7 实战：使用新型盒布局设计网页 317

15.2 增强的盒模型 320

15.2.1 盒子阴影——box-shadow属性 320

15.2.2 盒子尺寸的计算方法——box-sizing属性 324

15.2.3 盒子溢出内容处理——overflow-x和overflow-y属性 325

15.2.4 实战：设计网站服务条款页面 327

15.3 增强的用户界面设计 329

15.3.1 允许用户改变尺寸——resize属性 329

15.3.2 定义外轮廓线——outline属性 330

15.3.3 伪装的元素——appearance属性 334

15.3.4 为元素添加内容——content属性 336

15.3.5 实战：设计一个省份选择盘 339

15.4 小结 340

15.5 本章习题 340

第16章 多列布局 342

16.1 多列布局基础 342

16.1.1 多列属性columns 342

16.1.2 列宽属性column-width 343

16.1.3 列数属性column-count 344

16.1.4 列间距属性column-gap 345

16.1.5 定义列分隔线——column-rule属性 346

16.1.6 定义横跨所有列——column-span属性 348

16.2 实战：模仿杂志的多列版式 349

16.3 小结 351

16.4 本章习题 351

第17章 动画和渐变 353

17.1 CSS3变形基础 353

17.1.1 元素的变形——transform属性 353

17.1.2 旋转 353

17.1.3 缩放和翻转 355

17.1.4 移动 357

17.1.5 倾斜 359

17.1.6 矩阵变形 360

17.1.7 同时使用多个变形函数 362

17.1.8 定义变形原点——transform-origin属性 364

17.1.9 实战：设计图片画廊 366

17.2 CSS3过渡效果 368

17.2.1 实现过渡效果——transition属性 368

17.2.2 指定过渡的属性——transition-property属性 370

17.2.3 指定过渡的时间——transition-duration属性 371

17.2.4 指定过渡延迟时间——transition-delay属性 372

17.2.5 指定过渡方式——transition-timing-function属性 373

17.2.6 实战：制作滑动的菜单 374

17.3 CSS3动画设计 376

17.3.1 关键帧动画——@keyframes规则 376

17.3.2 动画的实现——animation属性 377

17.3.3 实战：永不停止的风车 380

17.4 CSS3渐变设计 382

17.4.1 CSS线性渐变 382

17.4.2 CSS径向渐变 385

17.4.3 实战：设计渐变的按钮 387

17.5 小结 388

17.6 本章习题 388

第18章 CSS3的跨设备支持 390

18.1 媒体查询 390

18.1.1 @media规则的语法 390

18.1.2 使用Media Queries链接外部样式表文件 393

18.2 实战：自适应屏幕的样式表方案 394

18.3 小结 399

18.4 本章习题 399

第19章 案例一：制作主流网站界面 400

19.1 构思基础的布局 400

19.2 设计基础模块的样式表 401

19.3 完善网站的子模块 402

19.3.1 网站的导航栏 402

19.3.2 页面的侧栏 404

19.4 最终页面 405

19.5 小结 405

第20章 案例二：设计复杂页面 407

20.1 页面的框架布局 407

20.1.1 定位页面的内容 407

20.1.2 页面初级布局的代码 408

20.2 细化页面的局部 409

20.2.1 intro部分 409

20.2.2 页面的左侧部分 411

20.2.3 页面的右侧栏主体部分 413

20.3 小结 415

第21章 案例三：制作个人网站（HTML5＋CSS3） 416

21.1 网站整体规划 416

21.1.1 网站结构规划 416

21.1.2 页面功能划分 417

21.1.3 页面内容结构布局 417

21.2 页面设计效果图 417

21.3 站点目录规划 418

21.3.1 规划各种资源目录 418

21.3.2 配置IIS虚拟目录 418

21.4 构建HTML结构并用CSS布局 419

21.5 参照最终效果图美化页面样式 423

21.5.1 输入所有的标题和内容 423

21.5.2 用CSS设置背景图片 427

21.5.3 用CSS设置渐变背景 427

21.5.4 用CSS设置页面垂直滚动条样式 428

21.6 首页添加动态行为 428

21.7 制作日志页面 433

21.7.1 日志浏览功能思路分析 433

21.7.2 日志代码编写 434

21.8 制作相册页面 437

21.8.1 相册浏览功能思路分析 437

21.8.2 相册代码编写 437

21.9 注册域名并发布网站 440

21.10 小结 441