HTML5+CSS3王者归来PDF电子书下载

第一篇 HTML5完整学习 3

第1章 HTML5的历史 3

1-1 认识HTML 3

1-2 蒂姆·伯纳斯－李（Tim Berners Lee） 3

1-3 HTML历史上的3个重要协会 4

1-4 HTML的发展史 5

1-5 HTML开发中的插曲XHTML 6

1-6 HTML与浏览器的兼容问题 6

第2章 HTML5从零开始 8

2-1 HTML5与HTML 4.01 8

2-2 HTML文件结构 8

2-2-1 大小写皆可 8

2-2-2 文件声明doctype 8

2-2-3 ＜html＞…＜/html＞ 8

2-2-4 ＜head＞…＜/head＞ 9

2-2-5 ＜body＞…＜/body＞ 9

2-3 认识HTML基本元素 9

2-4 HTML标记类型 10

2-5 我的第一个HTML文件 10

2-5-1 编辑我的第一个HTML文件 10

2-5-2 执行我的第一个HTML文件 11

2-5-3 Notepad++++ 11

2-6 解析我的第一个HTML文件 12

2-6-1 ＜meta＞元素 12

2-6-2 ＜title＞元素 13

2-6-3 文件主体 13

2-7 HTML文件的批注 14

习题 14

第3章 HTML文件输出的基本知识 16

3-1 浏览器处理数据的输出 16

3-2 标题输出＜hn＞元素 16

3-3 换行输出＜br＞元素 17

3-4 保持原始文件样式＜pre＞元素 17

3-5 水平线＜hr＞元素 18

3-6 段落＜p＞元素 18

3-7 文件某个区域＜section＞元素 19

3-8 页首＜header＞元素 19

3-9 页尾＜footer＞元素 20

3-10 粗体显示＜b＞和＜strong＞元素 20

3-11 斜体＜em＞和＜i＞元素 21

3-12 引用＜cite＞、＜q＞和＜blockquote＞元素 21

3-13 加上底纹＜mark＞元素 22

3-14 小型字＜small＞元素 22

3-15 显示与计算机有关联的文字＜kbd＞、＜samp＞、＜var＞和＜code＞元素 22

3-16 定义缩写＜abbr＞元素 23

3-17 定义用语＜dfn＞元素 23

3-18 内容新增与删除＜ins＞和＜del＞元素 24

3-19 隔离双向文字走向＜bdi＞元素 24

3-20 指定文字走向＜bdo dir＝“direction”＞…＜/bdo＞ 25

3-21 标示注音或拼音＜ruby＞、＜rt＞和＜rp＞元素 25

3-22 上标＜sup＞和下标＜sub＞元素 26

3-23 输出特殊字符 26

3-24 HTML的树状结构 27

3-25 HTML5不再支持的元素与属性设定 28

习题 29

第4章 设计含超链接的网页 31

4-1 ＜a＞…＜/a＞的基本应用 31

4-2 浏览脉络的设定 31

4-3 从一个文件跳到另一个文件 32

4-3-1 超链接的HTML文件在同一个文件夹 32

4-3-2 超链接的文件在子文件夹 34

4-3-3 超链接的文件在父文件夹 34

4-3-4 绝对路径 35

4-4 同一个HTML文件中的超链接 35

4-5 设定联络信息＜address＞元素 36

4-6 链接到电子邮件信箱 37

4-7 引用短文的实例＜cite＞元素与超链接的应用 38

4-8 指定基准的URL 38

习题 39

第5章 制作项目列表 41

5-1 点符列表 41

5-2 有编号的项目列表 41

5-3 设定有编号项目列表的起始编号 42

5-4 更改项目列表的连续编号 43

5-5 更改项目列表的编号种类 43

5-6 项目列表编号递减的应用 44

5-7 自定义清单 45

习题 45

第6章 设计表格 47

6-1 表格的基本元素 47

6-2 表格框线的border属性 47

6-3 建立表头＜thead＞和＜th＞元素 48

6-4 建立表格本体＜tbody＞元素 48

6-5 建立表尾＜tfoot＞元素 49

6-6 合并横向单元格colspan属性 49

6-7 合并纵向单元格rowspan属性 50

