《Web前端开发精品课：HTML与CSS 基础教程》配套彩图,源代码

编辑推荐

通俗易懂 案例简洁形象，生动剖析晦涩难懂的知识点。直击要点 规避思维误区，为初学者打牢基础保驾护航。全面培养 讲透基础知识，亦注重开发技巧与思维锻炼。精简浓缩 精炼核心内容，为读者节省学习时间与成本。在线辅助 结合网站资源，强化书本学习并拓展新知识。

内容简介

结合大量开发实战经验，本书将前端开发知识系统化整理，浓缩精华，用通俗易懂的语言直指初学者的痛点。全书分为两部分：首部分是HTML基础知识，帮助读者认识和理解网页的结构；第二部分是CSS基础知识，帮助读者掌握网页中各个元素样式与外观的设置。此外，本书在融入大量开发技巧的同时，也注重编程思维的培养，使得学习者能够建立清晰的学习思路，并在实战中举一反三。

作者简介

2011~2015就读于暨南大学信科院计算机科学与技术专业，从事前后端开发一年多，开发过绿叶学习网、广州智能工程研究会网站、大量在线应用工具，业余时间阅读大量国内外技术书籍。 现为绿叶学习网（http://www.lvyestudy.com）的站长，该网站用于分享自己在前后端开发中的一些经验，并且制作相关前后端开发的在线教程。这些在线教程在互联网引起广泛关注，极大受到网友推崇。本人编写过大量原创在线教程，每一个教程广受网友称赞与推崇。

目录

