web前端技术·基础篇
web前端技术·基础篇
1万+ 人选课
更新日期:2026/04/10
开课平台智慧树
开课高校吉林电子信息职业技术学院
开课教师罗大伟刘金明闫淼齐宁白玉羚刘志宝黄超
学科专业
开课时间2026/01/21 - 2026/07/20
课程周期26 周
开课状态开课中
每周学时-
课程简介
本课程由吉林电子信息职业技术学院“吉林省特色高水平高职专业群”——软件技术专业群的教师精心建设而成。课程融汇HTML、CSS、JavaScript、HTML5、CSS3、jQuery知识与技术体系,力求形成技能实践合力。课程对接1+X证书Web前端开发职业技能等级标准,采用任务驱动、案例教学的方式,聚焦Web前端用户体验升级,切实提升学生Web前端开发职业核心能力与素养,以求达成“持续输出Web前端开发领域高素质技术技能人才,持续助力与服务区域经济社会发展”的人才培养功效。
课程大纲

在线教程

章节简介教学计划
Web前端技术概述
学习资料 登录后可预览视频
初识Web技术
罗大伟
初识HTML结构与开发基础
罗大伟
HTML全局属性与常用元素
学习资料
应用HTML全局属性实现效果
齐宁
应用HTML基本元素
齐宁
应用HTML表单页面
齐宁
CSS选择器与常用属性
学习资料
应用CSS样式单实现元素效果
闫淼
应用CSS选择器实现元素效果
闫淼
应用CSS实现背景属性设置
闫淼
应用CSS实现字体属性设置
闫淼
应用CSS实现文本属性设置
闫淼
应用CSS实现尺寸属性设置
闫淼
应用CSS实现列表属性设置
闫淼
应用CSS实现表格属性设置
闫淼
CSS盒模型与布局属性
学习资料
应用CSS实现内边距、外边距属性设置
闫淼
应用CSS实现边框、轮廓属性设置
闫淼
应用CSS实现浮动属性设置
闫淼
应用CSS实现定位属性设置
闫淼
JavaScript基础
学习资料
初探JavaScript
刘志宝
编写JavaScript第一个实例
刘志宝
明晰JavaScript词法结构
刘志宝
应用JavaScript运算符
刘志宝
应用JavaScript数据类型
刘志宝
应用JavaScript选择结构
刘志宝
应用JavaScript循环结构
刘志宝
应用JavaScript函数
刘志宝
应用JavaScript数组
刘志宝
JavaScript对象与事件处理
学习资料
应用JavaScript对象
刘志宝
应用JavaScript事件
刘志宝
应用JavaScript操作DOM
刘志宝
HTML5新特性
学习资料
应用HTML5文档结构元素和文本格式化元素设计页面
刘金明
应用HTML5页面增强元素和多媒体元素设计页面
刘金明
应用HTML5通用属性实现效果
刘金明
应用HTML5表单input元素功能类型及output元素实现效果
刘金明
应用HTML5表单元素属性实现效果
刘金明
CSS3新特性
学习资料
应用CSS3兄弟选择器和属性选择器实现效果
刘金明
应用CSS3伪类选择器和伪元素选择器实现效果
刘金明
应用CSS3背景属性和字体文本属性实现效果
刘金明
应用CSS3盒模型属性和多列属性实现效果
刘金明
应用CSS3变形动画属性实现效果
刘金明
jQuery基础
学习资料
下载和引用jQuery库
白玉羚
应用文档就绪函数
白玉羚
应用基本选择器获取操作对象
白玉羚
应用层级选择器获取操作对象
白玉羚
应用过滤选择器获取操作对象
白玉羚
jQuery中的DOM操作
学习资料
应用jQuery操作元素样式
白玉羚
应用jQuery操作标签内容
白玉羚
应用jQuery操作标签属性
白玉羚
应用jQuery操作元素DOM节点
白玉羚
jQuery事件
学习资料
应用鼠标事件和键盘事件实现网页特效
白玉羚
应用jQuery操作表单
白玉羚
jQuery动画
学习资料
应用jQuery实现隐藏和显示元素
白玉羚
应用jQuery实现淡入、淡出效果
白玉羚
应用jQuery实现元素的动画滑动效果
白玉羚
  • 第一章Web前端技术概述

    Web,也称万维网,是一种网络使用环境的总称。它是Internet上哪些支持WWW服务和HTTP协议的服务器集合。本章简单介绍了Internet的历史和Web的诞生,重点介绍了Web的相关概念,同时,还明确了Web前端开发应掌握的基础内容。

  • 1.1初识Web技术

    介绍Web的由来以及其与Internet之间的关系,简单介绍Web的相关概念为后续内容学习打下基础。

  • 1.2初识HTML结构与开发基础

    主要介绍了HTML的发展历史与HTML的基本结构,以及开发HTML所用的工具。

  • 第二章HTML全局属性与常用元素

    HTML是构成网页的基础部分,重点介绍了HTML4的元素及其用法,以及HTML的全局事件属性,为后续学习CSS和JavaScript打下坚实基础。

  • 2.1应用HTML全局属性实现效果

    介绍HTML4中的8个全局标准属性,简单介绍并演示窗口事件、表达事件、键盘事件、鼠标事件的案例效果。

  • 2.2应用HTML基本元素

    介绍HTML的主体元素,重点介绍了HTML的标题元素、段落元素、注释元素、超链接元素的基本属性并演示相应的运行效果。

  • 2.3应用HTML表单页面

    介绍HTML中的无序列表、有序列表、自定义列表,重点介绍了表格元素的属性和表达元素的属性以及框架元素的简单运用。

  • 第三章CSS选择器与常用属性

    应用CSS内联样式、内部样式、外部样式,通过元素选择器、id选择器、类选择器实现元素背景、字体、文本、尺寸样式的设置及实现、以及列表、表格样式的设置及实现。

  • 3.1应用CSS样式单实现元素效果

    介绍CSS作用,CSS发展历程,CSS内联样式、内部样式、外部样式的创建及使用。

  • 3.2应用CSS选择器实现元素效果

    介绍 CSS基本语法实现,元素选择器、id选择器、类选择器的设置及使用。

  • 3.3应用CSS实现背景属性设置

    介绍CSS背景色属性、背景图像属性、重复背景图像属性、背景图像的起始位置属性、背景关联属性、背景简写属性的使用,以及各属性常用取值效果实现。

  • 3.4应用CSS实现字体属性设置

    介绍CSS字体属性、字体尺寸属性、文本的粗细属性、字体风格属性、字体简写的使用,以及各属性常用取值效果实现。

  • 3.5应用CSS实现文本属性设置

    介绍 CSS文本颜色属性、文本对齐属性、文本修饰属性、行间距属性、文本首行缩进属性、文本字母大小写控制属性的使用,以及各属性常用取值效果实现。

  • 3.6应用CSS实现尺寸属性设置

    介绍CSS宽度属性、高度属性、最大宽度/高度属性、最小宽度/高度属性的使用,以及各属性常用取值效果实现。

  • 3.7应用CSS实现列表属性设置

    介绍 CSS列表标记类型属性、列表标记图像属性、列表标记位置属性、列表简写属性的使用,以及各属性常用取值效果实现。

  • 3.8应用CSS实现表格属性设置

    介绍CSS表格边框合并属性、表格单元格间距属性、表格标题位置属性、表格空单元格属性、表格算法规则属性的使用,以及各属性常用取值效果实现。

  • 第四章CSS盒模型与布局属性

    理解CSS盒模型,实现元素内边距、外边距、边框、轮廓样式的设置及实现、以及应用浮动、定位实现页面元素特定效果。

  • 4.1应用CSS实现内边距、外边距属性设置

    介绍 CSS盒模型,CSS内边距及其简写属性,CSS外边距及其简写属性的使用,以及各属性常用取值效果实现。

  • 4.2应用CSS实现边框、轮廓属性设置

    介绍CSS边框及其简写属性,CSS轮廓及其简写属性的使用,以及各属性常用取值效果实现。

  • 4.3应用CSS实现浮动属性设置

    介绍CSS浮动属性、清除浮动属性的使用,以及元素设置浮动、清除浮动的效果实现。

  • 4.4应用CSS实现定位属性设置

    介绍CSS定位类型属性、定位位置属性、堆叠顺序属性的使用,以及元素相对定位、绝对定位、固定定位的效果实现。

  • 第五章JavaScript基础

    JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言,可插入 HTML 页面的编程代码,插入 HTML 页面后,可由所有的现代浏览器执行。本章介绍JavaScript的基础,包括词法结构、运算符、数据类型、三种控制结构、函数和数组等内容。

  • 5.1初探JavaScript

    介绍JavaScript 的基本概念、特点、语言基础,为后续学习打下基础。

  • 5.2编写JavaScript第一个实例

    通过实例开发演示,介绍在HTML页面内容如何应用JavaScript并调用JS函数,以及在JS文件中定义JavaScript,在HTML页面中如何引用JavaScript,并调用JS函数。

  • 5.3明晰JavaScript词法结构

    主要介绍标识符的概念,以及命名规则;常量的表示方式;变量的定义与用法。

  • 5.4应用JavaScript运算符

    介绍JavaScript中运算符概念,以及算数和赋值运算符、字符串运算符、比较运算符、逻辑运算符、运算符优先级等的用法。

  • 5.5应用JavaScript数据类型

    介绍JavaScript数据类型的概念,通过实例讲解JavaScript数据类型的用法。

  • 5.6应用JavaScript选择结构

    介绍JavaScript的三种控制结构,重点介绍选择结构的特点与应用场景。介绍if…else结构、switch结构的格式、执行特点。应用实例讲解if结构、switch结构的用法。

  • 5.7应用JavaScript循环结构

    重点介绍循环结构的特点与应用场景。介绍for结构、while结构、do…while结构的格式、执行特点。应用实例讲解for结构、while结构、do…while结构的用法。

  • 5.8应用JavaScript函数

    介绍JavaScript函数的概念、作用,以及通过实例讲解如何定义、调用函数。

  • 5.9应用JavaScript数组

    介绍JavaScript数组的概念、存储结构、作用,以及通过实例讲解数组的用法。

  • 第六章JavaScript对象与事件处理

    JavaScript 是一种轻量级的编程语言,可插入 HTML 页面的编程代码,插入 HTML 页面后,可由所有的现代浏览器执行。本章介绍JavaScript的进阶应用技术,包括JavaScript对象、JavaScript事件、应用JavaScript操作DOM等内容。

  • 6.1应用JavaScript对象

    介绍JavaScript对象的含义,以及通过实例讲解JavaScript对象的应用方法。

  • 6.2应用JavaScript事件

    介绍JavaScript事件的概念、作用,以及通过实例讲解事件的应用方法。

  • 6.3应用JavaScript操作DOM

    介绍DOM、 DOM HTML节点树的概念,以及通过实例讲解应用JavaScript 对DOM进行操作的方法。

  • 第七章HTML5新特性

    HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式,是互联网的核心技术之一。在保留和废弃原有部分元素的基础上,HTML5中增加了一些元素和属性,调整和修改了原有HTML标准定义的功能,实现了标准化。本章介绍HTML5的新特性,包括HTML5新增的文档结构元素、文本格式化元素、页面增强元素、多媒体元素、HTML5的通用属性,HTML5表单input元素新增的功能类型与新增的output元素,以及HTML5表单元素新增的属性。

  • 7.1应用HTML5文档结构元素和文本格式化元素设计页面

    介绍HTML5新增的文档结构元素和文本格式化元素,重点介绍这两种新增元素的使用方法。

  • 7.2应用HTML5页面增强元素和多媒体元素设计页面

    介绍HTML5新增的页面增强元素和多媒体元素,重点介绍这两种元素的使用方法。

  • 7.3应用HTML5通用属性实现效果

    介绍HTML5的通用属性,重点介绍这些属性的使用方法。

  • 7.4应用HTML5表单input元素功能类型及output元素实现效果

    介绍HTML5表单input元素新增功能类型,以及新增的output元素,重点介绍新增功能类型和新增元素的使用方法。

  • 7.5应用HTML5表单元素属性实现效果

    介绍HTML5表单元素新增的属性,重点介绍这些新增属性的使用方法。

  • 第八章CSS3新特性

    CSS3是最新的CSS标准,它能够使网站变得非常炫酷,可以为用户带来更好的体验。本章介绍CSS3的新特性,包括CSS3的兄弟选择器、属性选择器、伪类选择器、伪元素选择器,以及CSS3新增的背景属性、字体文本属性、盒模型属性、多列属性和变形动画属性。

  • 8.1应用CSS3兄弟选择器和属性选择器实现效果

    介绍CSS3的兄弟选择器和属性选择器,重点介绍这两种选择器的使用方法。

  • 8.2应用CSS3伪类选择器和伪元素选择器实现效果

    介绍CSS3的伪类选择器和伪元素选择器,重点介绍这两种选择器的使用方法。

  • 8.3应用CSS3背景属性和字体文本属性实现效果

    介绍CSS3新增的背景属性和字体文本属性,重点介绍这两种属性的使用方法。

  • 8.4应用CSS3盒模型属性和多列属性实现效果

    介绍CSS3新增的盒模型属性和多列属性,重点介绍这两种属性的使用方法。

  • 8.5应用CSS3变形动画属性实现效果

    介绍CSS3的变形动画属性,重点介绍这些属性的使用方法。

  • 第九章jQuery基础

    本章介绍了jQuery脚本库的概念、jQuery脚本库的下载和引用方法以及如何应用jQuery的选择器获取操作对象,举例讲解了几种基本选择器、层级选择器和过滤选择器的语法规则和应用方法。

  • 9.1下载和引用jQuery库

    jQuery库的概念、功能和优势, jQuery的下载方法以及如何使用jQuery库。

  • 9.2应用文档就绪函数

    jQuery 基础语法说明、文档就绪函数以及文档就绪函数的应用方法。

  • 9.3应用基本选择器获取操作对象

    如何应用id选择器、 类选择器、元素选择器和*选择器获取操作对象。

  • 9.4应用层级选择器获取操作对象

    应用层级选择器获取操作对象,包括子元素选择器、祖先后代选择器和兄弟选择器。

  • 9.5应用过滤选择器获取操作对象

    应用过滤选择器获取操作对象,包括基本过滤器、内容过滤器和属性过滤器。

  • 第十章jQuery中的DOM操作

    本章介绍了jQuery中的DOM操作方法,包括元素样式操作、标签内容操作、标签属性操作、DOM节点操作。

  • 10.1应用jQuery操作元素样式

    操作元素样式的方法,包括操作样式属性、操作元素类和操作元素尺寸。

  • 10.2应用jQuery操作标签内容

    获取和设置元素HTML内容和文本、获取和设置表单的值。

  • 10.3应用jQuery操作标签属性

    获取和设置元素属性值、删除元素属性,以及如何通过操作元素属性实现改变元素样式、选择状态和可编辑状态。

  • 10.4应用jQuery操作元素DOM节点

    向HTML元素添加内容、删除和插入HTML元素,替换HTML元素。

  • 第十一章jQuery事件

    本章介绍了应用jQuery常用事件实现网页特效的方法,包括鼠标事件、键盘事件以及表单事件。

  • 11.1应用鼠标事件和键盘事件实现网页特效

    单击双击事件、鼠标进入和移出事件以及键盘按键按下和抬起事件。

  • 11.2应用jQuery操作表单

    焦点事件、元素的值改变事件、选择事件和表单提交事件。

  • 第十二章jQuery动画

    本章介绍了应用jQuery事件实现动画效果的方法。包括实现元素的显示和隐藏、实现元素的淡入和淡出、实现元素的滑动显示和隐藏效果。

  • 12.1应用jQuery实现隐藏和显示元素

    用show方法显示元素、用hide方法隐藏元素、用toggle方法切换元素的隐藏和显示。

  • 12.2应用jQuery实现淡入、淡出效果

    用fadeIn和fadeOut方法实现元素的淡入和淡出效果、用fadeTo方法调节元素的透明度、用fadeToggle方法切换元素的淡入和淡出效果。

  • 12.3应用jQuery实现元素的动画滑动效果

    slideDown( )方法和slideUp ( )方法实现以滑动方式显示和隐藏被选元素、slideToggle( )方法实现切换滑动隐藏和显示效果。

  • 开始学习
  • 第一章  作业测试
    第一章 Web前端技术概述

    1.1 初识Web技术

    1.2 初识HTML结构与开发基础

    视频数2
  • 第二章  作业测试
    第二章 HTML全局属性与常用元素

    2.1 应用HTML全局属性实现效果

    2.2 应用HTML基本元素

    2.3 应用HTML表单页面

    视频数3
  • 第三章  作业测试
    第三章 CSS选择器与常用属性

    3.1 应用CSS样式单实现元素效果

    3.2 应用CSS选择器实现元素效果

    3.3 应用CSS实现背景属性设置

    3.4 应用CSS实现字体属性设置

    3.5 应用CSS实现文本属性设置

    3.6 应用CSS实现尺寸属性设置

    3.7 应用CSS实现列表属性设置

    3.8 应用CSS实现表格属性设置

    视频数8
  • 第四章  作业测试
    第四章 CSS盒模型与布局属性

    4.1 应用CSS实现内边距、外边距属性设置

    4.2 应用CSS实现边框、轮廓属性设置

    4.3 应用CSS实现浮动属性设置

    4.4 应用CSS实现定位属性设置

    视频数4
  • 第五章  作业测试
    第五章 JavaScript基础

    5.1 初探JavaScript

    5.2 编写JavaScript第一个实例

    5.3 明晰JavaScript词法结构

    5.4 应用JavaScript运算符

    5.5 应用JavaScript数据类型

    5.6 应用JavaScript选择结构

    5.7 应用JavaScript循环结构

    5.8 应用JavaScript函数

    5.9 应用JavaScript数组

    视频数9
  • 第六章  作业测试
    第六章 JavaScript对象与事件处理

    6.1 应用JavaScript对象

    6.2 应用JavaScript事件

    6.3 应用JavaScript操作DOM

    视频数3
  • 第七章  作业测试
    第七章 HTML5新特性

    7.1 应用HTML5文档结构元素和文本格式化元素设计页面

    7.2 应用HTML5页面增强元素和多媒体元素设计页面

    7.3 应用HTML5通用属性实现效果

    7.4 应用HTML5表单input元素功能类型及output元素实现效果

    7.5 应用HTML5表单元素属性实现效果

    视频数5
  • 第八章  作业测试
    第八章 CSS3新特性

    8.1 应用CSS3兄弟选择器和属性选择器实现效果

    8.2 应用CSS3伪类选择器和伪元素选择器实现效果

    8.3 应用CSS3背景属性和字体文本属性实现效果

    8.4 应用CSS3盒模型属性和多列属性实现效果

    8.5 应用CSS3变形动画属性实现效果

    视频数5
  • 第九章  作业测试
    第九章 jQuery基础

    9.1 下载和引用jQuery库

    9.2 应用文档就绪函数

    9.3 应用基本选择器获取操作对象

    9.4 应用层级选择器获取操作对象

    9.5 应用过滤选择器获取操作对象

    视频数5
  • 第十章  作业测试
    第十章 jQuery中的DOM操作

    10.1 应用jQuery操作元素样式

    10.2 应用jQuery操作标签内容

    10.3 应用jQuery操作标签属性

    10.4 应用jQuery操作元素DOM节点

    视频数4
  • 第十一章  作业测试
    第十一章 jQuery事件

    11.1 应用鼠标事件和键盘事件实现网页特效

    11.2 应用jQuery操作表单

    视频数2
  • 第十二章  作业测试
    第十二章 jQuery动画

    12.1 应用jQuery实现隐藏和显示元素

    12.2 应用jQuery实现淡入、淡出效果

    12.3 应用jQuery实现元素的动画滑动效果

    视频数3
  • 期末考试
App 下载
关注我们