6-8 表格的标题＜caption＞元素 51

6-9 单元格的群组化＜colgroup＞和＜col＞元素 51

6-10 表格与超链接的混合应用 52

习题 53

第7章 嵌入图片 55

7-1 嵌入图片＜img＞元素 55

7-2 标示文件标题＜figure＞和＜figcaption＞元素 56

7-3 制作响应图 56

7-3-1 建立地图＜img＞ 56

7-3-2 响应图＜map＞ 57

7-3-3 定义响应图的链接区域＜area＞ 57

7-4 在表格内嵌入图片 58

7-5 设计图片的超链接 59

7-6 将图片作为项目符号 60

7-7 简易编排嵌入图片与文字 61

7-8 GIF动画 62

习题 63

第8章 设计多媒体网页 65

8-1 播放影片＜video＞元素 65

8-2 播放声音＜audio＞元素 68

8-3 指定多个播放文件＜source＞元素 70

8-4 为影片加入字幕功能＜track＞元素 72

8-4-1 认识与建立WebVTT文件 73

8-4-2 HTML5 Video Caption Maker 74

8-4-3 为影片加字幕的实例 75

8-5 嵌入资源文件＜embed＞元素 77

8-6 嵌入对象＜object＞元素 78

8-7 设定嵌入对象的参数＜param＞元素 79

8-8 建立嵌入的浮动框架＜iframe＞元素 80

习题 82

第9章 制作输入表单 84

9-1 制作输入表单＜form＞元素 84

9-2 制作表单组件＜input＞元素 85

9-2-1 制作提交按钮submit属性值 88

9-2-2 制作重设按钮reset属性值 89

9-2-3 制作单行输入的文本框text属性值 89

9-2-4 制作可输入密码的文本框password属性值 90

9-2-5 制作搜索框search属性值 91

9-2-6 制作图片按钮image属性值 91

9-2-7 制作输入电话号码的文本框tel属性值 92

9-2-8 制作输入电子邮件字段的文本框email属性值 92

9-2-9 制作输入URL的文本框url属性值 92

9-2-10 制作单选按钮radio属性值 93

9-2-11 制作复选框checkbox属性值 94

9-2-12 制作数值输入框number属性值 95

9-2-13 制作指定范围的数值输入框range属性值 95

9-2-14 指定颜色color属性值 96

9-2-15 制作不显示但要传送的信息hidden属性值 96

9-2-16 制作输入时间的控件time属性值 97

9-2-17 制作输入日期的控件date属性值 98

9-2-18 制作输入周次week属性值 98

9-2-19 制作输入年份和月份month属性值 99

9-2-20 本地与世界标准时间datetime/datetime-local属性值 99

9-2-21 制作选择文件后上传的file属性值 100

9-3 建立多行输入的文字框＜textarea＞元素 101

9-4 为对象加上关联标记 ＜label＞元素 102

9-5 显示进度＜progress＞元素 103

9-6 显示仪表值＜meter＞元素 103

9-7 下拉式选单与列表框＜select＞和＜option＞元素 104

9-7-1 建立下拉式选单 104

9-7-2 建立列表框 105

9-7-3 选项组化＜optgroup＞元素 106

9-8 制作文字框的候补选项 ＜datalist＞和＜option＞元素 107

9-9 表单组件群组化＜fieldset＞和＜legend＞元素 108

9-10 加密密钥＜keygen＞元素 109

习题 110

第10章 HTML功能总结 112

10-1 全局属性 112

10-2 事件属性 115

10-3 认识＜script＞元素与一个超简单的JavaScript应用 117

10-4 设定一般区块＜div＞元素 119

10-5 设定一般范围＜span＞元素 119

10-6 区块层级与行内层级 120

10-7 网页布局 121

10-7-1 ＜header＞元素与群组化标题 122

10-7-2 ＜nav＞元素应用实例 122

10-7-3 ＜article＞元素应用实例 123

10-7-4 ＜aside＞元素应用实例 123

10-8 HTML章节的概念 124

10-9 日期与时间＜time＞元素 124

习题 125

第二篇 CSS3完整学习 129

第11章 CSS3的基础知识 129

