HTML/CSS 从入门到精通：2026 完整学习路线图与实战指南

很多人对前端有个误解：HTML 和 CSS"太简单了"，一天就能学完。事实恰恰相反——它们的语法确实一天能看完，但要真正写好，需要理解浏览器的渲染管线、层叠规则、布局算法与无障碍语义。而 2026 年，恰恰是这两门"老语言"最值得重新学一遍的一年。

如果你最近关注前端圈，会发现一个明显信号：CSS 的更新速度踩了油门。容器查询让组件终于能感知自己所在的容器，:has() 让选择器第一次可以"向上"选中父元素，锚点定位让工具提示不再依赖 JS 库，滚动驱动动画让视差效果不用监听 scroll 事件。

与此同时，HTML 也在悄悄进化：微软推动的 focusgroup 属性开始进入浏览器实测，可定制的原生下拉框终结了"前端一辈子跟 select 较劲"的历史，语义化权限元素让被拒绝的授权有了"后悔药"。

这篇文章会带你从零开始，一步步走到能独立完成一个现代网页工程的水平。我不追求把 API 列全，而是把每个阶段"该学什么、学到什么程度算过关"讲清楚，同时把 2026 年真正落地的变化讲透。

本文内容导航

• 第一章：先弄明白 HTML 和 CSS 到底是什么
• 第二章：2026 年，这两门语言发生了什么变化
• 第三章：六阶段学习路线（含可运行代码）
• 第四章：把最硬的六块骨头啃下来
• 第五章：2026 年值得关注的新能力速览
• 第六章：常见误区与高频坑
• 第七章：学习资源清单
• 第八章：12 周学习时间表

一、先弄明白：HTML 和 CSS 到底是什么

1.1 一个网页的三层结构

打开任意一个网页，背后其实是三层技术在协作。用盖房子打比方，你可以一眼记住它们的分工：

这篇文章只讲前两层。原因很简单：HTML 和 CSS 是地基，JS 学得再溜，页面结构烂、样式乱，最后还是要推倒重来。

一个网页的组成关系

  HTML（结构）         CSS（样式）          JS（行为）
      |                    |                   |
      |  提供元素与语义      |  按选择器挂样式     |  读改 DOM、绑事件
      v                    v                   v
  +-------------------------------------------------------+
  |                    浏览器渲染引擎                      |
  |  解析 HTML -> DOM 树                                    |
  |  解析 CSS  -> 样式规则                                  |
  |  合成渲染树 -> 布局（Layout）-> 绘制（Paint）-> 合成     |
  +-------------------------------------------------------+
                        |
                        v
                    用户看到的页面

1.2 HTML：不是编程语言，是"骨架"与"语义"

HTML 全称超文本标记语言（HyperText Markup Language），它不是编程语言——没有变量、没有循环、没有逻辑判断，只有"标记"。它的工作是把内容分门别类地描述出来：这是一段段落、那是一个标题、这里是一张图片、那里是一组导航链接。

它的价值有两层：

• 第一层是结构：让浏览器知道该把内容渲染成什么样；
• 第二层是语义：让搜索引擎、屏幕阅读器、AI 模型知道"这块内容是什么"。

第二层经常被初学者忽略，但它在 2026 年变得越来越重要。

1.3 CSS：不是"改颜色"那么简单

CSS 全称层叠样式表（Cascading Style Sheets）。很多人以为它只是"给元素刷颜色"，实际上它包含三个关键机制：

• 选择器：决定"样式挂到哪些元素上"；
• 层叠与特异性：决定"多条规则冲突时谁说了算"；
• 布局算法：决定"元素最终摆在什么位置、占多大空间"。

其中层叠是 CSS 真正的灵魂，也是初学者最容易翻车的地方。后面第四章会专门讲。

1.4 关于"版本"：为什么没有 HTML6，也没有 CSS4

这是被问得最多的问题之一，值得先讲清楚。

