如何在文字上方添加拼音或英文标注

Posted on Edited on In Views: Word count in article: 708 Reading time ≈ 3 mins.

[toc]

在公众号 Linux 中国 的文章中，自己看到文章中一般会在中文技术名词的上方标注对应的英文，用户体验非常好，如下所示。

自己私下询问后得知，可以使用 HTML5 的 RUBY 标签实现，那么再也不用采用下面的方式来给技术名词加专业英文解释。

1
强化学习(reinforcement learning)

背景知识

什么是 HTML？

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

什么是 HTML5？

  • HTML5 是最新的 HTML 标准。
  • HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
  • HTML5 拥有新的语义、图形以及多媒体元素。
  • HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
  • HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

Ruby

Ruby 是一种排版注释系统，是位于横排基础文本上方的简短文字，主要针对东亚语言作出简单的读音注释。

ruby 涉及的元素包括 ruby、rt 以及 rp。首先使用 ruby 指定一个具体的表达式，然后使用 rt 提供说明。rt 部分将显示在表达式上方。

例子

  • Example 1
1
2
3
4
5
6
7
<ruby>
强化学习<rt>reinforcement learning</rt>
</ruby>
有近几十年的研究历史，是 <ruby>
人工智能<rt>artificial intelligence</rt>
</ruby>
的一个研究方向。
强化学习 reinforcement learning 有近几十年的研究历史，是 人工智能 artificial intelligence 的一个研究方向。
  • Example 2
1
2
3
4
<ruby>汉<rt>Hàn</rt></ruby>
<ruby>字<rt>zì</rt></ruby>
<ruby>拼<rt> pīn</rt></ruby>
<ruby>音<rt>yīn</rt></ruby>

汉 Hàn
字 zì
拼 pīn
音 yīn

References