HTML5布局骨架需按内容角色建立逻辑层级，核心是语义化标签各司其职：唯一且直接子元素，专放核心内容；/可多次嵌套但须归属明确；仅包裹主导航链接；独立可复用；为相关附属信息。

HTML5布局骨架不是把几个新标签堆在一起，而是按内容角色建立清晰的逻辑层级。核心是让每个标签承担明确、不可替代的语义职责，而不是视觉分区工具。

必须唯一且位置固定的

代表整个页面独一无二的核心内容区域，它必须是的直接子元素，且全页只能出现一次。导航栏、侧边栏、页脚版权、顶部横幅这些都不属于

的范畴。

• 正确做法：把文章正文、产品详情、表单主体等真正需要用户聚焦的内容放进
• 常见错误：在
  里塞入

  或

  ，或者把它嵌套在

  或

  内部
• 辅助技术依赖
  快速定位主内容，错放会导致屏幕阅读器跳过关键信息

和

可多次嵌套，但各有归属

它们不是“页面最顶/最底那一条”，而是“某块内容的头部介绍”或“尾部补充”。一个页面可以有多个

，比如站点顶部一个，每篇博客开头再一个；同样，

也能出现在

内部，标注作者信息或发布时间。

• 页面级
  通常含logo、主导航、搜索框
• 文章级
  适合放标题、时间、分类标签
• 出现在

  里时，可放编辑时间、版权声明、相关链接；出现在页面底部时，放版权年份、备案号、联系方式

只管“主要导航”，不包所有链接

是否用

的关键，是看这组链接是否构成用户在站内跳转的主路径。顶部菜单、左侧栏目树、分页控件算；页脚的“隐私政策”“友情链接”、文章末尾的“上一篇/下一篇”一般不算。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

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

• 建议为
  添加aria-label="主导航"，帮助屏幕阅读器识别用途
• 可以独立存在，也可以放在

  内部——但要确保它只包裹导航链接，不混入logo或搜索框
• 一个页面可有多个
  ，比如顶部主导航 + 底部快捷导航，但需用不同aria-label区分

与

的本质区别：能否独立存在

判断标准很实在：把这块HTML单独复制出来，贴到另一个网页或RSS阅读器里，还能不能被理解、是否仍有完整意义？能→用

；不能→用

。

• 典型场景：一篇博客、一条微博、一个用户评论、一则新闻稿
• 必须带标题（h1–h6），用于划分同一主题下的子模块，比如“安装步骤”“配置说明”“常见问题”三个小节
• 列表页（如“最新10篇文章”）本身用
  或

  包裹，每条用

  ，不要给整个列表再套一层

不是“在旁边”，而是“有关但可分离”

它专指与当前主内容相关、但又不属于核心叙述的信息，比如文章右侧的“作者简介”“相关推荐”“术语解释”。纯广告、装饰性图标、通用网站公告，都不符合

的语义。

• 可以出现在

  内部，也可以作为页面级侧边栏
• 如果它属于某篇
  的附属内容，建议直接嵌套在

  里，结构更紧密
• 避免把多个不相关的模块硬塞进同一个
  ，应按逻辑拆分