HTML 5网页制作全程揭秘PDF电子书下载

第1章 HTML 5基础 1

1.1 关于HTML 1

1.1.1 什么是HTML 5 1

1.1.2 HTML 5的基本结构 1

实例01+视频：创建HTML页面 2

1.1.3 HTML 5的标签 3

实例02+视频：使用标签的方法 8

1.1.4 HTML 5属性 9

实例03+视频：使用标签属性的方法 11

1.1.5 HTML 5事件属性 11

实例04+视频：使用事件属性的方法 14

1.1.6 HTML注释标签 15

实例05+视频：为标签添加注释 15

1.2 HTML 5与HTML 4的区别 16

1.2.1 HTML 5的语法变化 16

1.2.2 HTML 5中的标记方法 16

1.3 HTML 5新增元素和废除元素 17

1.3.1 新增的结构元素 17

实例06+视频：使用新增结构元素制作页面 18

1.3.2 新增的其他元素 19

实例07+视频：使用新增的音频标签插入音乐 22

1.3.3 被废除的元素 23

1.4 HTML编写方法 24

1.4.1 使用记事本编写HTML 24

实例08+视频：使用记事本创建HTML文档 24

1.4.2 使用Dreamweaver编写HTML文档 25

1.4.3 元素和属性的大小写规范 25

1.4.4 断行符与空白字符 26

1.5 预览测试HTML页面 26

1.5.1 查看页面效果 26

1.5.2 查看源代码 27

1.6 本章小结 27

第2章 网页基本HTML标签 28

2.1 使用head头部标签 28

2.2 使用title标题标签 28

实例09+视频：定义标题 28

2.3 使用meta标签 29

2.3.1 设置页面关键字 29

实例10+视频：定义搜索引擎关键字 30

2.3.2 设置页面说明 31

2.3.3 定义编辑工具 31

2.3.4 定义作者信息 31

实例11+视频：定义作者 31

2.3.5 设置网页内容类型和字符集 32

2.3.6 设置网页跳转效果 33

实例12+视频：设置网页定时跳转 33

2.4 使用body标签定义页面主体 34

2.4.1 使用bgcolor定义网页背景色 34

实例13+视频：设置背景颜色 35

2.4.2 使用background定义网页背景 36

实例14+视频：设置背景图像 36

2.4.3 使用text定义文字颜色 37

2.4.4 使用link实现链接 38

实例16+视频：设置链接文本的颜色 39

2.4.5 使用margin定义页面边距 40

实例17+视频：定义页面边距 40

2.5 文字与段落标签 41

2.5.1 在网页中输入文字 41

实例18+视频：在网页中输入文字 41

2.5.2 标题字 42

实例19+视频：使用标题标签 43

2.5.3 文本基本属性 44

实例20+视频：使用〈font〉标签 45

2.5.4 文本格式化标签 45

实例21+视频：使用粗体、斜体标签 46

2.5.5 上标和下标 47

实例22+视频：使用上标、下标标签 48

2.5.6 大小字号和下划线 49

实例23+视频：使用大小字号和下划线 49

2.6 使用图像 50

2.6.1 图像的格式 50

2.6.2 插入图像 50

实例24+视频：插入图像 51

2.6.3 图片的大小 52

实例25+视频：修改图片大小 53

2.6.4 图像提示文字 53

实例26+视频：图像提示字 54

2.6.5 图像的边框 55

2.6.6 图像的边距 55

实例27+视频：图像的边框和垂直边距 56

2.6.7 图像的排列 56

实例28+视频：网页图文排版 57

2.6.8 图像的超链接 58

实例29+视频：创建图像超链接 58

2.6.9 图像热区链接 59

实例30+视频：使用图像热区创建链接 59

2.7 使用列表 60

2.7.1 有序列表（ol元素） 60

实例31+视频：定义有序新闻列表 61

2.7.2 自定义有序列表的序号 62

实例32+视频：定义新闻列表序号样式 62

2.7.3 自定义有序列表的起始数 63

实例33+视频：定义新闻列表的起始数 63

2.7.4 自定义有序列表的数值 64

实例34+视频：定义新闻列表数值 64

2.7.5 无序列表（ul元素） 65

实例35+视频：制作无序列表 65

2.7.6 dl定义列表 66

实例36+视频：使用dl定义网页公告列表 66

2.7.7 嵌套列表 67

2.7.8 反转序号值（reversed属性） 68

2.8 使用表格 68

2.8.1 表格简介 68

2.8.2 表格属性 68

实例37+视频：制作表格 69

2.8.3 表格样式 69

实例38+视频：定义表格样式 70

2.8.4 表格的标题 71

实例39+视频：定义表格标题 71

2.8.5 区分单元格 72

实例40+视频：制作年级成绩排名单1 72

实例41+视频：制作年级成绩平均分数单 74

