在 HTML、PHP、JavaScript 和 CSS 中使用表情符号

评论 0 浏览 0 2022-01-31

表情符号在所有平台上都很受欢迎,无论是在移动应用程序还是网页中。在评论、社交媒体帖子、网页文本等中。他们提供与用户的情感互动,并赋予媒体一点生命和感情。

在本文中,我将向您展示如何将它们包含在 HTML、PHP、JavaScript 和 CSS 中。

我将参考 Emoji Unicode 表作为表情符号参考。

HTML 表情符号

您可以使用以下 3 种方式之一在 HTML 中添加表情符号:

  1. 直接将表情符号嵌入 HTML 代码中
  2. 使用表情符号十进制参考代码
  3. 使用表情符号十六进制参考代码

让我们看一个包含所有三种方法的示例。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>I'll be eating 🍔 for dinner tonight! (using direct emoji in HTML)</p>

    <p>I'll be eating &#127828; for dinner tonight! (using decimal emoji code.)</p>
    <p>I will display &#x1F354; for dinner tonight! (using decimal emoji code.)</p>
    
    <p style="font-size:100px">&#127828;</p>
    
</body>
</html>

你应该看到的是:

确保在 head 标签中使用 <meta charset=”UTF-8">,将文档的字符编码设置为 UTF-8。

PHP 表情符号

有 2 种方法可以在 PHP 中显示表情符号。

  1. 使用表情符号表中给出的 UTF-8 字节。
  2. 使用表情符号的 Unicode。

让我们看一个例子:

<?php
    echo "I'll be eating \xF0\x9F\x8D\x94 for dinner tonight! (using emoji's UTF-8 Bytes)<br />";
    echo "I'll be eating \u{1F354} for dinner tonight! (using emoji's unicode)";
?>

这就是你应该看到的:

JavaScript 表情符号

JavaScript 中的 String.fromCodePoint() 函数用于返回所提供代码的字符串表示形式。语法是:

String.fromCodePoint(n);
String.fromCodePoint(n1, n2);
String.fromCodePoint(n1, n2, ..., nn);
最后更新2023-09-08
0 个评论