前端必知必会-emojis使用和字符集


在 HTML 中使用表情符号

表情符号是来自 UTF-8 字符集的字符:😄 😍 💗

表情符号值
🗻 🗻
🗼 🗼
🗽 🗽
🗾 🗾
🗿 🗿
😀 😀
😁 😁
😂 😂
😃 😃
😄 😄

什么是表情符号?

表情符号看起来像图像或图标,但实际上不是。

它们是 UTF-8(Unicode)字符集中的字母(字符)。

UTF-8 几乎涵盖了世界上所有的字符和符号。

HTML charset 属性

要正确显示 HTML 页面,Web 浏览器必须知道页面中使用的字符集。

这是在 <meta> 标记中指定的:

<meta charset="UTF-8">

如果未指定,UTF-8 是 HTML 中的默认字符集。

UTF-8 字符

许多 UTF-8 字符无法在键盘上输入,但它们始终可以使用数字(称为实体数字)显示:

A 是 65
B 是 66
C 是 67
示例

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<p>我将显示 A B C</p>
<p>我将显示 &#65; &#66; &#67;</p>

</body>
</html>

示例说明
<meta charset="UTF-8"> 元素定义字符集。

字符 A、B 和 C 分别用数字 65、66 和 67 显示。

为了让浏览器知道您正在显示一个字符,实体数字必须以 &# 开头,以 ;(分号)结尾。

表情符号

表情符号也是 UTF-8 字母表中的字符:

😄 是 128516
😍 是 128525
💗 是 128151
示例

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<h1>我的第一个表情符号</h1>

<p>&#128512;</p>

</body>
</html>

由于表情符号是字符,因此可以像 HTML 中的任何其他字符一样复制、显示和调整大小。

示例

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<h1>大小表情符号</h1>

<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>

</body>
</html>

HTML 编码(字符集)

要正确显示 HTML 页面,Web 浏览器必须知道要使用哪个字符集。

HTML charset 属性

字符集在 <meta> 标记中指定:

示例

<meta charset="UTF-8">

HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集。

UTF-8 涵盖了世界上几乎所有的字符和符号!

ASCII 字符集

ASCII 是 Web 的第一个字符编码标准。它定义了 128 个可以在互联网上使用的不同字符:

英文字母 (A-Z)
数字 (0-9)
特殊字符,如 ! $ + - ( ) @ < >。

ANSI 字符集

ANSI (Windows-1252) 是原始的 Windows 字符集:

前 127 个字符与 ASCII 相同
128 到 159 为特殊字符
160 到 255 与 UTF-8 相同

<meta charset="Windows-1252">

ISO-8859-1 字符集

ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 种不同的字符代码。HTML 4 还支持 UTF-8。

前 127 个字符与 ASCII 相同
不使用 128 到 159 之间的字符
160 到 255 与 ANSI 和 UTF-8 相同
HTML 4 示例

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

HTML 5 示例

<meta charset="ISO-8859-1">

UTF-8 字符集

0 到 127 的值与 ASCII 相同
不使用 128 到 159 之间的字符
160 到 255 与 ANSI 和 8859-1 相同
从值 256 到 10 000 个字符继续

<meta charset="UTF-8">

总结

本文介绍了的emojis使用和字符集,如有问题欢迎私信和评论

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程流年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值