• 第一部分 HTML 入门
• 第一章 HTML 基础 3
• 1.1 Web 技术简介… ……………………………………… 4
• 1.1.1 从网页制作到前端开发…………………………… 4
• 1.1.2 前端技术… ……………………………………… 5
• 1.1.3 后端技术… ……………………………………… 8
• 1.1.4 从前端开发到后端开发的学习路线… ………… 9
• 【疑问】……………………………………………………… 10
• 【总结】……………………………………………………… 11
• 1.2 HTML 是什么？ … …………………………………… 12
• 【总结】……………………………………………………… 13
• 1.3 HTML 入门简介 … …………………………………… 13
• 1.3.1 教程说明… ……………………………………… 13
• 1.3.2 初学者比较关心的问题… ……………………… 14
• 1.4 本章总结 ………………………………………………… 15
• 第二章 前端开发工具 17
• 2.1 前端开发工具 …………………………………………… 18
• 2.1.1 Dreamweaver… ……………………………… 18
• 2.1.2 Sublime Text…………………………………… 19
• 2.1.3 Visual Studio…………………………………… 19
• 02 目录
• 2.2 新建HTML 页面 ……………………………………… 20
• 第三章 HTML 基本标签 23
• 3.1 HTML 基本结构 … …………………………………… 24
• 3.1.1 HTML 基本结构… ……………………………… 24
• 3.1.2 用记事本编写网页… …………………………… 25
• 3.1.3 用Dreamweaver 编写网页…………………… 26
• 3.2 head 标签 ……………………………………………… 27
• 3.2.1 head 标签内的title 标签… ……………………28
• 3.2.2 head 标签内的meta 标签… …………………28
• 3.2.3 head 标签内的style 标签… ………………… 31
• 3.2.4 head 标签内的* 标签… ………………… 31
• 3.2.5 head 标签内的link 标签… …………………… 32
• 3.3 body 标签 ……………………………………………… 33
• 3.4 HTML 注释 … ………………………………………… 33
• 3.5 本章总结 … …………………………………………… 35
• 训练题 … ……………………………………………………… 36
• 第四章 段落与文字 37
• 4.1 段落与文字简介 …………………………………………38
• 4.2 标题标签 … ……………………………………………40
• 4.3 段落标签 … …………………………………………… 42
• 4.3.2 段落标签
• …………………………………… 42
• 4.3.2 换行标签
• … ………………………………43
• 【总结】………………………………………………………45
• 4.4 文本格式化标签 … ……………………………………45
• 4.4.1 粗体标签b、strong… …………………………45
• 目录 03
• 4.4.2 斜体标签i、cite、em… ………………………46
• 4.4.3 上标标签sup… …………………………………47
• 4.4.4 下标标签sub… …………………………………48
• 4.4.6 删除线标签s… …………………………………50
• 4.4.7 下划线标签u… …………………………………50
• 【总结】……………………………………………………… 51
• 4.5 水平线标签……………………………………………… 52
• 4.6 div 标签 ………………………………………………… 53
• 4.7 网页特殊符号 … ………………………………………54
• 4.7.1 网页中的空格… …………………………………54
• 4.7.2 特殊符号… ………………………………………56
• 【总结】………………………………………………………58
• 4.8 自闭合标签 … …………………………………………58
• 4.8.1 什么叫自闭合标签… ……………………………58
• 4.8.2 常见的自闭合标签… ……………………………59
• 4.9 块元素和行内元素 … …………………………………60
• 4.9.1 块元素… ………………………………………… 61
• 4.9.2 行内元素… ……………………………………… 63
• 【总结】………………………………………………………64
• 4.10 本章总结 … ……………………………………………64
• 4.11 训练题 … ……………………………………………… 67
• 第五章 列表 69
• 5.1 HTML 列表简介 … ……………………………………70
• 5.1.1 网页中的列表… …………………………………70
• 5.1.2 HTML 列表简介…………………………………70
• 5.2 有序列表 … …………………………………………… 71
• 04 目录
• 5.2.1 有序列表简介… ………………………………… 71
• 5.2.1 有序列表type 属性……………………………… 72
• 【总结】………………………………………………………74
• 5.3 无序列表 … …………………………………………… 75
• 5.3.1 无序列表简介… ………………………………… 75
• 5.3.1 无序列表type 属性……………………………… 76
• 5.3.3 深入了解无序列表… …………………………… 77
• 【疑问】………………………………………………………78
• 【总结】………………………………………………………80
• 5.4 定义列表 … …………………………………………… 81
• 【总结】………………………………………………………82
• 5.5 HTML 中的大误区 … …………………………………82
• 5.6 本章总结 … ……………………………………………84
• 5.7 训练题 … ………………………………………………87
• 第六章 表格 89
• 6.1 表格简介 …………………………………………………90
• 6.2 表格基本结构 … ……………………………………… 91
• 【疑问】……………………………………………………… 92
• 【总结】……………………………………………………… 92
• 6.3 表格完整结构 … ………………………………………93
• 6.3.1 表格标题caption… ……………………………93
• 6.3.2 表头th… …………………………………………94
• 【总结】………………………………………………………96
• 6.4 表格语义化 … …………………………………………97
• 【总结】…………………………………………………… 100
• 6.5 合并行rowspan …………………………………… 100
• 目录 05
• 6.6 合并列colspan … ………………………………… 102
• 6.7 本章总结 … ………………………………………… 103
• 6.8 训练题 … …………………………………………… 106
• 第七章 图像 107
• 7.1 图像标签 ……………………………………………… 108
• 7.1.1 img 标签src 属性… ………………………… 108
• 7.1.2 img 标签alt 属性……………………………… 109
• 7.1.3 img 标签title 属性… ………………………… 109
• 【总结】…………………………………………………… 110
• 7.2 相对路径和*路径 … …………………………… 110
• 7.2.1 “网页1”引用海贼王图片… ………………… 111
• 7.2.2 “网页2”引用海贼王图片…………………… 112
• 【疑问】 … ……………………………………………… 113
• 【总结】…………………………………………………… 113
• 7.3 图片格式 … ………………………………………… 114
• 7.3.1 位图… ………………………………………… 114
• 7.3.2 矢量图… ……………………………………… 116
• 7.3.3 位图与矢量图区别… ………………………… 118
• 【疑问】…………………………………………………… 118
• 【总结】…………………………………………………… 119
• 7.4 本章总结……………………………………………… 119
• 第八章 章超链接 121
• 8.1 超链接简介…………………………………………… 122
• 8.2 a 标签 ………………………………………………… 122
• 8.2.1 a 标签简介… ………………………………… 122
• 06 目录
• 8.2.2 a 标签target 属性…………………………… 123
• 8.2.3 各种超链接… ………………………………… 124
• 8.3 内部链接……………………………………………… 125
• 8.4 锚点链接 … ………………………………………… 127
• 8.5 本章总结 … ………………………………………… 130
• 第九章 表单 131
• 9.1 表单简介 ……………………………………………… 132
• 9.2 form 标签 …………………………………………… 133
• 9.2.1 form 标签简介………………………………… 133
• 9.2.2 form 标签属性………………………………… 134
• 9.2.3 表单对象… …………………………………… 139
• 9.3 input 标签简介 ……………………………………… 139
• 9.4 单行文本框text … ………………………………… 140
• 9.4.1 文本框text 简介……………………………… 140
• 9.4.2 文本框text 简介……………………………… 141
• 9.5 密码文本框password … ………………………… 142
• 9.5.1 密码文本框简介… …………………………… 142
• 9.5.2 密码文本框属性… …………………………… 144
• 9.6 单选按钮radio ……………………………………… 145
• 9.6.1 单选按钮简介… ……………………………… 145
• 9.6.2 单选按钮radio 的忽略点… ………………… 146
• 【疑问】…………………………………………………… 148
• 9.7 复选框checkbox…………………………………… 148
• 9.8 表单按钮 … ………………………………………… 150
• 9.8.1 普通按钮button……………………………… 151
• 9.8.2 提交按钮submit…………………………… 152
• 目录 07
• 9.8.3 重置按钮reset… …………………………… 152
• 9.8.4 普通按钮、提交按钮和重置按钮的区别… … 154
• 9.9 图片域image … …………………………………… 155
• 【疑问】…………………………………………………… 156
• 9.10 隐藏域hidden … ………………………………… 156
• 9.11 文件域file … ……………………………………… 158
• 9.12 多行文本框textarea … ………………………… 159
• 9.13 下拉列表select …………………………………… 161
• 9.13.1 select 标签属性…………………………… 162
• 9.13.2 option 标签属性 … ………………………… 164
• 【疑问】…………………………………………………… 166
• 9.14 input 标签按钮与button 标签按钮 … ………… 166
• 【疑问】…………………………………………………… 168
• 9.15 本章总结 … ………………………………………… 168
• 【疑问】…………………………………………………… 171
• 9.16 训练题 … …………………………………………… 171
• 第十章 多媒体 173
• 10.1 网页中插入音频和视频… ………………………… 174
• 10.2 网页中插入背景音乐 … …………………………… 176
• 10.3 网页中插入flash … ……………………………… 177
• 10.4 本章总结 … ………………………………………… 178
• 第十一章 框架 179
• 11.1 浮动框架* …………………………………… 180
• 11.1.1 * 简介…………………………………… 180
• 11.1.2 * 滚动条… …………………………… 181
• 08 目录
• 第二部分 CSS 入门
• 第十二章 CSS 基础 185
• 12.1 CSS 是什么 ………………………………………… 186
• 12.1.1 CSS 简介… ………………………………… 186
• 12.1.2 CSS 和CSS3… …………………………… 187
• 12.2 CSS 入门简介 … ………………………………… 187
• 12.3 CSS 的3 种引用方式 … ………………………… 188
• 12.3.1 外部样式表…………………………………… 188
• 12.3.2 内部样式表…………………………………… 189
• 12.3.3 内联样式表…………………………………… 190
• 第十三章 CSS 选择器基础 193
• 13.1 元素的id 和class ………………………………… 194
• 13.1.1 元素的id 属性………………………………… 194
• 13.1.2 元素的class 属性…………………………… 194
• 13.2 什么叫CSS 选择器？ … ………………………… 195
• 13.3 CSS 选择器入门（上） …………………………… 197
• 13.3.1 元素选择器…………………………………… 197
• 13.3.2 id 选择器……………………………………… 199
• 13.3.3 class 选择器… ……………………………… 200
• 13.4 CSS 选择器入门（下） …………………………… 202
• 13.4.1 子元素选择器………………………………… 202
• 13.4.2 相邻选择器…………………………………… 204
• 13.4.3 群组选择器…………………………………… 205
• 目录 09
• 第十四章 字体样式 207
• 14.1 字体样式简介 … …………………………………… 208
• 14.2 字体类型font-family … ………………………… 209
• 14.3 字体大小font-size … …………………………… 211
• 14.4 字体颜色color … ………………………………… 214
• 14.5 字体粗细font-weight …………………………… 216
• 14.6 字体斜体font-style ……………………………… 218
• 14.7 CSS 注释…………………………………………… 220
• 14.8 本章总结 … ………………………………………… 222
• 第十五章 文本样式 225
• 15.1 文本样式简介 … …………………………………… 226
• 15.2 下划线、删除线和顶划线text-decoration… … 226
• 15.2.1 text-decoration 属性……………………… 226
• 15.2.2 下划线、删除线和顶划线的用途分析……… 229
• 15.3 文本大小写text-transform … ………………… 230
• 15.4 font-variant 属性 ………………………………… 231
• 【疑问】…………………………………………………… 232
• 15.5 首行缩进text-indent … ………………………… 232
• 15.6 文本水平对齐text-align ………………………… 234
• 15.7 行高line-height… ……………………………… 235
• 15.8 字母间距letter-spacing 和
• 词间距word-spacing …………………………… 237
• 15.8.1 letter-spacing 属性… …………………… 237
• 15.8.2 word-spacing 属性… …………………… 238
• 15.9 文本样式总结 … …………………………………… 240
• 10 目录
• 第十六章 边框样式 245
• 16.1 边框样式简介 … …………………………………… 246
• 16.2 整体边框样式 … …………………………………… 247
• 16.2.1 边框的属性…………………………………… 247
• 16.2.2 边框实例……………………………………… 250
• 16.2.3 border 属性简洁写法… …………………… 250
• 16.3 局部边框样式 … …………………………………… 251
• 16.4 本章总结 … ………………………………………… 254
• 第十七章 背景样式 259
• 17.1 背景样式简介 … …………………………………… 260
• 17.1.1 背景颜色……………………………………… 260
• 17.1.2 背景图像……………………………………… 260
• 17.2 背景颜色background-color … ……………… 261
• 17.3 背景图像简介 … …………………………………… 263
• 17.3.1 background-image 属性………………… 263
• 17.3.2 background-repeat 属性… …………… 263
• 17.3.3 background-position 属性……………… 264
• 17.3.4 background-attachment 属性… ……… 265
• 17.4 背景图像样式background-image …………… 265
• 17.5 背景重复样式background-repeat …………… 267
• 17.6 背景图像位置background-position … ……… 269
• 17.6.1 background-position 取值为
• “像素值”……………………………………… 270
• 17.6.2 background-position 取值为
• “关键字”……………………………………… 271
• 目录 11
• 17.7 背景固定样式background-attachment … … 273
• 17.8 本章总结 … ………………………………………… 274
• 第十八章 超链接样式 275
• 18.1 超链接伪类 … ……………………………………… 276
• 18.1.1 如何去除超链接下划线……………………… 276
• 18.1.2 如何定义超链接伪类………………………… 277
• 18.1.3 深入了解超链接伪类………………………… 279
• 【疑问】…………………………………………………… 280
• 18.2 深入了解:hover 伪类 … ………………………… 281
• 18.3 鼠标样式 … ………………………………………… 283
• 18.3.1 浏览器鼠标样式……………………………… 283
• 18.3.2 自定义鼠标样式……………………………… 285
• 18.5 本章总结 … ………………………………………… 286
• 第十九章 图片样式 289
• 19.1 图片大小 … ………………………………………… 290
• 19.2 图片边框border … ……………………………… 291
• 19.3 图片水平对齐 … …………………………………… 292
• 19.4 图片垂直对齐 … …………………………………… 294
• 19.5 文字环绕效果- 初识float … …………………… 298
• 19.5.1 float 属性… ………………………………… 298
• 19.5.2 定义图片与文字间距………………………… 301
• 19.6 本章总结 … ………………………………………… 302
• 第二十章 列表样式 305
• 20.1 列表项符号list-style-type … ………………… 306
• 12 目录
• 20.1.1 HTML 中定义列表项符号… ……………… 306
• 20.1.2 CSS 中定义列表项符号… ………………… 307
• 20.2 自定义列表项符号list-style-image … ……… 310
• 20.3 本章总结 …………………………………………… 311
• 第二十一章 表格样式 313
• 21.1 表格边框合并border-collapse ………………… 314
• 21.2 表格边框间距border-spacing… ……………… 317
• 21.3 表格标题位置caption-side…………………… 319
• 21.4 本章总结 … ………………………………………… 321
• 第二十二章 初识CSS 盒子模型 323
• 22.1 CSS 盒子模型 … ………………………………… 324
• 22.2 宽度width 和高度height … …………………… 328
• 22.3 边框border … …………………………………… 333
• 22.4 内边距padding …………………………………… 334
• 22.4.1 padding 局部样式… ……………………… 334
• 22.4.2 padding 简洁写法… ……………………… 335
• 22.5 外边距margin … ………………………………… 337
• 22.5.1 margin 局部样式… ………………………… 338
• 22.5.2 margin 简洁样式…………………………… 339
• 22.6 本章总结 …………………………………………… 341
• 第二十三章 浮动布局 343
• 23.1 HTML 文档流……………………………………… 344
• 23.1.1 正常文档流动？……………………………… 344
• 23.1.2 脱离正常文档流？…………………………… 345
• 目录 13
• 23.2 浮动float … ……………………………………… 346
• 23.3 清除浮动clear … ………………………………… 351
• 23.4 本章总结 …………………………………………… 354
• 第二十四章 定位布局 357
• 24.1 定位布局简介 … …………………………………… 358
• 24.2 固定定位fixed … ………………………………… 358
• 24.3 相对定位relative… ……………………………… 360
• 24.4 *定位absolute… …………………………… 363
• 24.5 CSS 静态定位static … ………………………… 366
• 第三部分 附录
• 附录一 HTML 标签的语义 369
• 附录二 HTML 发展历史 371
• 附录三 W3C 十六色 377
• 后话 379
• __