在HTML 页面中如何显示带圈圈的数字

数字外面有个圈圈，或者圈圈里有反底色显示，效果类似：

带圈圈的数字示例：
①
反色圈圈数字示例：

❶

要实现上面的效果，使用以下技术都可以达成：

方式1，. 使用图片 <image>
方式2 ，使用特殊的字体，比如WingDing系列
方式3，使用SVG绘图
方式4 ，直接使用Unicode 字符编码

毫无疑问，方式4 是最简单，灵活性和通用性最强的方式。也是本篇介绍的方式：使用Unicode 编码显示带圈圈的数字（本篇主要介绍从0到20）。

0-20 圈圈数字和底色圈圈数字的Unicode 编码

Unicode 是统一编码，直接定义了圈圈数字这样的字符，这里参考了：
官方对数字定义的文档，得出的结论如下：

带圈字符0的Unicode编码是 24EA（16进制）
带圈字符1-20 的Unicode编码是2460~2473
反色带圈字符0的Unicode编码是24FF
反色带圈字符1-10的Unicode编码是2776~277F
反色带圈字符11-20的Unicode编码是24EB~24F4
注意：有底色带圈数字的1-10 和 11-20 的编码并不连续，也就是这两种其实并不是相同系列，而且显示上的尺寸效果也有一些区别。

0-20 圈圈数字在HTML中如何显示

上面查看的都是16 进制，而HTML的&# 之后连接的是字符的十进制编码，所以需要做一个进制转换，可以使用在线的进制转换工具进行转换，比如 https://tool.oschina.net/hexconvert/。

最终的效果如下：

数字	十六进制	十进制	字符编码	显示效果
0	24EA	9450	`⓪`	⓪
1	2460	9312	`①`	①
2	2461	9313	`②`	②
3	2462	9314	`③`	③
4	2463	9315	`④`	④
5	2464	9316	`⑤`	⑤
6	2465	9317	`⑥`	⑥
7	2466	9318	`⑦`	⑦
8	2467	9319	`⑧`	⑧
9	2468	9320	`⑨`	⑨
10	2469	9321	`⑩`	⑩
11	246A	9322	`⑪`	⑪
12	246B	9323	`⑫`	⑫
13	246C	9324	`⑬`	⑬
14	246D	9325	`⑭`	⑭
15	246E	9326	`⑮`	⑮
16	246F	9327	`⑯`	⑯
17	2470	9328	`⑰`	⑰
18	2471	9329	`⑱`	⑱
19	2472	9330	`⑲`	⑲
20	2473	9331	`⑳`	⑳

0-20 反色圈圈数字在HTML中如何显示

数字	十六进制	十进制	字符编码	显示效果
0	24FF	9471	`⓿`	⓿
1	2776	10102	`①`	❶
2	2777	10103	`②`	❷
3	2778	10104	`❸`	❸
4	2779	10105	`❹`	❹
5	277A	10106	`❺`	❺
6	277B	10107	`❻`	❻
7	277C	10108	`❼`	❼
8	277D	10109	`❽`	❽
9	277E	10110	`❾`	❾
10	277F	10111	`❿`	❿
11	24EB	9451	`⓫`	⓫
12	24EC	9452	`⓬`	⓬
13	24ED	9453	`⓭`	⓭
14	24EE	9454	`⓮`	⓮
15	24EF	9455	`⓯`	⓯
16	24F1	9456	`⓰`	⓰
17	24F2	9457	`⓱`	⓱
18	24F3	9458	`⓲`	⓲
19	24F4	9459	`⓳`	⓳
20	24F5	9460	`⓴`	⓴

上面的1-10 使用的是丁贝符。

丁贝符，Dingbats，俗称杂锦字体，本来是印刷品之中使用的装饰及图形符号。在计算机被用来制作印刷刊物后，印刷业界便制造了各种杂锦字体。

样式

上面显示的相关是黑白色，要么背景黑色，数字白色；要么背景白色，数字黑色。要显示本篇开头的带颜色的效果，就需要结合CSS进行设置了，比如：

<span style="color:#66CC33;padding:0;font-size:34px">❶</span>

本篇的参考文献

* https://unicode-table.com/cn/2792/ ， Unicode 数字编码查询，这个网站的样式在电脑端显示有点异常，但是还是勉强可以看到信息。

http://xahlee.info/comp/unicode_circled_numbers.html，Unicode 圈圈数字的编码对应。
显示如下：

在HTML 页面中如何显示带圈圈的数字相关推荐

Vue报错：Unknown custom element: router-view - did you register the component correctly页面中不显示链接
Vue报错:Unknown custom element: router-view - did you register the component correctly vue-router应用到组件 ...
在html中如何使div在页面中居中显示
在html中如何使div在页面中居中显示最近无聊中又再温习了下html,发现好多东西都忘了.尝试着写了一个html网页,结果就连div如何在页面中居中显示都查了好久才弄出来.其实我不知道为什么这样可 ...
如何实现标签元素在HTML页面中居中显示
如何实现标签元素在HTML页面中居中显示在HTML页面设计中常常需要实现标签元素在HTML页面中居中显示,相关知识点较多也较杂乱,本文试图介绍一些比较基本与实用的相关知识. 使用标签的align属性 ...
记一次被浏览器广告拦截插件坑死的经历：adp和ad插件把jsp页面中div显示的图片当作广告拦截！！
没有任何显示,也没有任何报错,f12中也已经加载了图片等内容,又把chrome换到firfox,但是还是没用,因为我都装了ad插件,我真想爆粗口,因为ad插件也显示没有拦截到广告.经过查错一次又一次重 ...
html突出显示,javascript-记住html页面中突出显示的文本(向html页面添加注释)
我有一个HTML文件,我正在用webkit打开它,我想开发一个应用程序,这样,在打开它之后,我应该能够选择一些文本并将其突出显示(例如,按下" highlight text"按钮) ...
【关联字段如何在列表中显示】查询车间列表页面中，显示关联的公司（company）字段
车间列表显示的隶属公司字段是company_id,该字段是公司表中的主键. 如何修改,让它显示公司表中的 company_name,而不是显示company_id. 这个功能,需要作两表的关联查询,查 ...
android读取带公章的pdf文件,APP中如何显示带电子签名的PDF文件
之前碰到一个需求,需要在手机 APP 中显示 pdf 文件.经过调研发现,在电脑上的浏览器如 chrome.safari等,可以直接显示 pdf 文件.由此联想到,在 APP 中能否通过浏览器来加载显 ...
一、高德地图的准备阶段-地图的页面中的显示
目录第一步:注册高德地图具体参考第二步:首先新建空白项目具体参考第三步:创建gitee仓库具体参考第四步:把你新建的项目上传到gitee仓库第五步:进入项目,NPM 方式安装使用 Loade ...
html使表格位于页面的右下方,在 HTML 页面中,要显示如下图所示的表格,应在下方 HTML 代码的下划线处填写()。 table border=”1” trtd =”2” 性别 /...
[判断题]x =(a=3, 6 * 3)和x=a=3 , 6 * 3中x的值相同() [单选题]若一个文法是递归的,则它所产生的语言的句子(). [单选题]一块 1kg 的土样,置放一段时间后,含水 ...
Html页面中直接显示pdf【一行代码实现】
在对应的展示页面添加下面语句: 记得替换pdf文件路径 <embed src="/zhengshu.pdf" style=" width: 540PX; heigh ...