零基础学HTML+CSS（第2版）

前言

第一篇　 HTML基础知识

第1章　 认识HTML语言 1

1.1　 HTML简介 1

1.2　 HTML的标记组成 2

1.2.1　 单标记 2

1.2.2　 双标记 2

1.3　 创建第一张网页 4

1.4　 浏览HTML的浏览器兼容 6

1.5　 编写HTML的工具 7

1.5.1　 Aptana代码提示工具 7

1.5.2　 Dreamweaver网页开发工具 10

1.6　 小结 12

1.7　 上机实践 13

第2章　 常用HTML标记和格式 14

2.1　 设置正文的标题 14

2.1.1　 标题设置的语法 14

2.1.2　 标题设置经典案例—字号由大到小 14

2.2　 设置段落 16

2.3　 强制换行 17

2.4　 给代码添加注释 18

2.5　 粗体与斜体 19

2.6　 下划线与删除线 20

2.7　 上标与下标 21

2.8　 HTML标记和格式实例 22

2.8.1　 标题用h1 22

2.8.2　 设置每一行为一段落 23

2.8.3　 粗体和删除线 24

2.8.4　 加上化学元素和数学平方根 24

2.9　 小结 26

2.10　 上机实践 26

第3章　 字体标记 27

3.1　 设置字体大小 27

3.2　 设置字体颜色 28

3.3　 设置标题字体样式 29

3.3.1　 标题的字体 29

3.3.2　 设置字体的大小和颜色 30

3.4　 字体标记 32

3.4.1　 物理字体 32

3.4.2　 逻辑字体 33

3.5　 字体实例 34

3.5.1　 插入字体 34

3.5.2　 字体颜色设为红色 35

3.5.3　 把文字设为标题h1 35

3.5.4　 设为斜体并加删除线 36

3.5.5　 设置字体为 36

3.6　 小结 37

3.7　 上机实践 37

第4章　 文字布局 38

4.1　 行的控制 38

4.1.1　 换行控制 38

4.1.2　 不换行控制 39

4.2　 文字对齐 40

4.3　 段落设置 42

4.4　 列表 43

4.4.1　 无序列表 43

4.4.2　 有序列表 43

4.5　 其他方式修饰文本 44

4.5.1　 欲格式化文本 44

4.5.2　 计算机输出格式 47

4.6　 文字布局实例 48

4.6.1　 设置文字换行与不换行 48

4.6.2　 设置文字对齐 49

4.6.3　 显示列表 49

4.6.4　 在网页中显示计算机源代码 50

4.7　 小结 52

4.8　 上机实践 52

第5章　 图像 53

5.1　 图像的基本语法 53

5.1.1　 在网页中插入图像 53

5.1.2　 图像无法显示时的提示信息 54

5.1.3　 控制图像的大小 55

5.2　 图像的链接 56

5.3　 图像和文字对齐 56

5.4　 图像的边框 57

5.5　 图像映射图 58

5.6　 图像实例 58

5.6.1　 在网页上引入图像标记 58

5.6.2　 设置图像参数alt 59

5.6.3　 给图像做超链接 59

5.6.4　 设置图像的边框 59

5.6.5　 设置文本与图像对齐 60

5.6.6　 设置图像的映射图 60

5.7　 小结 61

5.8　 上机实践 61

第6章　 超级链接 62

6.1　 文字链接 62

6.1.1　 最简单的文字超链接 62

6.1.2　 超链接网页的打开方式 63

6.1.3　 链接的注释 64

6.2　 图片链接 64

6.3　 锚点链接 65

6.4　 邮箱地址链接 66

6.5　 相对路径与绝对路径 67

6.5.1　 相对路径 67

6.5.2　 绝对路径 68

6.6　 链接实例 68

6.6.1　 在网页中做文字链接 69

6.6.2　 给图片设置超链接 69

6.6.3　 设置锚点链接 70

6.6.4　 邮箱链接 72

6.7　 小结 73

6.8　 上机实践 73

第7章　 表单 74

7.1　 表单基本语法 74

7.2　 文本框和密码框 76

7.2.1　 文本框 76

7.2.2　 密码框 76

7.3　 单选框和复选框 77

7.3.1　 单选框 77

7.3.2　 复选框 78

7.4　 下拉列表与文本域 79

7.4.1　 下拉列表 79

7.4.2　 文本域 80

7.5　 按钮 82

7.6　 表单实例 83

7.6.1　 插入表单 83

7.6.2　 添加文本框和密码框 84

7.6.3　 添加单选框和复选框 84

7.6.4　 添加下拉列表和文本域 85

7.6.5　 在表单中添加提交按钮 87

7.7　 小结 89