11-1 CSS基本语法 129

11-1-1 CSS基本语法格式 129

11-1-2 多个选择器使用相同的声明区块 129

11-1-3 CSS的批注 129

11-2 CSS颜色设定 130

11-2-1 1600万种颜色 130

11-2-2 网络安全颜色——256种颜色 130

11-2-3 HSL颜色 131

11-3 套用CSS的方法 132

11-4 class选择器 133

11-5 字体 133

11-5-1 设置字体名称的font-family属性 134

11-5-2 设置字号的font-size属性 134

11-5-3 设置字体样式的font-style属性 135

11-5-4 设置字体样式的font-weight属性 135

11-5-5 font-variant 136

11-5-6 font-size-adjust 136

11-5-7 font 137

11-5-8 @font-face 137

11-5-9 综合应用 137

11-6 id选择器 138

11-7 属性选择器 138

11-8 全局选择器 140

11-9 虚拟选择器 140

11-9-1 链接的虚拟类别：link和：visited 140

11-9-2 动作虚拟类别 141

11-9-3 目标虚拟类别 141

11-10 前缀词的使用 142

习题 142

第12章 段落文字的编排知识 144

12-1 设置文字对齐方式的text-align属性 144

12-2 设置首行缩排的text-indent属性 144

12-3 设定行高的line-height属性 145

12-4 设置字母间距的letter-spacing属性 146

12-5 设置文字间距的word-spacing属性 147

12-6 处理空格符的white-space属性 147

12-7 大小写转换的text-transform属性 148

12-8 设置文字阴影的text-shadow属性 149

12-9 设置线条装饰的text-decoration属性 149

12-10 再谈线条装饰 150

12-10-1 text-decoration-line 150

12-10-2 text-decoration-color 150

12-10-3 text-decoration-style 151

12-11 设定制表符宽度的tab-size属性 151

12-12 设定换行的word-wrap属性 152

12-13 设定文字超出范围的text-overflow属性 153

习题 153

第13章 将CSS应用在项目列表 155

13-1 建立项目列表符号的list-style-type属性 155

13-2 建立图片项目符号的list-style-image属性 156

13-3 项目符号与编号位置的list-style-position属性 156

13-4 简易表示法list-style 157

习题 157

第14章 设计背景 159

14-1 透明色 159

14-1-1 rgba（）函数 159

14-1-2 hsla（）函数 159

14-1-3 透明度opacity 159

14-2 设置背景颜色的background-color属性 160

14-3 设置背景图像的background-image属性 161

14-4 设置背景是否重复出现的background-repeat属性 162

14-5 设置背景图片位置的background-position属性 163

14-6 设置背景图片大小的background-size属性 165

14-7 设置背景图片随内容卷动的background-attachment属性 166

14-8 背景简易表示法background 167

习题 168

第15章 完整学习Box Model 170

15-1 认识Box Model 170

15-2 外边距的设计 170

15-2-1 ＜body＞的外边距 172

15-2-2 外边距的合并 172

15-2-3 外边距应用在段落输出的实例 173

15-3 内边距的设计 174

15-4 边框的设计 175

15-4-1 边框样式 176

15-4-2 边框色彩 178

15-4-3 边框宽度 179

15-4-4 边框属性的简易表示法 179

15-4-5 圆角边框 180

15-4-6 设计图案边框 181

15-5 补充背景功能background-clip和back ground-origin属性 187

15-5-1 设定背景显示范围的background-clip属性 187

15-5-2 设定背景图案的基准位置的background-origin属性 187

15-6 设定盒子阴影的box-shadow属性 188

15-7 设定盒子宽度与高度的box-sizing属性 190

15-8 内容超出范围时的显示方式 190

15-9 outline属性 192

15-10 设定内容盒子尺寸的resize属性 193

习题 194

第16章 将CSS应用在表格数据 196

16-1 表格标题 196

16-2 表格底色的设计 196

16-3 表格框线设计 197

16-4 单元格框线的距离 197

16-5 为单元格内容加上内边距 198

16-6 显示或隐藏空白的单元格 199

16-7 表格框线的模式 201

16-8 单元格内容排版 201

16-9 表格版面的排版 202

16-10 综合应用 202

