网站前端开发

随着互联网行业的发展，在大中型互联网公司，网站开发岗位中前端开发工程师具有较大规模的招聘需求。本书从高等职业教育的特点出发，以工作过程系统化为原则强调网页布局、样式设置和前端交互等基本能力的培养。
本教材在体例上做出了大胆尝试，抛弃了传统的按部就班逐个介绍对象、属性、方法的教科书式的案例模式，转而采用了基础知识 案例驱动的双轨模式。本教材共分为HTML基础知识（包含的HTML5前沿经典应用）、CSS基础知识（包含的CSS3应用）、JavaScript基础知识和综合案例四大部分，高度浓缩了基础知识部分，精心安排了大量前沿和综合类实例，以基础知识铺路，以前沿案例驱动，以综合案例提升，借此引领学生迈入网站前端开发的大门。本教材既培养学生掌握扎实的Web基础知识，也培养学生形成良好的Web设计素养。
本教材既可作为高等职业院校计算机各专业的“Web开发”课程的教材，也可供中职及成人教育相关专业使用或参考。
本教材内容与特点：
（1）本教材采用“基础知识 案例驱动”的双轨模式进行编写。本教材先以基础知识的铺垫为辅，穿插小的案例用以巩固知识点，再以实战案例的介绍为主，每个例子都来自企业的具体应用，具有较强的实用价值。
（2）本教材提炼了各个案例所对应的学习内容，以“总结”的形式标注在各个章节中,以便于让学生更快地掌握核心知识点。此外，在“案例拓展”中也囊括了已讲解的知识和一些关于网站前端开发的外延知识，用于扩展学生的视野。
（3）针对在实际操作中可能遇到的各种问题，本教材总结了相应的注意事项和应对策略，并在各个章节中进行了详细标注（如标注为“注意”的内容部分），以使得学生能够在学习中尽量少走弯路，避免不必要的错误。
（4）本教材中的所有基础知识和具体案例都按由易到难、由浅入深、由零到整的规则进行排布，适用于职业院校开展网页基础方面的课程。
由于编者水平有限，编写时间仓促，书中难免有疏漏和不妥之处，殷切希望广大读者批评指正，以便后期修订再版，并致以诚挚的谢意！

编者
2020年8月

本教材在体例上做出了大胆尝试，抛弃了传统的按部就班逐个介绍对象、属性、方法的教科书式的案例模式，转而采用了基础知识 案例驱动的双轨模式。本教材共分为HTML基础知识（包含*的HTML5前沿经典应用）、CSS基础知识（包含*的CSS3应用）、JavaScript基础知识和综合案例四大部分，高度浓缩了基础知识部分，精心安排了大量前沿和综合类实例，以基础知识铺路，以前沿案例驱动，以综合案例提升，借此引领学生迈入网站前端开发的大门。本教材既培养学生掌握扎实的Web基础知识，也培养学生形成良好的Web设计素养。本教材既可作为高等职业院校计算机各专业的“Web开发”课程的教材，也可供中职及成人教育相关专业使用或参考。

本教材在体例上做出了大胆尝试，抛弃了传统的按部就班逐个介绍对象、属性、方法的教科书式的案例模式，转而采用了基础知识 案例驱动的双轨模式。本教材共分为HTML基础知识（包含*的HTML5前沿经典应用）、CSS基础知识（包含*的CSS3应用）、JavaScript基础知识和综合案例四大部分，高度浓缩了基础知识部分，精心安排了大量前沿和综合类实例，以基础知识铺路，以前沿案例驱动，以综合案例提升，借此引领学生迈入网站前端开发的大门。本教材既培养学生掌握扎实的Web基础知识，也培养学生形成良好的Web设计素养。本教材既可作为高等职业院校计算机各专业的“Web开发”课程的教材，也可供中职及成人教育相关专业使用或参考。

朱雯曦、绍兴职业技术学院信息工程学院电子商务技术专业负责人。1、2018年浙江省大学生电子商务竞赛技术类一等奖 浙江省教育厅 指导教师（排名）2、精品课程建设项目："电子商务实务” 主持 2013-2015年 绍兴职业技术学院 已结题2、2017年浙江省高职高专"电子商务技能沙盘”职业技能竞赛 省一等奖 浙江省教育厅 指导教师（排名）3、2017年全国职业技能大赛"电子商务技能沙盘”赛项 全国二等奖 * 指导老师（排名）4、2016-2017年 连续2年课堂教学优秀奖 绍兴职业技术学院

目 录 
目录 

