内容提要 本教材选用*新版主流开发工具HBuilderX和*新Web技术标准HTML5、CSS3设计与制作网页,**讲解*基础的、常见的HTML5标签和CSS3样式应用。 全书共8个单元,采用任务驱动模式编写,将一个PC端的小型企业门户网站和一个传统文化网站的制作过程分解为若干个循序渐进的学习任务,让学生在完成任务过程中学到相关知识点。教材介绍知识点的同时,将职业规范、文化素养等思政元素有机融入教材内容中,通过思政小贴士的形式给出思政角度,帮助教师进行课程思政教育,从而让学生在学习过程中提升文化素养、道德修养等。 教材内容组织合理、通俗易懂,面向Web前端开发、网页设计等岗位,可作为高职院校软件技术、网络技术、通信技术、计算机应用技术等相关专业的教材,也可以作为零基础的Web应用程序开发爱好者的自学参考书籍。

目录 单元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 标签 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 标签和标签 47 3.2 元素分类 49 3.3 HTML语义化 51 3.4 HTML5中常用语义化结构标签 51 3.4.1标签 52 3.4.2标签 52 3.4.3标签 53 3.4.4 标签 53 3.4.5 标签 53 3.4.6 标签 53 3.4.7标签 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