必须用展示代码差异，因其语义明确、可访问性强、seo友好且被主流工具采用；表头需用定义列含义；移动端需css重排+data-label；diff内容须html转义并保留空白字符。

用 <table> 展示代码差异最可靠，不是为了“看起来像对比”，而是让 diff 结果能被屏幕阅读器正确解析、被搜索引擎索引、在窄屏下可重排 —— 其他方式（比如 flex 模拟两列）会在语义和可访问性上直接失效。 <h3>为什么必须用 <code><table> 而不是 <code>div + flex

当你把两段代码并排写成「左侧原始代码 / 右侧修改后代码」，本质是「同一逻辑单元在不同版本下的值对比」，属于典型的二维关系数据：行 = 代码行号或语义块，列 = 版本标识。浏览器和读屏器对 <table> 的解析是标准化的；而 <code>div 布局哪怕视觉对齐，也会被读作「一段文字、另一段文字」，无法建立「第3行左侧是旧逻辑，右侧是新逻辑」这种映射。

• 常见错误：用 display: grid 写两列代码块，加 aria-label 试图补语义 —— 实际测试中 VoiceOver 仍按 DOM 顺序逐字朗读，不识别“对比”关系
• 真实场景验证：Git 生成的 HTML diff 页面、VS Code 导出的比较报告、CI 系统的代码审查页，全部默认输出 <table> 结构 <li>如果只是临时预览、不涉及可访问性或 SEO，<code>pre 并排也能凑合，但一旦要交付给客户或嵌入文档系统，<table> 是唯一合规选择 <h3><code><thead> 和 <code><th scope="col"> 怎么写才不翻车 <p>表头不是装饰，它定义了列的含义。对于代码差异表，第一行必须是 <code><thead>，且每个列标题必须用 <code><th scope="col">，不能用 <code><td> 或省略 <code>scope。
  • 正确写法：<th scope="col">Before</th> <th scope="col">After</th> —— 明确告诉辅助技术「这两列分别代表修改前/后」
  • 错误写法：<td>Before</td> <td>After</td> 或 <th>Before</th> <th>After</th> —— 缺少 scope 属性，读屏器无法关联后续 <td> 所属列 <li>不要把行号当表头：第1列如果是行号（如 <code>1、2），它属于数据，应为 <td>；只有真正定义列含义的才用 <code><th scope="col"> <h3>移动端怎么让代码对比不变成横向滚动条</h3> <p>直接给 <code><table> 加 <code>overflow-x: auto 是无效的 —— 表格本身不会触发滚动，用户拖不动，缩放后代码被压扁。真正有效的方案是媒体查询 + DOM 重排，把「行→列」转成「块→内联双栏」。
    • 关键 CSS：

      @media (max-width: 768px) {
        .diff-table { display: block; }
        .diff-table thead, .diff-table tbody, .diff-table tr { display: block; }
        .diff-table td { display: block; }
        .diff-table td:first-child::before { content: "Before: "; font-weight: bold; }
        .diff-table td:last-child::before { content: "After: "; font-weight: bold; }
      }

    • 必须给每个 <td> 加 <code>data-label 属性（如 <td data-label="Before">...</td>），否则小屏下语义丢失
    • 避免用 white-space: nowrap 强制不换行 —— 长代码行会撑破容器；改用 word-break: break-word + pre-wrap 保持缩进同时允许折行

    diff 内容里含 HTML 标签或高亮怎么办

    代码差异单元格（<td>）里如果直接写 <code><span class="hljs-keyword">function</span>，浏览器会解析执行，导致结构错乱甚至 XSS。必须做转义处理。

    • 服务端渲染时：对所有 diff 输出调用 escapeHtml()（或对应语言的等效函数），把 → <code><，> → >
    • 前端 JS 渲染时：别用 innerHTML，改用 textContent 设置文本，再用 document.createElement('pre') 包裹后插入
    • 如果真要语法高亮，得用 <code> + <pre class="brush:php;toolbar:false;"></pre> 嵌套，并确保高亮库输出的是纯文本节点，而非直接插入 HTML 字符串
    • 注意：<pre class="brush:php;toolbar:false;"></pre> 本身不能作为 <td> 的直接子元素（HTML 规范允许，但部分老邮箱客户端会破坏结构），稳妥做法是 <code><td><div class="code-block"><pre class="brush:php;toolbar:false;">...</pre></div></td>

      最容易被忽略的是：diff 表格里的空行、首尾空白、制表符缩进，这些在视觉上微小的差异，恰恰是开发者最常来回确认的点 —— 所以 <td> 内容必须保留原始空白字符，不能用 <code>trim() 处理，也不能依赖 CSS 的 white-space 偷懒覆盖语义。

      

      html-to-pptx

      将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

      下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！