HTML多音字标注有哪些方法？常用标签用法汇总-html教程-PHP中文网

否fǒu否pǐ是唯一合规写法，因多音字必须拆分为多个独立单元，每个仅含一个确定读音，确保语音合成、屏幕阅读与CSS样式精准控制。

html多音字标注有哪些方法？常用标签用法汇总

多音字必须拆成多个单元，每个单元只对应一个读音；不能在一个里塞多个拼音或用斜杠分隔。

为什么 `否fǒu/pǐ` 是错的

这种写法会让语音合成器无法判断该读哪一个，屏幕阅读器可能跳过整个注音，CSS 也无法对两个声调分别着色或缩放。语义上它表达的是“一个字对应一个模糊读音”，而非“同一字形在不同语境下有不同确定读音”。

常见错误还包括：

用空格或中文顿号分隔，如 cháng 、 zhǎng —— 浏览器会把空格/标点当字符渲染，导致注音错位
把多音字整个包进一个再配多个，如 长chángzhǎng —— 这违反“一对一”映射原则，部分浏览器（尤其是 Safari）会忽略第二个
依赖 JavaScript 动态切换内容但没同步更新 aria-label 或 data-pinyin —— 对键盘用户和屏幕阅读器不友好

+ 多个并列单元是唯一合规方案

标准做法是把每个读音单独封装为一个，靠上下文或交互提示区分。例如“重”字在“重量”和“重复”中读音不同，应写作：

<ruby>重<rp>(</rp><rt>zhòng</rt><rp>)</rp></ruby>量 <ruby>重<rp>(</rp><rt>chóng</rt><rp>)</rp></ruby>复

要点：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

每个必须包含且仅包含一个基字（可省略，但建议显式写出以提升可读性）
成对出现，紧邻，兼容旧环境
拼音用 Unicode 声调符（如 zhòng），不用数字标调（如 zhong4），避免字体支持问题
若需视觉提示（如“点击切换读音”），应在外部加包裹整组，而不是往内部塞按钮

动态生成时最容易崩的三个地方

用 Python（pypinyin）、JavaScript（pinyin-pro）或模板引擎批量加注时，结构断裂比样式错位更致命。

字符串拼接漏转义：比如 v-html="`${char}${pinyin}`" 中 char 含 & 或 ，会导致 HTML 解析失败甚至 XSS
输入含组合字符或 emoji：如「ḿ」（m + ◌́）被当两个字符处理，pypinyin.lazy_pinyin() 返回长度不匹配，和数量对不上
React/Vue 组件中插入 Fragment 或条件语句：如 长{isChang ? cháng : zhǎng} —— 不再是的直接子节点，语义丢失

CSS 微调多音字注音的关键控制点

纯靠 HTML 结构只能保证语义正确，要让多音字注音在视觉上可区分，得靠 CSS 精准干预：

给不同读音的加 class：hào，再设 .tone4 { color: #e74c3c; font-size: 0.6em; }
轻声用 data-tone="light" 标记：men，配合 rt[data-tone="light"] { font-size: 0.55em; opacity: 0.7; }
禁用 position: absolute 拉偏注音位置——它会切断与基字的排版关联，响应式断点下极易错位
横排注音统一用 rt { writing-mode: horizontal-tb; }，避免竖排页面里拼音跑右边