HTML CSS网页设计实践教程目录

时间：2023-07-07 01:12:01 | 来源：营销百科

时间：2023-07-07 01:12:01 来源：营销百科

HTML CSS网页设计实践教程目录：第1章 HTML 5概述 1

1.1 了解HTML 5 1

1.1.1 HTML 5简介 1

1.1.2 HTML 5的组织 2

1.1.3 HTML 5的特性 2

1.1.4 HTML 5的优点 4

1.1.5 HTML 5的发展趋势 4

1.2 HTML 5与其他技术的区别 4

1.2.1 与XHTML的区别 5

1.2.2 与Silverlight和Flash的区别 6

1.3 HTML 5与HTML 4的区别 7

1.3.1 语法的改变 7

1.3.2 新增元素和废除元素 10

1.3.3 新增属性和废除属性 14

1.3.4 全局属性 17

1.4 HTML 5的浏览器支持情况 19

1.4.1 支持HTML 5的浏览器

说明 20

1.4.2 在线测试当前浏览器的

支持情况 21

1.5 实验指导1-1：简单安装傲游

浏览器 24

1.6 常用的浏览器内核 25

思考与练习 26

第2章 HTML 5中的新增元素 28

2.1 新增的结构元素 28

2.1.1 header元素 28

2.1.2 article元素 29

2.1.3 section元素 30

2.1.4 nav元素 33

2.1.5 footer元素 35

2.1.6 address元素 36

2.1.7 hgroup元素 37

2.2 新增的块级语义元素 38

2.2.1 aside元素 38

2.2.2 figure元素 40

2.2.3 dialog元素 41

2.3 新增的行内语义元素 42

2.3.1 mark元素 42

2.3.2 cite元素 43

2.3.3 time元素 44

2.3.4 meter元素 45

2.3.5 progress元素 47

2.4 新增的交互元素 48

2.4.1 details元素 48

2.4.2 menu元素 50

2.4.3 command元素 52

2.4.4 datagrid元素 53

2.5 改良HTML 4元素的功能 54

2.5.1 ul元素 54

2.5.2 ol元素 55

2.5.3 嵌套列表 57

2.6 实验指导2-1：使用新增元素构建

网页 58

思考与练习 64

第3章 HTML 5中的表单应用 66

3.1 认识和创建HTML表单66

3.1.1 认识HTML表单 66

3.1.2 input元素的基本类型 67

3.1.3 其他输入元素 70

3.2 新增的表单元素 70

3.2.1 datalist元素 71

3.2.2 output元素 72

3.2.3 keygen元素 73

3.2.4 optgroup元素 74

3.3 新增的表单类型 76

3.3.1 email类型 76

3.3.2 url类型 78

3.3.3 number类型 78

3.3.4 range类型 79

3.3.5 tel类型 80

3.3.6 color类型 81

3.3.7 search类型 82

3.3.8 日期和时间类型 82

3.4 新增的表单属性 86

3.4.1 form属性 86

3.4.2 表单重写属性 88

3.4.3 placeholder属性 89

3.4.4 required属性 90

3.4.5 pattern属性 91

3.4.6 autocomplete属性 92

3.4.7 autofocus属性 93

3.5 表单验证 93

3.5.1 自动验证 93

3.5.2 显式验证 94

3.5.3 自定义验证 96

3.5.4 验证事件 97

3.5.5 取消验证 98

3.6 实验指导3-1：会员资料注册 99

思考与练习 102

第4章 HTML 5中的文件应用 103

4.1 选择文件 103

4.1.1 选择单个文件 103

4.1.2 选择多个文件 105

4.1.3 限制选择文件类型 107

4.2 实验指导4-1：将文件上传到

服务器端 109

4.3 读取文件 111

4.3.1 认识FileReader接口 112

4.3.2 读取二进制文件 115

4.3.3 显示预览图像 116

4.3.4 读取文本文件 118

4.4 错误处理方案 120

4.4.1 产生错误的原因 120

4.4.2 FileError接口 121

4.4.3 错误处理练习 121

4.5 文件拖放API和常用对象 123

4.5.1 拖放API 123

4.5.2 认识DataTransfer对象 125

4.5.3 DataTransfer对象的方法 126

4.5.4 DataTransfer对象的属性 127

4.6 实验指导4-2：拖动文字到网页的

指定区域 129

4.7 实验指导4-3：拖放实现带进度条

的文件上传 130

思考与练习 138

第5章 HTML 5中的多媒体元素 140

5.1 HTML 5多媒体概述 140

5.1.1 HTML 4中的多媒体应用 140

5.1.2 HTML 5中的多媒体 141

5.2 多媒体元素的属性 144

5.2.1 audio和video的共同属性 144

