《HTML5+CSS3网站设计基础》（第二版）是“十四五”职业教育国家规划教材、“十三五”职业教育国家规划教材，也是新世纪高等职业教育教材编审委员会组编的软件技术专业系列规划教材之一。 

　　党的二十大报告指出：我们要坚持教育优先发展、科技自立自强、人才引领驱动，加快建设教育强国、科技强国、人才强国，坚持为党育人、为国育才，全面提高人才自主培养质量，着力造就拔尖创新人才，聚天下英才而用之。编者注重加强学生的社会主义核心价值观教育，在教材中融入价值观引导，融通思政教育，培养学生树立正确的社会价值观，提升学生网页设计技术，提高学生解决问题的能力，培养德技并修人才。

　　为贯彻落实《国家职业教育改革实施方案》，积极推动学历证书+若干职业技能等级证书制度，教育部进一步完善计算机软件行业培养Web前端开发专业技术技能人才的需要，建立了“1+X”中针对Web前端开发职业技能等级证书，本教材的编写就是在教育部《Web前端开发职业技能等级标准》的指导下，对照课证融通，对应该证书HTML5、CSS3、JavaScript等技能点进行编写的。

　　网页技术层出不穷，日新月异，但不管是采用什么技术设计的网站，用户在客户端通过浏览器看到的网页都是静态网页，都是由HTML和CSS技术构成的。因此HTML5、CSS3是目前网页制作技术的基础和核心。本教材力图帮助读者在学习中快速进入实战状态，给专业教师一手参考资料，帮助读者提高页面设计技能。

　　本教材得到苏州吉耐特信息科技有限公司、创钛中科智能科技（苏州）有限公司大力支持，是一本校企合作教材。同时，该教材的修订还得到江苏省高校“青蓝工程”项目资助，也是该项目的研究成果。

　　本教材以典型项目设计为载体，依据项目开发流程组织教材内容，具有实战性、可操作性、新颖性、通俗性和项目过程化等特点，激发学生的学习兴趣和主动性。从实际案例入手，重点讲解HTML5、CSS3的典型技术，让读者在学习应用技术的同时掌握其精髓。各案例与实例按照由浅入深、由易到难的顺序编排，即使是初学者也可以轻松掌握，制作出精美实用的网页作品。

　　全书共分14个项目，项目1主要介绍了HTML5文档声明和语法规范、HTML5废弃的标签和属性、HTML5新标签。项目2主要介绍了网页的基本标签，重点介绍了HTML5行级标签和块级标签的使用。项目3主要介绍了表单的基本语法，HTML5新的表单元素、表单属性以及各种表单元素的使用。项目4主要介绍了表格的基本用法，其中包括跨行和跨列的表格、使用表格实现图文布局，同时还介绍了框架的使用。项目5主要介绍了HTML5中的音频和视频。项目6介绍了CSS基本语法，CSS的应用方式，选择器的分类，CSS继承性、层叠性、特殊性，CSS3选择器的使用。项目7介绍了用CSS设置文字、背景、列表等样式，用CSS设置超链接伪类的样式。项目8重点介绍了盒子模型，以及CSS3的2D、3D等样式。项目9介绍了浮动和定位机制。项目10介绍了典型页面局部布局，重点讲解div-ul-li实现横向导航菜单、div-dl-dt-dd实现图文混排，并详细介绍了典型布局。项目11、项目12、项目13介绍了网页制作的综合实战，分别详细讲解了个人博客、购物街网站、网上商城网站的布局，样式的书写，通过综合实战训练学生技能，进一步提高学生应用实践能力，体现了“做中学、学中产”的实训教学思想。为了体现静态页面知识体系的完整性，项目14介绍了JavaScript的基础知识。

　　本教材提供了大量实例，需要用到Edge、IE、Chrome等主流浏览器的测试和预览。因此，为了测试示例或代码，读者需要安装上述浏览器的最新版本，各种浏览器在CSS3的表现上可能会稍有差异。

　　本教材每个项目都配备了习题，给读者提供了更多的练习资源，并且提供了完整习题答案和习题代码，可以边学边练，起到巩固和提高的目的。

　　在编写本教材的过程中，编者参考、引用和改编了国内外出版物中的相关资料以及网络资源，在此表示深深的谢意！相关著作权人看到本教材后，请与出版社联系，出版社将按照相关法律的规定支付稿酬。

