HTML5网页设计
HTML5网页设计
2万+ 人选课
更新日期:2026/04/03
开课时间2026/01/21 - 2026/07/20
课程周期26 周
开课状态开课中
每周学时-
课程简介
《HTML5网页设计》课程突出了项目化教学的理念,在教学过程中,充分使用了案例教学,互动式教学,分组教学等多种教学方法。在内容上安排上,以具体知识点为粒度,设计教学资源,开发制作出PPT,教学视频,练习题,教辅视频等多种资源,方便学习者自主完成学习任务。
课程大纲

在线教程

章节简介教学计划
网站规划与设计
学习资料 登录后可预览视频
页面结构与布局
梁磊
网站设计理念
梁磊
网站设计标准
梁磊
网站建设流程
梁磊
页面结构解析
页面整体结构
梁磊
HTML5简介
梁磊
HTML5新增元素的使用
梁磊
Meter与Progress的使用
梁磊
网页文本处理
页面中设置标题
温雪
在页面中使用段落
温雪
添加水平线
温雪
常见文本类标签的使用
温雪
使用特殊字符
温雪
不同图像格式的认知
温雪
图像元素的使用
温雪
使用锚点链接
温雪
CSS3语法规则
温雪
样式表的引入
梁磊
使用标签选择器
温雪
使用类选择器
温雪
使用标签指定选择器
梁磊
使用ID选择器
温雪
通配符选择器
温雪
派生选择器
梁磊
子代选择器
梁磊
兄弟选择器
梁磊
设置字体属性
温雪
设置字体大小
温雪
设置字体粗细
温雪
设置文本颜色
温雪
自定义字体的用法
温雪
综合设置字体属性
温雪
设置行高
温雪
设置字符间距
温雪
设置文本对齐方式
温雪
设置文本修饰
温雪
设置文本阴影效果
温雪
设置文本溢出
温雪
使用盒模型进行网页布局
认识盒模型
温雪
学习使用DIV标签
温雪
设置盒模型的宽度与高度
温雪
设置盒模型内部填充
温雪
设置盒模型外边距
温雪
设置盒模型的边框宽度
温雪
设置盒模型边框类型
温雪
设置盒模型边框颜色
温雪
综合使用边框属性
温雪
更改盒模型高度宽度默认设置
温雪
设置背景图
梁磊
使用百分比设置背景图的位置
梁磊
使用预设值设置背景图的位置
梁磊
使用像素值设置背景图位置
梁磊
设置背景的透明度
梁磊
设置背景颜色
梁磊
固定背景图
梁磊
设置背景图像大小
梁磊
设置背景图像重复
梁磊
设置背景图像的叠加
梁磊
设置背景图像的显示区域
梁磊
设置背景图像的裁剪区域
梁磊
设置多重背景图像
梁磊
创建表格与表单
创建简单表格
盛延刚
设置表格边框
盛延刚
设置单元格边距和间距
盛延刚
设置表格标题
盛延刚
设置单元格对齐
盛延刚
设置跨行和跨列单元格
盛延刚
常用表格属性的设置
border-collapses属性
盛延刚
border-spacing属性
盛延刚
table-layout属性
盛延刚
caption-side属性
盛延刚
empty-cells属性
盛延刚
th元素的scope属性
盛延刚
td元素的headers属性
盛延刚
创建一个表单
盛延刚
input元素的type属性
input元素的type属性-1
盛延刚
input元素的type属性-2
盛延刚
input元素的type属性-3
盛延刚
input元素的type属性-4
盛延刚
input元素的其他属性-1
盛延刚
input元素的其他属性-2
盛延刚
其他表单元素
盛延刚
列表与导航
创建无序列表
盛延刚
创建有序列表
盛延刚
创建自定义列表
盛延刚
创建嵌套的列表
盛延刚
设置项目符号样式
盛延刚
设置项目符号位置
盛延刚
设置图片项目符号
盛延刚
链接伪类的使用
梁磊
属性选择器的用法
梁磊
复杂背景设置
设置圆角边框
梁磊
属性值的复制
梁磊
设置线性渐变效果
梁磊
设置渐变角度与位置
梁磊
设置径向渐变效果
梁磊
设置重复渐变
梁磊
阴影的设置
梁磊
结构化为类选择器的用法1
梁磊
结构化为类选择器的用法2
梁磊
使用伪元素选择器
梁磊
定位技术的应用
使用浮动技术
梁磊
浮动的清除
梁磊
overflow属性的用法
梁磊
定位机制概述
盛延刚
绝对定位与静态定位
盛延刚
静态定位与相对定位
盛延刚
设置定位偏移量
盛延刚
设置display和visibility属性
盛延刚
设置层叠顺序
盛延刚
多媒体及动画效果的制作
音视频简介
梁磊
音频与视频的插入
梁磊
过渡属性的定义与使用
梁磊
变形属性之位移的用法
梁磊
变形属性值缩放的用法
梁磊
变形属性值倾斜的用法
梁磊
变形属性值旋转的用法
梁磊
实现3D旋转效果
梁磊
动画效果的定义与实现
梁磊
JavaScript基础
javascript简介
梁磊
javascript语法基础
梁磊
javascript变量
梁磊
变量命名规范
梁磊
javascript运算符1
梁磊
javascript运算符2
梁磊
Number数据类型
梁磊
string类型1
梁磊
string类型2
梁磊
日前对象--date1
梁磊
日期对象--date2
梁磊
math对象
梁磊
数组的用法
梁磊
自定义对象
梁磊
switch语句
梁磊
FOR循环
梁磊
while循环
梁磊
window对象
梁磊
DOM简介
梁磊
DOM事件
梁磊
DOM方法
梁磊
DOM修改
梁磊
函数的定义与用法
梁磊
函数的返回值
梁磊
匿名函数的定义与调用
梁磊
  • 第一章网站规划与设计

    网站规划与设计

  • 1.1页面结构与布局

    页面结构与布局

  • 1.2网站设计理念

    网站设计理念

  • 1.3 网站设计标准

    网站设计标准

  • 1.4网站建设流程

    网站建设流程

  • 第二章页面结构解析

    页面结构解析

  • 2.1页面整体结构

    页面整体结构

  • 2.2HTML5简介

    HTML5简介

  • 2.3HTML5新增元素的使用

    HTML5元素之Detail与summary

  • 2.4Meter与Progress的使用

    HTML5元素之Meter与Progress

  • 第三章网页文本处理

    网页文本编辑

  • 3.1页面中设置标题

    标题的设置

  • 3.2在页面中使用段落

    段落的使用

  • 3.3添加水平线

    添加水平线

  • 3.4常见文本类标签的使用

    文字相关标签的使用

  • 3.5使用特殊字符

    特殊字符的使用

  • 3.6不同图像格式的认知

    图像的格式

  • 3.7图像元素的使用

    图像标记img及路径

  • 3.8使用锚点链接

    锚点链接

  • 3.9CSS3语法规则

    语法规则

  • 3.10样式表的引入

    CSS样式表入门-样式表的引入

  • 3.11使用标签选择器

    CSS样式表选择器-标签选择器

  • 3.12使用类选择器

    CSS样式表选择器-类选择器

  • 3.13使用标签指定选择器

    标签指定选择器-1

  • 3.14使用ID选择器

    CSS样式表选择器-ID选择器

  • 3.15通配符选择器

    CSS样式表选择器-通配符选择器

  • 3.16派生选择器

    派生选择器

  • 3.17子代选择器

    子代选择器

  • 3.18兄弟选择器

    兄弟选择器

  • 3.19设置字体属性

    文本样式属性-font-family

  • 3.20设置字体大小

    文本样式属性-font-size

  • 3.21设置字体粗细

    文本样式属性-font-weight

  • 3.22设置文本颜色

    文本样式属性-color

  • 3.23自定义字体的用法

    文本样式属性-@font-face

  • 3.24综合设置字体属性

    文本样式属性-font综合

  • 3.25设置行高

    文本样式属性-line-height

  • 3.26设置字符间距

    文本样式属性-letter-spacing和word-spacing

  • 3.27设置文本对齐方式

    文本样式属性-text-align和text-indent

  • 3.28设置文本修饰

    文本样式属性-text-decoration和text-transform

  • 3.29设置文本阴影效果

    文本样式属性-text-shadow

  • 3.30设置文本溢出

    文本样式属性-white-space和text-overflow

  • 第四章使用盒模型进行网页布局

    认识盒模型

  • 4.1认识盒模型

    盒模型概念

  • 4.2学习使用DIV标签

    DIV标签

  • 4.3设置盒模型的宽度与高度

    盒模型属性-宽高

  • 4.4设置盒模型内部填充

    盒模型属性-padding

  • 4.5设置盒模型外边距

    盒模型属性-margin

  • 4.6设置盒模型的边框宽度

    盒模型属性-border-width

  • 4.7设置盒模型边框类型

    盒模型属性-border-style

  • 4.8设置盒模型边框颜色

    盒模型属性-border-color

  • 4.9综合使用边框属性

    盒模型属性-border

  • 4.10更改盒模型高度宽度默认设置

    盒模型属性-box-sizing

  • 4.11设置背景图

    背景图的设置

  • 4.12使用百分比设置背景图的位置

    景图像的位置设置--使用百分比

  • 4.13使用预设值设置背景图的位置

    背景图像的位置设置--使用关键字

  • 4.14使用像素值设置背景图位置

    背景图像的位置设置--使用像素值

  • 4.15设置背景的透明度

    背景属性-透明度的设置

  • 4.16设置背景颜色

    背景颜色的表示方法

  • 4.17固定背景图

    背景属性-背景图像固定

  • 4.18设置背景图像大小

    背景属性-背景图像大小

  • 4.19设置背景图像重复

    背景图像的重复

  • 4.20设置背景图像的叠加

    背景图像的叠加

  • 4.21设置背景图像的显示区域

    背景属性-背景图像的显示区域

  • 4.22设置背景图像的裁剪区域

    背景属性-背景图像的裁剪区域

  • 4.23设置多重背景图像

    背景属性-多重背景图像及背景复合属性

  • 第五章创建表格与表单

    表格与表单

  • 5.1创建简单表格

    创建简单表格

  • 5.2设置表格边框

    表格的边框:border属性(空单元格)

  • 5.3设置单元格边距和间距

    单元格边距和间距cellpadding和cellspacing属性

  • 5.4设置表格标题

    表格的标题:caption标记

  • 5.5设置单元格对齐

    跨行和跨列单元格:colspan和rowspan属性

  • 5.6设置跨行和跨列单元格

    跨行和跨列单元格:colspan和rowspan属性

  • 5.7常用表格属性的设置

    表格的样式设置

  • 5.8创建一个表单

    表格的制作

  • 5.9input元素的type属性

    input元素的type属性

  • 5.10其他表单元素

    跨行和跨列单元格:colspan和rowspan属性

  • 第六章列表与导航

    列表与导航

  • 6.1创建无序列表

    导航菜单的制作:ul和li标记的用法(无序列表)

  • 6.2创建有序列表

    导航菜单的制作:有序列表的使用

  • 6.3创建自定义列表

    导航菜单的制作:dl dt dd标记的使用(自定义列表)

  • 6.4创建嵌套的列表

    列表的嵌套

  • 6.5设置项目符号样式

    导航菜单的制作:list-style-type属性

  • 6.6设置项目符号位置

    导航菜单的制作:list-style-position属性

  • 6.7设置图片项目符号

    导航菜单的制作:list-style-image属性

  • 6.8链接伪类的使用

    链接伪类

  • 6.9属性选择器的用法

    属性选择器

  • 第七章复杂背景设置

    复杂背景设置

  • 7.1设置圆角边框

    圆角边框的设置

  • 7.2属性值的复制

    属性值的复制

  • 7.3设置线性渐变效果

    线性渐变的使用

  • 7.4设置渐变角度与位置

    渐变角度与位置的设置

  • 7.5设置径向渐变效果

    径向渐变的使用

  • 7.6设置重复渐变

    重复渐变的使用

  • 7.7阴影的设置

    阴影的设置

  • 7.8结构化为类选择器的用法1

    结构化为类选择器的用法1

  • 7.9结构化为类选择器的用法2

    结构化为类选择器的用法2

  • 7.10使用伪元素选择器

    伪元素选择器

  • 第八章定位技术的应用

    定位技术的应用

  • 8.1使用浮动技术

    本节重点讲解如何使用浮动实现元素位置的变化

  • 8.2浮动的清除

    本节重点讲授如何清楚浮动元素对后续元素的影响

  • 8.3overflow属性的用法

    本节重点讲授overflow属性的基本用法以及使用它清除浮动的用法

  • 8.4定位机制概述

    垂直子菜单的制作:三种定位机制概述(2)

  • 8.5绝对定位与静态定位

    垂直子菜单的制作:position属性之absolute和fixed(2)

  • 8.6静态定位与相对定位

    垂直子菜单的制作:position属性之static和relative(2)

  • 8.7设置定位偏移量

    垂直子菜单的制作:top、right、bottom和left属性(2)

  • 8.8设置display和visibility属性

    垂直子菜单的制作:display属性和visibility属性(2)

  • 8.9设置层叠顺序

    垂直子菜单的制作:z-index属性(2)

  • 第九章多媒体及动画效果的制作

    动画效果的制作

  • 9.1音视频简介

    音视频简介

  • 9.2音频与视频的插入

    音频与视频的插入

  • 9.3过渡属性的定义与使用

    transtiton复合属性

  • 9.4变形属性之位移的用法

    变形属性之位移的用法

  • 9.5变形属性值缩放的用法

    变形属性值缩放的用法

  • 9.6变形属性值倾斜的用法

    变形属性值倾斜的用法

  • 9.7变形属性值旋转的用法

    变形属性值旋转的用法

  • 9.8实现3D旋转效果

    3D旋转的使用

  • 9.9动画效果的定义与实现

    动画的制作

  • 第十章JavaScript基础

    网站建设基础知识

  • 10.1javascript简介

    javascript简介

  • 10.2javascript语法基础

    javascript语法基础

  • 10.3javascript变量

    javascript变量

  • 10.4变量命名规范

    变量命名规范

  • 10.5javascript运算符1

    javascript运算符

  • 10.6javascript运算符2

    运算符2

  • 10.7Number数据类型

    Number数据类型

  • 10.8string类型1

    string类型1

  • 10.9string类型2

    string类型2

  • 10.10日前对象--date1

    日前对象--date1

  • 10.11日期对象--date2

    日期对象--date2

  • 10.12math对象

    math对象

  • 10.13数组的用法

    数组常用属性与方法

  • 10.14自定义对象

    自定义对象

  • 10.15switch语句

    switch语句

  • 10.16FOR循环

    FOR循环

  • 10.17while循环

    while循环

  • 10.18window对象

    window对象

  • 10.19DOM简介

    DOM简介

  • 10.20DOM事件

    DOM事件

  • 10.21DOM方法

    DOM方法

  • 10.22DOM修改

    DOM修改

  • 10.23函数的定义与用法

    函数的定义与用法

  • 10.24函数的返回值

    函数的返回值

  • 10.25匿名函数的定义与调用

    匿名函数的定义与调用

  • 开始学习
  • 第一章  作业测试
    第一章 网站规划与设计

    1.1 页面结构与布局

    1.2 网站设计理念

    1.3 网站设计标准

    1.4 网站建设流程

    视频数4
  • 第二章  作业测试
    第二章 页面结构解析

    2.1 页面整体结构

    2.2 HTML5简介

    2.3 HTML5新增元素的使用

    2.4 Meter与Progress的使用

    视频数4
  • 第三章  作业测试
    第三章 网页文本处理

    3.1 页面中设置标题

    3.2 在页面中使用段落

    3.3 添加水平线

    3.4 常见文本类标签的使用

    3.5 使用特殊字符

    3.6 不同图像格式的认知

    3.7 图像元素的使用

    3.8 使用锚点链接

    3.9 CSS3语法规则

    3.10 样式表的引入

    3.11 使用标签选择器

    3.12 使用类选择器

    3.13 使用标签指定选择器

    3.14 使用ID选择器

    3.15 通配符选择器

    3.16 派生选择器

    3.17 子代选择器

    3.18 兄弟选择器

    3.19 设置字体属性

    3.20 设置字体大小

    3.21 设置字体粗细

    3.22 设置文本颜色

    3.23 自定义字体的用法

    3.24 综合设置字体属性

    3.25 设置行高

    3.26 设置字符间距

    3.27 设置文本对齐方式

    3.28 设置文本修饰

    3.29 设置文本阴影效果

    3.30 设置文本溢出

    视频数30
  • 第四章  作业测试
    第四章 使用盒模型进行网页布局

    4.1 认识盒模型

    4.2 学习使用DIV标签

    4.3 设置盒模型的宽度与高度

    4.4 设置盒模型内部填充

    4.5 设置盒模型外边距

    4.6 设置盒模型的边框宽度

    4.7 设置盒模型边框类型

    4.8 设置盒模型边框颜色

    4.9 综合使用边框属性

    4.10 更改盒模型高度宽度默认设置

    4.11 设置背景图

    4.12 使用百分比设置背景图的位置

    4.13 使用预设值设置背景图的位置

    4.14 使用像素值设置背景图位置

    4.15 设置背景的透明度

    4.16 设置背景颜色

    4.17 固定背景图

    4.18 设置背景图像大小

    4.19 设置背景图像重复

    4.20 设置背景图像的叠加

    4.21 设置背景图像的显示区域

    4.22 设置背景图像的裁剪区域

    4.23 设置多重背景图像

    视频数23
  • 第五章  作业测试
    第五章 创建表格与表单

    5.1 创建简单表格

    5.2 设置表格边框

    5.3 设置单元格边距和间距

    5.4 设置表格标题

    5.5 设置单元格对齐

    5.6 设置跨行和跨列单元格

    5.7 常用表格属性的设置

    5.8 创建一个表单

    5.9 input元素的type属性

    5.10 其他表单元素

    视频数21
  • 第六章  作业测试
    第六章 列表与导航

    6.1 创建无序列表

    6.2 创建有序列表

    6.3 创建自定义列表

    6.4 创建嵌套的列表

    6.5 设置项目符号样式

    6.6 设置项目符号位置

    6.7 设置图片项目符号

    6.8 链接伪类的使用

    6.9 属性选择器的用法

    视频数9
  • 第七章  作业测试
    第七章 复杂背景设置

    7.1 设置圆角边框

    7.2 属性值的复制

    7.3 设置线性渐变效果

    7.4 设置渐变角度与位置

    7.5 设置径向渐变效果

    7.6 设置重复渐变

    7.7 阴影的设置

    7.8 结构化为类选择器的用法1

    7.9 结构化为类选择器的用法2

    7.10 使用伪元素选择器

    视频数10
  • 第八章  作业测试
    第八章 定位技术的应用

    8.1 使用浮动技术

    8.2 浮动的清除

    8.3 overflow属性的用法

    8.4 定位机制概述

    8.5 绝对定位与静态定位

    8.6 静态定位与相对定位

    8.7 设置定位偏移量

    8.8 设置display和visibility属性

    8.9 设置层叠顺序

    视频数9
  • 第九章  作业测试
    第九章 多媒体及动画效果的制作

    9.1 音视频简介

    9.2 音频与视频的插入

    9.3 过渡属性的定义与使用

    9.4 变形属性之位移的用法

    9.5 变形属性值缩放的用法

    9.6 变形属性值倾斜的用法

    9.7 变形属性值旋转的用法

    9.8 实现3D旋转效果

    9.9 动画效果的定义与实现

    视频数9
  • 第十章  作业测试
    第十章 JavaScript基础

    10.1 javascript简介

    10.2 javascript语法基础

    10.3 javascript变量

    10.4 变量命名规范

    10.5 javascript运算符1

    10.6 javascript运算符2

    10.7 Number数据类型

    10.8 string类型1

    10.9 string类型2

    10.10 日前对象--date1

    10.11 日期对象--date2

    10.12 math对象

    10.13 数组的用法

    10.14 自定义对象

    10.15 switch语句

    10.16 FOR循环

    10.17 while循环

    10.18 window对象

    10.19 DOM简介

    10.20 DOM事件

    10.21 DOM方法

    10.22 DOM修改

    10.23 函数的定义与用法

    10.24 函数的返回值

    10.25 匿名函数的定义与调用

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