作者简介
刘伟，妙味课堂创始人。自2010年创办妙味课堂以来，只专注于前端开发这一领域，原创了上千个精彩实用的前端案例，搭建了系统深入的前端开发知识体系，上万名学员通过实体培训受益并进入各大知名IT公司。
目录
章 探本溯源，前端开发基础漫谈
1.1 前端开发是做什么的\t2
1.2 前端开发技术\t5
1.2.1 HTML超文本标记语言：搭建网页“结构”\t5
1.2.2 CSS层叠样式表：给网页添加“样式”\t6
1.2.3 JavaScript：让网页响应某种“行为”\t6
1.3 前端开发所需软件\t7
1.3.1 Photoshop\t8
1.3.2 编辑器\t11
1.3.3 浏览器\t12
1.4 个HTML页面\t12
1.4.1 基本标记标签\t13
1.4.2 标签嵌套关系\t19
1.5 标签简介\t19
练习题\t20
第2章 CSS基础语法、选择器和样式冲突的解决方案
2.1 CSS概述\t22
2.2 定义CSS的基本语法\t23
2.3 基本选择器\t25
2.3.1 元素选择器\t25
2.3.2 ID选择器\t26
2.3.3 类选择器\t29
2.3.4 伪类选择器\t33
2.3.5 伪元素选择器\t35
2.3.6 通用选择器\t38
2.4 复合选择器\t39
2.4.1 交集选择器\t39
2.4.2 并集选择器\t40
2.4.3 后代选择器\t41
2.4.4 子元素选择器\t43
2.4.5 相邻兄弟选择器\t44
2.4.6 属性选择器\t45
2.5 CSS选择器的使用方法\t47
2.6 CSS应用到HTML页面的常用方式\t47
2.6.1 行内式\t47
2.6.2 内嵌式\t48
2.6.3 链接式\t49
2.7 CSS的冲突与解决\t50
练习题\t53
第3章 网页排版利器：CSS 字体、文本、背景属性设置
3.1 字体属性\t55
3.1.1 字体粗细属性：font-weight\t55
3.1.2 字体风格属性：font-style\t56
3.1.3 字体大小属性：font-size\t58
3.1.4 字体族属性：font-family\t59
3.1.5 文本行高属性：line-height\t62
3.1.6 字体属性：font\t65
3.2 文本属性\t66
3.2.1 颜色属性：color\t66
3.2.2 水平对齐属性：text-align\t69
3.2.3 首行缩进属性：text-indent\t70
3.2.4 文本修饰属性：text-decoration\t71
3.2.5 字符间距属性：letter-spacing\t73
3.2.6 字间距属性：word-spacing\t74
3.3 背景属性\t75
3.3.1 背景颜色属性：background-color\t75
3.3.2 背景图片属性：background-image\t76
3.3.3 背景图片重复属性：background-repeat\t77
3.3.4 背景图片位置属性：background- position\t79
3.3.5 背景图片滚动属性：background-attachment\t81
3.3.6 背景属性：background\t83
练习题\t84
第4章 剖析“盒模型”特性，详解布局方寸间的逻辑关系
4.1 盒子模型的组成\t86
4.2 盒子边框（border）设置\t88
4.2.1 设置边框风格\t88
4.2.2 设置边框宽度\t90
4.2.3 设置边框颜色\t93
4.2.4 统一设置边框的宽度、颜色和风格\t95
4.2.5 边框的形状\t98
4.3 盒子内边距（padding）设置\t100
4.3.1 内边距的设置\t100
4.3.2 padding内边距的特点\t103
4.4 盒子外边距（margin）设置\t105
4.4.1 外边距的设置\t105
4.4.2 盒子外边距合并\t107
4.4.3 相邻盒子之间的水平间距\t113
练习题\t116
第5章 世界是多样化的，标签是语义化的
5.1 常用文本标签\t118
5.1.1 段落与换行标签\t118
5.1.2 标题字标签\t119
5.1.3 标签\t121
5.1.4 标签\t122
5.1.5 标签\t122
5.1.6 < time>标签\t123
5.1.7 标签\t124
5.1.8 空格和特殊字符的输入\t124
5.2 文档结构标签\t126
5.2.1标签\t127
5.2.2 < article>标签\t128
5.2.3标签\t129
5.2.4 < main>标签\t130
5.2.5
1.1 前端开发是做什么的\t2
1.2 前端开发技术\t5
1.2.1 HTML超文本标记语言：搭建网页“结构”\t5
1.2.2 CSS层叠样式表：给网页添加“样式”\t6
1.2.3 JavaScript：让网页响应某种“行为”\t6
1.3 前端开发所需软件\t7
1.3.1 Photoshop\t8
1.3.2 编辑器\t11
1.3.3 浏览器\t12
1.4 个HTML页面\t12
1.4.1 基本标记标签\t13
1.4.2 标签嵌套关系\t19
1.5 标签简介\t19
练习题\t20
第2章 CSS基础语法、选择器和样式冲突的解决方案
2.1 CSS概述\t22
2.2 定义CSS的基本语法\t23
2.3 基本选择器\t25
2.3.1 元素选择器\t25
2.3.2 ID选择器\t26
2.3.3 类选择器\t29
2.3.4 伪类选择器\t33
2.3.5 伪元素选择器\t35
2.3.6 通用选择器\t38
2.4 复合选择器\t39
2.4.1 交集选择器\t39
2.4.2 并集选择器\t40
2.4.3 后代选择器\t41
2.4.4 子元素选择器\t43
2.4.5 相邻兄弟选择器\t44
2.4.6 属性选择器\t45
2.5 CSS选择器的使用方法\t47
2.6 CSS应用到HTML页面的常用方式\t47
2.6.1 行内式\t47
2.6.2 内嵌式\t48
2.6.3 链接式\t49
2.7 CSS的冲突与解决\t50
练习题\t53
第3章 网页排版利器：CSS 字体、文本、背景属性设置
3.1 字体属性\t55
3.1.1 字体粗细属性：font-weight\t55
3.1.2 字体风格属性：font-style\t56
3.1.3 字体大小属性：font-size\t58
3.1.4 字体族属性：font-family\t59
3.1.5 文本行高属性：line-height\t62
3.1.6 字体属性：font\t65
3.2 文本属性\t66
3.2.1 颜色属性：color\t66
3.2.2 水平对齐属性：text-align\t69
3.2.3 首行缩进属性：text-indent\t70
3.2.4 文本修饰属性：text-decoration\t71
3.2.5 字符间距属性：letter-spacing\t73
3.2.6 字间距属性：word-spacing\t74
3.3 背景属性\t75
3.3.1 背景颜色属性：background-color\t75
3.3.2 背景图片属性：background-image\t76
3.3.3 背景图片重复属性：background-repeat\t77
3.3.4 背景图片位置属性：background- position\t79
3.3.5 背景图片滚动属性：background-attachment\t81
3.3.6 背景属性：background\t83
练习题\t84
第4章 剖析“盒模型”特性，详解布局方寸间的逻辑关系
4.1 盒子模型的组成\t86
4.2 盒子边框（border）设置\t88
4.2.1 设置边框风格\t88
4.2.2 设置边框宽度\t90
4.2.3 设置边框颜色\t93
4.2.4 统一设置边框的宽度、颜色和风格\t95
4.2.5 边框的形状\t98
4.3 盒子内边距（padding）设置\t100
4.3.1 内边距的设置\t100
4.3.2 padding内边距的特点\t103
4.4 盒子外边距（margin）设置\t105
4.4.1 外边距的设置\t105
4.4.2 盒子外边距合并\t107
4.4.3 相邻盒子之间的水平间距\t113
练习题\t116
第5章 世界是多样化的，标签是语义化的
5.1 常用文本标签\t118
5.1.1 段落与换行标签\t118
5.1.2 标题字标签\t119
5.1.3 标签\t121
5.1.4 标签\t122
5.1.5 标签\t122
5.1.6 < time>标签\t123
5.1.7 标签\t124
5.1.8 空格和特殊字符的输入\t124
5.2 文档结构标签\t126
5.2.1
5.2.2 < article>标签\t128
5.2.3
5.2.4 < main>标签\t130
5.2.5