Использование эмодзи в HTML
Эмодзи (эмоджи, смайлы) - это символы из набора символов UTF-8: 😄 😍 💗
Что такое эмодзи?
Эмодзи (смайлы) выглядят как изображения или значки, но на самом деле это не так.
Это буквы (символы) из набора символов UTF-8 (Unicode).
UTF-8 охватывает почти все значки и символы в мире.
HTML атрибут charset
Чтобы правильно отображать HTML-страницу, веб-браузер должен знать набор символов, используемый на странице.
Это указано в теге <meta>:
<meta charset="UTF-8">
Если не указано, UTF-8 является набором символов по умолчанию в HTML.
Набор символов UTF-8
Многие символы UTF-8 нельзя вводить на клавиатуре, но они всегда могут отображаться с помощью чисел (называемых номерами сущностей):
- A - это 65
- B - это 66
- C - это 67
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Я буду отображать A B C</p>
<p>Я буду отображать 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>Мой первый эмодзи</h1>
<p>😀</p>
</body>
</html>
Попробуйте сами »
Поскольку эмодзи являются символами, их можно копировать, отображать и изменять размер, как и любой другой символ в HTML.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Размер эмодзи</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
Попробуйте сами »
Некоторые символы эмодзи в UTF-8
| Эмодзи | Значение |
|---|---|
| 🗻 | 🗻 |
| 🗼 | 🗼 |
| 🗽 | 🗽 |
| 🗾 | 🗾 |
| 🗿 | 🗿 |
| 😀 | 😀 |
| 😁 | 😁 |
| 😂 | 😂 |
| 😃 | 😃 |
| 😄 | 😄 |
| 😅 | 😅 |
Полный список эмодзи можно найти в HTML Эмодзи справочнике на нашем сайте W3Schools на русском.
