ruby标签不处理声调，必须手动输入Unicode声调符号（如mā），禁用ma1或无调拼音；多音字需人工按语境标注；须配CSS设置font-size和line-height防止错位；rp标签成对使用以保障旧浏览器兼容性。
ruby 标签本身不处理声调，必须手动写入 Unicode 声调符号
浏览器不会自动给拼音加声调，ruby 只负责把 rt 里的内容渲染在基字上方。声调得你亲手加——用 Unicode 声调符（如 ā、á、ǎ、à），不能靠程序生成或 CSS 模拟。
常见错误是写成 rt 里放 ma1 或 ma（无调号），前者不被识别为有效拼音，后者默认读轻声，语义错乱。正确写法是 <rt>mā</rt>，且确保网页编码为 UTF-8，字体支持这些组合字符。
- 声调符号必须紧贴元音字母，不能有空格：✅
mā，❌mā（尾部空格）或mā（全角字符） - 轻声不标调号，只写小写字母：如“妈妈”是
<rt>mā ma</rt>，第二个ma不加符号 - 儿化音统一用
r后缀，不拆音节：如“花儿”写<rt>huār</rt>，不是huā ér - 避免混用全角标点或中文空格，否则
rt内容会被浏览器当普通文本折行或截断
多音字必须人工判断上下文，ruby 不做分词或语义识别
ruby 是纯呈现层标签，它不认识“长”在“长度”里读 cháng，在“长大”里读 zhǎng。你得根据实际语境，手动为每个字指定对应拼音。
比如同一页面出现“重庆”和“重量”，不能共用一套拼音逻辑：前者是 <ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，后者是 <ruby><rb>重</rb><rt>zhòng</rt></ruby>。
立即学习“前端免费学习笔记（深入）”；
- 别指望 JS 库自动识别多音——多数拼音库（如 pinyin-pro）也需传入上下文参数才能选调
- 如果页面含古诗或文言，变调规则（如“一”“不”的去声变调）必须人工校对后硬编码
- 一个字在不同词中音不同，就得写多套
ruby结构，无法复用
line-height 和 font-size 必须设，否则声调位置错位或被截断
不设 CSS 的话，rt 默认字号和基字一样大，声调符号会顶到上一行文字，或被父容器的 line-height 挤压变形。
最小必要样式是：
ruby rt {
font-size: 0.6em;
line-height: 1.2;
}
ruby {
line-height: 2;
}
-
ruby rt的font-size要显式缩小，否则声调视觉失衡；0.5–0.7em 是安全区间 -
ruby父元素的line-height必须足够大（≥1.8），否则连续多行注音时，上行拼音会盖住下行基字 - 禁用
vertical-align或position: absolute，它们会切断ruby内置的对齐逻辑，导致声调偏移 - 不要给
ruby设width或display: block，这会让注音脱离基字定位流
rp 标签不是可有可无，老环境里它决定声调是否可读
没 rp 时，IE 或旧安卓 WebView 会直接把 rt 当普通文本塞在汉字后面，变成「汉字hàn zì」，声调完全暴露、不可读。加了 <rp>(</rp><rt>hàn</rt><rp>)</rp>，老浏览器才显示「汉(hàn)」，至少保底可读。
-
rp必须成对、紧邻rt，顺序不能颠倒：左括号在前，右括号在后 - 现代浏览器自动隐藏
rp，不影响声调显示，但漏掉它，就等于放弃旧环境用户 - 别用
span模拟rp——语义无效，屏幕阅读器无法识别括号作用
ā 可能渲染成 a 加一个浮动符号。上线前务必在目标设备上实测，而不是只看开发机效果。 
