本书以《Web前端开发职业技能等级标准》为指导进行编写，满足了高等职业教育软件技术专业网页设计与制作、Web前端开发等课程教学需要。全书分为制作HTML5页面、制作表单页面、制作列表页面、制作详情页面、制作网站首页、知识扩展（在微信小程序中应用HTML5）6个单元。本书结合真实的企业案例，内容涵盖了HTML5和CSS3常用标签及样式的应用，各单元以具体的网页任务为驱动，按学习情境描述、学习目标、任务书、获取信息、工作计划、进行决策、知识准备、相关案例、工作实施、评价反馈、拓展思考的顺序组织内容，引导读者逐步进行学习。本书主要面向软件技术专业Web前端开发方向的学生，同时也可作为软件技术专业其他方向或计算机相关专业的教材，也可作为IT行业软件开发从业人员能力提升的自学参考用书。

本教材系重庆工商职业学院的首批国家级职业教育教师教学创新团队联合四川华迪信息技术有限公司、四川川大智胜股份有限公司、成都思晗科技股份有限公司编写的软件技术专业Web前端开发方向基于工作过程系统化的教材之一。 依托数字工场和省级“双师型”教师培养培训基地，由创新团队成员和企业工程师组成教材编写团队，目的是打造高素质“双师型”教师队伍，深化职业院校教师、教材、教法“三教”改革，探索产教融合、校企“双元”有效育人模式。教材编写的初衷是让软件技术专业Web前端开发方向学生掌握Web前端开发核心技术，提高他们的Web前端开发技能，为进入Web前端开发工作或继续深造奠定基础；同时让软件技术专业其他方向学生掌握一定的Web前端开发技术，支撑软件技术专业发展，拓展软件技术专业学生的就业范围。 教材体系与特色 本教材是重庆工商职业学院联合企业共同开发的面向高等职业教育的“软件技术专业Web前端开发方向教材体系”中的一本，是基于工作过程开发出来的软件技术专业Web前端开发方向专业核心课程。本教材注重培养学生的职业能力和创新精神，培养学生利用HTML5和CSS3技术进行网站设计与开发的实践能力。其具有如下特色： ●?组织结构合理，内容由浅入深。为了更好地帮助读者学习HTML5+CSS3 Web前端开发技术，本教材设计了大量案例来介绍HTML5和CSS3技术及其基本使用方法。 ●?针对性强。本教材的教学内容和结构着眼于Web前端开发的能力培养，适应时代的要求，符合应用型院校人才培养的需要。 ●?贴合实际。本教材案例取自企业一线，主要教学内容符合高等职业院校软件技术专业教学标准。对接岗位要求，具有较强的实践价值。 ●?可操作性强。本教材针对每个学习情境项目，提供详细的解决方案和操作步骤，将知识点融入项目开发过程中。教材中任一个项目都可经过反复演练，读者可根据步骤独立实现项目。 ●?教学资源丰富。本教材提供课件、软件操作录屏、微课等教辅资料，使教和学更加容易。 受众定位 本教材适用于应用型本科、高职高专软件技术专业Web前端开发方向，以及软件技术专业其他方向等相关专业，也可作为Web前端开发人员技能提升和阅读的参考用书。 教材基本概况 本教材围绕HTML5、CSS3相关技术进行介绍，分为导言和6个单元。 导言：介绍了《HTML5+CSS3 Web前端开发技术》课程性质与背景、工作任务、学习目标、课程核心内容、重点技术、学习方法等。单元1：介绍了HTML5 Web项目构建。单元2：介绍了表单型网页开发。单元3：介绍了列表型网页开发。单元4：介绍了详情页与响应式网页开发。单元5：介绍了聚合型首页开发。单元6：介绍了微信小程序开发。全书以实用为基础，主要从一个真实项目——郫都校企慧招聘网站中抽取出小任务作为学习情境，每单元以学习情境的完成为主线，介绍HTML5+CSS3 Web前端开发技术的各项知识，包括开发环境与调试，HTML结构及语法，区块元素、语义结构元素与超链接、图文、表单、列表、表格、多媒体等常见HTML元素，CSS基本语法、选择器、盒模型，背景、边框、阴影、字体等常见CSS属性，浮动、定位、弹性布局、响应式布局、多列布局等CSS技术，动画、过渡等CSS特效，最后从小任务整合到整个项目的完成，形成一个综合性案例。 本教材的编写参照了Web前端开发“1+X”职业技能等级证书标准，教材中的技能知识点和职业技能等级证书标准的对应关系如“附录1 1+X对照表”所示。 编写团队 本教材由徐晨（重庆工商职业学院软件技术专业骨干教师，国家“双高计划”高水平专业群、首批国家级职业教育教师教学创新团队核心成员，5年以上Web前端开发实践和教学经验，重庆市高等职业院校学生职业技能竞赛优秀指导教师）、张林（成都思晗科技股份有限公司）担任主编，其中，徐晨负责单元5的编写工作，张林负责单元6的编写工作。 本书副主编均具有丰富的Web前端开发教学实践经验、5年以上的软件开发企业工作经验，具体编写分工如下：导言由成都思晗科技股份有限公司朱珠编写，单元1由重庆工商职业学院蔡茜编写，单元2由重庆工商职业学院熊孟娜编写，单元3、4由重庆工商职业学院韩锐编写。 本教材在编写过程中得到重庆工商职业学院、四川华迪信息技术有限公司及成都思晗科技股份有限公司相关领导和同事的大力支持和帮助，在此表示感谢。由于编者水平有限，教材中难免存在不妥之处，敬请广大读者批评指正。 编 者 2021年11月

