HTML 的表情符号代码

2025年3月17日 | 阅读 3 分钟

引言

表情符号 (emoji) 是一个图形符号，通常在 HTML 中用于象征情感、思想或想法。表情符号有时被添加到 HTML 文档中，以为访问者提供更好的视觉体验，甚至文本内容也能通过表情符号具有表达功能。

Unicode 字符被用来表示表情符号。每个字符，包括表情符号，都有一个唯一的代码。通过使用它们对应的 Unicode 值，这些 Unicode 字符可以被添加到 HTML 文本中。

语法

<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>&#number;</p>     
</body>

表情符号也是 UTF-8 字符，你可以参考上面的语法，使用相应的十进制（dec）或十六进制（hex）引用，以同样的方式在 HTML 中使用它们。

HTML charset 属性

为了让网页浏览器正确显示 HTML 页面，它需要知道页面所使用的字符集。

以下内容在标签中提及

UTF-8 字符

以下的 UTF-8 字符总是显示为数字或实体编号，尽管其中许多无法通过键盘输入

A 是 65
B 是 66
C 是 67

示例

<html>
<meta charset="UTF-8">
<body>
<p>This is normal A B C</p> 
<p>This is with codes: A B C</p> 
</body>
</html>

输出

说明

字符集是使用元素指定的。

数字 65、66 和 67 代表字母 A、B 和 C。

开始时，你必须用 &# 来写实体编号，但在行的末尾引用字符时，你需要使用分号（;），以便浏览器理解你正在声明一个字符。

表情符号字符

UTF-8 字符也用于表情符号

? 是 128516
? 是 128525
? 是 128151

示例

<html>
<meta charset="UTF-8">
<body>
<h1>My First Emoji</h1>
<p>?</p
</body>
</html>

输出

表情符号就是字符。因此，它们与其他字符完全相同，在 HTML 中的复制、更改和显示方式也一样。

<html>
<meta charset="UTF-8">
<body>
<h2>Some of the different types of Emojis</h2>
<p style="font-size:48px">
? ? ? ?
</p>
</body>
</html>

输出

使用 Unicode 十六进制引用显示 HTML 表情符号

通过使用 Unicode 十六进制引用，可以在网页内容中使用各种符号和图标来显示 HTML 表情符号。

语法

示例

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>HTML Emojis Example</title>
</head>
<body>
	<h1>HTML Emojis Example using Unicode hexadecimal </h1>
	<p>
	  ?  This is a smiling face with an open mouth and smiling eyes emoji
</p>
	<p> ✌  This is a victory hand emoji</p>
	<p> ⌚  This is the emoji of a watch</p>
</body>
</html>

输出

说明

在上面的例子中，我们展示了 <!DOCTYPE html> 和 <html lang="en"> 的定义。
表情符号，如 ?, ✌, ⌚, 都由 Unicode 十六进制引用表示。
表情符号由封装在 &#x 和 ; 中的 Unicode 码点表示。
每个表情符号的 Unicode 值在十六进制中都是唯一的。
在现代网页浏览器中，表情符号会根据其 Unicode 等价物进行显示。

一些流行的表情符号及其代码

表情符号	名称	代码
😂	喜极而泣的脸	?
❤	黑心	❤
😍	带心形眼睛的笑脸	?
🙏	合十的双手	?
🤣	笑得在地上打滚	?
💕	两颗心	?
😭	嚎啕大哭的脸	?
🔥	火	?
😘	抛飞吻的脸	?
👍	竖起大拇指	?

结论

将表情符号代码放入HTML是一种有趣且有效的方式，可以为用户界面带来有趣的外观，并向用户传达情感。开发者可以通过实现 Unicode 字符或 HTML 实体来使用表情符号，从而将表情符号集成到网页内容中。这使得内容更加生动，并获得了必要的对话情境。虽然这种抽象是真实的，但您应记住跨浏览器和不同设备之间的兼容性，以保持表情符号显示的一致性。通过遵循代码和规范，表情符号的设计变得更加愉快和富有表现力，从而使网络交流和交换更加投入和适用于网络环境。

下一个主题HTML 输入框

HTML 的表情符号代码

引言

语法

HTML charset 属性

UTF-8 字符

说明

表情符号字符

使用 Unicode 十六进制引用显示 HTML 表情符号

语法

示例

说明

一些流行的表情符号及其代码

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 的表情符号代码

引言

语法

HTML charset 属性

UTF-8 字符

说明

表情符号字符

使用 Unicode 十六进制引用显示 HTML 表情符号

语法

示例

说明

一些流行的表情符号及其代码

结论

相关帖子

HTML 页眉图片

在 HTML 中调整图片大小

HTML code 标签

如何在 HTML 中创建框架

如何在 HTML 中更改图片大小

如何在 HTML 中对齐文本

如何在 HTML 中添加网站图标

HTML 注释快捷键

HTML 搜索栏

HTML a name 标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器