D02 文章详情页

2026-10-31 14:440 阅读约 12 分钟HTML

摘要：长文页的结构问题集中在三处：读者找不到位置、机器提取不到要点、分享时没有摘要。解法分别是页内目录、结构化数据与元信息。本文用一篇约 800 字的技术文章做样板，给出目录与正文的双向锚点写法、代码块与图注的规范，以及分享卡片与面包屑的配置。
关键词：长文结构，页内目录，锚点，文章元信息，面包屑

所属：frontend/html / D-实战 ｜ 上一篇：D01-作品集站点 ｜ 下一篇：D03-后台表单页

1 引言

技术长文与营销页的差别在「可跳读」：读者往往只关心某一节。页内目录解决了跳读，代价是锚点与标题 id 必须长期稳定，改名即断链。

本文给出一份可直接套用的长文骨架。范围见表 1-1。

项 本文覆盖 本文不覆盖
阅读结构 目录、章节标题、正文段落、图注、代码块 阅读进度条与目录高亮脚本
机器可读 description、canonical、JSON-LD、面包屑 收录效果与平台规则
规范 锚点命名、代码高亮前的转义、图片说明 文章排版系统与主题

2 预备知识

项 要求 核对方式
环境 A02 的本地服务器 能访问 localhost
前置 B01、B05 元信息与 JSON-LD 已掌握
前置 A06 能写目录列表
文件 site/article.html 与 D01 站点同目录

3 原理与实现

3.1 目录与正文的锚点契约

目录项与章节标题通过 id 建立双向关系，任何一侧改动都会断链，如图 3-1 所示。

flowchart LR
    T["目录项<br/>href=#principle"] --> A["章节标题<br/>h2 id=principle"]
    A --> B["正文段落"]
    B --> C["图注与代码块"]
    C --> D["结论"]
    D --> E["返回目录"]

图 3-1 目录与正文的锚点关系

图上可见：锚点是唯一契约，id 一旦发布就不应修改；确需修改时须同步目录并保留跳转别名。

3.2 长文页完整结构

<!-- 运行环境：Chrome 130+；site/article.html -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML 元信息清单 | 李明的工作笔记</title>
    <meta name="description" content="head 中九项元信息的作用、写法与验证方法。" />
    <link rel="canonical" href="https://example.com/articles/meta" />
  </head>
  <body>
    <nav aria-label="面包屑">
      <ol>
        <li><a href="./index.html">首页</a></li>
        <li><a href="./projects.html">文章</a></li>
        <li><span aria-current="page">HTML 元信息清单</span></li>
      </ol>
    </nav>

    <main>
      <article>
        <h1 id="top">HTML 元信息清单</h1>
        <p>发布于 <time datetime="2026-10-29">2026 年 10 月 29 日</time>，约 1500 字。</p>

        <nav aria-label="文章目录">
          <h2>目录</h2>
          <ol>
            <li><a href="#why">1 为什么要配元信息</a></li>
            <li><a href="#principle">2 九项元信息</a></li>
            <li><a href="#verify">3 验证方法</a></li>
          </ol>
        </nav>

        <section>
          <h2 id="why">1 为什么要配元信息</h2>
          <p>检索与分享都只读 head，缺少字段时结果退化为纯链接。</p>
        </section>

        <section>
          <h2 id="principle">2 九项元信息</h2>
          <p>九项配置按作用分为检索、分享、移动三组，写法如下。</p>

          <pre><code>&lt;meta name="description" content="80 ~ 160 字摘要" /&gt;</code></pre>

          <figure>
            <img src="./assets/images/og-preview.jpg" alt="分享卡片预览：标题、摘要与缩略图" width="640" height="336" loading="lazy" />
            <figcaption>图 1 分享卡片的三个可配置区域，2026 年 10 月截取</figcaption>
          </figure>
        </section>

        <section>
          <h2 id="verify">3 验证方法</h2>
          <p>依次检查源码视图、卡片调试器与 Lighthouse 三项，全部通过后发布。</p>
        </section>

        <p><a href="#top">返回顶部</a></p>
      </article>
    </main>

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "HTML 元信息清单",
      "datePublished": "2026-10-29",
      "author": { "@type": "Person", "name": "李明" },
      "mainEntityOfPage": "https://example.com/articles/meta"
    }
    </script>
  </body>
</html>

长文页的构件与规范见表 3-1。

构件 写法要求 常见问题
面包屑 nav + ol，当前项用 aria-current 用 div 与箭头字符拼接
目录 nav + ol，链接到 #id 目录与标题 id 不一致
章节标题 h2 带语义 id（英文短语） 用中文 id，编码后难以手写
正文段落 一段一主题，长度不超过 8 行 单段过长，跳读困难
代码块 <pre> 内包 <code>，尖括号转义 直接粘贴未转义，标签被执行
图注 figure + figcaption，编号连续 图注与图片分离
返回顶部 指向 #top，top 放在 h1 上 href="#" 导致地址栏出现多余符号

4 验证与讨论

  1. 打开页面，点击目录三项，确认每次都跳到对应章节，地址栏带 #id。
  2. 点击「返回顶部」，确认回到标题位置。
  3. 用开发者工具检查 h2 的 id，与目录 href 逐项比对，确认无拼写差异。
  4. 校验收到的 JSON-LD，确认 headline、datePublished、author 三项存在。
检查项 预期结果 说明
目录跳转 三项均可定位 锚点一致
当前项标记 面包屑末项有 aria-current 朗读可识别
代码显示 页面显示标签文本而非执行 已转义
图注编号 全篇连续 图片与说明成对
结构化数据 三项必填字段齐全 校验器零错误

本项目四项取舍见表 4-1。

决策点 采用方案 备选方案 不选的理由
目录位置 正文之前独立 nav 右侧固定侧栏 侧栏依赖 CSS 与滚动脚本
锚点命名 英文短语 中文标题直接作 id 中文 id 在分享链接中被编码
返回顶部 #top javascript:scrollTo 脚本方案在禁用脚本时失效
图注编号 手写编号 脚本自动编号 长文图片少，手写更直观

讨论与局限。 锚点不会自动跟随标题改名，重构章节时必须同步目录。另目录本身会增加一次 nav 地标，多篇目录并存时需要用 aria-label 区分，否则朗读软件连续播报两个「导航」。

5 常见问题

现象 原因 处理
点击目录不跳转 id 写错或重复 逐项比对目录 href 与标题 id
跳转后标题被顶部条遮挡 固定头部覆盖 给标题加 scroll-margin-top
代码块里的标签消失 未转义，被当成标签解析 替换为 &lt; &gt;
分享打开后显示旧标题 平台缓存了上次抓取结果 清除缓存后重新抓取
面包屑末项也能点击 当前项使用了 a 且带 href 改为 span 并加 aria-current

6 结论

序号 结论 依据
1 目录与标题靠 id 建立契约，改名即断链 图 3-1
2 长文必须给出可跳读结构，段落不超过 8 行 表 3-1
3 代码块第一步是转义 表 3-1
4 元信息与结构化数据决定分享与检索的样子 4 节步骤 4

参考文献

[1] MDN Web Docs · article 元素，https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article（访问于 2026-10-29）
[2] schema.org · BreadcrumbList，https://schema.org/BreadcrumbList（访问于 2026-10-29）

返回文章列表

评论 0

0/2000

还没有评论，快来抢沙发吧~