7.8　 上机实践 89

第8章　 表格 90

8.1　 表格基本语法 90

8.2　 跨多行、多列表元 91

8.2.1　 跨多行表元 91

8.2.2　 跨多列表元 92

8.3　 设置表格大小 93

8.3.1　 设置表格边框 93

8.3.2　 设置表格高度和宽度 94

8.4　 表格内文字对齐 95

8.5　 表格在网页中对齐 96

8.6　 表格实例 97

8.6.1　 表格中嵌入表格 97

8.6.2　 设置跨行和跨列 99

8.7　 小结 100

8.8　 上机实践 100

第9章　 框架 101

9.1　 框架基本语法 101

9.2　 框架分栏 102

9.2.1　 框架垂直分栏 102

9.2.2　 框架水平分栏 104

9.3　 框架的常用属性 105

9.3.1　 设置不可调节框架大小 105

9.3.2　 浏览器不支持框架 106

9.3.3　 设置框架边框 107

9.3.4　 设置滚动条 108

9.4　 框架链接 109

9.4.1　 导航框架 109

9.4.2　 内联框架 110

9.5　 框架实例 111

9.5.1　 在网页中插入框架 111

9.5.2　 设置框架的滚动条和边框 112

9.5.3　 设置不支持框架文字 113

9.5.4　 设置框架导航链接 114

9.6　 小结 115

9.7　 上机实践 115

第10章　 移动的字体和图片 117

10.1　 移动属性基本语法 117

10.2　 文字的移动 118

10.3　 图片的移动 120

10.4　 如何设置对象移动 121

10.4.1　 文本移动的方向 121

10.4.2　 文本的滚动循环 121

10.4.3　 文本的移动速度 121

10.4.4　 应用文本的全部移动标记 121

10.5　 移动实例—电影结束效果 123

10.6　 小结 125

10.7　 上机实践 125

第11章　 网页多媒体 126

11.1　 网页多媒体的基本语法 126

11.2　 设置自动播放 127

11.3　 设置多媒体循环播放 128

11.4　 隐藏面板的设置 130

11.5　 设置面板大小 131

11.6　 对齐方式 132

11.7　 网页多媒体实例—在网页中播放视频 133

11.7.1　 引入视频文件 134

11.7.2　 设置多媒体为非自动播放 134

11.7.3　 设置多媒体无循环播放 134

11.7.4　 设置控制面板的大小 135

11.8　 小结 136

11.9　 上机实践 136

第二篇　 DIV+CSS布局

第12章　 为什么用DIV布局 137

12.1　 DIV与TABLE布局比较 137

12.1.1　 什么是DIV 137

12.1.2　 DIV与TABLE的区别 138

12.2　 如何用DIV布局 142

12.2.1　 设置DIV选择符 142

12.2.2　 设置CSS修饰DIV效果 143

12.2.3　 设置DIV的背景颜色 145

12.3　 使用DIV注意事项 146

12.4　 小结 146

12.5　 上机实践 147

第13章　 DIV与SPAN 148

13.1　 解读SPAN 148

13.2　 何时用SPAN 149

13.3　 DIV与SPAN的区别 150

13.3.1　 默认宽度不同 150

13.3.2　 块元素与行内元素 151

13.4　 DIV与SPAN实例—多层布局 152

13.5　 小结 154

13.6　 上机实践 154

第14章　 DIV与CSS结合 156

14.1　 用CSS控制DIV 156

14.2　 CSS文件链接 157

14.2.1　 内联定义 157

14.2.2　 链入内部CSS 158

14.2.3　 链接外部CSS 160

14.3　 DIV+CSS布局实例 161

14.3.1　 确定布局 162

14.3.2　 定义body样式 162

14.3.3　 定义主要的DIV 163

14.3.4　 设置层居中 165

14.4　 小结 166

14.5　 上机实践 166

第三篇　 CSS部分

第15章　 CSS基础知识 167

15.1　 CSS简介 167

15.2　 CSS文件链接方式 168

15.3　 选择符 168

15.4　 伪类 169

15.5　 注解 170

15.6　 单位 170

15.7　 用编写CSS工具演示 171

15.7.1　 打开CSS工具软件 171

15.7.2　 新建CSS文件 171

15.7.3　 保存为CSS后缀文件 172

15.7.4　 打开Aptana工具 173

15.7.5　 在菜单栏中新建CSS文件 173

15.8　 CSS与浏览器兼容性 174

15.9　 CSS基础实例 174

15.9.1　 在Aptana中新建网页 175

15.9.2　 在Aptana中新建CSS文件 175

15.9.3　 链接CSS文件到HTML页面中 176

15.9.4　 用不同的浏览器测试页面 176

