本书以HTML5与CSS3知识点为主线，响应式布局项目为任务载体，采用迭代递增的网页设计方法，根据项目需求来逐步完成任务，实现学习相关知识与动手实操并重目的。全书按照网页设计的步骤，围绕HTML5与CSS3重要特性进行编写，通过详细讲解各个任务的实施来对知识点进行总结，使读者深入掌握网页设计制作技术。为适应应用型人才培养的需求，本书既强调理论知识的夯实、基本技能的训练，还注重拓展能力的培养，最终使学习者具备解决问题、分析问题的能力。内容编排以项目为载体，以任务实施为学习路径，结构清晰、内容翔实、难度渐进，达到学以致用的目标。本书编者由具有多年教学经验和实际项目开发经验的教师组成，书中大量教学实例，既有较强的理论性，又具有鲜明的实用性。本书即可作为高职院校和应用型本科院校网页设计课程的教材，也可作为信息技术培训机构的培训用书，还可以作为网页设计与制作人员的参考用书。

随着信息技术向纵深方向发展，作为依托互联网发展起来的网站开发与网页制作面临着挑战。一方面，用户更加注重站点信息丰富，功能齐备，页面精美、操作流畅；另一方面，要满足用户不受系统平台和软件插件的限制，可以通过移动设备访问网站，Web新技术HTML5和CSS3则能够满足这些需求，其也迅速成为网页设计的热点。 本书在《HTML5+CSS3项目开发实战》第一版的基础上，参照相关的国家职业技能标准和行业职业技能鉴定规范，在满足专业学习要求，提升学生的专业素养和文化底蕴的基础上，以“知识传授和价值引领相结合”为目标，将“德技兼修”作为出发点和落脚点，进行内容的修订和升级。 本书针对应用型人才培养规格的需要，突出职业素质教育和技术应用能力，运用创新思维模式理实一体系统化教学方法。本书具有如下特色： 1．纵向结构紧密衔接职业教育国家标准和专业教学标准，以HTML5与CSS3技术的技能训练为主线，突出知识层面、能力层面和素质层面三位一体综合能力培养，内容完整、由浅入深、层次清晰、阐述准确。 2．横向结构突出“做中学、做中教、做中练”，内容设计采用任务驱动、项目导入、教学做一体化模式编排教材，通过任务驱动将项目载体融入教学，高强度培养学生工程实践能力，要求在教学过程中达到项目实践实训的目的，实现人才培养与行业人才需求接轨。 3．各项目在体系结构安排上，运用思维导图形式，提供一个以技能发展为主轴的结构化学习方案，直观体现学习路径，提升了学习效率。任务选取当今互联网热点网站设计作为素材，将8个仿真项目融入教材，提高学习者的学习热情；同时，添加了企业站点开发的管理规范元素，突出项目管理理念。 4．本书编写团队汇集了有丰富教学经验一线教师，有长期从事学科规划设计的专业带头人及资深企业工程师、项目经理等。 5．坚持立德树人坚守教育初心，书中融入了课程思政教学元素，有助于帮助学生形成正确的价值观，提升文化底蕴、培养深厚的爱国情怀和民族自豪感，以达到润物细无声的效果。 6．丰富的新形态教学资源，本书除配套提供有电子教学课件、案例库、习题库，还提供了大量的关于网页设计、HTML5和CSS3技术数字资源库，读者可以通过扫描二维码获取相关资料，实现课程全方位的资源共享。 本书共8个项目，项目1到项目4由王庆桦老师编写；项目5到项目8和附录由王新强老师编写；全书由王庆桦老师统稿。 虽然我们力求准确无误、不留缺憾，但由于时间仓促，书中的内容仍难免包含不足之处，恳请专家、老师和读者批评指正。 编 者

