一、教材的基本信息
1.适用对象
本教材适合于高校计算机科学与技术、软件工程、物联网、计算机网络、大数据、计算机应用、电子商务、信息技术与商务管理等专业本科、高职学生选用，也可供有一定基础的前端学习者选用。
2.具备的知识和能力基础
具备基本的计算机操作能力和一定的英文能力，具备HTML和CSS基础。
3.预期学习效果目标内容学习效果理论知识掌握HTML和CSS3理解HTML5规范，掌握CSS3理解移动网站开发规范掌握JavaScript，掌握ES6实践技能应用JavaScript编写网站前端常见效果应用前端技术编写移动端常见效果应用HTML5和CSS3编写网站前端能够完成网站前端的设计与开发，包括移动端和PC端素质能力团队合作，协作能力自主学习，学习并完成现实中见到的前端效果创新，在模仿的基础上创新4.教材编写团队
本教材是前端课程组所有教师多年前端课程授课以及项目开发和实训、实践的结晶。课程组教师大多有十年以上的前端课程的授课经验，见证了前端技术的飞速发展。课程组的网页设计与制作课程被评为辽宁省精品课，获得辽宁省教学成果奖；课程组编写的教材《网页设计与制作实例教程》被评为“辽宁省十二五规划教材”，并被国内一百余所高校采用。本次的《Web前端技术教程》的编写，是课程组对网站前端技术的总结、探索和突破。
二、教材的基本结构与内容组织
1.教材的基本结构
课程主要目标是使学生掌握网站前端的各种技术，能够完成网站前端的综合设计。
本教材的主要内容就是网页的前端设计，基本的设计思路是在读者完成HTML和CSS的学习之后，进一步提升前端设计能力。
前端设计主要包括内容、样式和行为。内容由HTML表示，HTML5是HTML的最新规范，广泛应用于电脑版网站和移动版网站；样式由CSS表示，CSS3是其最新规范，CSS3提供了更丰富的显示效果与选择器功能；行为由JavaScript表示，HTML5的规范主要通过JavaScript提供新的功能。
通过完整的综合项目，按照现实的规范设计，全方面完成网站前端的设计与制作。完整的项目是综合所有前端知识的最有效手段。应用HTML、CSS、JavaScript完成电脑版、手机版网站的开发或响应式网站的开发。
课程项目从第1章开始规划和布置任务，每一章完成课程项目的一部分工作，每一章的具体任务在实践环节设计中体现，最终在第13章进行完整的课程项目的设计与实现。
课程逻辑结构如下图所示：
2.教材的内容组织
本教材的编写基于课程项目，对实际项目中暂时不能用到的内容，进行了删减或省略。希望读者能够在阅读教材时，根据教材中的规划完成一个实际项目的需求分析、设计、实现和运行。前端的学习必须通过实践来进行，一个好的项目也是对一个初出茅庐、没有工作经验的新人最好的能力证明。
本教材的内容主要包括HTML、CSS、HTML5、CSS3、移动网站开发、表单、JavaScript、ES6、网站的发布和优化等。本教材的内容从理论和实践两方面满足对前端知识的要求，理论包括能够回答前端职位常见的题目，实践包括能够完成常见的电脑版和移动端网站前端部分的设计与实现。
基于以上思路，同时针对课程项目的构思、设计、实现、运行的总的过程设计，本教材共分为14章。
第1章对网站前端和课程项目做了总体的介绍，并对课程项目进行构思。
第2章主要介绍HTML，重点介绍前端技术的技术规范。
第3章主要介绍CSS，介绍了网页的样式的技术规范与实现方法。
第4章主要介绍框模型，掌握框模型的要素、宽度、高度、叠加等。
第5章主要介绍网页布局，掌握实现完整大网页的方法，并对课程项目进行整体的设计和布局实现。
第6章主要介绍HTML5的设计规范和布局元素。
第7章主要介绍表单相关的内容，包括HTML5表单。
第8章主要介绍前端开发规范和网页元素，网页元素是实现网页布局中每一部分的具体方法。
第9章主要介绍CSS3，掌握CSS的最新技术规范。
第10章介绍了基于CSS3的移动网站的设计和运行。使学生掌握移动网站的设计方法，能够完成课程项目手机版的实现和运行。
第11章介绍了JavaScript。这一部分是前端的核心，应用和理论两个层面都要掌握。
第12章介绍了ES6。使学生掌握JavaScript的最新规范和特性，理解异步流程的处理。
第13章介绍了JSON和AJAX。掌握前端与后台交互的数据格式和方法。
第14章介绍了基于网站的设计。掌握网站的设计流程、优化、测试与网站发布，掌握课程项目的要求与实现方法。
很多人为此教材的出版付出了努力，在此向他们表示感谢。感谢参与教材编写和审阅的所有老师，感谢他们认真、严谨的工作，保证教材高质量地完成。感谢大连东软信息学院计算机与软件学院领导以及教材建设委员会对教材编写的帮助和支持，感谢东软电子出版社为教材编写、出版创造的优良条件。
由于Web前端技术知识更新很快、日新月异，作者水平有限，以及编写时间仓促，教材中错误或不妥之处难免，敬请读者批评指正。
第1章前端概述1
1.1前端基础1
1.1.1WWW1
1.1.2URL2
1.1.3HTML2
1.1.4常用前端技术2
1.1.5浏览器3
1.1.6静态网页与动态网页4
1.1.7HTTP5
1.1.8HTTPS6
1.1.9B/S6
1.2前端概述8
1.3前端学习内容9
1.4前端开发环境10
1.4.1前端开发软件概述10
1.4.2浏览器工具10
1.4.3Visual Studio Code的安装与使用11
1.5前端项目规划13
1.5.1基于模仿的项目规划14
1.5.2基于创新的项目规划14
1.5.3网站元素16
1.6小结17
实践环节设计18
习题18
第2章HTML基础19
2.1HTML概述19
2.2第一个HTML页面20
2.3标准HTML文件的结构22
2.4基本HTML标记22
2.4.1正文标题标记——从<h1>到<h6>22
2.4.2分段标记<p>和换行标记<br>23
2.4.3常用文本格式标记24
2.4.4注释语句标记<! >25
2.5列表标记25
2.5.1无序列表26
2.5.2有序列表26
2.5.3定义列表27
2.6HTML的属性28
2.7HTML颜色29
2.8<div>和<span>30
2.9字符实体31
2.10文件路径32
2.10.1绝对路径32
2.10.2相对路径33
2.11插入图片34
2.11.1图像格式34
2.11.2在网页中使用图片35
2.12超链接36
2.12.1外部链接与内部链接36
2.12.2title属性和target属性38
2.12.3图片超链接38
2.12.4文件的链接39
2.12.5锚点链接40
2.13表格41
2.13.1表格的应用41
2.13.2表格的基本标记42
2.14iframe43
2.15小结44
实践环节设计45
习题45
第3章CSS基础48
3.1CSS简介48
3.2CSS选择器49
3.2.1基本概念和语法49
3.2.2标签选择器50
3.2.3ID选择器53
3.2.4CLASS选择器54
3.2.5群组选择器和后代选择器58
3.3常用属性60
3.4CSS伪类62
3.5CSS的位置64
3.5.1内嵌样式64
3.5.2内部样式65
3.5.3外部样式65
3.6层叠与继承67
3.7CSS背景69
3.7.1无序列表的背景69
3.7.2导航71
3.8小结73
实践环节设计73
习题73
第4章框模型76
4.1一个盒子76
4.2框模型77
4.3盒子的宽度和高度80
4.4框模型的应用82
4.5display87
4.6小结91
实践环节设计91
习题92
第5章CSS布局93
5.1网页布局方法概述93
5.2float浮动94
5.3BFC99
5.4clear100
5.5固定宽度布局101
5.6绝对定位106
5.7zindex111
5.8相对定位112
5.9自适应宽度布局114
5.10固定定位118
5.11综合布局实例119
5.12小结121
实践环节设计122
习题122
第6章HTML5基础124
6.1HTML5概述124
6.2DOCTYPE125
6.3HTML5的新特性126
6.4HTML5布局元素127
6.5常用HTML5基本元素129
6.6HTML5属性130
6.7音频和视频132
6.8小结132
实践环节设计132
习题133
第7章表单134
7.1表单基础135
7.2常用的表单控件136
7.2.1文本域和按钮136
7.2.2单选框和复选框137
7.2.3多行文本框和下拉列表138
7.3用CSS美化表单139
7.4HTML5表单143
7.4.1datalist元素143
7.4.2autocomplete属性144
7.4.3新的input类型145
实践环节设计147
习题147
第8章前端开发规范和网页元素设计148
8.1基于HTML5的前端开发148
8.2前端开发规范149
8.3网页元素设计152
实践环节设计183
习题183
第9章CSS3基础185
9.1CSS3概述185
9.2CSS3基础属性186
9.2.1圆角与阴影186
9.2.2CSS3背景188
9.3CSS3选择器191
9.4CSS3 transform200
9.5CSS3 transition205
9.6CSS3 animation215
9.7其他CSS3常用属性219
9.7.1文字219
9.7.2多列220
9.7.3伪元素的counter222
9.7.43D动画属性224
9.8小结226
实践环节设计226
习题226
第10章CSS进阶228
10.1移动网站设计228
10.2flex232
10.3自适应宽度239
10.4media queries246
10.5rem250
10.6图像解决方案253
10.6.1CSS Spirit254
10.6.2字体图标256
10.6.3SVG258
10.6.4基于iconfont的图标解决方案260
10.6.5基于字体图标和svg的网页元素设计264
10.7display：table269
10.8重排与重绘272
10.9小结272
实践环节设计273
习题273
第11章JavaScript274
11.1JavaScript概述274
11.2JavaScript基础276
11.2.1JavaScript输出276
11.2.2变量和常量278
11.2.3表达式和运算符279
11.3数据类型283
11.4程序结构287
11.5函数293
11.5.1函数的定义293
11.5.2函数的参数297
11.6对象299
11.6.1对象基础299
11.6.2引用类型300
11.6.3prototype302
11.6.4常用内部对象302
11.7数组305
11.7.1数组基础305
11.7.2数组方法308
11.8字符串316
11.9事件320
11.9.1事件基础320
11.9.2事件定义325
11.9.3事件委托330
11.9.4常用事件332
11.9.5event对象337
11.9.6表单事件和校验341
11.9.7事件抖动348
11.9.8手机事件350
11.10DOM356
11.11动态网页元素362
11.11.1手风琴（折叠）363
11.11.2tab选项卡366
11.11.3遮罩371
11.11.4下拉菜单373
11.12BOM375
11.12.1基本BOM对象375
11.12.2requestAnimationFrame382
11.12.3cookie384
11.13定时器385
11.14面向对象391
11.14.1类与面向对象391
11.14.2原型链继承394
11.14.3call（apply）继承397
11.15错误处理399
11.16正则表达式405
11.17闭包410
11.18async和defer413
11.19小结413
实践环节设计414
习题414
第12章ES6416
12.1ES6基础416
12.1.1变量417
12.1.2数组417
12.1.3循环418
12.1.4函数419
12.1.5字符串422
12.1.6解构赋值424
12.2对象425
12.3类和继承430
12.4Symbol435
12.5Map439
12.6Set440
12.7Promise442
12.8generator448
12.9async453
12.10module455
实践环节设计457
习题457
第13章JSON和AJAX459
13.1JSON459
13.1.1JSON基础459
13.1.2JSON解析464
13.2AJAX474
13.2.1概述474
13.2.2AJAX的语法475
13.2.3readyState和status475
13.2.4时间戳479
13.2.5AJAX的POST479
13.2.6AJAX的封装479
13.3跨域480
13.3.1同源480
13.3.2跨域的概念和代理服务器480
13.3.3CORS481
13.3.4JSONP481
13.4小结482
实践环节设计482
习题483
第14章网站综合设计484
14.1网站设计概述484
14.2切片486
14.3网站综合设计流程486
14.4网站测试488
14.5网站前端的优化488
14.5.1SEO489
14.5.2CDN489
14.5.3服务器端优化489
14.5.4文件的压缩489
14.5.5预加载和懒加载490
14.5.6代码规范490
14.5.7HTTP缓存490
14.5.8Web安全492
14.6网站的发布492
14.6.1WWW服务器493
14.6.2网站上传493
14.6.3项目发布494
14.7电脑版网站的设计与实现495
14.7.1总体思路495
14.7.2项目分析497
14.7.3从psd中获取图片素材499
14.7.4切片501
14.7.5页面的实现503
14.8手机版网站的设计与要求505
实践环节设计506
习题507
附录：学习知识要点及能力要点508
参考文献512
2016年6月，中国成为国际本科工程学位互认协议《华盛顿协议》的正式会员，这是中国工程教育国际化进程的重要里程碑。“回归工程”、培养学生的“大工程观”是当今国际工程教育的主流理念。《华盛顿协议》对毕业生提出的12条素质要求中，不仅要求工程知识、工程能力，还强调通用能力和品德伦理；在实践上，以学生为中心，以产出为导向，注重对目标达成的支撑及持续改进，与CDIO工程教育实质等效。
CDIO工程教育是近年来国际工程教育改革的最新成果，以“预期学习结果”集合来驱动课程内容、教学方法、教育文化的设计，重视营造工程教育文化，其注重工程能力培养和基于工程项目全生命周期的一体化设计思想，对于国内工程类和相关专业的建设具有重要的实施价值。
作为承载了教学改革思想的载体，融入CDIO工程教育理念的高品质教材，东软CDIO工程教育教材在注重理实结合的同时，也注重对学生八大能力的培养，即：技术知识与推理能力，开放式思维与创新，个人职业能力，沟通表达与团队合作，态度与习惯，责任，价值观，实践构思、设计、实现和运行对社会的贡献。
CDIO工程教育教材是 CDIO教育教学改革在教学实施过程中的集中体现，它不仅承载着课程和项目的教学内容，而且贯穿和体现了CDIO工程教育的理念、思想与方法，是在系统化理论的指导下，将知识、能力、素质培养进行一体化设计，有机融合在教材体系中。教材的编写以能力培养为主线，以案例教学为引导，以项目为载体，充分体现“做中学”和“学中做”的思想，具有以下优势：
（1）以能力培养为主线，培养学生专业知识学习能力和工程实践能力。
（2）以案例为驱动，在做案例的过程中学习新知识，充分体现了“做中学”。
（3）以项目为载体，基于工程化教育方法，按照分析、设计、实施、运行展开项目及知识点的讲解。
（4）围绕专业知识结构和能力体系设计教材，实现同一专业下不同教材紧密的关联性。
（5）内容编排循序渐进，符合人的认知规律。
（6）适应柔性化教学变革，构建一体化、立体化教学资源。
CDIO工程教育教材可供以应用型人才为培养目标的高等院校以及职业培训机构作为教材使用。
目前，CDIO工程教育教材的建设还处于探索阶段，是一项创造性的工作，尚需要通过改革的实践不断加以深化和持续改进，任重而道远。
