文章详情页必须用包裹，且仅含一个位于内顶部的；标题层级需连续（h1→h2→h3…），禁止跳级或降级滥用；图文混排须用封装，图片带宽高与alt属性；正文应分层导航，合理使用等语义标签。
标题层级必须唯一且连续
文章详情页只应有一个 ，放在 <main></main> 内部最上方，代表全文核心主题。它不能被 CMS 模板全局插入的另一个 <h1></h1> 覆盖或并存——否则语义断裂，SEO 权重分散，屏幕阅读器会误判为两个独立主干。
用于一级分节，比如“背景”“方法”“结论”；每个 <h2></h2> 下若需展开，再用 ，依此类推。禁止跳级（如 <h1></h1> 后直接 <h4></h4>），也不允许降级滥用（如用 <h3></h3> 替代加粗强调）。
图文混排要封装在语义容器里
每组“图+说明”应包裹在 <figure></figure> 中：<img> 必须带真实 width 和 height（或 aspect-ratio），alt 描述画面实质，<figcaption></figcaption> 补充上下文信息（不是重复 alt，也不是空标签）。
左右排版可用 Flex：容器设 display: flex; flex-direction: row; gap: 1.5rem;，图片固定宽度，文字部分用 flex: 1;；上下排版则用 flex-direction: column; 并居中对齐。避免浮动、绝对定位或纯 CSS 模拟结构。
正文段落要分层、可导航
首段可加 <blockquote></blockquote> 突出导语；关键术语、数据对比用 <dl>
<dt></dt>
<dd></dd>
</dl> 结构化；长文每 3–5 段插入一个 <h3></h3> 小标题，并配上锚点 ID（如 id="data-source"），方便用户跳转和分享直达。
不要堆砌大段 <p></p>。段与段之间留白靠 CSS 控制，而非空 <p></p> 或 <br>。引述他人观点时用 <blockquote></blockquote> + <cite></cite>，不手动写“——某某说”。
用 包裹整篇内容
文章详情页主体必须用 <article></article> 包裹，而不是 <section></section> 或 <div>。因为 <code><article></article> 表明该内容可独立存在、能被 RSS 抓取、邮件转发或社交平台引用——这是语义刚需，不是样式选择。
<article></article> 内部可有自己的 <header></header>（含 <h1></h1> 和 <time datetime></time>）、<footer></footer>（含标签、分享按钮），外部用 <main></main> 包一层即可。嵌套层级控制在 4 层以内，例如：<main> → <article> → <header> → <h1></h1></header></article></main>。
