html5的与标签专为东亚文字注音设计，实现语义正确、样式可控、屏幕阅读器友好的生僻字拼音标注；结构要求包裹汉字与对应注音，一对一严格匹配，支持css微调和无障碍访问。

HTML5 的 <ruby></ruby> 和 <rt></rt> 标签专为东亚文字注音设计，能实现语义正确、样式可控、屏幕阅读器友好的生僻字拼音标注，比纯 CSS 或图片方案更规范可靠。

基本结构：用 ruby 包裹汉字，rt 放拼音

<ruby></ruby> 是容器标签，必须包含至少一个被注释的文字（如汉字）和一个 <rt></rt>（ruby text），即注音内容。标准写法如下：

• 汉字写在 <ruby></ruby> 开始标签后、<rt></rt> 前；
• <rt></rt> 必须紧跟在对应汉字之后（不能跨字）；
• 可选加 <rp></rp>（ruby parentheses）提供括号降级兼容，但现代浏览器已不强制需要。

示例（“饕餮”注音）：

饕tāo餮tiè

多音字与连读处理：每个字单独标注

生僻字常存在多音或语境变调，<ruby></ruby> 要求“一对一”对应，不可合并拼音。例如“否极泰来”的“否”读 pǐ，不能写成“fǒu/pǐ”混排：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 错误：<ruby>否<rt>fǒu/pǐ</rt></ruby>（语义模糊，语音合成器无法准确朗读）；
• 正确：<ruby>否<rt>pǐ</rt></ruby>，并辅以上下文说明或 data-pinyin 属性备用。

若需标注轻声、儿化等口语变体，建议用拼音完整表达（如“我们”标为 “wǒ men”，非 “wǒ mén”），保持注音与实际读音一致。

样式微调：用 CSS 控制注音位置与外观

默认情况下，<rt></rt> 显示在汉字正上方（横排）或右方（竖排）。可通过 CSS 精细控制：

• 统一设置注音字体大小与颜色：
  ruby { font-size: 0.7em; }
  rt { color: #666; }
• 调整垂直间距（避免遮挡）：
  ruby { line-height: 1.8; }
  rt { line-height: 1; }
• 强制横排注音（即使页面竖排）：
  rt { writing-mode: horizontal-tb; }

注意：不要用 position: absolute 覆盖原生布局逻辑，否则会破坏可访问性与响应式表现。

可访问性与兼容性要点

该方案天然支持无障碍浏览，但需注意几点：

• 主流屏幕阅读器（NVDA、VoiceOver）能自动朗读 <rt></rt> 内容，前提是未用 aria-hidden="true" 隐藏；
• IE 仅支持至 IE9，且需 <rp></rp> 包裹括号（如 <rp>(</rp><rt>tāo</rt><rp>)</rp>）；
• 为兼顾旧环境，可在 <ruby></ruby> 上添加 title 属性作为拼音后备：
  饕tāo餮tiè

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！