HTML5语义化标签通过、等明确划分逻辑区块，强调主题独立性与结构层级，要求每区块配标题、内容自洽，禁用纯样式目的；、为页面骨架级标签，各司其职不可替代。

HTML5用语义化标签划分章节与区域，核心是让结构有逻辑、可读、能被机器理解，而不是靠一堆

硬撑视觉布局。

用

划分带主题的独立区块

每个

代表一个有明确主题的内容单元，比如“产品优势”“用户评价”“常见问题”，它不是视觉容器，而是语义分组。

• 必须配一个

  –

  标题，标题层级要符合文档结构（例如主标题用

  ，子模块用

  ）

• 内容应自成一体，不和其他
  交叉重复
• 不能只为了加边框或浮动而用——没标题、没主题，就该换

  用

  标记可独立存在和复用的内容

  适合博客文章、新闻条目、评论、产品卡片这类能脱离当前页面单独发布的内容。

  

  Markdown to HTML

  {"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

  下载

  • 每篇完整内容单独包裹一层
    ，内部可嵌

    （含标题、时间）、

    （作者、标签）
  • 同一页面多个
    必须平级并列，不能互相嵌套
  • 如果一篇文章内有多个小节，用
    来组织，而不是再套

  用

  、

  、

  搭出页面主干

  这三个是页面骨架级标签，不可替代，也各有严格约束。

  立即学习“前端免费学习笔记（深入）”；

  • 可多次出现：整页顶部放logo+主导航；每个

    或

    里也能有自己的

    ，放该区块标题
  • 必须唯一，只包真正不可省略的核心内容，不包含导航、侧边栏、页脚等重复模块
  • 也可多处使用：全站底部写版权；单篇文章末尾写编辑时间、分类标签

  用

  和

  明确功能边界

  它们不是“位置描述”，而是“用途声明”。

  • 只用于主要导航链接集合，比如顶部菜单、侧边栏目导航；内部建议用

    • 结构，方便屏幕阅读器识别
    • 放附属内容：文章旁的术语解释、延伸阅读、作者简介；可嵌在

      内（关联当前内容），也可放在级（服务整页）
    • 页脚里的友情链接、备案号不用
      ，归管；广告栏、相关推荐也不属于

      ，除非它确实与主内容弱耦合、可分离