前端学习全景图

前端学习全景图 · HTML5 + CSS3 全部知识点
 

🌐 前端学习全景图

涵盖 HTML5 全部语义化标签与 CSS3+ 现代特性 — 从选择器到容器查询，从Flex到Grid，从过渡到滚动驱动动画。

HTML5 语义化 CSS Grid + Subgrid Flexbox 容器查询 级联层 @layer 嵌套CSS :has() 选择器 滚动驱动动画
开始学习 ↓

📄 一、HTML 核心知识点

语义化标签、文档结构、文本、列表、表格、表单、多媒体等

1.1 语义化标签 Semantic HTML

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

<header> 页头<nav> 导航
<main> 主内容区<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

<ul> 无序列表

  • 列表项 1
  • 列表项 2
    • 嵌套列表 2.1
    • 嵌套列表 2.2
  • 列表项 3

<ol> 有序列表

  1. 第 5 项（使用 start 属性）
  2. 第 4 项
  3. 第 3 项

<dl> 描述列表

HTML
超文本标记语言
CSS
层叠样式表

1.4 表格 Tables

前端技术对比表
技术类型难度流行度
HTML5 标记语言 ⭐ ⭐⭐⭐⭐⭐
CSS3 样式语言 ⭐⭐⭐ ⭐⭐⭐⭐⭐
JavaScript 编程语言 ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
数据更新于 2024年

1.5 表单 Forms

📝 演示表单
60
70%70%

1.6 多媒体 Media

<picture> 响应式图片

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

<audio> 音频

<video> 视频

<canvas> 画布

<svg> 矢量图形

SVG 图形

1.7 交互元素 Interactive

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

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

默认展开的详情

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

📦 原生对话框

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

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

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

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

🎯 二、CSS 选择器大全

从基础选择器到现代 :has() 和伪元素

2.1 基础选择器

元素选择器

p { color: red; }

这是 p 元素

类选择器

.highlight { ... }

类选择器效果

ID 选择器

#unique { ... }

ID 选择器效果

通配符选择器

* { margin: 0; }

选择所有元素

属性选择器

[data-type="demo"]

[data-type="demo"]

[href^="https"] 以...开头 | [href$=".pdf"] 以...结尾 | [class*="btn"] 包含

2.2 组合选择器

后代选择器

.parent .child { }
外层
内层（后代）

子代选择器

.parent > .child { }

只选择直接子元素

相邻兄弟

h4 + p { }

紧接在后的兄弟元素

通用兄弟

h4 ~ p { }

同一父元素下后续所有兄弟

2.3 伪类选择器 Pseudo-classes

:hover / :active / :focus

:first-child / :last-child

  • 第一个子元素 (:first-child)
  • 中间子元素
  • 最后一个子元素 (:last-child)

:nth-child(n) / :nth-of-type(n)

  • nth-child(odd) 奇数
  • 偶数
  • 奇数
  • 偶数

:not() 否定伪类

:not(.excluded) 选中所有非该类的元素

:is() / :where() 匹配伪类

:is(h1, h2, h3) { margin: 0; }

零特异性(:where) vs 最高特异性(:is)

:has() 关系伪类 NEW!

.card:has(> img) { }

:has(.child.active) 选中此父元素

:empty / :checked / :disabled

已选中
已禁用

:target / :focus-within / :focus-visible

:focus-within 当内部元素聚焦时

2.4 伪元素 Pseudo-elements

::before / ::after

::before 图标 →

← ::after 图标

::first-letter

首字母大写装饰效果，使用 ::first-letter 伪元素。

::first-line

使用 ::first-line 伪元素来改变第一行的样式。这一行会显示为粗体并使用不同的颜色。

::selection

选中此文本查看自定义选中颜色效果。

::marker

  • 自定义列表标记颜色
  • 使用 ::marker 伪元素

::placeholder

📦 三、CSS 盒模型与定位

3.1 盒模型 Box Model

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

content

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

box-sizing: content-box

宽高不含 padding/border

box-sizing: border-box

宽高含 padding/border

3.2 定位 Positioning

static
relative (偏移)
absolute

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

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

3.3 浮动与清除 Float

float: left
float: right

