本书按照《Web前端开发职业技能等级标准》，以HTML CSS JavaScript为主线编写，书中实例应用流行的HTML5和CSS3。本书共包括12章。第1章~第3章介绍网站制作的基本技术，包括HTML语言、基本网页内容和结构元素等； 第4章~第7章介绍CSS，包括网页格式和布局技术等； 第8章和第9章介绍JavaScript脚本语言技术； 第10章~第12章介绍JavaScript框架技术jQuery。本书提供PPT课件、微课、源代码、企业实战案例等配套资源。 本书适合应用型本科、高职高专院的校软件技术、移动应用开发等专业的课程教学，对于培训机构和一般开发者也具有较高的参考价值。
本书以一个完整的企业网站开发的思路进行讲解，将相关知识点分解到各个章节案例网站的具体制作环节中，针对性强，可操作性强。满足零基础读者使用需求，配套企业案例可通过书中二维码阅读。
随着移动互联网技术的迅速发展和移动互联网应用的快速普及，用户体验的要求越来越高，网站开发的难度也越来越大。在这种情况下，Web前端技术成为热门技术，越来越受到开发者的重视。
本书基于《Web前端开发职业技能等级标准》，深入浅出地介绍了Web前端设计技术的基础知识。本书围绕Web标准的三大关键技术（HTML、CSS和JavaScript/jQuery）介绍前端网页设计与开发的知识及相关应用。其中，HTML负责网页内容和结构，CSS负责网页外观及布局，JavaScript/jQuery负责网页行为和功能。目前，很多高校的计算机专业和IT培训班都将HTML CSS JavaScript jQuery作为教学内容之一，这对培养学生的前端设计与开发能力具有非常重要的意义。
本书内容是校企合作的成果，以HTML CSS JavaScript为主线，实例应用流行的HTML5和CSS3。各个章节通过二维码配套案例，前言后的二维码对应企业提供的综合案例，可在学习全书后进行演练。各章节内容相对独立，各章节的案例与综合案例关系密切。本书提供PPT课件、微课、源代码等配套资源。
本书采用任务驱动、模块设计的编写模式。本书的任务来自企业的真实问题，解决问题时，将它分解成一系列的子问题； 每一个子问题的解决过程就是一个模块的学习过程。每个模块学习一组概念、锻炼一组技能； 全部模块加起来，即完成一种知识的学习，形成一种相应的能力。
在任务驱动学习的具体实施中，以网站建设和网页设计为中心，以实例为引导，把介绍知识与实例设计、制作、分析融于一体，自始至终贯穿于本书之中。
本书包含12章。第1章~第3章介绍网站制作的基本技术，包括HTML语言、基本网页内容和结构元素等； 第4章~第7章介绍CSS，包括网页格式和布局技术等； 第8章和第9章介绍JavaScript脚本语言技术； 第10章~第12章介绍JavaScript框架技术jQuery。本书结构清晰，循序渐进，每个部分又相对独立，方便读者根据自己的需要选择学习。内容兼顾基础知识和流行的新技术、新应用，案例工程性突出，实用性强。
本书适合应用型本科、高职高专院校的软件技术、移动应用开发等专业的课程教学，对于培训机构和一般开发者也具有较好的参考价值。本书具有以下特点。
（1） 满足零基础读者使用需求，采用可视化开发模式，方便易学。
（2） 本书通过一个完整的牛道云企业网站的讲解，将相关知识点分解到各个章节中案例的具体制作环节中，针对性和可操作性较强。
（3） 语言通俗易懂，简单明了，读者能够轻松掌握有关知识。
（4） 知识结构安排合理，循序渐进，适合教师教学与学生自学。
本书基于北京信息职业技术学院相关专业的教学实践进行编写，北京起步科技有限公司给予了技术支持。北京信息职业技术学院朱立、刘瑞新担任主编，孙立友担任副主编，负责全书编写策划和定稿； 朱立编写了第1、2、5、6、7章，刘瑞新编写了第8~12章，孙立友编写了第3、4章。
参加编写的人员都是具有多年计算机教学与培训经验的教师。但由于作者水平有限，书中难免有不足之处，恳请读者提出宝贵意见和建议。
编者
2021年2月
朱立，副教授，计算机应用技术硕士。北京信息职业技术学院软件与信息学院应用软件开发教研室主任，软件技术专业带头人。曾参与中日合作计算机自动设计制造系统项目，参与课题多项，编写计算机类教材多本。
第1章HTML5基础知识
1．1HTML5概述
1．1．1什么是HTML
1．1．2什么是HTML5
1．1．3HTML5的应用
1．2HTML5的基本结构
1．2．1HTML5语法结构
1．2．2HTML5编写规范
1．2．3HTML5文档结构
习题1
第2章编辑网页元素
2．1文本元素
2．1．1标题文字标签
2．1．2文本格式化标签
2．2文本层次语义元素
2．2．1time标签
2．2．2cite标签
2．2．3mark标签
2．3基本排版元素
2．3．1段落标签
2．3．2换行标签
2．3．3预格式化标签
2．3．4缩排标签
2．3．5水平线标签
2．4图像
2．4．1网页图像的格式及使用要点
2．4．2图像标签
2．4．3设置网页背景图像
2．4．4图文混排
2．5超链接
2．5．1超链接概述
2．5．2超链接的应用
2．6列表
2．6．1无序列表
2．6．2有序列表
2．6．3定义列表
2．6．4嵌套列表
2．7表格
2．7．1表格的结构
2．7．2表格的基本语法
2．7．3表格的属性
2．7．4不规则表格
2．7．5表格数据的分组
2．8div标签
2．9span标签
2．9．1基本语法
2．9．2span标签与div标签的区别
2．9．3使用div标签和span标签布局网页内容
习题2
第3章页面的布局与交互
3．1结构元素
3．1．1header元素
3．1．2nav元素
3．1．3section元素
3．1．4footer元素
3．1．5article元素
3．1．6aside元素
3．1．7分组元素
3．2页面交互元素
3．2．1details和summary元素
3．2．2progress元素
3．2．3meter元素
3．3表单
3．3．1表单的基本概念
3．3．2表单标签
3．3．3表单元素
3．3．4表单分组
3．3．5使用表格布局表单
3．3．6表单的高级用法
习题3
第4章CSS3基础
4．1CSS概述
4．1．1什么是CSS
4．1．2网页中引用CSS的方法
4．2CSS语法基础
4．2．1CSS样式规则
4.2.2选择符
4．2．3文档结构
习题4
第5章使用CSS修饰页面外观
5．1设置字体样式
5．2设置文本样式
5．2．1文本水平对齐方式
5．2．2行高
5．2．3文本的修饰
5．2．4段落首行缩进
5．2．5首字下沉
5．2．6文本的截断
5．2．7文本的颜色
5．2．8文本的背景颜色
5．3设置图像样式
5．3．1图像缩放
5．3．2图像边框
5．3．3图像的不透明度
5．3．4背景图像
5．3．5背景重复
5．3．6背景图像定位
5．3．7设置背景图像固定
5．3．8背景图像大小
5．4设置表格样式
5．5设置表单样式
5．6设置链接
5．6．1设置文字链接的外观
5．6．2图文链接
5．7创建导航菜单
5．7．1纵向列表模式的导航菜单
5．7．2横向列表模式的导航菜单
习题5
第6章盒模型
6．1盒模型简介
6．2盒模型的属性
6．2．1边框
6．2．2外边距
6．2．3内边距
6．3盒模型的大小
6．3．1盒模型的宽度与高度
6．3．2设置块级元素与行级元素的宽度和高度
6．4盒子的定位
6．4．1定位属性
6．4．2定位方式
6．5浮动与清除浮动
6．5．1浮动
6．5．2清除浮动
习题6
第7章CSS布局技术
7．1Div CSS布局技术简介
7．1．1认识Div CSS布局
7．1．2正确理解Web标准
7．2典型的CSS布局样式
7．2．1嵌套的Div布局
7．2．2两列布局样式
7．2．3三列布局样式
7．3百分比布局
7．3．1百分比布局样式
7．3．2百分比布局案例
习题7
第8章JavaScript程序设计基础
8．1JavaScript概述
8．2在网页中使用JavaScript
8．2．1在HTML文档中嵌入脚本程序
8．2．2链接脚本文件
8．2．3在HTML标签内添加脚本
8．3基本语法
8．3．1基本数据类型
8．3．2常量
8．3．3变量
8．3．4运算符和表达式
8．4JavaScript的程序结构
8．4．1简单语句
8．4．2程序控制流程
8．5函数
8．5．1函数的定义
8．5．2函数的调用
8．5．3全局变量与局部变量
8．6基于对象的JavaScript语言
8．6．1对象
8．6．2对象的属性
8．6．3对象的事件
8．6．4对象的方法
8．7DOM编程
8．7．1window对象
8．7．2document对象
8．7．3location对象
8．7．4history对象
8．7．5form对象
8．8JavaScript的对象事件处理程序
8．8．1对象的事件
8．8．2常用的事件及处理
8．8．3表单对象与交互性
习题8
第9章HTML5的高级应用
9．1HTML5 canvas
9．1．1什么是 canvas
9．1．2绘制矩形
9．1．3绘制路径
9．1．4canvas文本
9．1．5绘制图片
9．1．6状态的保存和恢复
9．2多媒体播放
9．2．1HTML5的多媒体支持
9．2．2音频标签
9．2．3视频标签
9．2．4HTML5多媒体API
习题9
第10章jQuery基础
10．1jQuery概述
10．1．1jQuery简介
10．1．2jQuery的特点
10．1．3下载与引入jQuery插件
10．2DOM对象和jQuery对象
10．2．1DOM对象和jQuery对象简介
10．2．2jQuery对象和DOM对象的相互转换
10．3jQuery选择器简介
10．3．1基础选择器
10．3．2层次选择器
10．3．3过滤选择器
10．3．4表单选择器
习题10
第11章jQuery的动画效果
11．1jQuery的动画方法简介
11．2显示与隐藏效果
11．2．1隐藏元素的方法
11．2．2显示元素的方法
11．2．3切换元素的显示状态
11．3淡入/淡出效果
11．3．1淡入效果
11．3．2淡出效果
11．3．3元素的不透明效果
11．3．4交替淡入淡出效果
11．4滑动效果
11．4．1向下展开效果
11．4．2向上收缩效果
11．4．3交替伸缩效果
习题11
第12章jQuery UI插件的用法
12．1jQuery UI概述
12．1．1jQuery UI简介
12．1．2jQuery UI的下载
12．1．3jQuery UI的使用
12．1．4jQuery UI的工作原理
12．2jQuery UI的常用插件
12．2．1日期选择器插件
12．2．2折叠面板插件
12．2．3标签页插件
12．2．4自动完成插件
习题12
参考文献
书单推荐
