如何在 HTML 文档中添加表情符号?

htmlweb developmentfront end technology更新于 2024/2/11 13:32:17

表情符号是小型数字图像或图标，通常用于消息传递和其他场合，以表达情感或想法。在本文中，我们将了解如何将表情符号添加到 HTML 文档中。

方法

通过将浏览器中用于显示网页的字符集设置为 UTF-8，可以将表情符号添加到 HTML 文档中。我们可以使用 head 部分中的 <meta> 标签来指定此字符编码信息。在声明字符集后，可以使用 p 和 span 标签将表情符号添加到 HTML 文档中。使用 <span> 标签将表情符号插入到同一行，而使用 <p> 标签则将其插入到新行。标签。

我们将介绍在 HTML 文档中添加表情符号的两种方法 -

使用十六进制代码
使用十进制代码

方法 1:使用十六进制代码

我们可以使用相应的十六进制代码指定表情符号。表情符号的十六进制代码以 &#x 开头，以 "; " 结尾，用于告知浏览器需要显示该代码所代表的字符。例如，✌ 的十六进制代码为 ✌

示例

步骤 1 - 首先，我们将定义基本的 HTML 代码。

<!DOCTYPE html>
<html>
<head>
   <title>How to add emoji in HTML document?</title>
</head>
<body>
   <h4>How to add emoji in HTML document?</h4>
</body>
</html>

步骤 2 - 现在我们将添加表情符号的十六进制代码。

<div>
   <p>Devil Emoji: <span>😈</span></p>
   <p>Face having Tears of Joy Emoji: <span>😂</span></p>
   <p>Thumbs Up Emoji: <span>👍</span></p>
</div>

这是完整的代码 −

<!DOCTYPE html>
<html>
<head>
   <title>How to add emoji in HTML document?</title>
</head>
<body>
   <h4>How to add emoji in HTML document?</h4>
   <div>
      <p>Devil Emoji: <span>😈</span></p>
      <p>Face having Tears of Joy Emoji: <span>😂</span></p>
      <p>Thumbs Up Emoji: <span>👍</span></p>
   </div>
</body>
</html>

方法 2:使用十进制代码

我们也可以使用表情符号的十进制代码表示。这些代码以 &# 开头，以 ; 结尾，就像十六进制代码一样。例如，👀 的十进制代码是 👀。

示例

步骤 1 − 首先，我们将定义基本的 HTML 代码。

<!DOCTYPE html>
<html>
<head>
   <title>How to add emoji in HTML document?</title>
</head>
<body>
   <h4>How to add emoji in HTML document?</h4>
</body>
</html>

步骤 2 − 现在我们将添加表情符号的十进制代码。

<div>
   <p>Devil Emoji: <span>😈</span></p>
   <p>Face having Tears of Joy Emoji: <span>😂</span></p>
   <p>Thumbs Up Emoji: <span>👍</span></p>
</div>

这是完整的代码 −

<!DOCTYPE html>
<html>
<head>
   <title>How to add emoji in HTML document?</title>
</head>
<body>
   <h4>How to add emoji in HTML document?</h4>
   <div>
      <p>Devil Emoji: <span>😈</span></p>
      <p>Face having Tears of Joy Emoji: <span>😂</span></p>
      <p>Thumbs Up Emoji: <span>👍</span></p>
   </div>
</body>
</html>