目录
单元1 HTML5基础 1
任务1 制作第 一个简单的网页 1
任务描述 1
前导知识 1
1.1 网页的相关概念 1
1.1.1 网站、网页与主页 1
1.1.2 静态网页与动态网页 1
1.1.3 Web技术简介 2
1.1.4 网站开发的流程 4
1.1.5 HTML5简介 4
1.2 网页的编辑与运行 5
1.2.1 前端开发工具 5
1.2.2 使用HBuilderX新建HTML页面 5
1.2.3 HbuilderX常用组合键 7
1.2.4 HbuilderX智能选中操作 7
1.3 HTML5文档的基本结构 9
1.4 HTML5标签的语法 9
1.4.1 单标签和双标签 9
1.4.2 标签的属性 10
1.4.3 标签之间的嵌套 10
1.4.4 标签不区分大小写 10
1.4.5 HTML5注释 10
任务实现 11
单元小结 13
思考练习 13
单元2 HTML5基本标签 14
任务1 制作图文网页 14
任务描述 14
前导知识 15
2.1 文本控制标签 15
2.1.1 标题标签 15
2.1.2 段落标签 15
2.1.3 换行标签 16
2.1.4 文本格式化标签 17
2.1.5 转义字符 18
2.2 图像标签 19
2.2.1 图像格式 19
2.2.2 创建图像 19
2.2.3 图像路径 19
任务实现 20
任务2 制作新闻列表 21
任务描述 21
前导知识 22
2.3 超链接标签 22
2.3.1 超链接标签的属性 22
2.3.2 锚点链接 22
2.4 列表标签 24
2.4.1 有序列表 24
2.4.2 无序列表 25
2.4.3 自定义列表 25
任务实现 26
任务3 制作注册表单 27
任务描述 27
前导知识 28
2.5 表格标签 28
2.5.1 基本结构 28
2.5.2 复杂结构 28
2.5.3 合并行 31
2.5.4 合并列 32
2.6 表单标签 32
2.6.1 <form>标签 33
2.6.2 输入标签 33
2.6.3 下拉列表标签 37
2.6.4 文本域标签 37
任务实现 38
单元小结 44
思考练习 44
单元3 元素分类与语义化标签 47
任务1 使用语义化标签搭建“公司简介”网页HTML结构 47
任务描述 47
前导知识 47
3.1 <div>标签和<span>标签 47
3.2 元素分类 49
3.3 HTML语义化 51
3.4 HTML5中常用语义化结构标签 51
3.4.1 <header>标签 52
3.4.2 <nav>标签 52
3.4.3 <main>标签 53
3.4.4 <section>标签 53
3.4.5 <article>标签 53
3.4.6 <aside>标签 53
3.4.7 <footer>标签 54
3.5 网页模块命名规范 54
任务实现 55
单元小结 58
思考练习 59
单元4 CSS3概述与基本语法 61
任务1 使用CSS设置文本颜色 61
任务描述 61
前导知识 61
4.1 CSS3概述 61
4.2 CSS3基本语法 61
4.3 如何插入样式表 62
4.3.1 行内样式 62
4.3.2 内嵌样式 63
4.3.3 链接样式 63
4.3.4 导入样式 64
任务实现 65
任务2 选择合适的选择器设置网页文字颜色 67
任务描述 67
前导知识 67
4.4 基本选择器 67
4.4.1 标签选择器 67
4.4.2 通配符选择器 68
4.4.3 类选择器 68
4.4.4 id选择器 69
4.5 复合选择器 69
4.5.1 后代选择器 69
4.5.2 一级子元素选择器 70
4.5.3 交集选择器 70
4.5.4 并集选择器 70
4.6 伪类选择器 70
4.6.1 UI元素状态伪类选择器 70
4.6.2 结构伪类选择器 71
4.7 伪元素选择器 72
4.8 样式的层叠与继承 73
4.8.1 CSS层叠性 73
4.8.2 CSS继承性 74
4.8.3 CSS优先级 74
任务实现 76
单元小结 78
思考练习 78
单元5 CSS3基本样式设计 80
任务1 设置公司简介页面样式 80
任务描述 80
前导知识 80
5.1 字体样式 80
5.1.1 字体样式font-style 80
5.1.2 字体变体font-variant 81
5.1.3 字体粗细font-weight 81
5.1.4 字体大小font-size 81
5.1.5 字体系列font-family 82
5.1.6 font属性 82
5.2 文本样式 83
5.2.1 文本颜色color 83
5.2.2 文本的对齐方式text-align 83
5.2.3 文本修饰text-decoration 83
5.2.4 文本转换text-transform 84
5.2.5 文本缩进text-indent 84
5.2.6 行高line-height 84
5.3 边框样式 85
5.3.1 边框样式border-style 86
5.3.2 边框颜色border-color 87
5.3.3 边框宽度border-width 87
5.3.4 边框各边 88
5.3.5 border属性 88
5.3.6 边框圆角属性border-radius 88
5.4 图片样式 89
5.4.1 宽度width 89
5.4.2 高度height 89
5.4.3 浮动float 89
任务实现 91
任务2 设置新闻中心版块样式 93
任务描述 93
前导知识 93
5.5 背景样式 93
5.5.1 背景颜色background-color 93
5.5.2 背景图像background-image 94
5.5.3 背景重复background-repeat 94
5.5.4 背景位置background-position 95
5.5.5 背景附着background-attachment 96
5.5.6 background属性 97
5.5.7 渐变背景 97
5.6 超链接样式 99
5.6.1 链接样式 99
5.6.2 链接状态样式 99
5.7 列表样式 100
5.7.1 列表项标记类型list-style-type 100
5.7.2 列表项标记图像list-style-image 100
5.7.3 列表项标记位置list-style-position 101
5.7.4 list-style属性 101
5.7.5 列表文字样式 102
5.7.6 列表实现横向导航栏 103
任务实现 104
任务3 设置会员注册页面样式 106
任务描述 106
前导知识 106
5.8 表格样式 106
5.8.1 表格边框 106
5.8.2 折叠边框 107
5.8.3 表格的宽度和高度 107
5.8.4 表格文字对齐 108
5.8.5 表格颜色 108
5.9 表单样式 108
任务实现 110
单元小结 114
思考练习 114
单元6 CSS3定位与布局 117
任务1 制作产品展示模块 117
任务描述 117
前导知识 117
6.1 盒子模型 117
6.1.1 盒子属性 117
6.1.2 盒子尺寸计算 119
6.2 外边距合并 120
6.2.1 并列元素的外边距合并 120
6.2.2 包含元素的外边距合并 121
任务实现 123
任务2 制作公司网站首页 125
任务描述 125
前导知识 126
6.3 文档流简介 126
6.4 浮动 129
6.5 清除浮动 133
任务实现 136
任务3 公司网站首页实现固定侧边菜单 143
任务描述 143
前导知识 143
6.6 定位布局简介 143
6.7 相对定位 144
6.8 绝对定位 145
6.9 固定定位 152
任务实现 153
单元小结 155
思考练习 155
单元7 项目实践——制作传统文化网站首页 158
任务1 建立站点并完成页面整体布局 159
任务描述 159
任务实现 159
任务2 制作网页头部和导航 161
任务描述 161
任务实现 161
任务3 制作banner和最新更新栏目 165
任务描述 165
任务实现 166
任务4 制作国学百家栏目 170
任务描述 170
任务实现 170
任务5 制作传统节日栏目 176
任务描述 176
任务实现 177
任务6 制作底部版权区域 180
任务描述 180
任务实现 180
任务7 对首页CSS代码进行优化 181
任务描述 181
前导知识 182
7.1 CSS代码优化 182
7.1.1 CSS代码优化的意义 182
7.1.2 CSS代码优化的基本方法 182
任务实现 184
单元小结 186
思考练习 186
单元8 项目实践——制作传统文化网站子页 189
任务1 创建传统文化网站子页模板 190
任务描述 190
任务实现 190
任务2 制作文章列表页 195
任务描述 195
任务实现 196
任务3 制作文章详情页 199
任务描述 199
任务实现 199
任务4 对网站CSS代码进行优化 202
任务描述 202
任务实现 203
单元小结 204
思考练习 204
附录 207
一、HTML5常用标签 207
二、CSS3常用选择器 208
三、CSS3常用样式属性 209