HTML 没有版本号了。 早年确实有 HTML 4.01、XHTML 1.0 这类版本，2014 年 HTML5 定稿后，W3C 与 WHATWG 做出一项重要决定：取消版本号迭代，把 HTML 转为"活标准"（Living Standard）持续增量演进。这意味着不存在"HTML6"，所有新特性都往同一个规范里加。

CSS 更是从来没有过统一版本号。 CSS 由几十个独立模块（比如选择器、Flex 布局、颜色、容器查询）组成，每个模块各自独立推进等级。所以"CSS3""CSS4"只是行业口语，官方规范里查不到这两个名字。

于是就有了一个流行说法："CSS 2026"。它不是一个版本号，而是"2026 年浏览器已全面稳定支持的那批现代 CSS 特性集合"的统称。理解这一点，你就不会再去搜"CSS4 什么时候出"了。

二、2026 年，这两门语言发生了什么变化

2.1 HTML：活标准时代的三条新线索

第一条：无障碍交互开始被"声明式"接管。

复合部件（工具栏、选项卡、菜单、单选组）的键盘导航，过去必须手写一大坨 JS 管理 tabindex。微软从 2022 年就开始推一项叫 focusgroup 的属性方案，到 2026 年它已进入浏览器实测阶段，微软还把实现贡献给了 Chromium 项目。

它的写法简单到让人怀疑：

<div focusgroup="toolbar wrap" aria-label="文本格式">
<button type="button">加粗</button>
  <button type="button">斜体</button>
  <button type="button">下划线</button>
</div>

加了 focusgroup="toolbar" 之后，浏览器会自动接管方向键移动焦点、循环滚动、以及"焦点记忆"——用户用 Tab 离开再回来时，焦点还能落回上次那个按钮。这在很多国家已经不只是体验问题，而是无障碍合规的硬要求（WCAG）。

第二条：权限元素让"拒绝"不再是死胡同。

过去调用地理位置或摄像头，走的是 JS API 弹窗。用户手滑点了"拒绝"，这个 API 就彻底锁死，想恢复得到浏览器深层设置里翻。新标准推出了语义化的权限元素，核心优势是权限恢复：只要用户再点一次页面上的语义按钮，浏览器就会重新唤起授权流程。

有厂商实测数据显示，传统弹窗下被拒绝后能恢复的授权约 10%，改用权限元素后恢复到 65% 以上。这个数字背后是真实的用户流失。

需要提醒的是，这类权限元素（包括 geolocation、usermedia、camera、microphone，以及 PWA 安装控件 install）目前仍在规范推进与部分浏览器实验阶段，生产环境使用时要配合降级方案：

<geolocation onlocation="handleLocation(event)">
  <!-- 不被支持时，里面的普通按钮依然可用，天然渐进增强 -->
  <button type="button" onclick="handleLocationFallback(event)">获取当前位置</button>
</geolocation>
<script>
// 仅在获得授权后触发
function handleLocation(event) {
  console.log("坐标获取成功：", event.coords.latitude, event.coords.longitude);
}
// 降级方案：老浏览器走传统 API
function handleLocationFallback(event) {
  navigator.geolocation.getCurrentPosition(
(pos) =&gt; console.log(pos.coords),
(err) =&gt; console.warn("定位失败：", err.message)
);
}
</script>

第三条：原生下拉框终于可以被"随便改"了。

前端有个笑话：一辈子都在跟 select 标签较劲。为了让它好看，业界引过 Select2、Chosen 这类库，一个下拉框动辄几百 KB。

现在原生方案来了。只要在 CSS 里开启一个开关：

select,
::picker(select) {
  appearance: base-select;
}

开启后，select 内部就可以嵌套 button、selectedcontent 以及任意 DOM，选项里甚至能放图片：

<select>
  <button>
&lt;!-- 自动镜像克隆当前选中 option 的内容 --&gt;
&lt;selectedcontent&gt;&lt;/selectedcontent&gt;
</button>
  <option value="1">
