HTML5+CSS3以其标準布局和精美样式，实现了网页内容和样式的分离，使网页样式布局和美化达到了一个不可思议的高度，成为Web标準中不可替代的技术规範。本书以知识点示例、章节综合案例、全书综合案例和实验手册等形式，全面涵盖网页设计的基础知识、HTML5和CSS3技术、DIV+CSS网页布局技术等。

本书主要内容如下：第1章多方位讲解网页设计的基本知识和技能；第2～7章深入浅出地讲解HTML5的语法和标记；第8～13章以案例为载体，分模组讲述CSS3对网页元素的控制和美化；第14章通过大量案例讲述“内容”与“样式”分离的网页设计方式，主要介绍DIV+CSS布局方式；第15～16章以综合案例引领读者掌握页面及网站的设计和实现。

Web标準是所有网页前端技术的规範和发展方向，本书学习的HTML5和CSS3是Web标準的主要组成部分，阐述了内容和样式分离的网页设计精髓。

全书共16章，从初学者的角度出发，以知识点示例、章节综合案例、全书综合案例和实验手册等形式，全面涵盖网页设计的基础知识、HTML5和CSS3技术、DIV+CSS网页布局技术等。讲解过程由浅入深、循序渐进，力求通过实例操作让读者快速掌握网页设计的方法和技巧。

本书附带1张光碟，其中包含书中所有实例的源档案以及教学用课件，以方便读者学习和参考。

本书既适合作为大中专院校和培训学校计算机相关专业学生的教材，也适合作为网页设计製作人员及爱好者的参考用书。

目录

第1章网页设计基础知识1

1.1　网页相关知识简介2

1.1.1网际网路(internet)、网际网路

(Internet)、全球资讯网(WWW)2

1.1.2网站和网页2

1.1.3网页与HTML3

1.1.4静态网页和动态网页4

1.1.5IP位址、域名和URL5

1.1.6HTTP和FTP6

1.1.7浏览器6

1.2　网页的基本元素6

1.2.1网页的基本媒体元素6

1.2.2网页的基本布局元素8

1.3　网页设计常用技术10

1.3.1网页标记语言HTML10

1.3.2网页表现技术CSS10

1.3.3网页脚本语言JavaScript11

1.3.4动态网页编程技术ASP.NET、

JSP、PHP等11

1.4　网页设计常用工具11

1.4.1基于文本的编辑器12

1.4.2所见即所得编辑器13

1.4.3如何选择工具13

1.5　习题14

1.5.1单选题14

1.5.2填空题14

1.5.3判断题14

1.5.4简答题15

第2章HTML5基础17

2.1　认识HTML518

2.1.1HTML及其发展18

2.1.2HTML5的新特性18

2.1.3编写第一个HTML5档案19

2.2　HTML基本语法20

2.2.1标记与元素20

2.2.2HTML属性22

2.2.3全局属性22

2.3　HTML5文档的结构25

2.3.1HTML5文档的基本结构25

2.3.2网页标题<title>25

2.3.3定义元数据<meta>26

2.3.4HTML5新增的结构标记29

2.4　综合案例——基本的HTML5

网页30

2.5　习题32

2.5.1填空题32

2.5.2判断题32

2.5.3简答题32

第3章文字与段落33

3.1基本的文字排版34

3.1.1段落<p>34

3.1.2控制换行<br>35

3.1.3预先格式化<pre>37

3.1.4水平线<hr>38

3.1.5标题文字<h1>～<h6>40

3.2描述文本的语义化、结构化

元素41

3.2.1强调文本<b>/<i>/<em>/

<strong>41

3.2.2作品标题<cite>43

3.2.3小型文本<small>44

3.2.4标记文本改变<ins>/<del>45

3.2.5文字上下标<sup>/<sub>46

3.2.6旁注<ruby>/<rt>/<rp>47

3.2.7日期时间<time>48

3.2.8其他语义化、结构化元素49

3.3块级元素与行内元素49

3.4无语义的容器元素51

3.4.1<div>元素51

3.4.2<span>元素53

3.5使用字元实体表示特殊字元54

3.6添加注释55

3.7列表56

3.7.1无序列表<ul>56

3.7.2有序列表<ol>58

3.7.3描述列表<dl>/<dt>/<dd>60

3.7.4列表嵌套62

3.8综合实例——简单文字网页63

3.9习题66

3.9.1单选题66

3.9.2填空题67

