直接用包汉字、放拼音、加括号兼容——最小合法结构为汉hàn；多字须分别包裹，拼音用半角小写字母及声调，成对确保旧浏览器显示“汉(hàn)”。
ruby 标签怎么给汉字加拼音
直接用 <ruby></ruby> 包住汉字，用 <rt></rt> 放拼音，用 <rp></rp> 提供括号降级兼容——这是最简可行路径。浏览器默认把 <rt></rt> 渲染在基字上方（横排）或右侧（竖排），无需 CSS 干预就能工作。
常见错误是把拼音写在 <ruby></ruby> 外面，或者漏掉 <rt></rt>，导致拼音不显示；更隐蔽的问题是用了全角空格或中文标点混入拼音里，造成排版错位。
-
<ruby>汉<rt>hàn</rt></ruby>是最小合法结构，<rp></rp>可选但建议加上 - 多个字要分别包裹：正确是
<ruby>北<rt>běi</rt></ruby><ruby>京<rt>jīng</rt></ruby>，不是整个词包一层 - 拼音必须用半角小写字母，声调用数字（如
zhong1）或 Unicode 声调符（如zhōng），后者需确保字体支持
rp 标签不是摆设，它解决老浏览器 fallback
IE 8–9 和部分旧安卓 WebView 不识别 <ruby></ruby>，会把 <rt></rt> 当普通文本渲染出来。这时 <rp></rp> 的作用就浮现了：它让这些浏览器只显示括号，把拼音藏进括号里，视觉上接近“（hàn）”这种可读格式。
标准写法是把括号放进 <rp></rp>，并成对出现：
<ruby>汉<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>
现代浏览器会隐藏 <rp></rp> 内容，只显示拼音；老浏览器则显示“汉(hàn)”。不加 <rp></rp> 在旧环境里可能直接裸露“hàn”，破坏阅读流。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
多音字、轻声、儿化音怎么标
ruby 本身不处理语义，只负责呈现。多音字必须由人工判断上下文后指定拼音，比如“长”在“长度”中读 cháng，在“长大”中读 zhǎng，不能靠自动分词。
- 轻声用不带声调字母表示，如“妈妈”标为
mā ma（第二个ma不加调号） - 儿化音通常不标“儿”的音节，只在原字拼音后加
r，如“花儿”标huār，不是huā ér - 分词单位要和语义一致：不是按字切，而是按词切，例如“中华人民共和国”应拆为“中华/人民/共和国”，每词单独套
<ruby></ruby>
CSS 能微调但别乱动默认行为
多数场景下，<ruby></ruby> 的默认排版足够清晰。强行用 display: block 或 position: absolute 会破坏内建的 ruby 对齐逻辑，尤其在换行、缩放、竖排时容易错位。
真正需要干预的情况极少，比如想统一拼音字号为基字的 60%，可用：
ruby rt { font-size: 0.6em; }
但注意：ruby 元素本身没有宽高盒模型，不要给它设 width 或 margin；rt 的垂直位置由浏览器控制，改 line-height 可能导致重叠。
复杂排版（如拼音与基字非一一对应、跨字注音）超出 <ruby></ruby> 原生能力，得退回到 <span></span> + CSS Grid 模拟，此时已不属于标准注音范畴。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