5.2.2 audio元素显示音频文件 146

5.2.3 video元素显示视频文件 149

5.3 向多媒体元素中添加source元素 152

5.3.1 认识source元素 152

5.3.2 source元素常用的支持

格式 152

5.3.3 多媒体元素添加source

元素 153

5.3.4 视频文件添加source元素 154

5.4 多媒体元素的方法 155

5.5 多媒体元素的事件 157

5.5.1 audio和video的共同事件 157

5.5.2 video元素添加事件 159

5.6 认识embed元素 162

5.7 实验指导5-1：制作绚丽的音乐

播放器 164

思考与练习 172

第6章 数据存储 174

6.1 认识Web Storage 174

6.1.1 Web Storage介绍 174

6.1.2 Web Storage的优缺点 175

6.2 localStorage对象 175

6.2.1 判断浏览器是否支持 176

6.2.2 localStorage的常用方法 176

6.2.3 统计访问人数 177

6.2.4 及时更新访问人数 179

6.3 sessionStorage对象 182

6.3.1 与localStorage对象的

不同 182

6.3.2 判断浏览器是否支持 183

6.3.3 方法和事件 183

6.4 JSON对象操作数据 185

6.5 认识Web SQL 191

6.5.1 Web SQL介绍 191

6.5.2 Web SQL API操作 191

6.5.3 数据的简单操作 193

6.6 实验指导6-1：基于Web SQL

的留言簿 196

思考与练习 202

第7章 Canvas API动态绘图 204

7.1 认识canvas元素204

7.1.1 canvas基础知识 204

7.1.2 canvas API的基本使用 206

7.1.3 与SVG的简单区别 208

7.2 通过路径绘图 209

7.2.1 基本方法 209

7.2.2 绘制直线 210

7.2.3 绘制圆形 212

7.2.4 绘制三角形 215

7.3 实验指导7-1：绘制复杂图形 215

7.4贝塞尔曲线217

7.4.1 二次方曲线 217

7.4.2 三次方曲线 219

7.5 绘制渐变图形 221

7.5.1 了解渐变 221

7.5.2 线性渐变 221

7.5.3 径向渐变 224

7.6 高级绘图操作 225

7.6.1 绘图状态 225

7.6.2 坐标变换 226

7.6.3 矩阵变换 233

7.6.4 合成图形 235

7.7 实验指导7-2：实现时钟的动画

效果 237

7.8 图像操作 240

7.8.1 创建图像 240

7.8.2 绘制图像 241

7.8.3 缩放图像 242

7.8.4 裁剪图像 244

7.8.5 输出图像 245

7.9 文字和阴影效果 246

7.9.1 绘制文字 247

7.9.2 阴影特效 247

思考与练习 248

第8章 离线缓存 250

8.1 离线应用程序概述 250

8.1.1 认识离线应用程序 250

8.1.2 离线缓存与浏览器缓存 251

8.1.3 创建离线缓存应用 252

8.2 Cache Manifest文件 255

8.2.1 认识Cache Manifest文件 255

8.2.2 Cache Manifest的组成 255

8.2.3 向manifest文件添加注释 257

8.2.4 Cache Mainifest的遵循

原则 258

8.2.5 配置IIS服务器 258

8.3 离线访问系统当前时间 260

8.4 浏览器与服务器的交互过程 263

8.4.1 首次载入页面 263

8.4.2 再次载入页面 263

8.5 离线存储对象：applicationCache 264

8.5.1 认识applicationCache 264

8.5.2 检测本地缓存状态 265

8.5.3 检测在线状态 266

8.5.4 本地缓存更新 269

8.5.5 事件执行顺序 270

8.6 实验指导8-1：制作离线使用的

日程备忘录 273

思考与练习 277

第9章 通信API和地理位置获取 279

9.1 跨文档消息传输 279

9.1.1 Message API概述 279

9.1.2 跨域获取传递消息 280

9.2 Web Sockets通信 283

9.2.1 Web Sockets API概述 284

9.2.2 使用Web Sockets API 284

9.2.3 向.NET端发送数据 286

9.3 Web Workers线程 290

9.3.1 线程概述 290

9.3.2 Worker对象 291

9.3.3 计算数字结果 293

9.3.4 线程嵌套处理 297

9.4 Geolocatin API概述 299

9.4.1 getCurrentPosition()方法 300

9.4.2 watchCurrentPosition()方法 301

9.4.3 clearWatch()方法 302

9.5 Position对象显示当前位置 302

9.6 实验指导9-1：Google地图锁定

当前位置 305

思考与练习 308

第10章 CSS 3和新增颜色及

文本样式 310

10.1 了解CSS 3 310

10.1.1 什么是CSS 3 310

10.1.2 CSS 3的支持情况 311