　　由于时间仓促，再加上编者水平有限，书中难免有错误和疏漏之处，敬请广大读者批评指正。

　　编  者

　　2023年1月

项目1  认识HTML5 / 1

  任务1.1  新的文档声明和语法规范 / 1

  任务1.2  HTML5废弃的标签和属性 / 2

    1.2.1  HTML5废弃的标签 / 2

    1.2.2  HTML5废弃的属性 / 3

  任务1.3  HTML5新标签 / 4

  项目小结 / 7

  习  题 / 7

项目2  使用HTML5的基本标签 / 8

  任务2.1  初识 HTML / 8

    2.1.1  HTML文件的基本结构 / 8

    2.1.2  编辑工具 / 10

  任务2.2  “李清照宋词赏析”页面制作 / 14

    2.2.1  标题标签<h1>～<h6> / 15

    2.2.2  段落标签<p> / 16

    2.2.3  水平线标签<hr/> / 17

  任务2.3  “商品信息”页面制作 / 19

    2.3.1  有序列表标签<ol> / 19

    2.3.2  无序列表标签<ul> / 22

    2.3.3  定义列表标签<dl> / 24

    2.3.4  表格标签<table> / 25

    2.3.5  表单标签<form> / 26

    2.3.6  分区标签<div> / 26

  任务2.4  “相宜本草促销信息”页面制作 / 28

    2.4.1  图像标签<img/> / 29

    2.4.2  范围标签<span> / 30

    2.4.3  换行标签<br/> / 31

    2.4.4  超链接标签<a> / 31

  任务2.5  注释和特殊符号 / 35

    2.5.1  HTML注释 / 35

    2.5.2  特殊符号 / 35

  任务2.6  W3C标准 / 36

    2.6.1  什么是W3C标准 / 37

    2.6.2  W3C提倡的Web页结构 / 37

    2.6.3  HTML5代码规范 / 39

  项目小结 / 40

  习  题 / 40

项目3  表单应用 / 42

  任务3.1  “会员注册”页面制作 / 42

    3.1.1  表单的基本语法 / 43

    3.1.2  表单基本元素的介绍 / 44

  任务3.2  HTML5 新的input 类型 / 50

  任务3.3  HTML5 新的表单元素 / 53

  项目小结 / 55

  习  题 / 55

项目4  表格应用和布局 / 57

  任务4.1  表格基础知识 / 57

    4.1.1  表格的基本结构 / 58

    4.1.2  表格的基本语法 / 58

  任务4.2  跨行和跨列实现“商品分类” / 60

    4.2.1  跨  列 / 60

    4.2.2  跨  行 / 61

    4.2.3  跨行和跨列 / 62

  任务4.3  表格布局化妆品页面 / 64

  任务4.4  表格布局注册页面 / 67

  任务4.5  “华人女歌手歌曲周排行榜”页面制作 / 74

  任务4.6  iframe框架 / 76

  项目小结 / 77

  习  题 / 78

项目5  HTML5中音频和视频的应用 / 80

  任务5.1  video视频元素 / 80

  任务5.2  audio 音频元素 / 82

  项目小结 / 83

  习  题 / 83

项目6  CSS3基础应用 / 84

  任务6.1  CSS基础知识 / 84

    6.1.1  为什么使用CSS / 84

    6.1.2  CSS的基本语法 / 85

  任务6.2  CSS的应用方式 / 87

  任务6.3  选择器的分类 / 89

    6.3.1  标签选择器 / 89

    6.3.2  类选择器 / 90

    6.3.3  ID选择器 / 92

  任务6.4  CSS继承性、层叠性、特殊性 / 95

    6.4.1  继承性 / 95

    6.4.2  层叠性 / 96

    6.4.3  特殊性 / 98

  任务6.5  CSS3新增选择器 / 99

    6.5.1  属性选择器 / 99

    6.5.2  结构（位置）伪类选择器 / 100

    6.5.3  伪元素选择器 / 103

  项目小结 / 104

  习  题 / 104

