是页面唯一且不可替代的核心业务容器，必须直接位于下且仅出现一次；内部按语义分层：独立业务单元用，主题分组用（须带h2–h6标题），辅助信息用，禁用无意义div堆砌。

核心业务内容必须用

包裹，这是唯一且不可替代的选择。

main 是页面主体内容的法定容器

它专为当前页面最核心、最直接相关的业务信息而设——比如电商页的商品列表与筛选器、后台系统的数据看板、表单提交页的填写区域。这个标签不能省略，也不能套在其他语义标签内部（如不能放在

或

里）。

• 每个 HTML 页面有且仅有一个
• 它应直接出现在 下，或紧邻
  /

  之后
• 删掉
  外的内容，剩余部分仍能表达该页的核心目的

业务内容内部按逻辑分层，不靠 div 堆砌

在

里面，不要用一堆

划分模块。而是根据内容性质选择对应语义标签：

• 一个完整可独立传播的业务单元（如订单详情页、用户档案页）→ 用
  包裹
• 按主题组织的一组内容（如“支付方式”“物流信息”“售后服务”）→ 每组用
  ，且必须带 h2–h6 标题
• 与主流程相关但非必需的辅助信息（如优惠券说明、常见问题链接、操作引导提示）→ 放入

避免常见误用

语义标签不是视觉盒子，不能为了“看起来像一块”就硬套：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 纯图标按钮 + 一行文字说明 → 用

  或 ，别用

• 文章页的发布时间、作者、分类等元信息 → 应放在
  内部的

  中，而非丢进

  外层
• 多个导航区块（如顶部主导航 + 文章内目录）→ 各自用
  ，并加 aria-label 区分，不要合并成一个

结构对齐真实业务意图

写代码前先问一句：这块内容用户来这页是为什么？

• 是为了查看这份报告？→ 整个报告用
  ，关键图表用

  +

• 是为了完成一笔交易？→ 表单区域是
  主体，步骤说明可放

  ，错误提示用

  配合语义增强

  是为了浏览一组服务？→ 每项服务是一个

  ，整个列表用

  包裹，并以 h2 标明“我们的服务”

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！