HTML需人工用标注双拼（非全拼），如“知→zi”；须用data-context区分多音字语境，声明双拼方案（如自然码），并提供纯文本fallback。
HTML 本身不提供多音字自动识别或双拼标注能力，必须靠人工标记 + CSS 控制显示逻辑。核心思路是：用 <ruby></ruby> 做基础结构，<rt></rt> 放拼音（注意是「双拼」而非全拼），再用 lang 属性或自定义 data- 属性区分读音场景。
用 <ruby></ruby> + <rt></rt> 标注双拼，不是全拼
双拼要求每个音节只占两个字母（如「知」标为 zhi → zi，「学」标为 xue → xe），不能直接套用全拼转换工具输出。浏览器不会校验 <rt></rt> 内容是否合规，所以必须人工核对：
-
<ruby>知<rt>zi</rt></ruby>—— 正确，符合双拼规则 -
<ruby>行<rt>xíng</rt></ruby>—— 错误，这是全拼带声调，不是双拼 -
<ruby>行<rt>xn</rt></ruby>—— 正确（假设用自然码方案） - 多个字的词组要逐字标注，不能合并写成一个
<rt></rt>，否则语义丢失、无法选中单字
区分多音字不同读音的上下文
同一个词在不同语境下读音不同（如「长」在「长度」中读 cháng → cr，在「成长」中读 zhǎng → zr），仅靠 <ruby></ruby> 无法自动切换。可行做法是：
- 用
data-context属性注明语义场景：<ruby data-context="length">长<rt>cr</rt></ruby> - 配合 CSS 的
[data-context="length"] rt规则做样式微调（比如加浅灰底色），辅助人工校对 - 避免依赖 JavaScript 动态替换——加载延迟、SEO 不友好、无脚本环境直接失效
- 若需响应式切换（如点击切换读音），必须预置全部可能的
<rt></rt>，用aria-hidden控制显隐，而非运行时生成
双拼方案不统一，必须声明所用编码规则
不同双拼方案对同一音节映射不同（如「uan」在小鹤是 un，在自然码是 vn）。HTML 中必须明确标注所用方案，否则读者无法解码：
立即学习“前端免费学习笔记（深入）”；
- 在页面
加说明：<meta name="pinyin-scheme" content="ziranma"> - 或在首个双拼标注旁加小字号提示：
<small>（自然码）</small> - 不要把方案写进
<rt></rt>里（如<rt>un(zrm)</rt>），破坏可读性和复制体验 - 导出为 EPUB 或打印时，
<ruby></ruby>渲染不可靠，建议额外提供纯文本双拼对照表作为 fallback
真正难的不是写标签，而是确保每个字的双拼形式都经过方言/语境/方案三重校验。一个错标会误导整组词，且不容易被肉眼发现。