2.8.6 跨多行、多列的单元格 76

实例42+视频：制作年级成绩平均分数单2 76

2.9 本章小结 77

第3章 建立超链接 78

3.1 链接的基础知识 78

3.2 定义基本链接 79

3.2.1 定义链接的目标URL（href属性） 79

3.2.2 定义链接的目标窗口（target属性） 79

3.2.3 定义链接的提示信息（title属性） 80

3.2.4 国际化和链接（hreflang属性） 80

3.3 链接路径 80

3.3.1 绝对路径 81

3.3.2 相对路径 81

3.4 内部链接 81

实例43+视频：创建内部链接 82

3.5 锚点链接 82

3.5.1 建立锚点 83

实例44+视频：建立锚点 83

3.5.2 链接同一页面中的锚点 84

实例45+视频：建立锚点链接 84

3.5.3 链接到其他页面中的锚点 85

实例46+视频：链接到其他页面中的锚点 85

3.6 外部链接 86

3.6.1 链接到外部网站 86

实例47+视频：创建友情链接 87

3.6.2 链接到FTP 87

实例48+视频：创建FTP链接 88

3.6.3 链接到Telnet 89

3.6.4 下载链接 89

实例49+视频：下载数据 89

3.7 本章小结 90

第4章 使用canvas 91

4.1 关于canvas元素 91

4.1.1 canvas的历史 91

4.1.2 canvas的使用方法 91

4.2 绘制矩形 92

实例50+视频：使用canvas绘制矩形 92

4.3 使用路径 93

4.3.1 开始和闭合路径 94

4.3.2 moveTo和lineTo 94

实例51+视频：使用lineTo绘制图形 94

4.3.3 arc()方法 96

实例52+视频：绘制圆形 96

4.3.4 bezierCurveTo()方法 98

实例53+视频：绘制心形 98

4.4 渐变图形 100

4.4.1 线性渐变 100

实例54+视频：绘制线性渐变 100

4.4.2 径向渐变 102

实例55+视频：绘制径向渐变 102

4.5 在canvas中绘制图像 104

4.5.1 图像绘制的基本步骤 104

实例56+视频：绘制图像（一） 105

实例57+视频：绘制图像（二） 107

实例58+视频：绘制图像（三） 108

4.5.2 图像平铺 109

实例59+视频：绘制平铺图像 109

4.5.3 图像裁剪 111

实例60+视频：裁剪图像 111

4.5.4 像素处理 113

实例61+视频：绘制随机像素 114

4.6 图形的变形 116

4.6.1 平移 116

实例62+视频：平移图形 116

4.6.2 扩大 118

实例63+视频：扩大图形 118

4.6.3 旋转 119

实例64+视频：旋转图形 119

4.6.4 变形矩阵 120

实例65+视频：使用矩阵变换 121

4.7 绘制文本 123

实例66+视频：绘制文本 124

4.7.1 对齐方式 125

4.7.2 基准线 125

实例67+视频：调整绘制文本 125

4.8 图形的组合 127

实例68+视频：组合图形 128

4.9 绘制阴影 132

实例69+视频：为图形添加阴影 133

4.10 绘制动画效果 134

实例70+视频：使用canvas绘制动画 135

4.11 保存与恢复绘图状态 136

4.11.1 保存绘图状态 137

4.11.2 恢复绘图状态 137

实例71+视频：使用restore绘制图形 137

4.12 本章小结 139

第5章 CSS基础 140

5.1 什么是XHTML 140

5.1.1 为何要升级到XHTML 140

5.1.2 XHTML的页面结构 140

5.1.3 XHTML的代码规范 141

5.1.4 在Dreamweaver中编辑XHTML 143

实例72+视频：创建XHTML文档 143

5.1.5 HTML和XHTML的转换 144

5.2 CSS的概念 145

5.2.1 CSS的基本语法 145

5.2.2 CSS的优势 145

5.2.3 CSS样式的类型 145

5.3 CSS的分类 146

5.3.1 内联样式 147

实例73+视频：设置内联样式 147

5.3.2 内部样式表 148

实例74+视频：设置内部样式 149

5.3.3 外部样式表 150

实例75+视频：设置外部样式 150

5.4 CSS文档结构 151

5.4.1 文档结构 152

5.4.2 CSS的继承性 152

5.4.3 CSS的特殊性 152

5.4.4 CSS的层叠性 152

5.4.5 CSS的重要性 153

5.5 CSS选择器 153

5.5.1 标签选择器 153

实例76+视频：使用标签选择符 154

5.5.2 类选择器 155

实例77+视频：使用类选择符 155

5.5.3 id选择器 156

实例78+视频：使用id选择符 157

5.5.4 通配选择器 158

实例79+视频：使用通配选择符 159

5.5.5 组合选择器 160

