课程内容
26
82
259
18
课程目录
要想学习Web开发并打造属于自己的酷炫网站，第一步就是搭建好学习环境。工欲善其事，必先利其器！我们将从安装一个合适的代码编辑器开始，这工具将成为你学习HTML5和CSS3的“武器”，助你轻松开启Web开发的奇妙旅程！
12:28
这一章将带你正式迈入网页开发的大门！我们将从编写你的第一个网页程序开始，揭开Web开发的神秘面纱，并了解整个学习系列的有趣玩法。你将探索功能强大的meta元素，学会为网页添加风格多样的样式，掌握link和base元素的奇妙用法，甚至还能体验到JavaScript带来的交互魅力！
2.1第一个程序
13:16
2.2这个系列我们打算怎么玩？
17:08
2.3多才多艺的meta元素
10:30
2.4为网页添加样式
18:40
2.5link和base元素
12:09
20:06
这一章将教你如何用ul和ol创建清晰整洁的有序与无序列表，还会学习列表的嵌套技巧，以及“定义列表”的独特用法。学会这些，你就能轻松组织网页内容，让信息表达更加清晰明了！
13:45
在这一章，你将学习如何用table创建表格，并为其添加标题（caption）和分组（thead、tbody、tfoot）。还会探索表格的背景色设置，以及col、colgroup等列样式控制，甚至掌握colspan、rowspan让表格跨行跨列的技巧。结合盒子模型，让你的表格不仅实用，还更加美观！
08:43
本章将带你掌握表单的基础与高级用法。从form、input、button的基本结构到结合XAMPP搭建本地环境，还会深入探索autocomplete、target、value、autofocus、disable、readonly等属性的强大功能。最后，通过label、fieldset、legend的语义化设计，配合select、option、optgroup打造简洁实用的下拉菜单，让你的网页更具交互性与专业感！
13:11
这一章将全面解锁input元素的强大功能！从按钮、单选框、多选框、时间和日期的基础应用，到搜索框、颜色选择框、图像按钮、隐藏字段的特殊用法。你还会学习如何实现文件上传，以及处理数字类型、滚动条、邮箱、电话、网址等输入形式。最后，掌握placeholder、required、size、maxlength和list/datalist的灵活使用，打造功能强大又友好的表单体验！
15:04
11:07
7.3上传文件
09:40
14:25
在本章节中，我们将探索两种重要的表单元素：output元素（用于显示计算结果或动态内容，适合与JavaScript结合，打造实时反馈效果）和textarea元素（为用户提供多行文本输入的能力，适用于留言板、评论区等场景）。学会它们，你能让表单更加灵活多样，满足更多复杂的交互需求！
17:49
在这一章，你将学习如何使用div元素进行网页布局，同时深入理解语义化布局的重要性。掌握这部分内容后，你将能够创建结构良好、语义清晰且易于维护的网页布局！
9.1div和语义化布局
10:31
本章将教你如何通过嵌入多种内容，让网页焕发活力！你将学习用section和article构建结构清晰的页面，使用video和audio嵌入多媒体内容，借助iframe引入外部资源，甚至用progress和meter展示动态效果。掌握这些技能，你将能轻松打造一个生动、交互性强的网页！
09:44
10.3video元素
12:40
13:45
11:51
网页只有HTML结构？那可太单调了！本章将带你入门CSS，让你的网站从“黑白模式”秒变炫酷页面！你将学习CSS的基础语法，掌握内联样式、内部样式表和外部样式表的不同用法，灵活控制网页的颜色、字体、布局等视觉效果。想让你的网页更美观、更有个性？快来开启CSS之旅，让你的网页焕然一新！✨🚀
09:53
11.2CSS基础语法及注意事项
12:23
本章将带你学习伪元素选择器，让网页细节更加出彩！你将学会 ::first-line 和 ::first-letter 美化文本，使用 ::before 和 ::after 添加装饰，还能用 ::selection 自定义选中文字的样式。掌握这些技巧，让你的网页更有设计感！
13.1伪元素选择器
09:45
本章将带你学习动态伪类选择器和UI伪类选择器，让按钮悬停变色、输入框聚焦高亮等效果轻松实现。掌握这些技巧，让你的网页更智能、更有交互感！
14.1动态伪类选择器
16:46
14.2UI伪类选择器（上）
08:23
14.3UI伪类选择器（下）
07:07
想选中第一个、最后一个，甚至是奇偶数行的元素？还是想更高效地筛选特定内容？本章将带你掌握结构伪类选择器，让你精准定位网页元素。此外，你还将学会区分伪类和伪元素选择器，彻底搞懂它们的区别。
15.1结构伪类选择器
09:31
14:33
本章将带你学习属性选择器，让你根据元素的属性值精准匹配目标，无需额外的class或id！你将掌握精确匹配和模糊匹配的技巧，让CSS代码更简洁、更灵活。
16.1属性选择器
06:01
本章将带你彻底搞懂盒子模型，掌握边框、内边距、外边距的精确控制，还能学会水平居中、外边距塌陷、元素尺寸设置、溢出处理等核心技巧。此外，你还将学习圆角边框、图像边框、轮廓、阴影等高级样式，让你的网页更美观、更有层次感！
18.1边框样式
09:52
18.2圆角和图像边框
09:37
18.3内边距和外边距
10:09
18.4设置元素尺寸和溢出问题处理
12:03
18.5轮廓和阴影
11:01
网页排版乱糟糟？元素总是“跑偏”？本章带你走进经典网页布局的核心世界！你将掌握块级、行内、行内块元素的显示方式，学会使用 float 浮动和 position 定位实现灵活多列布局，解决常见的浮动塌陷和元素重叠问题。更重要的是，你将深入了解神秘的 BFC（块级格式化上下文），彻底解决外边距塌陷、文本环绕、浮动容纳等布局难题。本章是构建专业网页结构的关键一步，快来开启你的布局进阶之路吧！
19.1显示类型display属性（上）
10:13
19.2显示类型display属性（下）
07:31
19.3浮动float属性
10:11
19.4基于float属性实现多列布局
08:23
19.5定位position属性
07:15
19.6脱离文档流和z-index属性
08:32
19.7精讲BFC
13:50
19.8多列布局
10:18
网页上的文字不只是信息，更是设计的一部分！在本章中，你将全面掌握文本排版的各种技巧：对齐、缩进、间距、阴影、装饰、大小写转换，样样精通！还会学习如何设置字体家族、字号、字体粗细与风格，甚至引入个性十足的 Web 字体，让你的网页文字更具表现力与美感。
23.1文本对齐、空白、方向和缩进
08:41
09:16
23.3字体
09:19
网页太静太无聊？本章教你用 CSS 魔法 让页面“活”起来！你将掌握三大炫技利器 —— 过渡（transition） 让变化更丝滑，变形（transform） 让元素旋转、移动、缩放、倾斜，甚至玩转 3D 效果，而动画（animation） 则帮你打造持续性动态效果，从关键帧到循环控制，一应俱全！
24.1过渡
10:41
24.2旋转、移动、缩放和倾斜
10:27
10:53
24.4动画
14:47
