HTML Emoji

＆白帝＆

于 2024-10-05 12:33:07 发布

阅读量650

点赞数 7

分类专栏：前端部分文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_48763502/article/details/142598666

版权

前端部分专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1. 什么是 Emoji？

Emoji 是一种图形符号，用于表达情感、事物或概念。它们广泛应用于社交媒体、聊天和网页设计中，能够增强文本的表现力。

2. 在 HTML 中使用 Emoji 的方法

2.1 直接插入 Emoji 字符

您可以直接在 HTML 文档中插入 Emoji 字符。这种方法简单直观，支持大多数现代浏览器。

示例：

<p>这是一个微笑的 emoji 😊</p>

2.2 使用 Unicode 编码

每个 Emoji 都有一个唯一的 Unicode 代码。您可以使用 &# 后跟 Unicode 数字来插入 Emoji。

示例：

<p>这是一个微笑的 emoji &#128522;</p>

在这个例子中，😊 的 Unicode 是 U+1F60A，其对应的十进制是 128522。

2.3 使用 HTML 实体

虽然不是所有 Emoji 都有 HTML 实体，但对于某些常见的 Emoji 可以使用。一般来说，HTML 实体形式是 &name;，例如 ♥ 表示 ♥。

<p>这是一个红心 emoji &hearts;</p>

2.4 使用 CSS 设置字体

你可以通过 CSS 设置特定的字体，使 Emoji 显示得更好。常用的 Emoji 字体包括 “Segoe UI Emoji”、“Noto Color Emoji” 和 “Apple Color Emoji”。

<style>
    .emoji {
        font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
    }
</style>

<p class="emoji">这是一个微笑的 emoji 😊</p>

3. Emoji 列表与示例

以下是一些常用 Emoji 的 Unicode 和 HTML 实体：

Emoji	描述	Unicode	HTML 实体
😊	微笑	U+1F60A	😊
❤️	红心	U+2764	♥
🌍	地球	U+1F30D	🌍
🎉	庆祝	U+1F389	🎉
👍	赞	U+1F44D	👍

4. 完整示例代码

以下是一个完整的 HTML 示例，展示了不同方式使用 Emoji：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Emoji 示例</title>
    <style>
        .emoji {
            font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
            font-size: 24px; /* 调整字体大小 */
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页!</h1>
    <p>这是一个微笑的 emoji 😊</p>
    <p>这是一个红心 emoji &#10084;</p>
    <p class="emoji">使用 CSS 的 emoji 🌍</p>
    <p>庆祝的 emoji 🎉</p>
    <p>赞的 emoji &#128077;</p>
</body>
</html>