HTML无原生badge标签，需用span+CSS模拟，配合relative定位父容器；动态角标须加ARIA属性保障可访问性；桌面端角标需调用iOS/Android/HarmonyOS原生API，无法仅靠前端实现。
HTML 本身没有 Badge API，所谓“Badge API”是开发者对「前端角标功能实现方式」的误称或泛指——它实际由三类技术分层构成：CSS 视觉层、DOM 动态更新层、原生平台角标层（如 iOS/Android/HarmonyOS）。混淆这三层，会导致样式错位、可访问性失效、或真机不生效。
为什么直接写 badge 标签会失败
HTML5 规范中不存在 <badge> 元素，浏览器会将其当作未知标签降级为 display: inline，既无默认样式，也不带语义。用 <sup> 或 <small> 替代，只能调字号和基线，无法控制背景、圆角、定位或响应式缩放。真正可用的只有 <span> + CSS 模拟，且必须配合父容器的 position: relative 才能精准锚定。
position: absolute 角标总飘走？检查这三点
绝大多数“角标消失”“跑到左上角”“被裁掉”的问题，都源于定位上下文断裂或溢出控制缺失：
- 父容器没设
position: relative—— 绝对定位会逐层向上找，最终相对<body>定位 - 父容器有
overflow: hidden（常见于卡片、头像、导航图标）—— 角标超出部分直接被裁剪，加clip-path: none无效，必须改父容器或换布局方案 - 用
em或%写top/right—— 父元素font-size变化时偏移量会漂移，应统一用px或rem
动态数字角标必须加的 ARIA 属性
纯视觉角标对屏幕阅读器不可见，用户可能完全不知道有未读消息。不能靠 aria-hidden="true" 隐藏再另加描述——这会让数字本身丢失语义。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 数字文本保留在 DOM 中（不用
::after生成），作为真实文本节点 - 宿主元素（如
<button>）加aria-label="购物车，3 件商品"，而非给角标<span>单独加 - 数字频繁变动时，宿主元素加
role="status"和aria-live="polite"，确保变化被朗读 - 数字为
0或null时，**不渲染角标元素本身**（不是display: none），避免空节点干扰焦点流
Web App 要在手机桌面显示应用角标？别只靠 CSS
网页内用 CSS 做的角标，只影响页面内视觉；iOS/Android/HarmonyOS 的桌面应用角标（即 App 图标右上角红点或数字），需调用对应平台的原生能力：
- iOS：必须通过 APNs 推送设置
badge字段，前端 JS 无法直接修改桌面角标 - Android：PWA 可通过
setApplicationIconBadgeNumber()（需 Manifest 配置支持），但兼容性差；多数依赖原生壳或 Cordova 插件 - 鸿蒙：使用
Badge组件或setBadgeNumber()API，需在entry/src/main/ets中调用 - H5+（如 DCloud）：可用
plus.runtime.setBadgeNumber(10)，但仅限打包成原生 App 后生效
跨平台项目最容易忽略的是：同一套“角标”逻辑，在页面内和桌面端要拆成两套实现，且后者往往需要后端推送配合。没做原生集成时，别指望 document.querySelector('.badge').textContent = '5' 能让手机桌面图标变数字。
