应使用<dl>而非<table>实现双语对照，因<dl>语义正确（<dt>为原文、<dd>为译文）、支持聚焦交互、适配屏幕阅读器与打印；需严格设置lang属性、分设中英字体与行高，并避免冗余class。
为什么不能用 <table> 做双语对照
直接用 <table> 排双语，视觉上像，但语义错、打印崩、缩放飘、屏幕阅读器读成“第1行第1列”，完全偏离翻译场景本质。双语是「源 ↔ 译」的定义关系，不是行列对比数据——<dl> 才是原生匹配的标签。
常见错误现象：
-
<tr>在 PDF 打印时中间断页，break-inside: avoid对它无效 - 中英文混排时，
<table>强制所有单元格共用一个line-height，中文“沉”、英文“飘” - 复制粘贴后格式全乱，因为表格结构和语义无关
<dl> 结构必须怎么写才生效
不是套个 <dl> 就完事。三个硬性条件缺一不可：语义正确、可聚焦、无冗余 class。
- 原文必须用
<dt>，译文必须用<dd>，不能反过来，也不能包一层<div> - 每个
<dt>必须带tabindex="0"，否则:focus-within交互不触发 - 整个列表只用一个 class（如
class="bilingual"），靠dl.bilingual dt + dd控制间距，别给每组加class="row-1"这类不可维护写法
正确示例：
立即学习“前端免费学习笔记（深入）”；
<dl class="bilingual"> <dt tabindex="0">The quick brown fox jumps over the lazy dog.</dt> <dd>那只敏捷的棕色狐狸跳过了懒狗。</dd> <dt tabindex="0">She has been studying Chinese for three years.</dt> <dd>她已经学了三年中文。</dd> </dl>
中英混排必须分设 font-family 和 line-height
中英文基线、x-height、字距差异极大，统一设置必然错位。关键不是数值大小，而是分开设后微调对齐感。
- 英文优先用系统无衬线字体：
"SF Pro Text", "Segoe UI", system-ui；避免Times New Roman干扰节奏 - 中文必须指定简体支持字体栈：
"PingFang SC", "Hiragino Sans GB", sans-serif；Microsoft YaHei在 Windows 上有模糊问题，慎用 -
line-height不是越大越好：英文设1.4，中文设1.6～1.7已足够；再大反而破坏视觉平衡
lang 属性不写对，排版就白调
浏览器、屏幕阅读器、拼写检查器全按每个元素自身的 lang 值工作，不是看根节点或父级继承来的。只改 document.documentElement.lang，已渲染的子元素完全不受影响。
-
<html lang="zh-CN">必须存在，且值严格为zh-CN、en-US等 BCP 47 格式；zh或zh_cn会被忽略 - 中英混排段落里，英文部分必须显式加
lang="en"，否则中文标点（如顿号、书名号）会按英文规则渲染，间距异常 - 动态插入的 DOM（如 AJAX 加载的段落），在
appendChild()后必须立刻设置el.lang = "zh-CN"，不能依赖继承
真正起作用的是每个 <dt> 和 <dd> 上的 lang：前者写 lang="en"，后者写 lang="zh-CN"，否则两端对齐、字体回退、标点挤压全失效。