3.9.3判断题67

3.9.4简答题67

第4章HTML5中的图像、音频和

视频69

4.1档案路径70

4.1.1绝对路径70

4.1.2相对路径70

4.2在页面中插入图像<img>71

4.2.1网页图像的格式71

4.2.2插入图像72

4.3在网页中插入视频<video>74

4.3.1视频格式74

4.3.2插入视频74

4.4在网页中插入音频<audio>76

4.4.1音频格式76

4.4.2插入音频格式77

4.5使用多种来源的多媒体和备用

文本<source>78

4.6插入多媒体档案<embed>78

4.7定义媒介分组和标题<figure>/

<figcaption>80

4.8综合实例——多媒体页面的

设计82

4.9习题84

4.9.1单选题84

4.9.2填空题84

4.9.3判断题85

4.9.4简答题85

第5章超连结87

5.1超连结概述88

5.2基本连结88

5.2.1外部连结88

5.2.2内部连结90

5.2.3<a>标记的属性91

5.2.4超连结的目标类型95

5.2.5Email连结97

5.3锚记(书籤)连结97

5.4设定图像映射101

5.5内联框架<iframe>及其连结104

5.5.1内联框架104

5.5.2内联框架相关的连结105

5.6定义基準地址<base>107

5.7综合实例——设定超连结108

5.8　习题112

5.8.1单选题112

5.8.2填空题113

5.8.3判断题113

5.8.4简答题113

第6章表格115

6.1表格简介116

6.2创建表格116

6.2.1表格基本结构117

6.2.2表格框线显示119

6.2.3带图像的单元格121

6.3合併单元格122

6.3.1设定跨列colspan122

6.3.2设定跨行rowspan124

6.4表格嵌套126

6.5表格的按行分组显示<thead>/

<tbody>/<tfoot>127

6.6综合实例——表格套用129

6.7习题131

6.7.1单选题131

6.7.2填空题131

6.7.3判断题132

6.7.4简答题132

第7章表单133

7.1表单概述134

7.2建立表单<form>135

7.3表单基本元素135

7.3.1<input>标记136

7.3.2多行文字框<textarea>143

7.3.3列表<select>/<option>/

<datalist>144

7.4<input>新增表单高级元素146

7.4.1url类型147

7.4.2email类型148

7.4.3日期和时间149

7.4.4数字类型150

7.4.5color类型151

7.4.6fieldset控制项组152

7.4.7search类型153

7.4.8tel类型153

7.5通用的表单属性154

7.5.1autofocus属性154

7.5.2multiple属性155

7.5.3placeholder属性156

7.5.4required属性157

7.5.5pattern属性158

7.6综合实例——表单设计160

7.7　习题162

7.7.1单选题162

7.7.2填空题162

7.7.3简答题163

第8章CSS基础165

8.1CSS介绍166

8.1.1CSS概述166

8.1.2CSS3167

8.2CSS的基本语法168

8.3CSS属性169

8.4在HTML文档中使用CSS的

方法171

8.4.1行内样式171

8.4.2内部样式表172

8.4.3链入外部样式表175

8.4.4导入外部样式表177

8.5CSS基本选择器178

8.5.1标记选择器179

8.5.2类选择器179

8.5.3id选择器181

8.5.4通用选择器183

8.6其他CSS选择器184

8.6.1组合选择器184

8.6.2伪类选择器191

8.6.3伪对象选择器192

8.6.4属性选择器192

8.7综合案例——CSS的简单

套用194

8.8习题197

8.8.1单选题197

8.8.2填空题198

8.8.3判断题198

8.8.4简答题198

第9章CSS文本样式199

9.1颜色color200

9.2CSS字型属性202

9.2.1字型font-family203

9.2.2字型尺寸font-size204

9.2.3字型粗细font-weight207

9.2.4字型风格font-style209

9.2.5小型大写字母font-variant210

9.2.6字型複合属性font211

9.3文本格式化213

9.3.1行高line-height213

9.3.2水平对齐方式text-align215

9.3.3文本缩进text-indent216

9.3.4大小写text-transform218

9.3.5字元间距letter-spacing219

9.3.6单词间距word-spacing220

9.3.7垂直对齐方式vertical-align221

9.3.8文本修饰text-decoration223

9.3.9文本阴影text-shadow225

9.3.10书写模式writing-mode226

9.3.11断行处理word-wrap和

overflow-wrap229

9.3.12文本相关伪对象231

