Использование эмодзи в HTML
Смайлики — это символы из набора символов UTF-8: 😄 😍 💗
Что такое эмодзи?
Смайлики выглядят как изображения или значки, но это не так.
Это буквы (символы) из набора символов UTF-8 (Unicode).
UTF-8 охватывает почти все знаки и символы в мире.
Атрибут HTML-кодировки
Для правильного отображения HTML-страницы веб-браузер должен знать набор символов, используемый на странице.
Это указано в <meta>теге:
<meta charset="UTF-8">
Если не указано иное, UTF-8 является набором символов по умолчанию в HTML.
Символы UTF-8
Многие символы UTF-8 нельзя набрать на клавиатуре, но их всегда можно отобразить с помощью чисел (называемых числами сущностей):
- А 65
- Б 66 лет
- С 67 лет
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>I will display A B C</p>
<p>I will display A B C</p>
</body>
</html>
Объяснение примера
Элемент <meta charset="UTF-8">определяет набор символов.
Символы A, B и C отображаются под номерами 65, 66 и 67.
Чтобы браузер понял, что вы отображаете символ, вы должны начать номер объекта с и закончить его ; (точка с запятой).
Эмодзи Персонажи
Смайлики также являются символами из алфавита UTF-8:
- 😄 это 128516
- 😍 это 128525
- 💗 это 128151
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>
Поскольку эмодзи — это символы, их можно копировать, отображать и изменять их размер, как и любой другой символ в HTML.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
Некоторые символы эмодзи в UTF-8
| эмодзи | Ценность | Попробуй |
|---|---|---|
| 🗻 | | |
| 🗼 | | |
| 🗽 | | |
| 🗾 | | |
| 🗿 | | |
| 😀 | | |
| 😁 | | |
| 😂 | | |
| 😃 | | |
| 😄 | | |
| 😅 | |
Полный список см. в нашем Справочнике HTML-эмодзи .