导言 1 课程性质描述 1 典型工作任务描述 1 课程学习目标 1 学习组织形式与方法 2 学习情境设计 3 学业评价 4 单元1 制作HTML5页面 5 学习情境1 制作HTML5欢迎页面 5 学习情境描述 5 学习目标 6 任务书 6 获取信息 6 工作计划 7 进行决策 8 知识准备 8 1.1.1 HBuilder工具下载、安装 9 1.1.2 HTML5 9 1.1.3 HTML5基本结构 9 1.1.4 HTML5标签 10 相关案例 10 工作实施 14 评价反馈 14 拓展思考 16 单元2 制作表单页面 17 学习情境2 制作招聘网站账号登录页面 18 学习情境描述 18 学习目标 19 任务书 19 获取信息 19 工作计划 19 进行决策 20 知识准备 21 2.1.1 区块元素 23 2.1.2 语义结构元素 23 2.1.3 文本标签 23 2.1.4 超链接元素＜a＞ 25 2.1.5 图像元素＜img＞ 25 2.1.6 表单元素 25 2.1.7 CSS文件导入 27 2.1.8 CSS基本选择器 27 2.1.9 CSS组合选择器 29 2.1.10 CSS伪类选择器 29 2.1.11 CSS盒模型 30 2.1.12 CSS文本对齐 31 2.1.13 CSS背景样式background 31 2.1.14 CSS圆角边框border-radius 33 2.1.15 CSS盒阴影box-shadow 33 2.1.16 CSS布局display 33 2.1.17 CSS定位position 34 相关案例 35 工作实施 41 评价反馈 42 拓展思考 43 2.2 学习情境3 制作招聘网站求职申请页面 43 学习情境描述 43 学习目标 44 任务书 44 获取信息 44 工作计划 44 进行决策 45 知识准备 46 2.2.1 HTML5新增类型输入元素＜input＞ 46 2.2.2 输入元素＜input＞的特殊状态属性 47 2.2.3 表格元素＜table＞ 48 2.2.4 CSS属性选择器 49 2.2.5 CSS伪元素选择器 49 2.2.6 CSS不透明度opacity 50 2.2.7 CSS溢出overflow 50 2.2.8 CSS浮动float 50 2.2.9 CSS浮动float实现左右布局 52 相关案例 53 工作实施 64 评价反馈 64 拓展思考 65 2.3 学习情境4 制作招聘网站用户注册页面 66 学习情境描述 66 学习目标 66 任务书 67 获取信息 67 工作计划 67 进行决策 68 知识准备 68 2.3.1 标签元素＜label＞ 69 2.3.2 CSS行高属性line-height 69 2.3.3 CSS文本阴影属性text-shadow 69 2.3.4 CSS边距margin实现居中布局 70 相关案例 71 工作实施 77 评价反馈 77 拓展思考 79 单元3 制作列表页面 80 学习情境5 制作招聘网站职位列表页面 80 学习情境描述 80 学习目标 82 任务书 82 获取信息 82 工作计划 82 进行决策 84 知识准备 84 3.1.1 无序列表＜ul＞ 84 3.1.2 列表项＜li＞ 85 3.1.3 定义列表＜dl＞ 85 3.1.4 ＜datalist＞标签 85 3.1.5 @font-face规则 86 3.1.6 white-space属性 87 3.1.7 overflow属性 87 3.1.8 text-overflow属性 88 3.1.9 cursor属性 88 3.1.10 position属性 88 相关案例 89 工作实施 107 评价反馈 108 拓展思考 109 单元4 制作详情页面 110 学习情境6 制作招聘网站职位详情页面 110 学习情境描述 110 学习目标 111 任务书 112 获取信息 112 工作计划 112 进行决策 113 知识准备 113 4.1.1 弹性布局Flex 114 4.1.2 视口viewport 116 4.1.3 媒体查询@media 117 相关案例 118 工作实施 128 评价反馈 129 拓展思考 130 单元5 制作网站首页 131 5.1 学习情境7 制作招聘网站首页 131 学习情境描述 131 学习目标 133 任务书 133 获取信息 133 工作计划 133 进行决策 134 知识准备 135 5.1.1 视频元素＜video＞ 135 5.1.2 音频元素＜audio＞ 136 5.1.3 关键帧动画规则@keyframes 136 5.1.4 CSS动画属性animation 137 相关案例 138 工作实施 171 评价反馈 172 拓展思考 173 5.2 学习情境8 制作企业网站首页 173 学习情境描述 173 学习目标 175 任 务 书 175 获取信息 175 工作计划 175 进行决策 176 知识准备 177 5.2.1 CSS变换属性transform 178 5.2.2 CSS过渡属性transition 179 5.2.3 CSS多列属性Column 180 相关案例 180 工作实施 219 评价反馈 220 拓展思考 221 单元6 知识扩展——在微信小 程序中应用HTML5 222 6.1 学习情境9 开发微型播放器 微信小程序 222 学习情境描述 222 学习目标 223 任务书 223 获取信息 224 工作计划 224 进行决策 225 知识准备 225 6.1.1 video组件的使用方式 225 6.1.2 按钮绑定事件 226 6.1.3 小程序的调试方式 228 相关案例 229 工作实施 234 评价反馈 235 拓展思考 236 6.2 学习情境10 开发网上店铺微信小程序 236 学习情境描述 236 学习目标 237 任务书 237 获取信息 238 工作计划 238 进行决策 239 知识准备 239 6.2.1 view组件 239 6.2.2 rich-text组件 240 6.2.3 scroll-view组件 241 相关案例 242 工作实施 250 评价反馈 250 拓展思考 251 附录1 1+X对照表 252 附录2 HTML5常用标签字典 254 参考文献 256