项目7  CSS3美化网页 / 106

  任务7.1  用CSS设置字体样式以及文本样式 / 106

    7.1.1  用CSS设置字体样式 / 106

    7.1.2  用CSS设置页面的文本样式 / 108

  任务7.2  用CSS设置网页背景图片 / 112

  任务7.3  CSS3新增背景样式 / 118

  任务7.4  CSS3新增渐变背景 / 121

    7.4.1  线性渐变 / 122

    7.4.2  径向渐变 / 123

    7.4.3  重复渐变 / 124

  任务7.5  用CSS设置列表样式 / 124

  任务7.6  用CSS设置超链接伪类样式 / 128

  任务7.7  导航菜单制作 / 131

  项目小结 / 132

  习  题 / 133

项目8  CSS盒子模型应用与CSS3动画 / 134

  任务8.1  盒子模型基础知识 / 134

  任务8.2  盒子模型属性 / 136

    8.2.1  边界（margin） / 136

    8.2.2  填充（padding） / 138

    8.2.3  边框（border） / 139

    8.2.4  CSS3新增圆角边框 / 146

  任务8.3  CSS3动画效果 / 148

    8.3.1  过  渡 / 148

    8.3.2  2D转换 / 152

    8.3.3  3D转换 / 158

    8.3.4  动  画 / 160

  任务8.4  网页版面分栏 / 167

  项目小结 / 172

  习  题 / 173

项目9  浮动与定位 / 174

  任务9.1  浮  动 / 174

    9.1.1  为什么需要浮动 / 174

    9.1.2  浮动的含义及其在布局中的应用 / 176

  任务9.2  定位机制 / 179

    9.2.1  CSS的position属性 / 180

    9.2.2  CSS静态定位 / 180

    9.2.3  CSS相对定位 / 181

    9.2.4  CSS绝对定位 / 184

    9.2.5  CSS固定定位 / 187

    9.2.6  CSS的z-index属性 / 187

  任务9.3  制作垂直导航菜单和实现顶部布局 / 188

    9.3.1  制作垂直导航菜单 / 188

    9.3.2  实现顶部布局 / 191

  项目小结 / 194

  习  题 / 194

项目10  典型页面局部布局 / 195

  任务10.1  div-ul-li实现横向导航菜单 / 195

  任务10.2  div-dl-dt-dd实现图文混排 / 201

  项目小结 / 210

  习  题 / 210

项目11  个人博客制作 / 211

  任务11.1  利用Dreamweaver搭建站点 / 211

  任务11.2  制作博客首页 / 213

  任务11.3  制作博客分支页 / 220

  项目小结 / 224

  习  题 / 224

项目12  购物街网站制作 / 225

  任务12.1  设置通用样式 / 225

  任务12.2  设计网页结构 / 228

  任务12.3  设计页面内容和样式 / 230

  项目小结 / 237

  习  题 / 237

项目13  芙蓉商城制作 / 238

  任务13.1  分块制作商城网站首页 / 238

    13.1.1  利用Dreamweaver搭建站点 / 238

    13.1.2  制作商城网站首页的总体布局 / 241

    13.1.3  实现顶部布局 / 247

    13.1.4  实现左部商品分类 / 250

    13.1.5  实现中部主题布局 / 253

    13.1.6  实现右部布局 / 255

    13.1.7  实现底部信息 / 258

  任务13.2  制作商城分支页——注册页面 / 258

  任务13.3  制作商城分支页——登录页面 / 263

  任务13.4  制作商城分支页——商品具体介绍页面 / 265

  任务13.5  建立页面之间的链接和相关测试 / 267

    13.5.1  建立页面间的链接 / 268

    13.5.2  网页的兼容性测试 / 268

  项目小结 / 269

  习  题 / 269

项目14  JavaScript脚本编程 / 270

  任务14.1  初识JavaScript / 270

  任务14.2  JavaScript数据类型和数据基本操作 / 271

    14.2.1  数据类型 / 271

    14.2.2  数据基本操作 / 273

  任务14.3  JavaScript流程控制 / 273

    14.3.1  条件语句 / 274

    14.3.2  循环语句 / 275

  任务14.4  JavaScript函数 / 278

  任务14.5  JavaScript对象 / 280

  任务14.6  JavaScript事件 / 281

  任务14.7  JavaScript完成图片轮番播放 / 283

  项目小结 / 285

  习  题 / 286

参考文献 / 287