理解HTML和CSS | Understanding HTML and CSS (2024 Edition)

深入理解现代 HTML/CSS

本课程涵盖图层、容器、`:has`伪类、嵌套、网格布局（Grid）、弹性盒子（Flexbox）、语义化 HTML 等内容，并通过多个项目实践助你掌握。

将会学到的

• 编写语义化的 HTML。
• 使用语义化的 HTML 提升网站和应用的可访问性。
• 使用 CSS 进行视觉布局。
• 阅读并理解 HTML 和 CSS 规范，以便持续自我学习。
• 理解浏览器渲染引擎的工作原理。
• 掌握 CSS 级联、继承和特异性。
• 高级 CSS 特性，如弹性盒子（Flexbox）和网格布局（Grid）。
• 超现代特性，如容器查询（Container Queries）、`:has`伪类、嵌套和图层，以保持技能的现代化和领先性。

要求

无需经验。

说明

2024 年 7 月重大更新！新增关于超现代 CSS 的讲座，包括容器查询（@container）、:has 伪类、嵌套、媒体查询范围语法和图层（@layer）。深入理解这些最新的 CSS 特性是如何工作的，并保持你的技能处于行业前沿！

2024 年 7 月的更新还包括了一个全新的现代 HTML 和 CSS 实战项目，采用最先进的 CSS 技术和动手编码练习！

在这门课程中，你将深入理解 HTML 和 CSS（HTML5、CSS3 及其后续版本），我们将会探讨这些技术是如何真正工作的。我们将研究 HTML 和 CSS 解决的问题以及它们解决问题的方式。我们会深入了解浏览器渲染引擎的工作原理。我们将增强信心去阅读和理解 HTML 和 CSS 规范，这样你可以继续自学未来出现的新 HTML 和 CSS 特性，保持技能的新鲜度。

我们将遵循核心理念“不要模仿，要理解”。简单复制他人的项目在面对现实世界的工作时是没有帮助的，因为这些工作往往与你复制的项目不同。要在现实世界的工作中成功，你需要真正理解。

本课程中你将学到的内容包括：

• 学习编写语义化的 HTML。
• 学习如何通过语义化的 HTML 提升用户界面的可访问性。
• 学习如何阅读和理解 HTML 和 CSS 规范，以便在未来随着新的 HTML 和 CSS 特性的出现继续自学。
• 深入理解浏览器渲染引擎的工作原理。
• 深入理解浏览器 DOM。
• 正确理解 CSS 的级联、继承和特异性。
• 学习为什么 CSS 的工作方式是这样的，以便你的思维模型能够应对工作中遇到的问题。
• 理解高级 CSS 特性，如弹性盒子（Flexbox）和网格布局（Grid）。
• 动手编码练习和测验来检验你的技能。
• 理解超现代 CSS 特性，如容器查询（@container）、:has 伪类、嵌套、媒体查询范围语法和图层（@layer），保持你的技能现代化和处于行业前沿。
• 现代 CSS 实战项目，通过动手编码练习来实践编写语义化的、SEO 友好的和可访问的 HTML，以及使用最新的现代 CSS。

如果你是 HTML 和 CSS 的新手：

你将学到基础知识和技能，这些将在你的职业生涯中有所帮助。

如果你是一名有经验的开发者：

你将学习如何重置你的思维模型，理解和依赖官方规范，从而显著改善你的日常开发体验。

此课程面向哪些人：

初学者以及有经验的开发者。