9.4CSS列表属性232

9.4.1列表项目符号list-style-type233

9.4.2图片符号list-style-image235

9.4.3列表符号位置

list-style-position236

9.4.4列表複合属性list-style238

9.5综合实例——基本图文混排

网页240

9.6习题244

9.6.1单选题244

9.6.2填空题245

9.6.3判断题246

9.6.4简答题246

第10章CSS盒子模型247

10.1盒子BOX的基本概念248

10.1.1盒子的基本形式248

10.1.2盒子大小的计算

width/height250

10.1.3改变盒子大小的计算

方式box-sizing252

10.2框线的基本属性254

10.2.1框线样式border-style254

10.2.2框线厚度border-width256

10.2.3框线颜色border-color258

10.2.4框线複合属性260

10.3边距261

10.3.1内边距padding261

10.3.2外边距margin264

10.4框线的其他属性267

10.4.1圆角框线border-radius267

10.4.2图像框线border-image270

10.4.3盒子阴影box-shadow275

10.5综合案例——盒子布局

排版278

10.6习题284

10.6.1单选题284

10.6.2填空题286

10.6.3判断题286

10.6.4简答题286

第11章CSS背景287

11.1CSS背景概述288

11.2背景颜色288

11.2.1背景颜色background-

color288

11.2.2用背景色给页面分块290

11.3背景图像294

11.3.1页面背景图像

background-image294

11.3.2背景图像重複

background-repeat296

11.3.3背景图像滚动

background-attachment298

11.3.4背景图像位置

background-position300

11.3.5背景参考原点

background-origin302

11.3.6背景图像尺寸

background-size304

11.3.7背景图像裁剪区域

background-clip306

11.3.8线性渐变背景图像308

11.4背景複合属性和多背景311

11.4.1背景複合属性

background311

11.4.2多背景311

11.5定义不透明度314

11.6综合实例——设定背景315

11.7习题323

11.7.1单选题323

11.7.2填空题324

11.7.3判断题324

11.7.4简答题324

第12章CSS美化表格与表单325

12.1CSS美化表格326

12.1.1表格框线颜色设定326

12.1.2盒子阴影327

12.1.3表格隔行变色329

12.1.4表格互动变色332

12.2CSS美化表单333

12.2.1美化表单文本框334

12.2.2美化表单元素背景颜色335

12.2.3美化注册表单元素例子337

第13章CSS盒子布局和定位341

13.1CSS定位属性342

13.1.1正常流向342

13.1.2定位偏移属性top、bottom、

right、left344

13.1.3定位方式position344

13.1.4分层呈现z-index353

13.1.5裁切clip354

13.2CSS布局属性356

13.2.1可见性visibility356

13.2.2溢出overflow358

13.2.3显示display361

13.2.4浮动float364

13.2.5清除clear367

13.3综合案例——幼稚园页面

设计369

13.4习题380

13.4.1单选题380

13.4.2填空题380

13.4.3判断题380

13.4.4简答题381

第14章网页布局383

14.1网页布局方法384

14.1.1网页布局基本思想384

14.1.2DIV+CSS布局384

14.1.3DIV+CSS分块方法385

14.2设计超连结样式389

14.2.1超连结样式变换389

14.2.2按钮式超连结394

14.2.3使用列表製作选单397

14.3布局版式401

14.3.1版心和布局流程401

14.3.2单列布局403

14.3.3两列布局408

14.3.4三列布局416

14.3.5通栏布局429

14.4习题439

14.4.1单选题439

14.4.2填空题439

14.4.3判断题439

14.4.4简答题439

第15章　综合案例——旅游网站441

15.1网页布局概述442

15.2页面的设计442

15.3全局样式设定454

15.4网页首部(top)454

15.4.1连结选单(link)455

15.4.2导航选单(menu)456

15.4.3网站的横幅广告

(bannerwrap)457

15.5　主内容区(main)458

15.5.1登录区(login)459

15.5.2左边内容区(left)460

15.5.3中间上部内容区

(centertop)462

15.5.4中间底部内容区

(centerbottom)464

15.5.5右边内容区(rigth)466

15.6页尾区(footer)469

第16章综合案例——婚戒网站471

16.1网站总体设计472

16.2首页设计473

16.2.1首页页面效果473

16.2.2首页版式布局475

16.2.3首页HTML代码实现476

16.2.4公用的CSS代码实现480

16.2.5首页CSS代码实现481

附录513