&lt;img src="avatar1.png" alt=""&gt;
&lt;span&gt;张三&lt;/span&gt;
</option>
  <option value="2">
&lt;img src="avatar2.png" alt=""&gt;
&lt;span&gt;李四&lt;/span&gt;
</option>
</select>

配合 ::picker(select)（下拉弹层容器）、select::picker-icon（下拉箭头）与 option::checkmark（勾选标记）这几个伪元素，不用一行 JavaScript 就能做出全定制的下拉框。Chrome 与 Safari 已相继跟进，使用时建议配合 @supports 做渐进增强。

2.2 CSS：一场"去中介化"的原生复兴

再说 CSS 这边。过去十年，SCSS、Less 这些预处理器的存在理由很朴素：原生 CSS 缺变量、缺嵌套、缺模块化。而现在，浏览器自己变成了一个功能完备的"样式编译器"。

用一张对照表看最清楚：

关键差异在最后一列：原生能力把控制权从"编译时"交还给了"运行时"——主题切换、用户偏好适配、组件级响应式，这些不用重新编译、不用刷新页面就能即时生效。

2.3 Interop 2026 收官，意味着什么

如果你只记一件事，请记这个：Interop 项目。

它由苹果、谷歌、微软、Mozilla 联合发起，目的很简单——用同一套标准测试逼各家浏览器行为一致。它已经运行了五年，推动了网格布局、子网格、弹性盒子、容器查询、:has() 选择器等关键技术的落地。

Interop 2025 的成绩单相当亮眼：所有浏览器通过的选定测试百分比从年初的 29% 跃升至年底的 97%；Safari 的兼容性得分从 43 分提升到 99 分。

Interop 2026 于 2026 年 2 月 13 日发布目标，设定了 20 个重点推进领域，其中 15 个为新增。对照清单看，这一年要收敛的能力包括：

• 锚点定位、视图转换（View Transitions）、导航 API
• 高级 attr()、容器样式查询、contrast-color()
• 滚动驱动动画、滚动吸附、shape()
• 对话框与弹出框的新能力、CSS 缩放、媒体伪类
• 作用域自定义元素注册表、自定义高亮

对开发者的实际意义是：过去你不敢用的特性，现在可以用了。 一批新能力已在所有主流浏览器通过一致性测试，现代 CSS 正式具备跨浏览器生产可用性，一大批老旧的 JS 布局方案可以退役了。

2.4 浏览器支持基线（拿来即用）

MDN 的 Baseline 项目在 2026 年中做了一次清单更新，把 :has()、CSS 嵌套、text-wrap 平衡、View Transitions 等特性全面转入"Baseline 广泛可用"。这意味着你不再需要逐个去 caniuse 查表。

社区汇总的粗略基线如下（使用时仍建议用 caniuse 复核具体目标用户）：

另外两个值得记住的行业数字：CSS 的部署覆盖率约 97.8%，依然是样式语言的绝对统治者；约 84% 的开发者已把 AI 工具融入日常编码流程——但这也意味着，"理解渲染原理并判断生成结果对不对"的能力，比会敲语法更值钱。

三、六阶段学习路线

下面这条路线，我按"每阶段都有明确产出"来设计。不要跳阶段，尤其别在布局没吃透之前就去碰框架。

阶段一：环境与第一行代码

要学什么：编辑器、浏览器开发者工具、文件组织方式、HTML 文档基本骨架。

推荐工具链：VS Code + Chrome 或 Edge（开发者工具是学习前端最重要的实验室）+ 一个能自动刷新的插件。

先写出你的第一个完整页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
</head>
<body>
  <h1>你好，HTML</h1>
  <p>这是我第一次手写网页结构。</p>
</body>
</html>

这里有几个必须记住的细节：

• 文件第一行那句 DOCTYPE 声明不是标签，而是文档类型声明，必须写在最前面。漏写会让浏览器进入"怪异模式"，盒模型和宽高计算全部乱套；
• lang="zh-CN" 影响 SEO 与屏幕阅读器的发音，别省；
• meta charset="UTF-8" 要尽量靠前，否则中文可能变乱码；
• meta viewport 是移动端适配的开关，没有它手机浏览器会按桌面宽度渲染再缩放。

