本书是一本体系化的前端教程，教材中知识全面，且具有合理的组织体系。教材中所使用的案例贴近实战，由浅入深，全面详尽。本书从HTML和CSS的基础知识入手，重点讲解HTML和CSS新增功能与前端技术。以实训项目为例，将网页制作的理论知识和方法结合到知识点的讲解中，使得读者能够掌握其中思考问题的方法、并了解其过程，做到授人以渔；在出版社网站和自建资源中心上等提供丰富的网络资源，方便读者进一步深化理论学习和实践训练，主要包括教材之外的外延知识、知识点示例程序、若干综合项目示例程序等。本书从初学者角度出发，通过通俗易懂的语言、丰富的实例，详细介绍了网页开发所需要掌握的知识内容。包括HTML、CSS、JavaScript等知识内容同时以真实项目作为案例，将理论知识与实践相结合，从实践的角度进行知识点的深化与能力的拓展。
本书从初学者角度出发，通过通俗易懂的语言、丰富的实例，详细介绍了网页开发所需要掌握的知识内容。包括HTML、CSS、JavaScript等知识内容同时以真实项目作为案例，将理论知识与实践相结合，从实践的角度进行知识点的深化与能力的拓展。以实训项目为例，将网页制作的理论知识和方法结合到知识点的讲解中，使得读者能够掌握其中思考问题的方法、并了解其过程，做到授人以渔；在出版社网站和自建资源中心上等提供丰富的网络资源，方便读者进一步深化理论学习和实践训练，主要包括教材之外的外延知识、知识点示例程序、若干综合项目示例程序等。
前 言随着互联网技术的发展，近几年来，人工智能、大数据、物联网、区块链、云计算等新名词的出现，以及相关产业的发展，物联网已深入我们生活的方方面面。为了更好地体验互联网效果，Web前端技术也快速发展起来。Web前端项目开发采用HTML、CSS、jQuery、JavaScript等相关技术，并随着HTML 5和CSS 3的发展，网站的开发和维护更快速、更高效。本书系统地讲解了HTML 5、CSS 3、jQuery等相关的基础知识和应用技术，通过引入大量的实例对HTML 5和CSS 3进行深入浅出的技术分析。本书以实战为主要宗旨，通过大量的案例分析以及实际项目，让读者在学习基础理论的同时，也掌握Web前端技术的精髓，提高实际开发水平和项目实战能力。本书主要包含以下内容。第1章：简介。本章涵盖的内容包括网站与网页简介、HTML简介、CSS简介、jQuery简介和开发编译环境等内容。第2章：网页基础。本章主要介绍了HTML标签、CSS基础、CSS常用布局方法、CSS动画和jQuery等内容。第3章：HTML项目开发一（子杰软件官网）。本章主要对前端开发实战项目上海子杰软件官网进行复写。本项目是一个简易的网页设计，主要包括导航栏、轮播图整体布局、我们的产品、数字化专题、底部版权、图文列表制作和自适应设计等内容。第4章：HTML 5新增功能介绍。本章简要介绍了HTML 5的新增功能，包括多媒体、图形绘制、文件选择与拖放等内容。第5章：HTML项目开发二（子杰软件管理员后台）。本章主要对子杰软件管理员后台开发实战项目管理员后台登录页面和栏目管理页面进行设计。本项目是一个商业化的网页设计，主要包括管理员后台开发框架、各种表单元素的使用和数据交互等内容。读者可利用各章所学技能对本书中案例（前端开发实战项目、管理员后台开发实战项目）的功能进行优化。全书学习结束后，读者在学习技能的同时，还可获取项目的实际开发经验。建议读者在学习本书时，对书中的项目实例多动手实践，这样才能加深对所学知识和项目中代码的理解。为了方便读者的学习，我们将书中项目的源代码（包括所有材料）上传到http://www.20-80.cn/网站，读者可以自行下载查看。本书由武汉工商学院计算机与自动化学院教研团队组织编写，由刘雄华教授任主编并统稿。参与编写的教师有宋文哲、童雯茜、周俊杰等，参加编写的企业专家有刘硕（上海子杰软件有限公司）。本书实训项目代码由上海子杰软件有限公司提供，刘硕工程师参与编写、整理和验证。由于时间仓促，书中不足或疏漏之处在所难免，希望广大读者批评指正! 编 者 2023年6月
1998年-2002年 武汉市四十九中学 教师2003年-2009年 武汉弘博集团 副总2010年至今 上海子杰软件有限公司 技术总监2013年3月-2014年2月 百事通网络电视技术发展有限责任公司 技术顾问2013年3月-2014年2月 南京富士通计算机设备有限公司 技术顾问2013年4月-2015年3月 中国太平洋保险（集团）股份有限公司 技术顾问2014年3月-2015年2月 上海辰锐信息科技公司（公安部三所） 技术顾问2015年3月-2016年2月 库卡机器人制造（上海）有限公司 技术顾问2015年9月-2016年8月 上海安托信息技术有限公司 技术顾问2016年3月-2016年9月 杉德集团-上海久彰电子商务有限公司 技术顾问2016年3月-2017年2月 上海索广映像有限公司（上广电索尼） 技术顾问2018年至今 武汉工商学院 院长获奖荣誉：2018年中国技能大赛----第45届世界技能大赛上海市选拔赛商务软件解决方案项目、网站设计与开发项目优秀指导教练2019年湖北工匠杯技能大赛湖北省服务贸易职业技能大赛商务软件解决方案（软件服务外包）项目优秀教练第46届世界技能大赛湖北省选拔赛商务软件解决方案项目优秀教练中华人民共和国第一届职业技能大赛移动应用开发项目裁判员
第1章 简介 （1）
1.1 网站与网页简介 （1）
1.1.1 网站的构成 （2）
1.1.2 网页基础知识 （3）
1.2 HTML简介 （4）
1.2.1 HTML基础语法 （5）
1.2.2 HTML基本结构 （6）
1.3 CSS简介 （9）
1.4 jQuery简介 （12）
1.5 开发编译环境 （13）
1.5.1 运行 （15）
1.5.2 调试 （15）
小结 （17）
习题 （17）
第2章 网页基础 （20）
2.1 HTML标签 （20）
2.1.1 块级元素 （21）
2.1.2 行级元素 （26）
2.1.3 行级块元素 （27）
2.1.4 按用途分类 （29）
2.2 CSS基础 （30）
2.2.1 CSS的使用 （31）
2.2.2 盒子模型 （56）
2.3 CSS常用布局方法 （66）
2.3.1 浮动布局 （67）
2.3.2 定位布局 （70）
2.3.3 弹性布局 （83）
2.4 响应式布局 （88）
2.4.1 响应式布局的实现 （89）
2.4.2 响应式布局的优缺点 （92）
2.5 CSS 3动画 （93）
2.5.1 transform （93）
2.5.2 transition （94）
2.5.3 animation （94）
2.5.4 动画综合实例 （95）
2.6 jQuery （99）
2.6.1 jQuery的引用 （100）
2.6.2 jQuery的语法 （101）
2.6.3 jQuery的入口函数 （102）
2.6.4 jQuery选择器 （102）
2.6.5 jQuery常用的事件 （103）
2.6.6 jQuery的效果 （113）
2.6.7 jQuery操作HTML （126）
2.6.8 jQuery遍历元素 （131）
小结 （135）
习题 （135）
第3章 HTML项目开发一（子杰官网） （138）
3.1 项目介绍 （138）
3.1.1 项目描述 （139）
3.1.2 开发要求 （139）
3.1.3 网站设计分析 （139）
3.1.4 网站文件结构 （140）
3.1.5 网页结构 （140）
3.2 导航栏 （142）
3.2.1 子杰官网logo （144）
3.2.2 菜单列表 （146）
3.2.3 搜索和微信图标 （150）
3.3 轮播图整体布局 （153）
3.3.1 轮播图片切换按钮 （156）
3.3.2 轮播文字部分 （157）
3.3.3 轮播效果 （160）
3.4 我们的产品 （160）
3.4.1 产品分类 （163）
3.4.2 申请体验按钮效果 （168）
3.4.3 鼠标滑动展示产品详细内容 （171）
3.5 数字化专题 （172）
3.6 典型案例 （176）
3.7 解决方案 （178）
3.8 底部版权 （185）
3.8.1 申请体验 （185）
3.8.2 联系方式 （188）
3.9 响应式布局 （191）
小结 （202）
习题 （202）
第4章 HTML 5新增功能简介 （203）
4.1 HTML 5语法 （203）
4.2 HTML 5元素 （206）
4.2.1 HTML 5新增的结构元素 （206）
4.2.2 HTML 5新增的功能元素 （208）
4.2.3 HTML 5废除的元素 （209）
4.2.4 HTML 5属性 （209）
4.2.5 HTML 5全局属性 （212）
4.3 HTML 5中的多媒体 （215）
4.3.1 网页音频 （216）
4.3.2 网页视频 （217）
4.3.3 滚动字幕（跑马灯效果） （218）
4.4 使用HTML 5绘制图形 （220）
4.5 HTML 5的高级应用 （221）
4.5.1 选择文件 （221）
4.5.2 使用HTML 5实现拖放功能 （221）
小结 （222）
习题 （222）
第5章 HTML项目开发二（子杰软件管理员后台） （224）
5.1 项目介绍 （224）
5.1.1 项目描述 （225）
5.1.2 开发要求 （225）
5.2 平台风格指引 （226）
5.2.1 商标 （226）
5.2.2 调色板 （226）
5.2.3 字体 （227）
5.3 准备工作 （229）
5.3.1 字体选择/字体规范 （229）
5.3.2 清除浏览器默认样式 （230）
5.3.3 管理员后台默认样式 （231）
5.3.4 管理员后台栅格系统 （232）
5.3.5 管理员后台功能说明 （237）
5.4 常见的表单标签 （238）
5.4.1 按钮、tab标签、下拉菜单等 （238）
5.4.2 抽屉和弹出框 （255）
5.5 登录界面 （260）
5.5.1 整体布局 （260）
5.5.2 具体代码 （261）
5.6 管理员后台栏目管理页面 （263）
5.6.1 整体布局 （263）
5.6.2 Sider区域布局 （267）
5.6.3 Right区域布局 （278）
5.7 Content区域Header布局 （288）
5.7.1 Header区域 （290）
5.7.2 Content区域 （292）
小结 （306）
习题 （306）
第6章 网站测试与发布 （307）
6.1 测试本地站点 （308）
6.1.1 浏览器测试 （308）
6.1.2 链接测试 （309）
6.2 发布站点 （315）
6.2.1 腾讯云服务器介绍 （316）
6.2.2 使用腾讯云服务器发布站点 （317）
小结 （323）
习题 （323）
附录 （324）
书单推荐
