1.1 语义化标签 Semantic HTML

使用 <header> <nav> <main> <section> <article> <aside> <footer> 等标签构建清晰的文档结构。

1.2 文本级标签 Text Elements

示例文本展示各种文本标签：

<strong> 重要文本 | <em> 强调文本 | <mark> 高亮文本 | <del> 删除文本 | <ins> 插入文本 | <sub>_下标 | <sup>^上标 | <small> 小字 | <abbr> 缩写 | <cite> 引用 | <q> 短引用 | <code> 代码 | <kbd> 键盘输入 |<samp> 输出| <var> 变量 | <time> 时间 | <bdo> 文字方向 | <bdi> 隔离文本

这是 <span> 通用行内容器 和

<div> 通用块容器

使用 <blockquote> 创建引用块：

学而不思则罔，思而不学则殆。—— 《论语》

使用 <pre> 保留格式：

    function hello() {
        console.log("Hello, World!");
    }

1.3 列表 Lists

1.4 表格 Tables

1.5 表单 Forms

1.6 多媒体 Media

<picture> 响应式图片

📸 使用 <picture> 和 <source> 实现响应式图片 <figure> + <figcaption> 图文组合

<audio> 音频

您的浏览器不支持 audio 元素。

<video> 视频

<canvas> 画布

<svg> 矢量图形

SVG 图形

1.7 交互元素 Interactive

点击展开 — <details> 和 <summary>

这是展开后的内容。使用了 HTML5 的详情披露组件。

默认展开的详情

这个 details 元素使用了 open 属性，默认展开。

📦 原生对话框

这是使用 <dialog> 元素创建的原生对话框。

💡 这是使用 popover 属性创建的原生弹出层！

data-* 自定义数据属性：悬停查看提示

✏️ 这是一个 contenteditable 元素 — 点击即可编辑此文本！

🖐️ 这是一个 draggable 元素

2.1 基础选择器

2.2 组合选择器

2.3 伪类选择器 Pseudo-classes

2.4 伪元素 Pseudo-elements

3.1 盒模型 Box Model

内容(content) + 内边距(padding) + 边框(border) + 外边距(margin)

box-sizing: border-box 是最常用的盒模型，使 padding 和 border 包含在总宽高内。

3.2 定位 Positioning

固定定位示例（右下角的固定按钮）：

sticky 定位示例 — 请参考页面顶部的导航栏（position: sticky; top: 0）

3.3 浮动与清除 Float

4.1 Flexbox 弹性布局 Flexbox

一维布局系统，用于在行或列中排列元素。

对齐属性：justify-content（主轴对齐）align-items（交叉轴对齐）gap（间距）

4.2 CSS Grid 网格布局 Grid

二维布局系统，同时控制行和列。

子网格 Subgrid

4.3 多列布局 Multi-column

4.4 容器查询 Container Queries

使用 container-type 和 @container 根据容器尺寸而非视口尺寸应用样式。

5.1 CSS 过渡 Transitions

使用 transition 属性在状态变化时实现平滑过渡。

缓动函数：ease ease-in ease-out ease-in-out linear cubic-bezier() steps()

5.2 CSS 关键帧动画 @keyframes

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.element {
    animation: fadeIn 0.8s ease-out both;
}

5.3 滚动驱动动画 Scroll-Driven

使用 animation-timeline: view() 或 scroll() 让动画随滚动进度驱动。

页面顶部的彩色进度条就是使用 animation-timeline: scroll(root) 实现的滚动驱动动画。

向下滚动页面，观察元素的滚动触发动画：

5.4 变换 Transform 2D / 3D

2D 变换：translate rotate scale skew

3D 变换（悬停查看效果）：

使用 perspective 创建3D透视效果。

5.5 滤镜与混合模式 Filters

6.1 CSS 自定义属性 Custom Properties

使用 --variable-name 定义变量，var() 引用。

:root {
    --primary-color: oklch(0.75 0.15 200);
    --spacing-unit: 1rem;
}
.element {
    color: var(--primary-color);
    padding: var(--spacing-unit);
}

使用 @property 注册自定义属性类型：

@property --angle {
    syntax: '';
    inherits: false;
    initial-value: 0deg;
}

6.2 CSS 嵌套 Native Nesting

.parent {
    color: blue;
    & .child {
        color: red;
    }
    &:hover {
        color: green;
    }
    .sibling {
        font-weight: bold;
    }
}

悬停此元素查看嵌套CSS效果（子元素会变色）

6.3 级联层 @layer

