**【老夏学院】WEB前端系列课程(1)之HTML+CSS 导读**

欢迎来到Web前端开发的奇妙世界。作为互联网技术的基石,HTML与CSS是每一位前端开发者必须掌握的第一块拼图。本课程由经验丰富的老夏老师主讲,专为零基础学员设计,旨在帮助你系统性地建立对网页结构的认知,并熟练掌握页面样式的修饰技巧。无论你是准备转行进入IT行业,还是希望完善现有技能树,这堂课都将是您坚实的第一步。

课程开篇,老夏老师首先为您详细解读了学习路径与核心目标,帮助您快速定位自身起点,明确学习方向。随后,课程正式进入HTML基础领域。我们从“网页的基本组成部分”入手,理解文档类型声明的重要性,并深入讲解HTML字符实体与颜色表示法,这些看似细微的知识点,实则是构建规范代码的基础。在HTML标签章节,课程进行了全方位、高密度的拆解:从最核心的`<html>`和`<body>`标签,到区分行内标签与块级标签的关键概念;从标题、段落等文本格式化标签,到图片嵌入、超链接跳转及表格布局;再到表单交互与多媒体内容(音频、视频、内嵌框架)的实现,每一类标签均配有详细的语法解析与实战案例。特别值得一提的是,课程还涵盖了HTML5引入的语义化标签(如`<header>`, `<nav>`, `<footer>`等),这将有助于您编写出结构更清晰、对搜索引擎更友好的现代网页。

进入CSS章节后,我们将视角从“骨架”转向“皮肤”。课程首先简要介绍CSS的作用,随即深入剖析其基本语法结构。选择器部分是CSS的核心灵魂,本课通过多个子章节,逐一详解元素选择器、类选择器、ID选择器、分组选择器、派生选择器以及伪类和伪元素选择器的使用场景与优先级规则。掌握这些选择器,您将能够精准地定位页面中的任何元素,并为其施加千变万化的样式。

整门课程逻辑严密,循序渐进,注重理论与实操的结合。老夏老师语言通俗易懂,讲解深入浅出,即使完全没有编程基础的同学也能跟得上节奏。建议学习时配合代码编辑器亲手敲写每一行代码,避免“眼高手低”。完成本课程后,您将具备独立搭建静态网页的能力,为后续学习JavaScript动态效果及响应式布局打下坚实基础。让我们一同开启这段编码之旅,用HTML+CSS构建属于您的第一个Web页面吧!

课程目录

课程目录56 集
  • 1-1 [课程介绍] 【必看】课程介绍 (08:05).mp4
  • 2-1 [HTML简介] HTML简介 (01:55).mp4
  • 3-1 [网页的基本组成部分] 网页的基本组成部分 (09:25).mp4
  • 4-1 [HTML字符实体] HTML字符实体 (05:31).mp4
  • 5-1 [HTML颜色] HTML颜色 (05:16).mp4
  • 6-1 [HTML 标签] html 和 body 标签 (03:49).mp4
  • 6-2 [HTML 标签] 行内标签和块标签 (08:54).mp4
  • 6-3 [HTML 标签] 格式标签 (09:45).mp4
  • 6-4 [HTML 标签] 文本标签 (07:12).mp4
  • 6-5 [HTML 标签] 图片标签 (04:37).mp4
  • 6-6 [HTML 标签] 超链接标签 (04:12).mp4
  • 6-7 [HTML 标签] 表格标签 (13:32).mp4
  • 6-8 [HTML 标签] 表单标签 (27:11).mp4
  • 6-9 [HTML 标签] 内嵌框架标签 (02:56).mp4
  • 6-10 [HTML 标签] 框架标签 (11:53).mp4
  • 6-11 [HTML 标签] HTML5 语义标签 (06:51).mp4
  • 6-12 [HTML 标签] 音频标签 (03:04).mp4
  • 6-13 [HTML 标签] 视频标签 (04:22).mp4
  • 6-14 [HTML 标签] embed 标签 (02:27).mp4
  • 7-1 [CSS简介] CSS简介 (01:31).mp4
  • 8-1 [CSS基本语法] CSS基本语法 (06:10).mp4
  • 9-1 [CSS 选择器] 元素选择器 (02:32).mp4
  • 9-2 [CSS 选择器] 类选择器 (06:38).mp4
  • 9-3 [CSS 选择器] id 选择器 (02:08).mp4
  • 9-4 [CSS 选择器] 分组选择器 (03:18).mp4
  • 9-5 [CSS 选择器] 派生选择器 (05:26).mp4
  • 9-6 [CSS 选择器] 伪类选择器 (09:41).mp4
  • 9-7 [CSS 选择器] 伪元素选择器 (04:50).mp4
  • 9-8 [CSS 选择器] 属性选择器 (05:48).mp4
  • 9-9 [CSS 选择器] CSS 优先级 (05:57).mp4
  • 10-1 [CSS 样式] 字体 (02:46).mp4
  • 10-2 [CSS 样式] 文本 (10:19).mp4
  • 10-3 [CSS 样式] 背景 (10:28).mp4
  • 10-4 [CSS 样式] 表格 (07:10).mp4
  • 10-5 [CSS 样式] 尺寸 (03:35).mp4
  • 10-6 [CSS 样式] 文本框 (03:30).mp4
  • 10-7 [CSS 样式] 列表 (02:58).mp4
  • 10-8 [CSS 样式] 轮廓 (03:00).mp4
  • 10-9 [CSS 样式] 鼠标 (03:14).mp4
  • 10-10 [CSS 样式] display 和 visibility (08:21).mp4
  • 10-11 [CSS 样式] overflow (03:07).mp4
  • 11-1 [CSS 框模型] CSS 框模型概述 (12:32).mp4
  • 11-2 [CSS 框模型] 内边距 (05:52).mp4
  • 11-3 [CSS 框模型] 边框 (05:06).mp4
  • 11-4 [CSS 框模型] 外边距 (03:19).mp4
  • 11-5 [CSS 框模型] 外边距合并 (08:17).mp4
  • 12-1 [CSS 定位] CSS 定位概述 (06:22).mp4
  • 12-2 [CSS 定位] 相对定位和很定位 (15:38).mp4
  • 12-3 [CSS 定位] 浮动 (19:14).mp4
  • 13-1 [CSS3 样式] CSS3 边框 (06:18).mp4
  • 13-2 [CSS3 样式] CSS3 背景 (05:08).mp4
  • 13-3 [CSS3 样式] CSS3 文本效果 (02:18).mp4
  • 13-4 [CSS3 样式] CSS3 字体 (03:42).mp4
  • 13-5 [CSS3 样式] CSS3 转换 (10:51).mp4
  • 13-6 [CSS3 样式] CSS3 过渡 (04:22).mp4
  • 13-7 [CSS3 样式] CSS3 动画 (08:12).mp4