本书主要面向高等职业院校计算机类专业，以及有前端开发课程的相关专业，可以作为“1+X”Web前端开发考证中HTML5内容的参考用书。本书内容以真实项目“青年帮”响应式网站为主线，以“码工助手”“17素材”等真实网站为拓展，主要以案例的形式讲解HTML5常用的语义化结构标签，新增其他标签，音频和视频标签，新增的表单功能及其验证属性。CSS3网页中的细节设计包括圆角、边框阴影、渐变、多重背景等，还包括自定义字体和图标文字、CSS3过渡效果、CSS3 2D效果、CSS3 3D效果、CSS3动画效果，以及响应式网站的搭建。
本书由教学工作经验丰富的资深教师编写而成，每个案例均提供微课、素材和源代码，读者进入课程平台可观看视频和查看源代码。对中山职业技术学院学生的调查结果显示，学生通过观看视频可以有效自主完成课程中布置的学习任务。

单元一 HTML5构建网站结构
教学导航
【基本项目】使用HTML5构建个人博客网站首页
【应用项目】仿Ghost开源博客平台的内容页面
单元二 HTML5表单和验证
教学导航
【基本项目】使用HTML5新增表单功能制作注册表单
【应用项目】为注册表单添加用户体验的验证信息
单元三 CSS3网页细节设计
教学导航
任务一 圆角
【基本项目1】实心圆角效果
【基本项目2】空心圆角效果
【应用项目1】网页中的圆角属性应用
【应用项目2】绘制形状
【应用项目3】经典对话框
【应用项目4】圆角导航条应用
任务二 边框阴影
【基本项目】边框阴影效果
【应用项目】仿青年帮案例展示效果
任务三 渐变
【基本项目1】线性渐变————彩虹背景文字效果
【基本项目2】径向渐变————背景图案效果
任务四 背景图片的大小
【基本项目】响应式图片效果
任务五 背景图片的定位
【基本项目1】background-origin
【基本项目2】background-clip
任务六 多重背景
【基本项目】多重背景
【应用项目】扑克牌效果
任务七 文字阴影
【基本项目】文字阴影效果
单元四 自定义字体和图标文字
教学导航
【应用项目】网页中的图标文字
单元五 CSS3过渡效果
教学导航
【基本项目】变色并扩展小方块效果
【应用项目1】仿青年帮导航条设计——圆角过渡效果
【应用项目2】仿青年帮导航条设计——下拉框效果
【应用项目3】仿17素材网作品展示效果
单元六 CSS3 2D效果
教学导航
【基本项目】CSS3 2D效果案例
【应用项目1】CSS3 2D综合效果——制作个性照片墙
【应用项目2】仿码工助手案例展示效果
【应用项目3】仿青年帮导航条设计——常用推荐效果
单元七 CSS3 3D效果
教学导航
【基本项目】立体缩放效果
【应用项目1】旋转立方体效果
【应用项目2】立体导航条效果
单元八 CSS3动画效果
教学导航
【基本项目】小球运动效果
【应用项目1】旋转转盘效果
【应用项目2】跳动的心效果
【应用项目3】钟摆效果
【应用项目4】旋转导航条效果
【应用项目5】仿青年帮网站——光晕效果
【应用项目6】仿青年帮设计导航——灵感创意推荐
【应用项目7】仿青年帮网站——波浪效果
单元九 响应式网站
教学导航
【基本项目】使用媒体查询制作一个简单的响应式网站
【应用项目1】响应式导航条设计
【应用项目2】响应式网站框架设计
【应用项目3】sugarcoat动漫响应式网站设计