项目1 认识HTML5 001 项目概述 001 项目导航 001 任务1.1 HTML5+CSS3网页设计概述 001 任务目标 001 任务准备 002 1.1.1 认识网页 002 1.1.2 HTML5简介 003 1.1.3 CSS层叠样式表 005 1.1.4 JavaScript简介 005 1.1.5 浏览器及浏览器内核 006 任务1.2 网页设计工具 008 任务目标 008 任务准备 008 1.2.1 前端开发的工具 008 1.2.2 WebStrom使用 009 任务实施 011 任务1.3 自适应网页设计 017 任务目标 017 任务准备 017 1.3.1 响应式布局设计 017 1.3.2 响应式网页部署 018 任务实施 019 项目总结 021 项目2 使用HTML5基本标签 022 项目概述 022 项目导航 022 任务2.1 “古诗词鉴赏”导航栏 页面制作 023 任务目标 023 任务准备 023 2.1.1 HTML文件的基本结构 023 2.1.2 HTML5基本结构 023 2.1.3 HTML5新增标签 024 2.1.4 HTML5废弃标签 024 2.1.5 HTML5废弃属性 025 2.1.6 基础标签 025 2.1.7 文本格式化标签 027 任务实施 032 任务2.2 “诗人与古诗大全”页面制作 034 任务目标 034 任务准备 034 2.2.1 有序列表 034 2.2.2 无序列表 035 2.2.3 定义列表 035 任务实施 036 任务2.3 “诗词详情”页面制作 039 任务目标 039 任务准备 039 2.3.1 图像标签 039 2.3.2 范围标签span 042 2.3.3 超链接标签a 042 2.3.4 div标签 044 任务实施 044 项目总结 048 项目3 表格与表单应用 049 项目概述 049 项目导航 049 任务3.1 制作校园学生论坛网站 050 任务目标 050 任务准备 050 3.1.1 表格的基本语法 050 3.1.2 跨行跨列 061 任务实施 063 任务3.2 制作论坛登录页面 069 任务目标 069 任务准备 070 3.2.1 表单的基本语法 070 3.2.2 基本元素介绍 071 任务实施 076 任务3.3 制作论坛注册页面 079 任务目标 079 任务准备 079 3.3.1 ＜datalist＞元素 079 3.3.2 HTML5新增input类型与属性 080 任务实施 085 项目总结 089 项目4 HTML5音视频标签 090 项目概述 090 项目导航 090 任务4.1 制作论坛音乐分区 090 任务目标 090 任务准备 091 4.1.1 ＜audio＞标签 091 4.1.2 ＜source＞标签 091 任务实施 092 任务4.2 制作论坛视频欣赏分区 095 任务目标 095 任务准备 095 4.2.1 ＜video＞标签 095 4.2.2 ＜track＞标签 097 任务实施 098 项目总结 102 项目5 CSS3基础应用 103 项目概述 103 项目导航 103 任务5.1 CSS基本知识 103 任务目标 103 任务准备 104 5.1.1 CSS样式表创建 104 5.1.2 基本语法 106 任务实施 107 任务5.2 选择器 109 任务目标 109 任务准备 109 5.2.1 常用选择器 109 5.2.2 CSS3新增选择器 114 任务实施 120 项目总结 129 项目6 CSS3美化网页 130 项目概述 130 项目导航 130 任务6.1 CSS核心属性 131 任务目标 131 任务准备 131 6.1.1 字体属性 131 6.1.2 文本属性 135 6.1.3 列表属性 139 6.1.4 文本溢出 141 6.1.5 背景图像 145 6.1.6 类型转换 149 6.1.7 指针属性 151 任务实施 152 任务6.2 浮动与定位 159 任务目标 159 任务准备 159 6.2.1 浮动属性 159 6.2.2 定位属性 162 任务实施 165 任务6.3 边框属性 168 任务目标 168 任务准备 168 6.3.1 盒子模型 168 6.3.2 边框属性 172 任务实施 179 任务6.4 自适应属性 186 任务目标 186 任务准备 186 6.4.1 宽高自适应 186 6.4.2 屏幕自适应 188 任务实施 189 项目总结 195 项目7 CSS3过渡变形与动画 196 项目概述 196 项目导航 196 任务7.1 CSS3过渡 197 任务目标 197 任务准备 197 7.1.1 transition-property属性 197 7.1.2 transition-duration属性 197 7.1.3 transition-timing-function 属性 198 7.1.4 transition-delay属性 199 7.1.5 transition属性 200 任务实施 202 任务7.2 CSS3变形 206 任务目标 206 任务准备 207 7.2.1 transform属性 207 7.2.2 transform-origin属性 212 7.2.3 3D变形其他属性 214 任务实施 215 任务7.3 动画 224 任务目标 224 任务准备 224 7.3.1 @keyframes 225 7.3.2 animation 225 任务实施 227 项目总结 231 项目8 绘图与数据存储 232 项目概述 232 项目导航 232 任务8.1 JavaScript概述 232 任务目标 232 任务准备 233 8.1.1 JavaScript引入 233 8.1.2 JavaScript基础知识 233 8.1.3 函数 234 8.1.4 Document对象 235 8.1.5 DOM事件机制 238 任务实施 239 任务8.2 Canvas 246 任务目标 246 任务准备 246 8.2.1 Canvas概述 246 8.2.2 Canvas绘制基本图形 247 8.2.3 绘制渐变图形 250 8.2.4 绘制变形图形 252 8.2.5 SVG 253 任务实施 254 任务8.3 数据存储 258 任务目标 258 任务准备 259 8.3.1 Cookie 259 8.3.2 Web Storage 259 任务实施 260 项目总结 262 参考文献 263