这是环绕浮动元素的文本内容。使用 float: inline-start（逻辑属性）和 float: inline-end。文本会围绕浮动元素排列，展示传统的浮动布局方式。

使用 clear: both 清除浮动。

📐 四、现代 CSS 布局

4.1 Flexbox 弹性布局 Flexbox

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

flex: 1 1 200px
项目 1
flex-grow: 3
项目 2（增长更多）
flex-shrink: 0
flex-basis: 150px
项目 3（不收缩）
项目 4

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

space-between
space-between
space-between

4.2 CSS Grid 网格布局 Grid

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

1fr 1fr 1fr
grid-column: span 2
grid-row: span 2
auto-fill + minmax
响应式网格
自动调整

子网格 Subgrid

子网格项 1

此项目使用 grid-template-rows: subgrid 与父网格对齐。

子网格项 2

子网格允许嵌套网格继承父网格的轨道定义。

这是子网格的第二行内容，与父网格对齐。

子网格项 3

4.3 多列布局 Multi-column

这是多列布局的示例文本。使用 column-count 和 column-gap 属性可以轻松创建类似报纸的多列排版效果。文本会自动从一列流到下一列。

多列布局非常适合展示大段的文本内容。你可以使用 column-rule 添加列之间的分隔线。

使用 column-width 替代 column-count 可以创建响应式的多列布局，列数会根据容器宽度自动调整。

4.4 容器查询 Container Queries

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

📦

小容器（<500px 时纵向排列）

📦

大容器（≥500px 时横向排列，通过 @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) 实现的滚动驱动动画。

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

滚动触发 1
滚动触发 2
滚动触发 3

5.4 变换 Transform 2D / 3D

2D 变换：translate rotate scale skew

translate
rotate
scale
skewX

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

 

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

5.5 滤镜与混合模式 Filters

滤镜示例悬停移除滤镜
mix-blend-mode
clip-path
 

🚀 六、现代 CSS 特性

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

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

此元素使用 margin-inline padding-block border-inline-start 等逻辑属性。

逻辑属性会根据 writing-mode 和 direction 自动调整。

这是使用 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

滚动吸附 1
scroll-snap-align: center
滚动吸附 2
滚动吸附 3
滚动吸附 4
滚动吸附 5

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

自定义滚动条样式区域。向下滚动查看效果。

可以使用 ::-webkit-scrollbar 和 scrollbar-width scrollbar-color 来定制滚动条。

这是一段用来演示自定义滚动条样式的文本内容。继续向下滚动可以看到滚动条的颜色和宽度已经改变。

滚动条的轨道使用了 var(--clr-surface-2) 颜色，滑块使用了 var(--clr-primary) 颜色。

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 示例 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

100vw
视口宽度
100dvh
动态视口高度
50vmin
视口短边的50%
50vmax
视口长边的50%

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

7.3 响应式图片 Responsive Images

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

响应式图片 srcset 示例 根据视口宽度自动选择最佳图片尺寸

⚡ 八、其他进阶特性

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 变量继承

此元素继承了父级定义的 --custom-color 变量。

子元素重新定义了 --custom-color 变量。

使用 fallback 值：var(--undefined, fallback)

8.6 文本方向与国际化

dir="rtl" 从右到左：

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

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

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

8.7 CSS 动画性能优化

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

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

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

📚 前端学习全景图

本页面涵盖了 HTML5 和 CSS3 的核心知识点及最新特性

HTML5 语义化 CSS Grid + Flexbox 容器查询 @layer 级联层 CSS 嵌套 :has() 选择器 滚动驱动动画 逻辑属性 oklch 颜色 color-mix() subgrid 子网格 @container aspect-ratio clip-path mix-blend-mode popover / dialog scroll-snap prefers-reduced-motion @supports @scope

构建于 2024 · 使用最新 CSS 特性 · 持续更新中

📧 联系：learn@frontend.dev

↑ 回到顶部

posted @ 2026-08-25 15:58  华腾智算  阅读(10)  评论(0)    收藏  举报
https://damo.alibaba.com/ https://tianchi.aliyun.com/course?spm=5176.21206777.J_3941670930.5.87dc17c9BZNvLL