习题 204

第17章 设计渐变效果 206

17-1 线性渐变函数linear-gardient（） 206

17-2 放射状渐变函数radial-gradient（） 208

17-3 重复线性渐变函数repeating-linear-gradient（） 209

17-4 重复放射性渐变函数repeating-radial-gradient（） 210

习题 211

第18章 设计多栏版面 213

18-1 设定栏数量与宽度的columns属性 213

18-1-1 设定栏数量的column-count属性 213

18-1-2 设定栏宽度的column-width属性 214

18-1-3 栏数量与宽度简易表示法columns 214

18-2 设定栏与栏间距的column-gap属性 215

18-3 设定栏与栏线属性column-rule 215

18-3-1 设定栏线类型的column-rule-style属性 215

18-3-2 设定栏线颜色的column-rule-color属性 216

18-3-3 设定栏线宽度的column-rule-width属性 216

18-3-4 栏线属性的简易表示法column-rule 217

18-4 设置跨栏显示的column-span属性 217

18-5 设定栏高度的column-fill属性 218

18-6 换栏或换页 219

18-6-1 break-before 219

18-6-2 break-after 220

18-6-3 break-inside 220

习题 221

第19章 定位与网页排版 223

19-1 设定盒子的大小 223

19-2 设定盒子大小的极限 223

19-3 display属性 224

19-4 用于定位的position属性 225

19-4-1 position属性值是relative的程序实例 226

19-4-2 position属性值是absolute的程序实例 228

19-4-3 position属性值是fixed的程序实例 229

19-4-4 综合应用 229

19-5 设定与解除图旁串字 230

19-5-1 设定图旁串字的float属性 230

19-5-2 清除图旁串字的clear属性 231

19-6 堆叠顺序 232

19-7 显示或隐藏元素的visibility属性 233

19-8 用box调整元素呈现方式的object-fit属性 233

19-9 设定垂直对齐的vertical-align属性 234

习题 235

第20章 使用弹性容器（flexible container）排版 237

20-1 flex container的基本概念 237

20-2 弹性容器的声明 237

20-3 设定版面方向（flex-direction） 238

20-4 设定弹性区块内为多行排列（flex-wrap） 239

20-5 直接设定排版方向和行数（flex-flow） 241

20-6 版面区块的排列顺序（order） 241

20-7 增加版面区块对象宽度（flex-grow） 243

20-8 缩减版面区块对象宽度（flex-shrink） 243

20-9 调整前的区块对象宽度（flex-basis） 244

20-10 增减区块宽度的简易表示法（flex） 245

20-11 设定留白的方式（justify-content） 246

20-12 垂直方向留白的处理（align-items） 247

20-13 个别版面区块留白的处理（align-self） 249

20-14 弹性容器有多行版面区块时留白的处理（align-content） 250

20-15 综合应用 252

习题 252

第21章 动画设计——过渡效果 254

21-1 设定过渡效果时间的属性transition-duration 254

21-2 设定过渡效果的属性transition-property 254

21-3 设定过渡延迟时间的属性transition-delay 255

21-4 设计过渡速度的属性transition-timing-function 255

21-5 过渡效果的简易表示法transition 256

21-6 综合应用 257

习题 257

第22章 设计网页动画 259

22-1 关键帧（@keyframes） 259

22-2 运用关键帧（animation-name） 259

22-3 设定动画时间（animation-duration） 259

22-4 设计动画变速方式（animation-timing-function） 260

22-5 设定动画次数（animation-iteration-count） 261

22-6 设定动画重复执行的方向（animation-direction） 262

22-7 设定动画执行或是暂停（animation-play-state） 263

22-8 设定动画延迟的时间（animation-delay） 264

22-9 设定动画延迟与完成的样式（animation-fill-mode） 264

22-10 动画的简易表示法animation 265

习题 265

第23章 变形动画 267

23-1 2D变形效果 267

23-2 2D变形的基准点 271

23-3 3D变形效果 271

23-4 3D变形的基准点 274

23-5 设定透视图视点距离 275

23-6 透视图的基准点 277

23-7 巢状元素产生时子元素的处理 277

23-8 是否显示背面内容 278

习题 279