10.1.3 CSS 3的新增特性 312

10.2 新增颜色 316

10.2.1 RGBA 316

10.2.2 HSL 318

10.2.3 HSLA 320

10.2.4 opaticy 321

10.3 文本样式 322

10.3.1 text-overflow属性 322

10.3.2 text-shadow属性 326

10.3.3 word-wrap属性 329

10.4 字体样式规则：@font-face 331

10.4.1 语法规则 331

10.4.2 基本练习 332

10.4.3 字体与字体样式 334

10.4.4 注意事项 336

10.5 实验指导10-1：定义文章的标题

和内容样式 336

思考与练习 339

第11章 CSS 3中的新增选择器 340

11.1 属性选择器 340

11.1.1 E[att^='val']选择器 340

11.1.2 E[att$='val']选择器 342

11.1.3 E[att*='val']选择器 343

11.2 结构化伪类选择器 345

11.2.1 E:root选择器 345

11.2.2 E:nth-child(n)选择器 347

11.2.3 E:nth-last-child(n)选择器 348

11.2.4 E:nth-of-type(n)和E:nth-

last-of-type(n)选择器 351

11.2.5 E:last-child选择器 354

11.2.6 E:first-of-type和E:last-of-

type选择器 355

11.2.7 E:only-child选择器 357

11.2.8 E:only-of-type选择器 357

11.2.9 E:empty选择器 358

11.3 UI元素状态伪类选择器 360

11.3.1 E:enabled选择器 360

11.3.2 E:disabled选择器 362

11.3.3 E:checked选择器 363

11.3.4 E::selection选择器 364

11.4 其他新增选择器 366

11.4.1 否定伪类选择器：

E:not(s) 366

11.4.2 目标伪类选择器：

E:target 367

11.4.3 通用兄弟元素选择器：

E~F 368

11.5 新增内容属性：content 370

11.5.1 基本语法 370

11.5.2 插入图像 371

11.5.3 插入项目编码 372

11.5.4 插入嵌套符号 374

11.5.5 编号嵌套 375

11.6 实验指导11-1：结构化的数据

表格设计 376

思考与练习 379

第12章 弹性盒模型与样式布局 381

12.1 新增的盒模型属性 381

12.1.1 box-orient属性 381

12.1.2 box-direction属性 384

12.1.3 box-ordinal-group属性 385

12.1.4 box-flex属性 387

12.1.5 box-flex-group属性 389

12.1.6 box-pack属性 390

12.1.7 box-align属性 392

12.1.8 box-lines属性 393

12.2 多列类布局属性 394

12.2.1 columns属性 394

12.2.2 column-width属性 396

12.2.3 column-count属性 397

12.2.4 column-gap属性 397

12.2.5 column-rule属性 399

12.2.6 column-span属性 400

12.2.7 column-fill属性 401

12.2.8 分列打印属性 401

12.3 用户界面布局 402

12.3.1 box-sizing属性 402

12.3.2 resize属性 404

12.3.3 zoom属性 406

12.3.4 outline-offset属性 407

12.3.5 nav-index属性 408

12.3.6 定义方向键控制顺序 410

12.4 实验指导12-1：简单设计

博客网页 411

思考与练习 413

第13章 边框、背景和渐变 415

13.1 边框设计 415

13.1.1 border-radius属性 415

13.1.2 border-image属性 417

13.1.3 box-shadow属性 421

13.1.4 border-colors属性 423

13.2 背景样式 424

13.2.1 变更属性 424

13.2.2 background-origin属性 427

13.2.3 background-clip属性 428

13.2.4 background-size属性 430

13.3 渐变特效 431

13.3.1 WebKit引擎实现渐变 431

13.3.2Gecko引擎实现渐变 433

13.3.3 重复渐变 435

13.4 实验指导13-1：制作下拉

导航菜单 436

思考与练习 439

第14章 HTML 5 CSS 3制作

旅游网页 440

14.1 旅游网站分析 440

14.1.1 产生背景 440

14.1.2 发展趋势 441

14.1.3 基本结构 441

14.2 设计首页 442

14.2.1 网页效果 442

14.2.2 添加头部 443

14.2.3 添加底部 446

14.2.4 添加内容 446

14.3 设计关于我们网页 448

14.3.1 网页效果 448

14.3.2 关于我们 448

14.3.3 最新公告 449

14.4 设计国内旅游网页 450

14.4.1 网页效果 450

14.4.2 国内旅游 451

14.4.3 其他内容 451

14.5 设计出境旅游网页 452

14.6 设计留言咨询网页 453

14.6.1 网页效果 453

14.6.2 清空留言 453

14.6.3 提交留言 454

14.6.4 查看位置 455

附录 思考与练习答案459^[1]