Использование эмодзи в HTML
Эмодзи (смайлики) — это символы из набора символов UTF-8: 🙂 🙃 ✋ ✈
Что такое эмодзи?
Смайлики выглядят как изображения или иконки, но это не так.
Это буквы (символы) из набора символов UTF-8 (Unicode).
UTF-8 охватывает почти все знаки и символы в мире.
Атрибут HTML - кодировки
Для правильного отображения HTML-страницы веб-браузер должен знать набор символов, используемый на странице.
Это указано в теге <meta>:
Если не указано иное, UTF-8 является набором символов по умолчанию в HTML.
Символы UTF-8
Многие символы UTF-8 нельзя набрать на клавиатуре, но их всегда можно отобразить с помощью чисел (называемых числами сущностей):
А это - А
Б это - Б
В это - В
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Здесь отображено А Б В</p>
<p>Здесь отображено А Б В</p>
</body>
</html>
Результат:
Здесь отображено А Б В
Здесь отображено А Б В
Объяснение примера
Элемент <meta charset="UTF-8"> определяет набор символов.
Символы А, Б и В отображаются под номерами 1040, 1041 и 1042.
Чтобы браузер понял, что вы отображаете символ, вы должны начать номер объекта с &# и закончить его ; (точка с запятой).
Персонажи Эмодзи
Смайлики также являются символами из алфавита UTF-8:
🙂 это - 🙂
🙃 это - 🙃
✋ это - ✋
✈ это - ✈
<!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:50px">
🙂 🙃 ✋ ✈
</p>
</body>
</html>
Результат:
Эмодзи с изменённым размером
🙂 🙃 ✋ ✈
Некоторые символы эмодзи в UTF-8
| Эмодзи |
Значение |
| ✋ |
✋ |
| 🐝 |
🐝 |
| 🐞 |
🐞 |
| 👻 |
👻 |
| 🕷 |
🕷 |
| 😀 |
😀 |
| 😁 |
😁 |
| 😂 |
😂 |
| 😃 |
😃 |
| 😄 |
😄 |
| 😅 |
😅 |
| 😆 |
😆 |
| 😇 |
😇 |
| 😈 |
😈 |
| 😉 |
😉 |
| 😊 |
😊 |
| 🤝 |
🤝 |
| 🤟 |
🤟 |
| 🤠 |
🤠 |
| 🥐 |
🥐 |
| 🦅 |
🦅 |
| 🦆 |
🦆 |
| 🦉 |
🦉 |
☛ Кодирование HTML (наборы символов)
Символы HTML ☚
