web前端开发技术

◆ ◆

个人介绍

web前端开发技术

主讲教师：徐照兴夏贤铃杨志文刘鼐李教文

教师团队：共8位

徐照兴
夏贤铃
刘鼐
李教文
杨志文
刘海
蔡子诚
张红

第1期

第2期

第1期

学校：	江西服装学院
开课院系：	大数据学院
开课专业：	软件工程；数据科学与大数据技术
课程负责人：	夏贤铃
课程英文名称：	Web Front-end Development Technology
学分：	2
课时：	32

课程介绍

       《web前端开发技术》是软件工程专业的一门专业教育必修课程，本课程坚持立德树人为根本任务，主要内容包括HTML+CSS基础与应用、HTML5+CSS3新特性与应用、JavaScript编程与应用等，通过本课程的学习，应达到以下几个目标：
       课程目标1：能够应用前端开发领域相关新知识新技术设计前端页面。
       课程目标2：能从软件工程角度思考工程问题，分析“怎么做最优”，并选择恰当的工具和前端技术去实现。
       课程目标3：能够理解后端人员发送到前端数据格式规范，结合人文素养设计前端网页，具有服务社会责任感和敬业精神。

教师团队

徐照兴

职称：教授

单位：江西服装学院

部门：大数据学院

职位：院长

夏贤铃

职称：副教授

单位：江西服装学院

部门：大数据学院

职位：教研室主任

职称：教师

职称：教师

职称：教师

职称：教师

职称：教师

职称：教师

参考教材

（一）教材

徐照兴等.HTML+CSS+JavaScript三合一案例教程[M].北京：上海交通大学出版社，2021.
（二）主要参考书

[1] 未来科技.HTML5+CSS3+JavaScript从入门到精通（标准版）[M].北京：水利水电出版社，2017.

[2] 明日科技.HTML+CSS+JavaScript编程入门指南[M].北京：电子工业出版社，2019.

[3] 赵良涛. HTML +CSS+JavaScript网页制作实用教程[M].北京：人民邮电出版社,2020.

[4] 曹化宇.网站全栈开发指南：HTML+CSS+JavaScript+ASP.NET[M].北京：清华大学出版社，2021.

[5] CSDN程序员研究院. https://edu.csdn.net/.

学习路线——前端设计/工程师

为什么要学web前端？

1、人才缺口大，现在入行最佳

在互联网高速发展的现在，每天在智联、51JOB、猎聘等招聘网站上每天都有 100000+个 WEB 前端工程师招聘需求，WEB 前端就业前景广阔，符合未来的发展趋势。

2、就业薪资高

3、就业方向有哪些？

学好 WEB 前端，你可以成为 WEB 前端工程师，还可以成为交互设计师、框架设计师、需求工程师、产品经理、项目经理、项目总监、职场无限可能。岗位多、职业发展空间巨大。

Web 前端工程师

web 前端开发工程师

移动端 WEB 开发工程师

前端开发工程师

前端设计工程师

H5 前端资深开发工程师

Web 前端工程师是涵盖前端+后端+设计+产品的复合型开发人才，成长空间巨大！

1. 实现 Web 界面，优化代码并保持良好兼容性。

2. Web 前端表现层及与前后端交互的架构设计和开发。

3. 配合设计人员实现产品界面和功能。

4. 利用各种 Web 技术模拟开发产品原型。

5. Web 新技术调研和资讯整理。

另外，Web 前端工程师的工作不仅只是网页的制作，还有微网站、APP 的制作、游戏制作，掌握 Web 前端，成为互联网公司争相抢夺的优秀人才。

学习路线

如何才能让自己成为一名前端设计师/工程师？

第一阶段：3 大核心课程

第二阶段：4 大核心课程

教学资源

课程章节资源

