PrepBro
← Назад к вопросам

Как проставить на странице отсутствующие на клавиатуре символы?

2.0 Middle🔥 131 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

HTML-сущности и специальные символы на странице

Часто нужно отобразить символы, которых нет на клавиатуре или которые имеют специальное значение в HTML (например, кавычки, угловые скобки). Для этого используются HTML-сущности (HTML entities).

Способ 1: Именованные сущности (Named Entities)

Самый читаемый способ — использовать имена символов:

<!-- Копирайт -->
<p>&copy; 2024</p>

<!-- Регистрационный знак -->
<p>&reg;</p>

<!-- Торговая марка -->
<p>&trade;</p>

<!-- Символ евро -->
<p>&euro;</p>

<!-- Символ фунта -->
<p>&pound;</p>

<!-- Математические символы -->
<p>&times;</p> <!-- умножение -->
<p>&divide;</p> <!-- деление -->
<p>&plusmn;</p> <!-- плюс-минус -->

<!-- Стрелки -->
<p>&rarr;</p> <!-- стрелка вправо -->
<p>&larr;</p> <!-- стрелка влево -->
<p>&uarr;</p> <!-- стрелка вверх -->
<p>&darr;</p> <!-- стрелка вниз -->

<!-- Неразрывный пробел -->
<p>Текст&nbsp;без&nbsp;разрывов</p>

<!-- Длинное тире -->
<p>Слово&mdash;понятие</p>

<!-- Короткое тире -->
<p>10&ndash;20</p>

Способ 2: Числовые сущности (Numeric Entities)

Используй код символа в десятичном или шестнадцатеричном формате:

<!-- Десятичный формат (decimal) -->
<p>&#169;</p> <!-- (копирайт) -->
<p>&#8364;</p> <!-- (евро) -->
<p>&#8212;</p> <!-- (длинное тире) -->

<!-- Шестнадцатеричный формат (hexadecimal) -->
<p>&#x00A9;</p> <!-- (копирайт) -->
<p>&#x20AC;</p> <!-- (евро) -->
<p>&#x2014;</p> <!-- (длинное тире) -->

<!-- Emoji через численные сущности -->
<p>&#128512;</p> <!-- (улыбка) -->
<p>&#x1F600;</p> <!-- (улыбка в hex) -->

Способ 3: Unicode напрямую в HTML5

В HTML5 можно просто писать символы напрямую, если указана правильная кодировка:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Символы</title>
</head>
<body>
  <!-- Пишем символы напрямую -->
  <p>2024</p>
  <p>100</p>
  <p>Кавычки: "Привет"</p>
  <p>Стрелка вправо</p>
  <p>Emoji: 😀 🎉</p>
  <p>Математика: +/- x /</p>
</body>
</html>

Способ 4: JavaScript для вставки символов

Если нужно добавить символы динамически через JavaScript:

// Способ 1: Через innerHTML и сущности
const element = document.getElementById("content");
element.innerHTML = "<p>&copy; 2024</p>";

// Способ 2: Через textContent и Unicode
const element2 = document.getElementById("text");
element2.textContent = "Символ евро: " + String.fromCharCode(8364);

// Способ 3: Через Unicode escape
const heart = "\u2665";
const emoji = "\uD83D\uDE00";

document.body.innerHTML += "<p>Сердце " + heart + "</p>";

// Способ 4: В React (через JSX)
function SymbolComponent() {
  return (
    <div>
      <p>&copy; 2024</p>
      <p>&euro; 100</p>
      <p>&rarr; стрелка</p>
      <p>2024</p>
      <p>{String.fromCharCode(8364)} 100</p>
    </div>
  );
}

Часто используемые сущности

<!-- Знаки препинания -->
&ndash;  <!-- короткое тире -->
&mdash;  <!-- длинное тире -->
&hellip; <!-- многоточие -->
&lsquo;  <!-- левая одинарная кавычка -->
&rsquo;  <!-- правая одинарная кавычка -->
&ldquo;  <!-- левая двойная кавычка -->
&rdquo;  <!-- правая двойная кавычка -->

<!-- Специальные символы -->
&copy;   <!-- копирайт -->
&reg;    <!-- регистрация -->
&trade;  <!-- торговая марка -->
&nbsp;   <!-- неразрывный пробел -->
&amp;    <!-- амперсанд -->
&lt;     <!-- меньше -->
&gt;     <!-- больше -->
&quot;   <!-- кавычка -->

<!-- Математика -->
&times;  <!-- умножение -->
&divide; <!-- деление -->
&plusmn; <!-- плюс-минус -->
&ne;     <!-- не равно -->
&le;     <!-- меньше или равно -->
&ge;     <!-- больше или равно -->

<!-- Стрелки -->
&larr;   <!-- влево -->
&rarr;   <!-- вправо -->
&uarr;   <!-- вверх -->
&darr;   <!-- вниз -->
&harr;   <!-- влево-вправо -->

<!-- Валюты -->
&euro;   <!-- евро -->
&pound;  <!-- фунт -->
&yen;    <!-- иена -->
&cent;   <!-- цент -->

CSS для использования символов

В CSS можно использовать content свойство для вставки символов:

/* Элементы с символами */
.copyright::after {
  content: " \\00A9 2024";
}

.arrow::before {
  content: "\\2192";
}

.euro {
  content: "\\20AC";
}

/* В HTML: <p class="copyright">Сайт</p> -->
/* Выведет правильный символ -->

Таблица часто используемых символов

Символ | Сущность | Код  | Назначение
-------|----------|------|----------
       | &copy;   | 169  | Копирайт
       | &reg;    | 174  | Регистрация
       | &trade;  | 8482 | Торговая марка
       | &euro;   | 8364 | Евро
       | &pound;  | 163  | Фунт
       | &times;  | 215  | Умножение
       | &divide; | 247  | Деление
       | &rarr;   | 8594 | Стрелка вправо
       | &larr;   | 8592 | Стрелка влево
       | &mdash;  | 8212 | Длинное тире
       | &hellip; | 8230 | Многоточие

Итого

Для вставки символов, отсутствующих на клавиатуре:

  1. HTML-сущности — © для копирайта, € для евро
  2. Числовые коды — © или © для копирайта
  3. Unicode напрямую — в HTML5 пиши символ, если указана кодировка UTF-8
  4. JavaScript — String.fromCharCode() или просто Unicode строки
  5. CSS — content свойство для вставки через псевдоэлементы

Самый простой способ в современном веб — просто писать символы напрямую при правильной кодировке UTF-8.