HTML5+CSS3+JavaScript网页设计实用教程 [前端]

《HTML5+CSS3+JavaScript网页设计实用教程》是一本以“应用实例和综合实战案例”的形式编写网页设计技术的教材。《HTML5+CSS3+JavaScript网页设计实用教程》的内容分为四个部分，包括HTML5、CSS3、JavaScript和Bootstrap。《HTML5+CSS3+JavaScript网页设计实用教程》内容的组织是以介绍Web前端网页设计技术展开的，具体内容包括网页设计的文档结构、文本、图像，用HTML5创建超链接、表格，使用表单，用CSS3设置表格和表单的样式、美化图片、背景和边框；讲述JavaScript基本语法、对象编程、应用HTML5+CSS3和JavaScript的搭配应用等网页设计的方法和技巧，最后使用Bootstrap框架组件、插件来快速设计页面。本书贴切实际，结构合理，内容丰富，操作方便。

《HTML5+CSS3+JavaScript网页设计实用教程》作为Web前端网页设计技术的入门类教材，既可以作为高等职业教育计算机及相关专业的教材，也可作为Web前端技术的各种培训班的培训教材，还可用于读者自学。

前    言

　　在互联网迅猛发展和网络经济蓬勃繁荣的形势下，互联网技术成为信息技术界关注的热门技术之一，教育领域也进行着深刻的变革，高职院校顺应着趋势，培养以企业需求为导向的“职业化”特征高级应用型人才，力求将新技术和应用融合到实际案例之中。通过对网页设计实例和综合案例的学习，读者可以尽快掌握所学的知识，提高网页设计的实战能力；同时在网上提供了本书的实例源代码，可供读者直接查看和调用。

本书特色

　　本书系统讲解了Web前端网页设计技术，内容简明扼要，结构清晰，示例众多，步骤明确，讲解细致，突出可操作性和实用性。本书不仅通过具体案例将Web前端技术的理论知识融入到解决实际问题中，还辅以丰富的操作习题和课后练习，能使学生得到充足的训练，有助于理解知识，达到学以致用。

本书主要内容

　　第1章介绍Web相关术语、HTML5发展现状及HTML5文件的基本结构。

　　第2章讲解HTML5文件的基本结构标记(也称标签)、HTML5段落、文本是如何排版的、如何运用HTML5标记在页面中插入图片、设置背景以及如何在页面中插入列表，有序列表、无序列表、定义列表及几种列表的嵌套的使用。

　　第3章介绍如何使用标签创建表格及表格布局。通过完成一个个小任务，掌握如何使用<table>标记创建表格，如何设置表格的各种属性，如何运用表格布局页面。

　　第4章介绍超链接的使用及浮动框架。介绍运用<a>标记及属性实现几种不同形式的超链接，运用<iframe>标记实现浮动框架。通过综合实例掌握在浮动框架中使用超链接实现页面的跳转。

　　第?5?章讲解如何在页面上插入表单，详细介绍表单中的各种元素；通过实例介绍文本框、密码框、单选按钮、复选框、文件域、按钮、隐藏域、下拉列表框、文本域及HTML5中新增元素的使用。

　　第6章介绍多媒体设置，介绍如何实现在页面中插入音频、视频等多媒体文件。

　　第7章介绍CSS3样式表。详细介绍几种样式表的定义，样式表中关于文本段落属性、表格样式属性、列表样式属性、图片属性的设置，背景属性的设置，表单属性设置。

　　第8章介绍CSS3中盒子模型。通过实例详细讲解盒子模型的height、width设置，盒子边框border-style、border-width和color设置，盒子模型的padding和margin的设置，并通过大量的实例讲解盒子的浮动、盒子的定位及z-index的综合应用。

　　第9章讲解JavaScript的基本语法知识。通过实例介绍JavaScript数据类型、运算符、比较运算符、赋值运算符、逻辑运算符、函数的定义及使用。详细介绍几种流程控制结构及综合应用。

　　第10章介绍JavaScript对象及对象编程。

　　第11章主要介绍表单中事件的处理。详细介绍如何处理表单中信息的验证及相关事件的处理。

　　第12章主要介绍Bootstrap框架。详细介绍Bootstrap的环境配置、包含的内容；使用Bootstrap CSS样式表来设置文本、图片、表格和按钮样式；使用Bootstrap组件及插件类，如字体、下拉按钮、导航栏、分页、进度条、警告提示和多媒体组件来快速设计页面。

读者对象

　　本书作为Web前端网页设计技术入门类教材，既可以作为高等职业教育计算机及相关专业的教材，也可作为Web前端开发技术的各种培训班培训教材，还可用于读者自学。

　　本书由凌宝慧(南京信息职业技术学院教师)任主编，高云、崔艳春、陆莉莉、李方方任副主编，其中第2～5、7～9、12章由凌宝慧编写，第1、6章由高云编写，第11章由陆莉莉编写，第10章由李方方编写，由凌宝慧负责统稿。参与编写和资料整理的还有何光明、王珊珊、石雅琴、许悦、卢振侠、陈莉萍等。