过关标准：能不看教程，凭记忆写出一份完整的 HTML 骨架，并在浏览器里正常打开。

阶段二：HTML 语义与表单

要学什么：常用文本与结构标签、语义化标签、列表与表格、链接与图片、表单控件与验证、无障碍基础。

语义化是这一阶段的真正重点。 新手最常见的毛病是"万物皆 div"，正确做法是先判断内容是什么，再选标签。

再看一个"教科书级"的表单写法，每一个属性都有理由：

<form action="/login" method="post">
  <fieldset>
&lt;legend&gt;用户登录&lt;/legend&gt;

&lt;div class="form-group"&gt;
  &lt;label for="username"&gt;用户名&lt;/label&gt;
  &lt;input type="text"
         id="username"
         name="username"
         required
         pattern="[a-zA-Z0-9]{4,16}"
         title="请输入 4 到 16 位字母或数字"&gt;
&lt;/div&gt;

&lt;div class="form-group"&gt;
  &lt;label for="password"&gt;密码&lt;/label&gt;
  &lt;input type="password" id="password" name="password" required minlength="6"&gt;
&lt;/div&gt;

&lt;button type="submit"&gt;登录&lt;/button&gt;
</fieldset>
</form>

为什么要这么写：

• fieldset + legend 提升可访问性，屏幕阅读器会读出分组名；
• label 的 for 必须与 input 的 id 一一对应，点击文字才能聚焦输入框；
• required、pattern、minlength 是 HTML 自带的校验，不用写 JS；
• name 属性不能漏，否则表单提交时该字段根本不会被发送。

过关标准：能写出一个包含语义结构、图片、列表、表格和完整表单的静态页面，且所有表单控件都有 label 与 name。

阶段三：CSS 基础——选择器、盒模型、层叠

要学什么：选择器体系、盒模型、box-sizing、文本与背景、伪类与伪元素、层叠与特异性、CSS 变量。

先看选择器的谱系。用一张速查表建立地图：

然后是这一阶段的重头戏——盒模型。

每个元素都是一个矩形盒子，由内到外是：内容（content）→ 内边距（padding）→ 边框（border）→ 外边距（margin）。

盒模型结构（默认 content-box 模式）
+---------------------------------------------------+
  | margin（外边距，不计入元素自身尺寸）                  |
  |   +-------------------------------------------+   |
  |   | border（边框）                              |   |
  |   |   +-----------------------------------+   |   |
  |   |   | padding（内边距）                   |   |   |
  |   |   |   +---------------------------+   |   |   |
  |   |   |   |  content（内容区）          |   |   |   |
  |   |   |   |  由 width / height 决定     |   |   |   |
  |   |   |   +---------------------------+   |   |   |
  |   |   +-----------------------------------+   |   |
  |   +-------------------------------------------+   |
  +---------------------------------------------------+
content-box：实际宽度 = width + padding2 + border2
  border-box ：实际宽度 = width（padding 和 border 被算进去）

这个差别会让新手困惑很久，所以最省心的做法是全局改成 border-box：

/ 全局统一为更直观的盒模型计算方式 /
*,
*::before,
*::after {
  box-sizing: border-box;
}
.box {
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  margin: 30px;
  background-color: #f5f5f5;
}

过关标准：能解释 margin 和 padding 的区别、能说出盒模型两种模式的差异、能用 CSS 变量组织一套配色。

阶段四：布局——Flexbox 与 Grid

要学什么：Flexbox 一维布局、Grid 二维布局、定位体系、响应式断点与单位。

这一阶段只需要记住一句口诀：

Flexbox 管一根轴，Grid 管整个网格。

具体分工是：Grid 搭页面骨架（二维），Flexbox 处理容器内一维排列。两者组合能覆盖绝大多数布局场景。

