源本科技 | 码上会

HTML 符号

2025/12/29
18
0

学习目标

  • 掌握 HTML 符号 的基本概念与使用方法

  • 熟悉 命名实体数字实体 的区别与选择原则

  • 能够正确使用 版权、商标、货币、数学、音乐、性别 等常用符号

  • 避免因符号误用导致的 HTML 解析错误或安全问题

  • 提升网页内容的 专业性与国际化表现力


什么是 HTML 符号

HTML 符号(HTML Symbols) 是指那些无法直接通过标准键盘输入,或在 HTML 中具有特殊含义(如 <, >)的字符。它们通过 HTML 实体的形式安全地嵌入网页中。

所有 HTML 符号都以 & 开头,以 ; 结尾,例如:&copy;&hearts;


为什么需要符号

场景

问题

解决方案

显示 <>

浏览器误认为是标签

使用 &lt; / &gt;

显示 ©、®、™

键盘无此键

使用 &copy;&reg;&trade;

显示数学符号(如 ℵ, ∑)

编码不支持或输入困难

使用命名实体(如 &alefsym;

显示音乐符号(♪, ♯)

普通字体不渲染

使用 &sung;&sharp;

核心价值:确保符号在所有设备、浏览器和语言环境下正确显示且语义清晰


常用符号分类

1. 法律与商业符号

符号

含义

命名实体

示例

©

版权

&copy;

&copy; 2025 MySite

®

注册商标

&reg;

BrandName&reg;

商标

&trade;

NewProduct&trade;

录音版权

&copysr;

℗ 2025 Music Co.

号码(Numero)

&numero;

Room &numero; 101

<p>版权所有 &copy; 2025。所有商标 &trade; 和注册商标 &reg; 归其所有者所有。</p>

2. 数学与科学符号

数学常量与集合

符号

含义

实体

说明

自然数集

&nopf;

Double-struck N

整数集

&zopf;

Double-struck Z

有理数集

&qopf;

Double-struck Q

实数集

&ropf;

Double-struck R

复数集

&copf;

Double-struck C

特殊常数与算子

符号

含义

实体

阿列夫数(无穷基数)

&alefsym;

约化普朗克常数

&planck;

脚本小写 L(常用于长度)

&ell;

Weierstrass P 函数

&weierp;

偏微分

&part;(虽未列出但常用)

<p>实数集:&ropf;,复数集:&copf;,阿列夫零:&alefsym;<sub>0</sub></p>

3. 排版与文本符号

符号

含义

实体

用途

§

节(Section)

&sect;

法律文档章节引用

段落标记

&para;

编辑校对、样式参考

@

At 符号

&commat;

邮箱地址(防爬虫时使用)

“由…转交”(Care of)

&incare;

信件地址格式

💡 提示:&commat; 常用于防止邮箱被垃圾邮件爬虫抓取:

联系我们:contact&commat;example.com

4. 花色与游戏符号

符号

含义

实体

黑桃

&spades;

梅花

&clubs;

红心

&hearts;

方块

&diams;

<p>扑克牌花色:&spades; &clubs; &hearts; &diams;</p>

5. 音乐符号

符号

含义

实体

八分音符

&sung;

降号

&flat;

还原号

&natural;

升号

&sharp;

<p>音阶:C &sharp; D &flat; E &natural;</p>

6. 性别与通用符号

符号

含义

实体

男性

&male;

女性

&female;

对勾(正确)

&check;

叉号(错误)

&cross;

实心星

&starf;

空心星

&star;

电话

&phone;

<p>性别:&male; / &female; &nbsp; 评分:&starf;&starf;&star;&star;&star;</p>

7. 脚本与哥特体字母

学术用途

符号

含义

实体

应用场景

脚本大写 H

&hamilt;

哈密顿量(物理)

哥特大写 H

&hfr;

李代数(数学)

脚本大写 L

&lscr;

拉格朗日量

脚本大写 B

&bernou;

伯努利数

这些符号常见于高等数学、理论物理、逻辑学等专业领域。


命名实体 vs 数字实体

虽然本文主要展示命名实体(如 &hearts;),但每个符号也有对应的数字实体(如 &#9829;)。

类型

示例

优点

缺点

命名实体

&copy;

可读性强,易记忆

并非所有 Unicode 字符都有命名

十进制数字实体

&#169;

支持所有字符

难以理解

十六进制数字实体

&#xA9;

紧凑,程序员友好

非技术人员难懂

推荐策略:

  • 优先使用命名实体(如 &trade;

  • 若命名不存在,则用十进制数字实体(如 &#8377; 表示 ₹)

  • 在代码生成或自动化场景中可使用十六进制


注意事项

正确做法

  1. 始终以 ; 结尾

    <!-- 正确 -->
    &copy;
    <!-- 错误(部分浏览器可能容忍,但不规范) -->
    &copy
  2. 在 UTF-8 页面中仍需转义保留字符
    即使页面声明了 <meta charset="UTF-8"><, >, & 仍必须转义!

  3. 用户输入内容必须转义
    防止 XSS 攻击:将用户提交的 <script> 转为 &lt;script&gt;

常见错误

错误

风险

直接写 © 而不确认编码支持

在旧系统或错误编码下显示为乱码

忘记 ;

实体解析失败,显示原始 &copy

混淆相似实体

&image;(ℑ) vs &real;(ℜ)


开发建议

  1. UTF-8 是默认标准

    • <head> 中加入:<meta charset="UTF-8">

    • 大多数符号(如 ©、♥、♪)可直接复制粘贴使用

  2. 仅对以下情况强制使用实体

    • 保留字符:<, >, &, ", '

    • 需要防爬虫的邮箱(用 &commat;

    • 兼容老旧系统(如 IE8)

  3. 框架自动处理
    React、Vue 等会自动转义文本内容,无需手动写 &lt;,除非使用 dangerouslySetInnerHTML


重点总结

类别

关键符号

实体示例

法律

© ® ™

&copy; &reg; &trade;

数学

ℕ ℤ ℝ ℵ

&nopf; &zopf; &ropf; &alefsym;

排版

§ ¶ @

&sect; &para; &commat;

花色

♠ ♣ ♥ ♦

&spades; &clubs; &hearts; &diams;

音乐

♪ ♭ ♮ ♯

&sung; &flat; &natural; &sharp;

通用

♂ ♀ ✓ ✗ ★

&male; &female; &check; &cross; &starf;

记住:HTML 符号不是“装饰”,而是准确传达信息的重要工具。


思考题

  1. 在一个学术论文网站中,如何用 HTML 符号正确表示“实数集 ℝ 上的连续函数”?

  2. 为什么 &commat; 可以帮助防止邮箱地址被垃圾邮件爬虫抓取?

  3. 如果你的网页需要显示希伯来字母(如 ℵ, ℶ),除了 HTML 实体,还有哪些现代替代方案?