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