HTML中ruby标签的基本结构必须为字拼音，其中rb包裹被注音汉字，rt提供对应拼音，二者须一一紧邻；多字应按语义分词包裹，不可合并注音或省略rb。
ruby 标签的基本结构怎么写
HTML 的 ruby 标签不是用来“自动注音”的，它只是语义化容器，必须手动配对 rb（汉字）和 rt（注音），浏览器才按规则渲染。常见错误是只写 rt 不套 rb，或把拼音直接塞进 ruby 里——这样注音会丢失定位，甚至不显示。
标准写法必须是：<ruby><rb>汉</rb><rt>hàn</rt></ruby>。其中：rb 是 base text（被注释的字），rt 是 ruby text（注音），两者一一对应。一个 ruby 元素里可以有多个 rb+rt 组合，但不能混用（比如两个 rb 共享一个 rt）。
多字多音怎么处理：逐字还是分词
中文注音粒度取决于语义，不是越细越好。比如「重庆」读作 chóngqìng，不是 zhòngqìng；如果拆成单字注音（chóng+qìng），反而误导。所以优先按词/专有名词整体注音，而非机械拆字。
- 推荐做法：每个词包一个
ruby，如<ruby><rb>重庆</rb><rt>Chóngqìng</rt></ruby> - 遇到变调或轻声（如「一」在「一起」中读
yì），必须按实际发音写rt，不能照搬单字拼音 - 若需混合注音（如「长」在「长大」中读
zhǎng，但单独字表意时想标cháng），得用两个独立ruby块，无法靠 CSS 或属性切换
样式控制：默认位置、行高与兼容性坑
现代浏览器默认把 rt 渲染在 rb 正上方，但垂直对齐依赖字体和 line-height。常见问题：拼音太挤、上下偏移、IE/旧 Safari 不支持 rb/rt（只认 rp 包裹的括号 fallback）。
立即学习“前端免费学习笔记（深入）”；
- 必须加
rp提供降级：如<ruby><rb>好</rb><rt>hǎo</rt><rp>(</rp><rt>hǎo</rt><rp>)</rp></ruby>，否则 IE11 及更早版本会把拼音当普通文本显示 - CSS 中用
ruby-position: over（默认值）确保注音在上；避免设置font-size过小导致可读性差，建议不低于 12px - 移动端 Safari 对
ruby行高计算敏感，若父容器line-height设为无单位数值（如1.5），可能让注音错位，建议显式设line-height: normal或带单位值
能不能用 JS 自动生成拼音
不能靠 HTML 或 CSS 实现，必须借助外部拼音库（如 pinyin-pro 或 chinese-conv），且生成结果要严格映射到每个 rb 元素。直接对整段文字调用 pinyin() 再插入 rt，大概率出错——因为库返回的是字符串，不识别多音字语境。
- 安全做法：人工校对后手写
rt，尤其涉及专有名词、古诗文、方言词时 - 若真要用自动化，需配合词性标注（POS tagging）+ 多音字消歧模型，成本远超手写
- 注意：所有生成的拼音必须转为小写、去声调符号（如
hao3）或带声调（如hǎo）需统一，浏览器不校验格式，但影响可读性
真正难的从来不是标签怎么写，而是每个 rt 里的拼音是否经得起语文老师推敲——机器分词再快，也读不懂「重」在「重复」和「重量」里的不同读音。