　　限于作者水平，书中难免存在疏漏之处，恳请广大读者批评指正。

　　编  者

目    录

第1章  HTML5介绍 1

1.1  工作场景导入 2

1.2  HTML5的相关概念 2

1.2.1  Web概述 2

1.2.2  什么是HTML 4

1.2.3  HTML5的发展现状 5

1.3  开发工具 5

1.3.1  HTML5文件的基本结构 5

1.3.2  使用HBuilder创建HTML

网页 7

1.4  回到工作场景 10

1.5  工作实训营 11

1.5.1  训练实例——自行设计一个

简单的网页 11

1.5.2  工作实践常见问题解析 11

1.6  本章小结 12

1.7  习题 12

第2章  HTML5文件的基本标记 15

2.1  工作场景导入 16

2.2  HTML5文件的基本结构标记 16

2.2.1  head标记 16

2.2.2  title标记 17

2.2.3  body标记 17

2.2.4  HTML注释标记 18

2.2.5  meta标记 18

2.2.6  style标记 20

2.2.7  script标记 21

2.2.8  link标记 21

2.2.9  base标记 22

2.3  HTML5文本排版 23

2.3.1  标题 23

2.3.2  段落 24

2.3.3  换行与水平线 24

2.3.4  文本格式化标记 26

2.3.5  div与span标记 28

2.4  HTML5图像 29

2.4.1  <img>标记 29

2.4.2  <map>标记、usemap属性 30

2.5  HTML5列表 31

2.5.1  有序列表 31

2.5.2  无序列表 33

2.5.3  嵌套列表 34

2.5.4  定义列表 35

2.6  回到工作场景 36

2.7  工作实训营 37

2.7.1  训练实例——制作一个显示

文字、图片和列表排版效果的

页面 37

2.7.2  工作实践常见问题解析 38

2.8  本章小结 38

2.9  习题 38

第3章  表格 41

3.1  工作场景导入 42

3.2  表格创建 42

3.3  表格设置 45

3.3.1  表格宽度和高度 45

3.3.2  表格边框设置 47

3.3.3  表格对齐方式 48

3.3.4  单元格间距和边距 49

3.4  表格背景 50

3.4.1  背景颜色 50

3.4.2  背景图片 51

3.5  单元格设置 52

3.5.1  单元格高度和宽度 52

3.5.2  单元格跨行跨列 53

3.6  表格行设置 55

3.6.1  行高度 55

3.6.2  行背景颜色及背景图 56

3.6.3  行文字对齐方式 57

3.7  回到工作场景 58

3.8  工作实训营 59

3.8.1  训练实例 59

3.8.2  工作实践常见问题解析 60

3.9  本章小结 61

3.10  习题 61

第4章  超链接 63

4.1  工作场景导入 64

4.2  超链接 64

4.2.1  外部链接 65

4.2.2  电子邮件链接 69

4.2.3  锚点链接 70

4.3  浮动框架iframe 72

4.4  回到工作场景 74

4.5  工作实训营 78

4.5.1  训练实例 78

4.5.2  工作实践常见问题解析 78

4.6  本章小结 79

4.7  习题 79

第5章  表单 83

5.1  工作场景导入 84

5.2  表单标记 84

5.2.1  设置表单名称的name属性 84

5.2.2  表单的action属性 85

5.2.3  设置表单提交方式的method

属性 85

5.3  设置表单输入的input标记 85

5.3.1  文本框 86

5.3.2  密码框 87

5.3.3  单选按钮 88

5.3.4  复选框 89

5.3.5  文件域 90

5.3.6  按钮 91

5.3.7  隐藏域 92

5.4  下拉列表框 93

5.5  文本域 94

5.6  表单分组 95

5.7  快捷键及提示 96

5.8  HTML5新增元素 97

5.8.1  input元素 97

5.8.2  input属性 101

5.9  回到工作场景 103

5.10  工作实训营 106

5.10.1  训练实例 106

5.10.2  工作实践常见问题解析 106

5.11  本章小结 107

5.12  习题 107

第6章  HTML5中的多媒体 109

6.1  工作场景导入 110

6.2  设置文字滚动 110

6.3  设置多媒体 115

6.3.1  插入音频 115

6.3.2  插入视频 117

6.4  回到工作场景 119

6.5  工作实训营 121

6.5.1  训练实例 121

6.5.2  工作实践常见问题解析 122

6.6  本章小结 122

6.7  习题 123

第7章  CSS介绍 125

7.1  工作场景导入 126

7.2  CSS简介 126

7.2.1  什么是CSS 126

7.2.2  CSS的语法 127

7.2.3  CSS的作用 127

7.2.4  CSS的常用单位 127

7.3  引入样式表的方法 129

7.3.1  内联样式 129

7.3.2  内部样式表 130

7.3.3  外部样式表 131

7.4  选择器 133

7.4.1  id选择器 133

7.4.2  类选择器 134

7.4.3  标记选择器 135

7.4.4  全局选择器 137