先看 Flexbox 最经典的用法——垂直居中，三行搞定：

.center-box {
  display: flex;
  justify-content: center; / 主轴居中 /
  align-items: center;     / 交叉轴居中 /
  min-height: 100vh;
}

再看 Grid 最实用的写法——一行代码实现自适应卡片网格，彻底替代繁琐的媒体查询：

.card-grid {
  display: grid;
  / 每列最小 240px，能放几列放几列，空隙 16px /
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

auto-fit 配合 minmax() 是 2026 年最被推荐的响应式写法：容器变窄时列数自动减少，完全不写 @media。

Flex 常用属性速查：

过关标准：能只用 Grid 与 Flexbox（不依赖浮动）完成一个完整的响应式页面布局。

阶段五：现代 CSS——容器查询、:has()、嵌套与级联层

要学什么：容器查询与容器单位、:has() 选择器、原生嵌套、@layer 级联层、@scope 作用域、颜色函数、text-wrap。

这是 2026 年最值钱的一阶段，也是"会写 CSS"和"懂 CSS"的分水岭。

先说容器查询。 传统媒体查询只能看视口宽度，而容器查询让组件根据自己所在容器的尺寸来适配：

.card-container {
  container-type: inline-size;
  container-name: card;
}
/ 容器宽度达到 400px 时，卡片切换成左右两栏 /
@container card (min-width: 400px) {
  .card {
display: grid;
grid-template-columns: 200px 1fr;
align-items: center;
}
}

这解决了一个真实痛点：同一个卡片组件，放在侧边栏和放在主内容区时，应该长得不一样。以前只能靠多个媒体查询硬凑，现在组件自己就能感知。

再说 :has()——业界称它为"父选择器"。 它的规则是：选中"含有某些子元素"的元素。这是 CSS 历史上最重要的更新之一：

/ 当卡片里含有图片时，处理圆角溢出 /
.card:has(img) {
  border-radius: 12px;
  overflow: hidden;
}
/ 当表单里存在必填项时，按钮换个警示色 /
.form:has(:required) .submit-btn {
  background: #ff6b6b;
}
/ 当列表第一项是标题时，调整顶部间距 /
.list:has(> :first-child h2) {
  margin-top: 2rem;
}
/ 弹窗打开时锁定页面滚动 —— 以前这行要写 JS /
body:has(.modal[open]) {
  overflow: hidden;
}

最后那个例子特别有代表性：过去这行逻辑必须靠 JS 读写 document.body.style.overflow，现在一句声明就够了，而且关闭弹窗时滚动会自动恢复，不用记状态。

然后是原生嵌套，终于可以告别重复父选择器：

/ 以前的写法 /
.nav { }
.nav .item { }
.nav .item:hover { }
.nav .item.active { }
/ 现在的写法 /
.nav {
  display: flex;
& .item {
padding: 8px 12px;

&:hover {
  background: #f0f0f0;
}

&.active {
  font-weight: 700;
}
}
/ 嵌套也能包住媒体查询 /
  @media (min-width: 768px) {
gap: 16px;
}
}

注意：嵌套层级别超过 3 层，否则特异性会失控，反而更难维护。

过关标准：能写出一个"组件级响应式"的卡片组件——不依赖视口宽度、不依赖任何框架，同时用 :has() 实现至少一处过去需要 JS 的交互。

阶段六：工程化与性能

要学什么：级联层组织策略、CSS 变量与设计令牌、只支持渐进增强的写法、渲染性能、构建工具链。

级联层 @layer 解决的是"优先级地狱"。它让你显式声明不同来源样式的层级顺序，不再靠 !important 互轰：

/ 先声明层级顺序，越靠后优先级越高 /
@layer reset, base, components, utilities;
@layer reset {
  , ::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
}
@layer base {
  body {
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.6;
}
}
@layer components {
  .card {
padding: 16px;
border-radius: 12px;
background: var(--card-bg, #fff);
}
}
@layer utilities {
  .text-center { text-align: center; }
  .mt-2 { margin-top: 8px; }
}

渐进增强的写法，用 @supports 给老浏览器留退路：

.tooltip {
  / 默认：能给一个稳妥的定位 /
  position: absolute;
}
/ 支持锚点定位的浏览器，才启用新方案 /
@supports (position-anchor: --btn) {
  .tooltip {
position-anchor: --btn;
position-area: top right;
position-try-fallbacks: flip-block, flip-inline;
}
}

性能方面记住三条：

• 优先用 transform 和 opacity 做动画，它们能跑在合成器线程，不阻塞主线程；
• 用 CSS 动画替代 JS 逐帧改样式，滚动驱动动画（animation-timeline）能省掉 scroll 事件监听；
• 避免过深的嵌套与过于宽泛的选择器，它们在样式计算阶段就有成本。

过关标准：能用 @layer 组织一个三层以上的样式体系，能为新特性写好降级方案，能用开发者工具的 Performance 面板看懂一次布局抖动。

四、把最硬的六块骨头啃下来

4.1 块都说清楚了：块级、行内与行内块

三种显示类型的差别，决定了元素能不能设宽高、会不会换行：

新手最常踩的坑就是"给行内元素设 width 没反应"——这不是浏览器坏了，是规则如此。

4.2 选择器特异性：谁说了算

当多条规则命中同一个元素，浏览器按特异性（Specificity）裁决。可以用一个四位数近似记忆：

特异性权重（从高到低）
!important        ---- 最强，但应尽量避免
  行内样式            1000
  ID 选择器           0100
  类 / 属性 / 伪类     0010
  标签 / 伪元素        0001
  通配符 *             0000

两条铁律：权重相同时，后写的覆盖先写的；权重不同时，高的赢，无论书写顺序。

所以当你发现"样式不生效"，第一步不是加 !important，而是打开开发者工具看那条规则是不是被划掉了，以及是哪条规则赢的。

4.3 容器查询 vs 媒体查询：该用哪个

经验法则：页面整体框架用媒体查询，组件内部适配用容器查询。

4.4 :has() 为什么性能要留意

:has() 很强，但它的匹配成本高于普通选择器，因为它需要"往子元素方向"检查。所以：

• 不要写成 :has(*) 或全局范围的宽泛 :has()；
• 尽量给它加前置限定，比如 .card:has(img) 而不是 body :has(img)；
• 高频变动区域的复杂 :has() 要实测性能。

4.5 为什么"一切皆盒子"是重要认知

理解盒模型、理解 display、理解外边距合并（margin collapse），这三件事一旦打通，CSS 里 80% 的"玄学问题"都会消失。很多所谓"布局错乱"，本质是某个元素的盒子尺寸和你以为的不一样。

4.6 无障碍：不是加分项，是合规项

语义化标签、alt 属性、label 与 input 绑定、键盘可操作——这些在 2026 年已经不只是"代码优雅"的问题。全球主要司法辖区已把语义元素的使用列为数字服务合规要求，focusgroup 这类特性的推动力也正来自 WCAG。

从"标记优先"转向"语义优先"，还有一个附带好处：结构清晰的语义树，AI 模型能更准确地理解页面意图，同一份 HTML 也能更平滑地适配无障碍设备、智能手表甚至车载屏幕。

五、2026 年值得关注的新能力速览

下面这些是"看到不要慌、知道它能干什么"级别的清单，建议收藏。

5.1 滚动状态查询 @container scroll-state()

给容器加上 container-type: scroll-state 后，就能查询滚动条的三种状态：粘附（stuck）、贴靠（snapped）、可滚动（scrollable）。吸顶导航的阴影、轮播图未对齐时变暗、滚动到两端时边界提示——这些以前都要监听 scroll 事件，现在纯 CSS 就能做：

.sticky-nav {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
/ 只有当导航真正"粘住"时，才加上阴影 /
@container scroll-state(stuck: top) {
  .sticky-nav {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
}

5.2 兄弟序号函数 sibling-index() 与 sibling-count()

以前做列表交错入场动画，得给每个子元素手写 transition-delay，或用 nth-child(1/2/3...) 硬编码魔法数字。现在可以直接拿到元素位置（从 1 开始）：

li {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s;
  / 第 n 个元素延迟 (n - 1)  100ms，一行搞定交错动画 */
  transition-delay: calc((sibling-index() - 1) * 100ms);
}
/ 首次渲染前的初始状态，配合入场动画 /
@starting-style {
  li {
opacity: 0;
transform: translateY(12px);
}
}

5.3 锚点定位：工具提示不再需要定位库

.button {
  anchor-name: --my-btn;
}
.tooltip {
  position-anchor: --my-btn;
  position-area: top right;                        / 定位到按钮右上角 /
  position-try-fallbacks: flip-block, flip-inline; / 空间不够自动换边 /
}

过去这套逻辑要靠 Popper.js 这类库算坐标、监听滚动、处理边界溢出。现在浏览器渲染引擎直接接管，代码量和运行开销同时下降。

5.4 滚动驱动动画：进度条与视差

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section {
  animation: fade-in-up linear both;
  animation-timeline: view();              / 基于元素进入视口 /
  animation-range: entry 25% cover 50%;    / 控制在哪个区间触发 /
}

scroll() 基于滚动容器，view() 基于元素进入视口。它比监听 scroll 事件性能好得多，而且不占用主线程。

5.5 颜色：从"猜色值"到"算色值"

:root {
  --primary: oklch(60% 0.22 240);
}
.primary-light {
  / 在 OKLCH 空间里把主色与白色混合，得到稳妥的浅色 /
  background: color-mix(in oklch, var(--primary) 70%, white);
}
/ 自动挑出与背景对比度足够的文字色 /
.text-on-primary {
  color: contrast-color(var(--primary));
}
/ 跟随系统深浅色 /
body {
  background: light-dark(#ffffff, #1a1a1a);
  color: light-dark(#1a1a1a, #ffffff);
}

为什么推荐 OKLCH：它在感知上更均匀——数值等量变化，人眼看起来的变化量也接近；色域更广，渐变过渡不会出现发灰的中间色。做设计系统与主题切换时，它比十六进制省心得多。

5.6 排版细节：text-wrap 与 text-box

text-wrap: balance  —— 让标题的多行长度尽量均衡，不再出现"末行一个孤字"
text-wrap: pretty   —— 优化段落换行，减少难看的断行
text-box: trim-both cap alphabetic —— 去掉文字上下方的"幽灵空白"，图标与文字终于能真正对齐

这类特性看起来不起眼，但它们解决的正是设计师天天在抱怨、开发者天天在硬调的问题。

5.7 @scope：样式作用域

@scope (.card) to (.card-footer) {
  / 样式只作用于 .card 内部、且在 .card-footer 之前的部分 /
  h2 {
margin-top: 0;
}
}

有了它，样式泄漏问题可以从规范层面解决，不再需要靠 BEM 这类命名约定去"约定俗成"。

六、常见误区与高频坑

下面这八个坑，几乎每个新手都会踩。建议对照自己的代码逐条排查。

坑 1：不写 DOCTYPE 声明。

后果：浏览器进入怪异模式，盒模型计算与标准模式不同，同一套 CSS 在别人电脑上就是不一样。这行必须是第一行。

坑 2：用 div 包一切。

后果：代码可读性差、SEO 与无障碍受损。现代趋势是"语义优先"，先根据内容结构选标签。

坑 3：class 与 id 混用不当。

id 在页面内必须唯一，且特异性极高，一旦叠加就很难覆盖。默认一律用 class，只在锚点跳转或表单 label 绑定这类无样式场景才用 id。

坑 4：给行内元素设宽高。

span、a 这类行内元素设 width、height 无效。要么改成 display: inline-block 或 block，要么改用 Flex 布局。

坑 5：样式冲突就上 !important。

这是最危险的习惯，它会把优先级体系彻底搅乱，后面的人只能一路 !important 加下去。正确做法是用开发者工具找出真正的冲突来源，或者改用 @layer 组织层级。

坑 6：响应式只想到媒体查询。

只按视口适配，会让同一个组件在不同容器里都很别扭。明确区分：页面框架用媒体查询，组件内部用容器查询。

坑 7：忘记给图片设约束。

宽高不设约束的图片，会让页面在加载时发生剧烈抖动（布局偏移）。给图片加上宽高属性或用 CSS 定好比例：

img {
  max-width: 100%;
  height: auto;
  display: block; / 顺手消除行内元素底部的空隙 /
}
/ 现代写法：用 aspect-ratio 预留空间，消除布局偏移 /
.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

坑 8：中文站点漏写语言与视口元信息。

lang="zh-CN" 与 meta viewport 这两个看似不起眼的声明，直接决定了中文渲染质量与移动端显示效果。

七、学习资源清单

官方与权威文档

• MDN Web Docs（developer.mozilla.org）：HTML 与 CSS 最权威的中文文档，Baseline 标注直接告诉你某个特性能不能上生产
• WHATWG HTML Living Standard（html.spec.whatwg.org）：想知道"标准原文怎么规定的"，来这里
• CSS 规范索引（w3.org/Style/CSS）：CSS 各模块的官方状态
• web.dev Learn CSS（web.dev/learn/css）：谷歌出品的 CSS 系统教程，质量很高

工具与查询

• caniuse（caniuse.com）：查特性兼容性与全球使用率，选型必备
• Web Platform Tests · Interop 2026（wpt.fyi/interop-2026）：查这一年浏览器要统一哪些能力
• Chrome DevTools：你的主实验室，Elements 面板看盒子、Computed 面板看最终生效值、Performance 面板看渲染成本
• Can I Use 之外的实践：动手改一改线上站点样式，观察效果，比看十篇教程管用

书与进阶

• 《CSS 权威指南》：查漏补缺的字典，适合按需查阅
• 《深入解析 CSS》：讲原理比讲语法多，适合突破瓶颈期
• 《HTML5 与 CSS3 基础教程》：适合完全零起点的第一本书

练习方式（很重要）

• 复刻：挑几个你喜欢的网站，按截图从零还原布局，不要复制源码；
• 重构：把自己写的旧页面用 Grid 与容器查询重写一遍，对比代码量；
• 无障碍体检：用浏览器无障碍面板检查自己的页面，看有多少问题。

八、12 周学习时间表

下面这张表，按"每周有产出"来排。每天投入 1.5 到 2 小时即可，重点是每天都动手。

第 12 周结束后，你应该能独立完成一个现代响应式网站，并说清每一行为什么这么写。

结语

回到开头那个判断：HTML 和 CSS 是"一天能看完，一年不一定写得好"的语言。

它们的语法浅，但藏在语法背后的是浏览器的渲染模型、层叠规则、布局算法与无障碍语义。2026 年这一轮变化，恰恰把重心从"记住属性"推向了"理解机制"——因为当 :has() 能替你写 JS、当容器查询能替你做响应式、当锚点定位能替你做浮层计算时，你需要判断的是"这个方案在这个场景下对不对"，而不是"这个属性怎么拼"。

所以我的建议是：

• 别急着上框架。HTML 与 CSS 的地基打牢了，学任何框架都是水到渠成；
• 别只跟着教程敲。多复刻真实网站，多打开开发者工具看"为什么"；
• 每年重学一次 CSS。这句话在 2026 年比过去任何时候都成立。

祝你在前端这条路上走得踏实。

说明：本文所述特性与版本信息基于 2026 年 9 月的公开资料整理。浏览器支持情况会持续变化，生产环境采用新特性前，建议用 caniuse 与 MDN Baseline 复核目标用户群体的覆盖情况，并配合 @supports 做好渐进增强。