第1章 网站前端开发要掌握的技术 
1.1 制作我的个网页 
1.2 认识HTML标签 
1.3 认识HTML文件基本结构 
1.4 认识＜head＞标签 
1.5 了解HTML的代码注释 
1.6 案例拓展 
第2章 认识HTML标签 
2.1 语义化，让你的网页更好地被搜索引擎理解 
2.2 ＜h1＞～＜h6＞标签 
2.3 ＜p＞和＜br＞标签 
2.4 ＜img＞标签 
2.5 ＜a＞标签 
2.6 ＜span＞标签 
2.7 ＜strong＞和＜em＞标签 
2.8 ＜ul＞和＜li＞标签 
2.9 ＜ol＞和＜li＞标签 
2.10 ＜dl＞标签 
2.11 ＜div＞标签 
2.12 ＜input＞标签 
2.13 ＜input＞和＜datalist＞标签 
2.14 ＜input＞和＜label＞标签 
2.15 其他标签汇总 
2.16 HTML5新标签 
第3章 认识CSS样式 
3.1 CSS样式的语法格式 
3.2 CSS注释代码 
3.3 CSS的三种样式 
3.4 关于选择器 
第4章 CSS文字排版 
4.1 部分CSS属性说明 
4.2 CSS布局模型 
4.3 流动模型 
4.4 浮动模型 
4.5 层模型 
4.6 行内元素与块状元素 
4.7 隐性改变display类型 
第5章 居中设置 
5.1 水平居中—块级元素水平居中 
5.2 文字居中—行内元素水平居中 
5.3 固定高度的块状元素 
5.4 文字垂直居中—单行内联 (inline-)元素垂直居中 
5.5 未知高度的块状元素 
5.6 块状元素水平垂直居中 
第6章 弹性布局 
6.1 什么是弹性布局 
6.2 作用在父容器上的6个弹性布局属性 
6.3 作用在子元素上的6个弹性布局属性 
6.4 关于弹性布局的总结 
第7章 Bootstrap 
7.1 什么是栅格系统 
7.2 Bootstrap包含的内容 
7.3 col-md-x 
7.4 Bootstrap网格系统（Grid System）的工作原理 
7.5 栅格参数 
第8章 JavaScript基础 
8.1 JavaScript 脚本的位置 
8.2 三个弹框 
8.3 创建一个简单的变量 
8.4 基础函数 
8.5 DOM基础 
8.6 DOM事件处理 
8.7 绑定事件 
8.8 正则表达式详解 
8.9 字符串的方法 
8.10 正则表达式语法基础 
8.11 超时调用 
8.12 清除超时调用 
8.13 间歇调用 
8.14 清除间歇调用 
第9章 网易云课堂 
9.1 页面实现 
9.2 案例总结 
9.3 案例拓展 
第10章 水晶石页面的实现 
10.1 页面实现 
10.2 案例总结 
10.3 案例拓展 
第11章 百度网盘页面的实现 
11.1 页面实现 
11.2 案例总结 
11.3 案例拓展 
第12章 小米网页的实现 
12.1 基础页面准备 
12.2 案例总结 
12.3 案例拓展 
第13章 CSS3图片效果切换的实现 
13.1 基础页面准备 
13.2 HTML部分代码实现 
13.3 CSS代码实现 
13.4 案例总结 
13.5 案例拓展 
第14章 弹性布局综合案例实现 
14.1 案例实现 
14.2 案例总结 
14.3 案例拓展 
第15章 注册账户信息页面的实现 
15.1 基础页面准备 
15.2 HTML代码实现 
15.3 JavaScript部分 
15.4 案例总结 
15.5 案例拓展 
第16章 实验场实现 
16.1 index页面代码实现 
16.2 实验场1代码实现 
16.3 实验场2代码实现 
16.4 案例总结 
16.5 案例拓展 
第17章 图片轮播效果的实现 
17.1 基础页面的实现准备 
17.2 案例总结 
17.3 案例拓展

本教材在体例上做出了大胆尝试，抛弃了传统的按部就班逐个介绍对象、属性、方法的教科书式的案例模式，转而采用了基础知识 案例驱动的双轨模式。本教材共分为HTML基础知识（包含*的HTML5前沿经典应用）、CSS基础知识（包含*的CSS3应用）、JavaScript基础知识和综合案例四大部分，高度浓缩了基础知识部分，精心安排了大量前沿和综合类实例，以基础知识铺路，以前沿案例驱动，以综合案例提升，借此引领学生迈入网站前端开发的大门。本教材既培养学生掌握扎实的Web基础知识，也培养学生形成良好的Web设计素养。本教材既可作为高等职业院校计算机各专业的“Web开发”课程的教材，也可供中职及成人教育相关专业使用或参考。

朱雯曦、绍兴职业技术学院信息工程学院电子商务技术专业负责人。1、2018年浙江省大学生电子商务竞赛技术类一等奖 浙江省教育厅 指导教师（排名）2、精品课程建设项目："电子商务实务” 主持 2013-2015年 绍兴职业技术学院 已结题2、2017年浙江省高职高专"电子商务技能沙盘”职业技能竞赛 省一等奖 浙江省教育厅 指导教师（排名）3、2017年全国职业技能大赛"电子商务技能沙盘”赛项 全国二等奖 * 指导老师（排名）4、2016-2017年 连续2年课堂教学优秀奖 绍兴职业技术学院