7.4.5  群组选择器 138

7.4.6  后代选择器 139

7.4.7  伪类选择器 140

7.4.8  选择器优先级 142

7.5  设置字体 143

7.5.1  字体类型 143

7.5.2  字体大小 144

7.5.3  字体风格 146

7.5.4  字体颜色 147

7.6  设置文本段落 149

7.6.1  首行缩进 149

7.6.2  水平对齐 150

7.6.3  垂直对齐 151

7.6.4  文本修饰 154

7.6.5  行高 155

7.6.6  字间距 156

7.6.7  词间距 157

7.7  设置表格 159

7.8  设置列表 161

7.8.1  列表符号 161

7.8.2  图像符号 163

7.8.3  列表缩进 165

7.9  设置图片 166

7.10  设置背景 168

7.10.1  背景颜色 168

7.10.2  背景图片 170

7.10.3  背景重复 171

7.10.4  背景位置 172

7.11  设置超链接属性 174

7.12  设置表单 176

7.13  回到工作场景 178

7.14  工作实训营 190

7.14.1  训练实例 190

7.14.2  工作实践常见问题解析 190

7.15  本章小结 192

7.16  习题 193

第8章  CSS的盒子模型 195

8.1  工作场景导入 196

8.2  盒子内容 196

8.3  盒子边框 200

8.4  盒子内边距 203

8.5  盒子外边距 204

8.6  设置元素浮动 206

8.6.1  文档流 206

8.6.2  浮动布局 209

8.6.3  清除浮动 211

8.7  设置层叠顺序 212

8.8  设置元素定位 214

8.8.1  相对定位 215

8.8.2  绝对定位 216

8.8.3  无定位 219

8.9  回到工作场景 221

8.10  工作实训营 237

8.10.1  训练实例 237

8.10.2  工作实践常见问题解析 238

8.11  本章小结 239

8.12  习题 239

第9章  JavaScript基础知识 241

9.1  工作场景导入 242

9.2  了解JavaScript 242

9.2.1  标识符和关键字 244

9.2.2  常量和变量 244

9.3  数据类型 245

9.3.1  数值类型 245

9.3.2  布尔类型 246

9.3.3  字符串类型 246

9.3.4  null和undefined 246

9.4  运算符 247

9.5  流程控制 249

9.5.1  条件控制 249

9.5.2  循环控制 254

9.6  函数 255

9.6.1  函数定义 255

9.6.2  函数调用 256

9.7  回到工作场景 257

9.8  工作实训营 258

9.8.1  训练实例 258

9.8.2  工作实践常见问题解析 259

9.9  本章小结 259

9.10  习题 259

第10章  JavaScript中的对象 261

10.1  工作场景导入 262

10.2  JavaScript的对象概述 262

10.3  Date对象 262

10.4  String对象 267

10.5  Math对象 271

10.6  Array对象 274

10.7  回到工作场景 279

10.8  工作实训营 287

10.8.1  训练实例 287

10.8.2  工作实践常见问题解析 287

10.9  本章小结 289

10.10  习题 290

第11章  事件处理 293

11.1  工作场景导入 294

11.2  事件与事件处理 294

11.2.1  事件 294

11.2.2  调用事件处理程序 294

11.3  JavaScript常用事件 296

11.3.1  鼠标事件 296

11.3.2  键盘事件 297

11.3.3  窗口事件 298

11.4  表单事件 299

11.4.1  onsubmit与onreset事件 299

11.4.2  onfocus与onblur事件 301

11.4.3  onselect事件 302

11.4.4  onchange事件 302

11.5  回到工作场景 304

11.6  工作实训营 307

11.6.1  训练实例 307

11.6.2  工作实践常见问题解析 308

11.7  本章小结 309

11.8  习题 309

第12章  Bootstrap概述 311

12.1  工作场景导入 312

12.2  了解Bootstrap 312

12.2.1  Bootstrap环境安装 312

12.2.2  Bootstrap包含的内容 314

12.2.3  使用Bootstrap框架 314

12.3  使用Bootstrap CSS样式 316

12.3.1  排版 316

12.3.2  图片 322

12.3.3  表格 323

12.3.4  表单 325

12.3.5  按钮 329

12.4  使用Bootstrap布局组件 330

12.4.1  Bootstrap字体图标 330

12.4.2  Bootstrap按钮下拉菜单 331

12.4.3  Bootstrap 按钮组 333

12.4.4  Bootstrap输入框组 336

12.4.5  Bootstrap导航栏 337

12.4.6  Bootstrap分页 339

12.4.7  Bootstrap进度条 340

12.4.8  Bootstrap警告 342

12.4.9  Bootstrap多媒体对象 343

12.5  Bootstrap插件 344

12.5.1  下拉菜单 344

12.5.2  弹出框 346

12.5.3  轮播 347

12.5.4  折叠 349

12.6  回到工作场景 350

12.7  工作实训营 354

12.7.1  训练实例 354

12.7.2  工作实践常见问题解析 355

12.8  本章小结 355

12.9  习题 356