@layer reset, base, components, utilities;
/* 后面的层优先级更高 */
@layer reset { ... }
@layer base { ... }
@layer components { ... }

本页面的所有样式都组织在 @layer 中，优先级从低到高依次为：reset → base → components → utilities → animations

6.4 逻辑属性 Logical Properties

使用相对书写方向的属性，替代物理方向属性。

这是使用 writing-mode: vertical-rl 的竖排文字示例。

6.5 颜色函数 Color Functions

现代 CSS 颜色：oklch() color-mix() lab() lch()

圆锥渐变示例：

6.6 数学函数 Math Functions

calc() min() max() clamp()

/* clamp() 用于流式排版 */
font-size: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
/* min() 取最小值 */
inline-size: min(100%, 800px);
/* max() 取最大值 */
padding: max(1rem, 2vw);
/* calc() 计算 */
inline-size: calc(100% - 2rem);

6.7 滚动行为 Scroll

scroll-behavior: smooth 实现平滑滚动，scroll-snap-type 实现滚动吸附。

6.8 文本样式 Typography

使用 text-wrap: balance 和 text-wrap: pretty 优化文本排版。

这是一个使用 text-overflow: ellipsis 的溢出文本示例，文本超出容器宽度时会被截断并显示省略号。

这是一个使用 -webkit-line-clamp 进行多行文本截断的示例。当文本超过指定行数时，会被截断并显示省略号。这是第二行内容。这是第三行内容，超过三行就会被截断。

文字阴影效果

波浪线下划线

字母间距与大小写转换

单词间距与行高设置示例文本

6.9 宽高比与图片 Aspect Ratio

aspect-ratio: 16/9

object-fit: cover + object-position: center 30%

6.10 计数器 Counters

1. 使用 counter-reset 初始化计数器
2. 使用 counter-increment 递增计数器
3. 使用 ::before 和 counter() 显示计数

6.11 内容可见性 content-visibility

content-visibility: auto 可以提升大型页面的渲染性能。

此元素使用 content-visibility: auto 和 contain-intrinsic-size: 200px 进行性能优化。

7.1 媒体查询 @media

使用 @media 根据设备特征应用不同样式。

@media (max-width: 768px) {
    /* 移动端样式 */
}
@media (min-width: 769px) and (max-width: 1200px) {
    /* 平板端样式 */
}
@media (min-width: 1200px) {
    /* 桌面端样式 */
}
@media (prefers-reduced-motion: reduce) {
    /* 用户偏好减少动画 */
}
@media (prefers-color-scheme: dark) {
    /* 暗色模式 */
}
@media print {
    /* 打印样式 */
}

当前页面根据视口宽度自动调整网格列数、字体大小和间距。尝试调整浏览器窗口大小来查看效果。

7.2 响应式单位 Viewport Units

视口单位：vh vw vmin vmax dvh svh lvh

相对单位：em rem ch ex lh rlh %

7.3 响应式图片 Responsive Images

使用 srcset 和 sizes 属性根据设备像素比和视口宽度加载不同尺寸的图片。

根据视口宽度自动选择最佳图片尺寸

8.1 @supports 特性检测

@supports (display: grid) {
    /* 支持 Grid 的浏览器应用这些样式 */
    .layout { display: grid; }
}
@supports not (display: grid) {
    /* 不支持的浏览器使用 fallback */
    .layout { display: flex; }
}

8.2 @scope 样式作用域

@scope (.card) {
    /* 这些样式只作用于 .card 内部 */
    h3 { color: var(--clr-primary); }
    p { font-size: 0.95em; }
    :scope { border: 1px solid var(--clr-border); }
}

8.3 工具提示（纯 CSS）

使用 ::after 和 data-* 属性创建纯 CSS 工具提示：

悬停查看 这个文本 的效果。

8.4 首字母下沉

这是一个使用 ::first-letter 伪元素实现首字母下沉效果的段落。首字母会变大并浮动到左侧，其他文字环绕排列。这种效果常见于杂志和报纸的排版中。

8.5 CSS 变量继承

8.6 文本方向与国际化

dir="rtl" 从右到左：

هذا نص باللغة العربية

<bdo> 双向覆盖：这段文字会被从右到左显示

<bdi> 双向隔离：用户输入内容

8.7 CSS 动画性能优化

使用 will-change 提示浏览器优化动画性能：

.animated-element {
    will-change: transform, opacity;
    /* 动画结束后移除 will-change */
}

优先使用 transform 和 opacity 进行动画，避免触发布局和绘制。