HTML Emojis

Опубликовано: 25 Февраля, 2022

Смайлы - это буквы (символы) из набора символов UTF-8 (Unicode). Элемент <meta charset = ”UTF-8 ″> в HTML определяет набор символов. Многие символы UTF-8 нельзя ввести на клавиатуре, но они всегда могут отображаться с помощью чисел (называемых номерами сущностей). Чтобы браузер понял, что вы показываете символ, вы должны начинать номер объекта с & # и заканчивать его; (точка с запятой).

Синтаксис:

<head>
    <meta charset = "UTF-8">                       
</head>

<body>
    <p> & # номер; </p>

    // Возьмем соответствующее число
    // в символы UTF-8, которые вы хотите
    // для отображения.
</body>

Смайлы также являются символами алфавита UTF-8 и могут использоваться в HTML, указав соответствующие смайлы, десятичные (десятичные) или шестнадцатеричные (шестнадцатеричные) ссылки в приведенном выше синтаксисе.

Example: Represent the following emoji in a webpage.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
  
<body>
    <h1>Geeks For Geeks</h1>
    <h2>HTML Emojis </h2>
    <p>😄</p>
    <p>✌</p>
    <p>🕞</p>
</body>
</html>

Выход:

В приведенном выше примере десятичная ссылка, используемая для следующих смайликов, выглядит следующим образом

Char Десятичная ссылка Шестнадцатеричная ссылка
128516 1F604
9996 270C
128350 1Ф55Э

Примечание. Вместо десятичной (десятичной) ссылки можно также использовать шестнадцатеричную (шестнадцатеричную) ссылку для отображения эмодзи на веб-странице. В дополнение к приведенному выше синтаксису перед шестнадцатеричной ссылкой необходимо указать «x».

Синтаксис:

 <p> & # xhexaDecimal; </p>

Example: In this example, we will represent 😄, ✌ and 🕞 emoji in a webpage with hexadecimal(hex) reference.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
</head>
  
<body>
    <h1>Geeks For Geeks</h1>
    <h2>HTML Emojis</h2>
    <p>😄</p>
    <p>✌</p>
    <p>🕞</p>
</body>
  
</html>

Выход:

С шестнадцатеричной ссылкой мы также получаем тот же результат.

Примечание. Поскольку смайлы являются символами, их можно копировать, отображать и изменять размер, как и любой другой символ в HTML.

Example: In this example, we will change the font size of the following emojis 😄, ✌ and 🕞.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
</head>
  
<body>
    <h1>Geeks For Geeks</h1>
    <h2>HTML Emojis with different font size </h2>
    <p style="font-size:25px">😄 </p>
    <p style="font-size:65px">✌</p>
    <p style="font-size:75px">🕞</p>
</body>
  
</html>

Вывод: вывод содержит смайлики разных размеров.

Точно так же любой смайлик можно отобразить на веб-странице, введя соответствующую десятичную или шестнадцатеричную ссылку в код.