第24章 响应式（RWD）网页设计 281

24-1 设置鼠标指针的形状 281

24-2 媒体查询 281

24-2-1 媒体类型 282

24-2-2 媒体特性 282

24-2-3 媒体查询设计使用@media 282

24-2-4 媒体查询设计使用＜link＞ 284

24-2-5 媒体查询设计使用@import 285

24-3 选择器完整说明 285

24-4 响应式网页设计 289

24-4-1 响应式网页实例 290

24-4-2 设计响应式网页的基本原则 290

24-4-3 viewport 290

24-4-4 浏览画面设计 291

24-4-5 导览区套用样式表 292

24-4-6 文章区套用样式表 293

24-4-7 侧边栏区套用样式表 293

24-4-8 其他设计 293

24-4-9 完整程序内容 294

习题 294

第三篇 迈向网页设计高手之路 297

第25章 JavaScript基础知识 297

25-1 JavaScript的功能 297

25-2 JavaScript的输出 297

25-3 撰写JavaScript代码的位置 297

25-3-1 将JavaScript代码写在＜head＞元素内 298

25-3-2 将JavaScript代码写在＜body＞元素内 298

25-3-3 以外部文件方式撰写JavaScript代码 299

25-3-4 存取HTML内容输出的实例 299

25-3-5 document.write（）输出的实例 299

25-4 JavaScript基本语法 300

25-5 声明变量 301

25-6 数据类型 302

25-6-1 数值数据 302

25-6-2 字符串数据 303

25-6-3 对象数据 303

25-6-4 综合应用 304

25-7 运算符 304

25-7-1 算术运算符 305

25-7-2 递增、递减运算符 305

25-7-3 赋值运算符 306

25-8 布尔值、比较运算与逻辑运算 306

25-8-1 布尔值 306

25-8-2 比较运算符 307

25-8-3 逻辑运算符 308

25-9 位运算符 309

25-10 运算符的优先级 310

习题 310

第26章 JavaScript的流程控制 312

26-1 if语句 312

26-1-1 if语句 312

26-1-2 if…else语句 312

26-1-3 if…else if…else语句 313

26-1-4 判断条件可以扩展 314

26-2 switch语句 314

26-3 for语句 316

26-4 while语句 317

26-5 do…while语句 317

26-6 特殊表达式 318

26-7 数组array 319

26-7-1 Array的方法 320

26-7-2 Array的属性 320

26-8 for/in语句 321

26-9 综合应用 322

习题 322

第27章 JavaScript的函数设计 324

27-1 基本函数设计 324

27-2 设计一个可以传递参数的函数 325

27-3 函数调用同时有返回值 325

27-4 全局变量与局部变量 326

27-5 函数被定义在对象内 327

习题 328

第28章 浏览器对象模型BOM 330

28-1 认识BOM 330

28-2 window对象 330

28-2-1 有趣的程序测试 330

28-2-2 window对象的属性 331

28-2-3 window对象的方法 333

28-3 screen对象 338

28-4 navigator对象 338

28-5 history对象 339

28-6 location对象 340

习题 341

第29章 HTML的文件对象模型DOM 343

29-1 认识DOM 343

29-2 取得HTML元素 344

29-2-1 getElementByID（） 344

29-2-2 getElementsByTagName（） 344

29-2-3 getElementsByClassName（） 345

29-2-4 querySelectorAll（）和querySelector（） 345

29-2-5 双层条件的存取功能 346

29-2-6 返回串行的长度length 346

29-2-7 元素上下文属性 347

29-2-8 元素大小与位置 348

29-2-9 更改图片大小 349

29-3 更改HTML元素内容 349

29-3-1 更改标题或段落的内容 349

29-3-2 更改属性内容 350

29-4 DOM节点和浏览元素 350

29-4-1 认识相关名词 351

29-4-2 存取节点值 351

29-4-3 ＜body＞和＜html＞节点 352

29-4-4 相同父节点的兄弟节点内容 353

29-4-5 存取父节点 354

29-5 建立、插入、删除节点 355

29-5-1 建立节点 355

29-5-2 将节点插入特定位置 355

29-5-3 删除节点 356

29-5-4 更换节点 356

