HTML 使用 ruby 给汉字加拼音

使用 ruby 给汉字加拼音

大家有没有遇到过要给汉字头顶上加拼音的需求? 如果有的话, 你是怎么解决的呢? 如果费尽心思, 那么你可能走了很多弯路, 因为 HTML 原生就有这样的标签来帮我们实现类似的需求.

<ruby>

ruby 本身是「红宝石」的意思, 与题无关

<ruby> 元素是可以渲染在基本文字上、下或旁边的小注释, 通常用来显示东亚文字(CJK, Chinese Japanese and Korean)的发音.

先一睹为快效果

<body>真理使人<ruby><rp>(</rp><rt></rt><rp>)</rp> </ruby><ruby><rp>(</rp><rt>yóu</rt><rp>)</rp> </ruby>.
</body>

在这里插入图片描述

哇😍, 效果是不是很赞! 没错, 使用起来就是折磨简单, 不过除了 <ruby> 外, 我们还用到了很多其他元素, 下面就一一来介绍

这里多说一句, 即便是不同的书写方向, <ruby> 仍然可以很好的适应. 比如我们将书写顺序改为垂直书写.

在这里插入图片描述

<rp>

The Ruby Fallback Parenthesis element, Parenthesis 是圆括号的意思

<rp> 元素用来为不支持 <ruby> 显示的浏览器提供兜底的括号.

每一组 <rp></rp> 应该分别将开始和结束圆括号括起来, 这对圆括号再将 <rt> 元素括起来, 而最终拼音是在 <rt> 元素中.

<rp>(</rp><rt></rt><rp>)</rp>

<rt>

The Ruby Text element

<rt> 中提供东亚文字的发音等信息, <rt> 必须包含在 <ruby> 中.

兼容性

桌面浏览器没得说, 如果需要适配手机端, 还需要多多考虑

在这里插入图片描述

谢谢你看到这里😊

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/602524.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode 每日一题 2023年12月30日 一周中的第几天

题目 给你一个日期&#xff0c;请你设计一个算法来判断它是对应一周中的哪一天。 输入为三个整数&#xff1a;day、month 和 year&#xff0c;分别表示日、月、年。 您返回的结果必须是这几个值中的一个 {"Sunday", "Monday", "Tuesday", &qu…

transforms图像增强(二)

一、图像变换 1、transforms.Pad transforms.Pad是一个用于对图像边缘进行填充的数据转换操作。 参数&#xff1a; padding&#xff1a;设置填充大小。可以是单个整数&#xff0c;表示在上下左右四个方向上均填充相同数量的像素&#xff1b;也可以是一个包含两个整数的元组…

【Xilinx FPGA】异步 FIFO 的复位

FIFO&#xff08;First-In-First_Out&#xff0c;先入先出&#xff09;是一种的存储器类型&#xff0c;在 FPGA 开发中通常用于数据缓存、位宽转换或者跨时钟域&#xff08;多 bit 数据流&#xff09;。在使用异步 FIFO 时&#xff0c;应注意复位信号是否遵循相关要求和规范&am…

MySQL Mysqldump 一致性备份与大数据库备份 与 PG MYSQL 到底谁是NO.1

这开头还是介绍一下群&#xff0c;如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,Redis, Oceanbase, Sql Server等有问题&#xff0c;有需求都可以加群群内&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;&#xff08;共1830人左右 1 2 3 4 5&#xf…

C/C++ 位段

目录 什么是位段&#xff1f; 位段的内存分配 位段的跨平台问题 什么是位段&#xff1f; 位段的声明与结构是类似的&#xff0c;但是有两个不同&#xff1a; 位段的成员必须是 int、unsigned int 或signed int 等整型家族。位段的成员名后边有一个冒号和一个数字 这是一个…

im6ull学习总结(三-3)freetype

1、Freetype简介 FreeType是一个开源的字体渲染引擎&#xff0c;主要用于将字体文件转换为位图或矢量图形&#xff0c;并在屏幕上渲染出高质量的字体。它提供了一组API&#xff0c;使开发者能够在自己的应用程序中使用和呈现字体。 FreeType最初是作为一个独立项目开发的&…

[Excel]如何找到非固定空白格數列的條件數據? 以月份報價表單為例

在群組中看到上述問題&#xff0c;研判應是一份隨月份變動的產品報價表單&#xff0c;空白欄可能表示該月份價格與上個月份一致。這個問題是需要取得最近一次單價和倒數第二次單價&#xff0c;常用且實務的excel案例值得紀錄。 最近一次單價: INDEX($B2:$G2,1,LARGE(IF(ISBLAN…

SpringSecurity集成JWT实现后端认证授权保姆级教程-环境搭建篇

&#x1f341; 作者&#xff1a;知识浅谈&#xff0c;CSDN签约讲师&#xff0c;CSDN博客专家&#xff0c;华为云云享专家&#xff0c;阿里云专家博主 &#x1f4cc; 擅长领域&#xff1a;全栈工程师、爬虫、ACM算法 &#x1f492; 公众号&#xff1a;知识浅谈 &#x1f525;网站…