15.10　 小结 177

15.11　 上机实践 177

第16章　 字体设置 178

16.1　 字体的复合属性 178

16.2　 字体颜色 180

16.3　 字体大小 181

16.4　 字体重量 183

16.5　 字体类型 185

16.6　 行距 186

16.7　 如何设置文本间距与间隔 187

16.7.1　 文本间距 187

16.7.2　 文本间隔 187

16.8　 字体实例—字体花样 189

16.8.1　 加入字体名字 190

16.8.2　 加入CSS控制字体 190

16.8.3　 设置行距 191

16.8.4　 设置文本间隔 192

16.9　 小结 194

16.10　 上机实践 194

第17章　 文本设置 195

17.1　 字母大小写转换 195

17.2　 文本修饰 197

17.3　 空格处理方式 199

17.4　 设置文本的垂直与水平对齐 201

17.4.1　 文本垂直对齐 201

17.4.2　 文本水平对齐 204

17.5　 文本缩进 205

17.6　 文本设置—给段落设置缩进 207

17.6.1　 对DIV布局 207

17.6.2　 设置文本首行缩进 207

17.7　 小结 208

17.8　 上机实践 209

第18章　 设置背景 210

18.1　 背景语法 210

18.2　 设置背景颜色 211

18.3　 设置背景图像 213

18.3.1　 设置背景图像滚动 214

18.3.2　 设置背景图像位置 215

18.3.3　 设置背景图像如何铺排 217

18.4　 背景实例 219

18.4.1　 设置层背景为绿色 219

18.4.2　 设置层背景图像 220

18.4.3　 设置背景为不铺排 220

18.4.4　 设置背景图像位置 221

18.5　 小结 222

18.6　 上机实践 223

第19章　 设置尺寸 224

19.1　 设置宽度 224

19.2　 设置高度 226

19.3　 尺寸实例—设置层居中 227

19.3.1　 尺寸实例手把手 227

19.3.2　 设置层居中 231

19.4　 小结 233

19.5　 上机实践 234

第20章　 设置外补丁 235

20.1　 外补丁基本语法 235

20.2　 外补丁的四边设置 237

20.2.1　 顶端外补丁用法 237

20.2.2　 右端外补丁用法 238

20.2.3　 底端外补丁用法 239

20.2.4　 左端外补丁用法 241

20.3　 外补丁实例—设置层与层的距离 242

20.3.1　 层与层的距离效果 242

20.3.2　 对层布局 245

20.3.3　 设置层的尺寸 246

20.3.4　 设置层漂移 247

20.3.5　 设置层与层之间的间隔 249

20.4　 小结 251

20.5　 上机实践 251

第21章　 设置内补丁 252

21.1　 内补丁基本语法 252

21.2　 内补丁的四边属性 253

21.2.1　 顶端内补丁用法 253

21.2.2　 右端内补丁用法 254

21.2.3　 底端内补丁用法 255

21.2.4　 左端内补丁用法 256

21.3　 内补丁实例 258

21.3.1　 设置顶部内补丁 258

21.3.2　 设置其他位置的内补丁 259

21.3.3　 用复合属性padding设置内补丁 261

21.4　 小结 262

21.5　 上机实践 262

第22章　 设置对象边框 264

22.1　 边框的基本语法 264

22.2　 边框颜色 266

22.3　 边框样式 267

22.4　 边框宽度 270

22.5　 对象的四个边框 273

22.5.1　 设置顶端边框的属性 273

22.5.2　 设置右端边框的属性 274

22.5.3　 设置底端边框的属性 275

22.5.4　 设置左端边框的属性 276

22.6　 边框实例—双边框 277

22.6.1　 实例手把手 278

22.6.2　 设置多层边框 281

22.7　 小结 283

22.8　 上机实践 283

第23章　 定位 284

23.1　 定位的基本语法 284

23.2　 设置对象层叠顺序 286

23.3　 设置对象的边框位置 288

23.4　 定位实例—圆角制作 289

23.4.1　 相对定位实例 290

23.4.2　 绝对定位实例 291

23.4.3　 实例—圆角制作 293

23.5　 小结 299

22.6　 上机实践 299

第24章　 列表 300

24.1　 列表的基本语法 300

24.2　 设置列表的图像 302

24.3　 设置列表的文本排列 303

24.4　 列表的预设标记 304

24.5　 列表实例 307

24.5.1　 设置列表图像文字内显示 307

24.5.2　 设置列表样式为空心圆 308

24.5.3　 设置文本外自定义列表图像 309

24.6　 小结 310

24.7　 上机实践 310

第25章　 用CSS控制表格 312

25.1　 控制表格的基本语法 312