课程章节	\| 文件类型		\| 修改时间	\| 大小	\| 备注
1.1 通往高级前端工程师的学习路线		视频 .mp4	2021-09-16	45.20MB
1.2 课程目标与课程内容简介		视频 .mp4	2021-09-16	30.22MB
2.1 什么是网页、开发工具选择及基本操作		视频 .mp4	2021-09-16	128.17MB
2.2 ⽹⻚主要三对标签及<!DOCTYPE>标签作用		视频 .mp4	2021-09-16	115.79MB
2.3 head内部标签元素详细介绍		视频 .mp4	2021-09-16	91.93MB
2.4 网页的分“层”含义及各层的注释写法		视频 .mp4	2021-09-16	77.83MB
3.1 构造页面的html常见标签元素（一）		视频 .mp4	2021-09-16	86.42MB
3.2 构造页面的html常见标签元素（二）		视频 .mp4	2021-09-16	56.87MB
3.3 构造页面的html常见标签元素（三）		视频 .mp4	2021-09-16	74.82MB
3.4 构造页面的html常见标签元素（四）——input标签		视频 .mp4	2021-09-16	90.91MB
3.5 构造页面的html常见标签元素（五）		视频 .mp4	2021-09-16	96.75MB
3.6 Html页面常见标签元素——表格（table）		视频 .mp4	2021-09-16	84.30MB
3.7 Html页面常见标签元素——表单		视频 .mp4	2021-09-16	110.10MB
3.8 ⾏内元素、块级元素和⾏内块级元素的区别		视频 .mp4	2021-09-16	164.85MB
4.1 CSS是什么？		视频 .mp4	2021-09-16	71.95MB
4.2 CSS样式的三种写法		视频 .mp4	2021-09-16	91.02MB
4.3 颜色与背景		视频 .mp4	2021-09-16	209.21MB
4.4 字体		视频 .mp4	2021-09-23	190.86MB
4.5 文本		视频 .mp4	2021-09-23	116.92MB
4.6 链接		视频 .mp4	2021-09-23	152.86MB
4.7 元素的分类与标识（class和id）		视频 .mp4	2021-09-23	103.87MB
4.8 组织元素（span和div）		视频 .mp4	2021-09-23	77.27MB
4.9 盒状模型		视频 .mp4	2021-09-23	96.54MB
4.10 外边距和内边距		视频 .mp4	2021-09-23	178.17MB
4.11 边框		视频 .mp4	2021-09-23	82.42MB
4.12 高度和宽度		视频 .mp4	2021-09-23	46.25MB
4.13 浮动元素（float）		视频 .mp4	2021-09-23	229.98MB
4.14 元素的定位		视频 .mp4	2021-09-23	194.53MB
4.15 用z-index进行层次堆叠		视频 .mp4	2021-09-23	186.84MB
4.16 css选择器的优先级		视频 .mp4	2021-10-07	76.48MB
4.17 CSS应用举例——导航条设计		视频 .mp4	2021-10-07	64.39MB
4.18 CSS应用举例——常见两栏、三栏自适应布局		视频 .mp4	2021-10-07	186.27MB
4.19 常⻅⽔平居中垂直居中实现⽅式		视频 .mp4	2021-10-07	148.14MB
5.1 项目首页框架分析		视频 .mp4	2021-10-07	67.18MB
5.2 头部设计与实现		视频 .mp4	2021-10-08	251.74MB
5.3 分类导航等设计与实现		视频 .mp4	2021-10-08	143.51MB
5.4 中间部分设计与实现1		视频 .mp4	2021-10-08	171.40MB
5.5 中间部分设计与实现2——宝贝展示		视频 .mp4	2021-10-08	373.76MB
5.6 底部导航的设计与实现		视频 .mp4	2021-10-08	167.01MB
6.1 什么是Html5，html4与html5有什么区别		视频 .mp4	2021-10-09	187.93MB
6.2 HTML5常⽤的语义和结构化元素		视频 .mp4	2021-10-09	276.60MB
6.3 H5图形绘画标签canvas的使用		视频 .mp4	2021-10-09	133.07MB
6.4 使用canvas绘制矩形和圆		视频 .mp4	2021-10-09	84.36MB
6.5 canvas绘制图像等其他属性、方法应用		视频 .mp4	2021-10-09	156.53MB
6.6 H5⽮量图形SVG使用		视频 .mp4	2021-10-09	111.99MB
6.7 H5媒体播放常⽤标签		视频 .mp4	2021-10-09	113.38MB
6.8 H5新增的input输入类型		视频 .mp4	2021-10-09	113.78MB
6.9 H5常⽤的表单属性		视频 .mp4	2021-10-09	109.56MB
6.10 H5 Web的本地储存及会话存储		视频 .mp4	2021-10-09	203.56MB
7.1 CSS3新增属性选择器		视频 .mp4	2021-10-20	64.80MB
7.2 CSS3新增结构伪类选择器（上）		视频 .mp4	2021-10-20	128.64MB
7.3 CSS3新增结构伪类选择器（下）		视频 .mp4	2021-10-20	137.99MB
7.4 CSS3新增UI伪类选择器（上）		视频 .mp4	2021-10-20	166.19MB
7.5 CSS3新增UI伪类选择器（下）		视频 .mp4	2021-10-20	103.88MB
7.6 CSS3的重新大小、轮廓和圆角属性		视频 .mp4	2021-10-20	107.29MB
7.7 CSS3的盒子阴影属性		视频 .mp4	2021-10-20	45.34MB
7.8 CSS3背景新特性		视频 .mp4	2021-10-21	179.64MB
7.9 CSS3⽂本效果及特殊字体引⼊		视频 .mp4	2021-10-21	140.86MB
7.10 CSS3的多列布局		视频 .mp4	2021-10-21	81.27MB
7.11 多种尺寸设备兼容必备知识		视频 .mp4	2021-10-21	88.54MB
7.12 CSS3的2D转换动画效果		视频 .mp4	2021-10-21	159.62MB
7.13 CSS3的3D转换动画效果		视频 .mp4	2021-10-21	309.45MB
7.14 CSS3过渡实⽤技巧		视频 .mp4	2021-10-21	109.62MB
7.15 CSS3动画实⽤技巧		视频 .mp4	2021-10-21	219.22MB
8.1 flex弹性布局基本概念		视频 .mp4	2021-10-25	65.39MB
8.2 flex布局容器六⼤属性之flex-direction		视频 .mp4	2021-10-25	51.52MB
8.3 flex布局容器六⼤属性之flex-wrap和flex-flow		视频 .mp4	2021-10-25	83.39MB
8.4 flex布局容器六⼤属性之justify-content		视频 .mp4	2021-10-25	49.93MB
8.5 flex布局容器六⼤属性之align-items		视频 .mp4	2021-10-25	82.07MB
8.6 flex布局容器六⼤属性之align-content		视频 .mp4	2021-10-25	115.45MB
8.7 flex布局项目六⼤属性之order和flex-grow		视频 .mp4	2021-10-25	202.93MB
8.8 flex布局项目六⼤属性之flex-shrink		视频 .mp4	2021-10-25	109.74MB
8.9 flex布局项目六⼤属性之flex-basis和flex		视频 .mp4	2021-10-25	207.48MB
8.10 flex布局项目六⼤属性之align-self		视频 .mp4	2021-10-25	127.16MB
9.1 实例运行效果及实例框架分析		视频 .mp4	2021-11-16	46.14MB
9.2 头部header设计与实现（滚动时上面固定部分）		视频 .mp4	2021-11-16	217.61MB
9.3 主要main中banner设计与实现		视频 .mp4	2021-11-16	86.26MB
9.4 主要main中导航菜单设计与实现		视频 .mp4	2021-11-16	177.87MB
9.5 如何引入第三方字体图标		视频 .mp4	2021-11-16	196.68MB
9.6 主要main中【附近拼团】设计与实现		视频 .mp4	2021-11-16	164.86MB
9.7 主要main中【猜你喜欢】设计与实现html代码		视频 .mp4	2021-11-16	137.55MB
9.8 主要main中【猜你喜欢】设计与实现CSS代码		视频 .mp4	2021-11-16	240.02MB
9.9 底部footer设计与实现		视频 .mp4	2021-11-16	208.51MB
9.10 课程总结和实现⽔平垂直居中的方法总结		视频 .mp4	2021-11-16	298.08MB
10.1 认识Javascript		视频 .mp4	2021-11-18	67.00MB
10.2 编写第⼀个JS脚本		视频 .mp4	2021-11-18	61.36MB
10.3 如何获取标签元素并进⾏操作		视频 .mp4	2021-11-18	179.55MB
10.4 js代码编写的位置		视频 .mp4	2021-11-18	135.70MB
10.5 JS输出及调试⽅式		视频 .mp4	2021-11-18	148.43MB
10.6 何为JS事件及常⻅的事件		视频 .mp4	2021-11-18	134.89MB
10.7 动⼿操作DIV的任意样式		视频 .mp4	2021-11-18	70.08MB
10.8 JS常用的数据类型		视频 .mp4	2021-11-18	94.43MB
10.9 JS的变量意义及命名规则		视频 .mp4	2021-11-18	72.78MB
10.10 JavaScript 算术运算符与赋值运算符		视频 .mp4	2021-11-18	93.78MB
10.11 数据类型之间的转换		视频 .mp4	2021-11-18	178.79MB
10.12 如何创建复杂数据类型（数组和对象）		视频 .mp4	2021-11-18	61.22MB
11.1 函数的意义及其定义与调⽤		视频 .mp4	2021-11-18	130.37MB
11.2 变量、函数及常量的命名规范		视频 .mp4	2021-11-18	25.41MB
11.3 带参函数写法与调用		视频 .mp4	2021-11-18	101.45MB
11.4 函数传参为不定参时arguments关键字应用		视频 .mp4	2021-11-18	51.77MB
11.5 变量作⽤域与闭包		视频 .mp4	2021-11-18	272.52MB
11.6 函数的返回值		视频 .mp4	2021-11-18	62.91MB
11.7 JS分支语句if及三目运算		视频 .mp4	2021-11-18	91.38MB
11.8 JS分支语句switch case		视频 .mp4	2021-11-18	145.08MB
11.9 JS循环结构for		视频 .mp4	2021-11-18	125.16MB
11.10 JS循环结构while		视频 .mp4	2021-11-18	58.66MB
11.11 流程控制中的break、continue		视频 .mp4	2021-11-18	80.17MB
11.12 JS条件判断真假情况举例		视频 .mp4	2021-11-18	51.51MB
11.13 JS逻辑运算符		视频 .mp4	2021-11-18	79.42MB
12.1 JSON是什么		视频 .mp4	2021-11-18	105.14MB
12.2 JSON的序列化和反序列化		视频 .mp4	2021-11-18	60.48MB
12.3 JSON对象的增删改查及JSON数组遍历操作		视频 .mp4	2021-11-18	67.23MB
12.4 数组元素的删除及添加操作		视频 .mp4	2021-11-18	74.70MB
12.5 数组的合并、转字符串、字符串分割及翻转操作		视频 .mp4	2021-11-18	160.68MB
12.6 数组的排序、切片、查找		视频 .mp4	2021-11-18	199.64MB
12.7 延时性与间隔性定时器的应用		视频 .mp4	2021-11-18	46.52MB
12.8 如何清除定时器		视频 .mp4	2021-11-18	78.87MB
12.9 定时器应用举例——通过延时定时器实现弹窗		视频 .mp4	2021-11-18	143.79MB
12.10 定时器应用举例——通过间隔性定时器实现滚动展示图⽚		视频 .mp4	2021-11-18	311.99MB
13.1 什么是DOM		视频 .mp4	2022-09-11	32.10MB
13.2 获取DOM子节点、父节点及判断节点类型		视频 .mp4	2022-09-11	129.02MB
13.3 获取DOM第一个、最后一个子节点及兄弟节点		视频 .mp4	2022-09-11	91.42MB
13.4 改变元素属性操作的三种⽅式		视频 .mp4	2022-09-11	97.26MB
13.5 如何创建、插⼊和删除DOM节点		视频 .mp4	2022-09-11	76.14MB
13.6 要多次改变dom节点如何操作可减少页面渲染dom次数		视频 .mp4	2022-09-11	71.55MB
13.7 如何快速获取表格dom元素		视频 .mp4	2022-09-11	106.15MB
13.8 BOM基础介绍		视频 .mp4	2022-09-11	101.34MB
13.9 BOM常⽤属性和系统对话框		视频 .mp4	2022-09-11	131.71MB
13.10 BOM常⽤事件应用		视频 .mp4	2022-09-11	88.74MB
14.1 JS的动画初步认识		视频 .mp4	2022-09-11	74.10MB
14.2 多物体动画		视频 .mp4	2022-09-11	241.99MB
14.3 针对多个物体每个物体改变不同样式的动画		视频 .mp4	2022-09-11	164.50MB
14.4 针对同一个对象按顺序改变不同的属性（链式动画）		视频 .mp4	2022-09-11	77.99MB
14.5 针对同一个对象同时改变多个样式的动画		视频 .mp4	2022-09-11	126.85MB
14.6 事件对象event和事件冒泡		视频 .mp4	2022-09-11	149.52MB
14.7 事件绑定、事件解绑及事件捕获		视频 .mp4	2022-09-11	88.36MB
14.8 键盘事件		视频 .mp4	2022-09-11	73.94MB
14.9 默认⾏为及阻⽌默认⾏为		视频 .mp4	2022-09-11	72.08MB