5.6 CSS选择器声明 160

5.6.1 群选择器 160

5.6.2 派生选择器 160

5.7 伪类及伪对象 161

5.8 本章小结 162

第6章 SVG 163

6.1 SVG的基础概要 163

6.1.1 为什么要使用SVG 163

6.1.2 SVG规范 164

6.1.3 SVG的特征 164

6.1.4 SVG在浏览器中的显示方法 164

实例80+视频：将SVG图像链接到HTML文档中 165

6.2 SVG的语法基础 166

6.3 绘制SVG基本图形 167

6.3.1 绘制矩形 167

实例81+视频：绘制矩形和圆角矩形 167

6.3.2 绘制圆形 169

实例82+视频：使用SVG绘制正圆 169

6.3.3 绘制椭圆 170

实例83+视频：使用SVG绘制椭圆 170

6.3.4 绘制直线 171

实例84+视频：使用SVG绘制直线 171

6.3.5 绘制折线与多角星形 172

实例85+视频：使用SVG绘制五角星 173

6.3.6 使用path元素绘制图形 174

实例86+视频：使用path元素绘制五角星 174

6.3.7 坐标与编组 175

实例87+视频：通过g元素对图形进行编组 175

6.3.8 使用transform属性 177

实例88+视频：对编组元素进行操作 177

6.4 绘制文本 178

实例89+视频：使用SVG绘制文本 179

实例90+视频：制作波浪纹路径文本 180

6.5 SVG渐变效果 181

6.5.1 线性渐变 182

实例91+视频：制作横向与纵向线性渐变效果 182

6.5.2 径向渐变 183

实例92+视频：制作径向渐变效果 183

6.6 样式单 184

实例93+视频：使用样式控制绘制元素的外观 184

6.7 本章小结 185

第7章 音频和视频 186

7.1 〈audio〉和〈video〉的概要 186

7.2 〈audio〉和〈video〉的属性 187

实例94+视频：导入视频 187

实例95+视频：设置video自动播放 188

实例96+视频：添加video播放条 189

实例97+视频：使用poster替换video 190

7.3 〈audio〉和〈video〉的方法 192

7.3.1 play方法 192

实例98+视频：控制播放audio 192

7.3.2 pause方法 193

实例99+视频：设置暂停audio 194

7.3.3 load方法 195

7.3.4 canPlayType方法 195

7.4 〈audio〉和〈video〉的事件 195

实例100+视频：设置监听audio 197

7.5 本章小结 198

第8章 链入内联框架、对象和其他多媒体元素 199

8.1 内联框架（iframe元素） 199

8.2 iframe元素的属性 199

8.2.1 src的属性 199

8.2.2 width和height属性 200

实例101+视频：创建内联框架 200

8.2.3 frameborder属性 201

8.2.4 marginwidth和marginwidht属性 201

8.2.5 name属性 201

8.2.6 align属性 202

8.2.7 scrolling属性 202

8.3 沙盒安全限制 202

8.4 使用object元素链入对象 203

实例102+视频：链入jpg图像 203

8.4.1 object元素的属性 204

8.4.2 渲染对象的规则 204

8.4.3 对象初始化（param元素） 205

8.4.4 内联数据和外部数据 205

8.5 使用embed元素链入多媒体对象 206

8.5.1 设置自动播放 206

8.5.2 设置循环播放 206

8.5.3 控制面板的显示 206

8.5.4 设置开始时间 207

8.5.5 设置音量大小 207

8.5.6 设置容器属性 207

8.5.7 外观设置 207

8.5.8 设置对象名称和文字说明 207

8.5.9 设置背景 208

8.5.10 设置对齐方式 208

实例103+视频：链入swf文件 208

8.6 本章小结 210

第9章 使用表单 211

9.1 表单标签〈form〉 211

9.1.1 提交表单action 211

实例104+视频：设置表单action属性 211

9.1.2 表单名称name 212

实例105+视频：为表单命名 212

9.1.3 传送方法method 213

实例106+视频：设置表单传送方法 214

9.1.4 编码方式enctype 215

实例107+视频：设置表单的编码方式 215

9.1.5 目标打开方式target 216

实例108+视频：在新窗口中打开链接 216

9.2 插入表单对象 217

9.2.1 文字字段Text 217

实例109+视频：创建文字字段 218

9.2.2 密码域password 219

实例110+视频：创建密码域 219

9.2.3 单选按钮radio 220

实例111+视频：创建单选按钮 220

9.2.4 复选框checkbox 221

实例112+视频：创建复选框 221

9.2.5 普通按钮button 222

实例113+视频：创建关闭窗口按钮 222

9.2.6 提交按钮submit 223

实例114+视频：创建提交按钮 223

9.2.7 重置按钮submit 224

实例115+视频：创建重置按钮 224

9.2.8 图像域image 225