跨平台开发教学:构建同时支持iOS和Android的教育网校APP

当下&#xff0c;教育行业也逐渐迎来了数字化转型的时代。构建一款支持iOS和Android的教育网校APP&#xff0c;不仅可以提供更好的用户体验&#xff0c;还能扩大应用的覆盖面&#xff0c;满足不同用户群体的需求。 一、选择合适的跨平台开发框架 在开始构建教育网校APP之前&a…

MidTool图文创作-GPT-4与DALL·E 3的结合

GPT-4与DALLE 3的结合 GPT-4是由OpenAI开发的最新一代语言预测模型&#xff0c;它在前代模型的基础上进行了大幅度的改进&#xff0c;不仅在文本生成的连贯性、准确性上有了显著提升&#xff0c;还在理解复杂语境和执行多步骤指令方面表现出了更高的能力。而DALLE 3则是一个创…

构建异地企业网络互联的高效路径

在当今数字化浪潮中&#xff0c;企业的业务拓展已不再受限于地理位置。为了在全球竞争中立于不败之地&#xff0c;越来越多的企业选择在不同城市设立分支机构&#xff0c;构建异地网络&#xff0c;实现高效的协同办公。本文将深入探讨在北上广等经济发达地区&#xff0c;如何通…

Linux部署Yearning并结合内网穿透工具实现公网访问本地web管理界面

文章目录 前言1. Linux 部署Yearning2. 本地访问Yearning3. Linux 安装cpolar4. 配置Yearning公网访问地址5. 公网远程访问Yearning管理界面6. 固定Yearning公网地址 前言 Yearning 简单, 高效的MYSQL 审计平台 一款MYSQL SQL语句/查询审计工具&#xff0c;为DBA与开发人员使用…

计算机毕业设计——SpringBoot 个人博客管理系统(附源码)

1&#xff0c;绪论 1.1 背景调研 在互联网飞速发展的今天&#xff0c;互联网已经成为人们快速获取、发布和传递信息的重要渠道&#xff0c;它在人们政治、经济、生活等各个方面发挥着重要的作用。互联网上发布信息主要是通过网站来实现的&#xff0c;获取信息也是要在互联网中…

BART论文解读:BERT和GPT结合起来会发生什么?

BART:Denoising Sequence-to-Sequence Pre-training for Natural Language Generation, Translation, and Comprehension 主要工作 提出了BART (Bidirectional and Auto-Regressive Transformers)&#xff0c; 是一种用于自然语言生成、翻译和理解的序列到序列的预训练方法。它…

C语言编译器(C语言编程软件)完全攻略(第二十七部分:VS安全函数问题(C语言安全函数)是怎么回事?如何解决?)

介绍常用C语言编译器的安装、配置和使用。 二十七、VS安全函数问题&#xff08;C语言安全函数&#xff09;是怎么回事&#xff1f;如何解决&#xff1f; 在 VS&#xff08;Visual Studio&#xff09;下编译C语言程序&#xff0c;如果使用了 scanf()、gets()、strcpy()、strca…

【Windows】之微软输入法配置小鹤双拼

前言 Windows 自带的输入法微软输入法本身就是个最简洁、最方便的输入法&#xff0c;不需要去安装多余的第三方输入法软件。同时&#xff0c;微软中文拼音输入法支持双拼输入法&#xff0c;但微软自带的双拼输入法不包含小鹤双拼方案的。所以&#xff0c;在这里将会讲解如何配置…

oracle 补齐数字长度 to_char踩坑

oracle的to_char网上找到的说明如下 &#xff08;1&#xff09;用作日期转换&#xff1a; to_char(date,格式); select to_date(2005-01-01 ,yyyy-MM-dd) from dual; select to_char(sysdate,yyyy-MM-dd HH24:mi:ss) from dual; &#xff08;2&#xff09;处理数字&#xf…

深入理解Vue3中的自定义指令

Vue3是一个流行的前端框架&#xff0c;它引入了许多新特性和改进&#xff0c;其中之一是自定义指令。自定义指令是一种强大的功能&#xff0c;可以让开发者在模板中直接操作 DOM 元素。本文将深入探讨 Vue3中的自定义指令&#xff0c;包括自定义指令的基本用法、生命周期钩子函…

面试之线程状态

1.线程有哪些状态 1.1Java线程的六种状态 Java 线程六种状态 新建 当一个线程对象被创建&#xff0c;但还未调用 start 方法时处于新建状态 此时未与操作系统底层线程关联 可运行 调用了 start 方法&#xff0c;就会由新建进入可运行 此时与底层线程关联&#xff0c;由操作…

leetcode算法题之递归--综合练习(一)

此专题对我们之前所学的关于递归的内容进行一个整合&#xff0c;大家可以自行练习&#xff0c;提升自己的编码能力。 本章目录 1.找出所有子集的异或总和在求和2.全排列II3.电话号码的字母组合4.括号生成5.组合6.目标和7.组合总和8.字母大小写全排列9.优美的排列 1.找出所有子…