29-6 DOM与CSS 357

29-7 HTML的集合对象 359

29-7-1 document.images 359

29-7-2 document.forms 360

29-7-3 document.links 361

29-8 DOM事件属性 361

29-8-1 onload与onunload事件 362

29-8-2 onchange事件 362

29-8-3 onclick事件 363

29-8-4 ondblclick事件 364

29-8-5 onmouseover和onmouseout事件 364

29-8-6 onmousedown和onmouseup事件 364

29-8-7 在JavaScript内建立事件 365

习题 366

第30章 HTML Canvas绘图与动画 368

30-1 建立Canvas绘图环境 368

30-2 绘制矩形 368

30-2-1 rect（）、stroke（）和strokeRect（） 368

30-2-2 fillRect（）和fillStyle（） 369

30-2-3 clearRect（） 370

30-3 绘制线条 370

30-3-1 绘制直线 370

30-3-2 beginPath（）和closePath（） 371

30-3-3 lineWidth 371

30-3-4 fill（） 372

30-3-5 lineCap 372

30-3-6 lineJoin 373

30-4 绘制圆形或弧线 373

30-4-1 绘制圆形 373

30-4-2 绘制弧线 374

30-4-3 顺时针弧线或逆时针弧线 375

30-4-4 实心圆的绘制 376

30-4-5 arcTo（） 376

30-5 色彩渐变效果的处理 377

30-5-1 线性渐变 377

30-5-2 辐射渐变 379

30-5-3 将渐变应用在矩形框线 380

30-6 绘制文字 382

30-6-1 font 382

30-6-2 fillText（）和strokeText 382

30-6-3 文字输出与渐变的应用 382

30-6-4 输出文字居中对齐 383

30-7 绘制图像 383

30-8 建立简单动画 385

30-9 位移与旋转 386

习题 390

第31章 取得用户的经纬度数据 392

31-1 HTML的Geolocation 392

31-2 getCurrentPosition（） 393

31-3 watchPosition（）和clearWatch（） 394

习题 395

第32章 jQueryMobile移动版网页设计 397

32-1 安装Opera Mobile Classic Emulator 397

32-2 我的第一个采用jQuery Mobile设计的网页 398

32-3 jQuery的基本网页架构 399

32-4 超链接功能 401

32-5 对话框的设计 402

32-6 页面的切换 402

32-7 建立按钮 403

32-7-1 使用＜input＞元素建立按钮 403

32-7-2 使用＜button＞元素建立按钮 404

32-7-3 使用＜a＞元素建立按钮 404

32-7-4 按钮图标 404

32-7-5 设定按钮图标的位置 404

32-7-6 更多图标设定 405

32-8 弹出框的设计 406

32-9 工具栏 406

32-9-1 页首区 406

32-9-2 页尾区 407

32-10 导航栏 407

32-11 面板（Panel） 409

32-12 可折叠区块 410

32-12-1 基本可折叠区块 410

32-12-2 巢状可折叠区块 411

32-13 建立表格 411

32-13-1 Reflow表格 411

32-13-2 Column Toggle表格 412

32-13-3 将样式表应用在表格 413

32-14 列表显示 414

32-15 列表符号 416

32-15-1 默认列表符号 416

32-15-2 自设列表图标 416

32-15-3 清单的缩图 417

32-15-4 为缩图加上文字批注 417

32-15-5 分割列表按钮 417

32-16 制作输入表单 418

32-16-1 ＜label＞元素 418

32-16-2 text属性 418

32-16-3 功能按钮属性 419

32-16-4 radio属性 420

32-16-5 checkbox属性 420

32-16-6 select属性 421

32-16-7 range属性 421

32-16-8 On/Off切换设计 422

习题 422

第33章 将网页转成APP应用程序 424

33-1 准备HTML文件 424

33-2 准备config.xml配置文件 424

33-3 压缩网页与配置文件 425

33-4 建立APP应用程序 425

33-5 重新上传文件 427

附录A HTML标记列表 445

附录B HTML属性索引表 445

附录C CSS属性索引表 445

附录D 网页设计使用的单位 445

D-1 绝对单位 445

D-2 相对单位 445

D-3 百分比 445