实例116+视频：创建闹钟按钮 226

9.2.9 隐藏域hidden 226

实例117+视频：添加隐藏域 227

9.2.10 文件域file 228

实例118+视频：在网页中上传照片 228

9.3 菜单和列表 229

9.3.1 下拉菜单 229

实例119+视频：创建下拉菜单 230

9.3.2 列表项 231

实例120+视频：选择爱吃的水果 231

9.4 文本域标签textarea 232

实例121+视频：创建意见框 232

9.5 id标签 233

实例122+视频：给表单元素命名 233

9.6 表单的综合使用 234

实例123+视频：创建点歌表单 234

9.7 本章小结 236

第10章 离线网络应用 237

10.1 实现文件缓存 237

10.1.1 离线应用与网页引用的资源 237

实例124+视频：测试离线应用 238

10.1.2 创建清单文件 239

10.1.3 更新离线储存 239

10.2 缓存清单文件 239

10.2.1 定义缓存文件 240

10.2.2 备抵机制 240

10.2.3 白名单 241

10.2.4 注释 241

10.3 本章小结 242

第11章 JavaScript脚本基础 243

11.1 JavaScript简介 243

实例125+视频：JavaScript的基本用法 243

11.2 JavaScript基本语法 244

11.2.1 常量 244

11.2.2 变量 244

11.2.3 表达式 245

11.2.4 运算符 245

11.2.5 基本语句 246

实例126+视频：交替显示图片 246

实例127+视频：循环输出文字 247

11.2.6 函数 249

11.3 JavaScript事件 249

11.3.1 onClick事件 249

实例128+视频：全屏显示图像 250

11.3.2 onChange事件 251

实例129+视频：弹出提示信息 251

11.3.3 onSelect事件 252

实例130+视频：弹出提示信息 252

11.3.4 onFocus事件 253

实例131+视频：选择课程 253

11.3.5 onLoad事件 254

实例132+视频：使用onLoad事件 254

11.3.6 onUnLoad事件 255

实例133+视频：使用onUnLoad事件 255

11.3.7 onBlur事件 256

实例134+视频：使用onBlur事件 256

11.3.8 onMouseOver事件 257

实例135+视频：显示图像 257

11.3.9 onMouseOut事件 258

实例136+视频：隐藏图像 259

11.3.10 onDblClick事件 260

实例137+视频：双击打开网站 260

11.3.11 其他常用事件 261

11.4 浏览器的内部对象 264

11.4.1 navigator对象 264

实例138+视频：显示浏览器信息 265

11.4.2 document对象 265

实例139+视频：显示网页信息 266

11.4.3 Windows对象 267

11.4.4 location对象 268

11.4.5 history对象 269

实例140+视频：浏览历史 269

11.5 本章小结 271

第12章 使用HTML制作文字特效 272

实例141+视频：彩色文字移动效果 272

实例142+视频：文字滚动效果 273

实例143+视频：文字跟随鼠标效果 275

实例144+视频：文字输入效果 277

实例145+视频：文字替换效果 284

实例146+视频：文字和颜色转换 288

实例147+视频：文字渐显效果 291

第13章 使用HTML制作图片特效 295

实例148+视频：图片放大缩小 295

实例149+视频：图片放大镜效果 296

实例150+视频：图片抖动效果 300

实例151+视频：3D相册特效 302

实例152+视频：滚动的照片写真效果 304

实例153+视频：图片切块换图片效果 306

实例154+视频：鼠标移动时展示大图 309

实例155+视频：图片缩放 311

实例156+视频：3D效果换图 313

实例157+视频：全屏漂浮的图片 315

实例158+视频：图片展示效果 317

实例159+视频：收缩切换图像效果 319

实例160+视频：精致的相册效果 321

第14章 使用HTML制作交互效果 326

实例161+视频：广告交互效果 326

实例162+视频：网页相册效果 329

实例163+视频：点击展示效果 332

实例164+视频：鼠标拖曳效果 337

实例165+视频：鼠标交互效果 340

实例166+视频：导航跳转效果 344

第15章 使用HTML制作动画特效 349

实例167+视频：笑脸水泡 349

实例168+视频：旋转的立体花朵 350

实例169+视频：秋天落叶 352

实例170+视频：小球跳动 354

实例171+视频：当年的大风车 356

实例172+视频：变幻的3D动画效果 358

实例173+视频：太阳系动画 360

实例174+视频：跑车开动效果 362

实例175+视频：制作白天到黑夜的效果 365

第16章 使用HTML制作其他特效 368

实例176+视频：仿手机滑屏效果 368

实例177+视频：制作时钟特效 371

实例178+视频：书本翻页效果 374

实例179+视频：制作游戏效果 378

实例180+视频：磁带播放效果 381

实例181+视频：可拖动的池子球效果 385