25.2　 设置表格边框独立或合并 314

25.3　 设置表格布局的算法 316

25.4　 CSS控制表格实例 318

25.4.1　 布局好表格 318

25.4.2　 表格边框独立和合并 319

25.4.3　 设置表格算法为自动和固定 321

25.5　 小结 322

25.6　 上机实践 322

第26章　 CSS设置滚动条 323

26.1　 滚动条的基本语法 323

26.2　 设置滚动条亮边框颜色 324

26.3　 设置3D界面亮边颜色和表面颜色 325

26.4　 设置滚动条方向箭头颜色 326

26.5　 设置滚动条3D界面暗边颜色和暗边框颜色 327

26.6　 设置滚动条基准颜色和拖动区域颜色 329

26.7　 小结 331

26.8　 上机实践 331

第27章　 CSS布局 332

27.1　 设置层的漂移 332

27.2　 清除层的漂移范围 334

27.3　 设置层的可视区域 337

27.4　 内容超过层大小时 338

27.5　 鼠标指针的不同表示 340

27.6　 设置对象可见性 343

27.6.1　 设置对象是否隐藏 344

27.6.2　 设置对象是否显示 346

27.7　 小结 348

27.8　 上机实践 348

第28章　 选择符 349

28.1　 通配选择符 349

28.2　 类型选择符 350

28.3　 包含选择符 352

28.4　 布局常用选择符 353

28.4.1　 ID选择符 353

28.4.2　 类选择符 355

28.5　 分组选择符 356

28.6　 小结 358

28.7　 上机实践 358

第29章　 伪类 360

29.1　 伪类概念 360

29.2　 伪类的四种状态 362

29.2.1　 访问链接的状态 362

29.2.2　 鼠标光标置于其上的状态 363

29.2.3　 获得焦点的状态 364

29.2.4　 访问过后的状态 365

29.3　 小结 367

29.4　 上机实践 367

第30章　 单位 368

30.1　 长度单位 368

30.2　 颜色单位 370

30.3　 小结 372

30.4　 上机实践 372

第四篇　 实 践 部 分

第31章　 游戏网站布局 375

31.1　 网站主页规划 375

31.2　 用DIV+CSS布局 377

31.2.1　 实现页面头部 377

31.2.2　 实现中间部分 379

31.2.3　 实现页面底部 386

31.3　 加入文字 388

31.4　 调整全页面的兼容性 391

31.5　 小结 391

第32章　 企业网站布局 393

32.1　 企业主页规划 393

32.2　 对网页布局 394

32.2.1　 将页面用DIV布局出框图 395

32.2.2　 用CSS实现页面头部 397

32.2.3　 用CSS实现页面体 398

32.3　 添加文本等信息 403

32.4　 调整全页面和浏览器兼容 404

32.5　 其他二级页面模块制作 405

32.6　 小结 406

第33章　 博客主要页面布局 407

33.1　 博客网站主页规划 407

33.1.1　 分析主页需求 408

33.1.2　 确定内容模块 408

33.1.3　 画出效果图 408

33.2　 用DIV布局框图 409

33.2.1　 页眉 409

33.2.2　 实现内容模块 410

33.2.3　 页脚 413

33.3　 CSS实现框图 414

33.3.1　 实现内容模块 414

33.3.2　 实现整页效果 419

33.4　 添加图片 420

33.5　 加入文字 422

33.6　 调整全页面 423

33.7　 其他页面的布局 423

33.8　 小结 423

第34章　 面试题 424

面试题1　 DIV与SPAN的区别 424

面试题2　 HTML的框架是什么 424

面试题3　 CSS引入的方式有哪些 425

面试题4　 前端页面由哪三层构成，各层的作用是什么 425

面试题5　 浏览器的内核有哪些？常用的浏览器都是什么内核 425

面试题6　 img元素的alt text属性和title属性有什么不同 426

面试题7　 document.body和document.documentElement有什么不同 426

面试题8　 XHTML 和 DHTML 有什么区别 426

面试题9　 写出实现效果所需的CSS代码 426

面试题10　 写出一段左边固定、右边随电脑屏幕浮动而变动的HTML+CSS代码 427

面试题11　 写一段两个DIV交叉重叠的CSS样式 427

面试题12　 怎样使一个层垂直居中于浏览器中 428

面试题13　 Firefox嵌套DIV标签居中问题的处理方法 428

面试题14　 用纯CSS实现带下拉的二级横向导航菜单 428

面试题15　 在网页制作中为什么要使用CSS技术 430

面试题16　 CSS+DIV开发Web页面的优势有哪些 430

面试题17　 实现两列高度自适应的CSS代码 430