Содержание

100+ Юникод символов, которые можно использовать в HTML/CSS/JS/PHP

В этой заметке речь пойдет об универсальных Unicode-символах. Иконках, которые понимают все браузеры и системы.

Для того чтобы использовать иконки в HTML коде (верстке), обычно устанавливаются пакеты иконок на базе шрифтов, например Font Awesome. Однако, часто удобнее вставить известный браузеру Unicode-символ и не подключать лишние шрифты. Рассмотрим такие символы в этой заметке.

В браузерах есть встроенные библиотеки доступных иконок и иероглифов. Доступны они в Unicode формате — это стандарт, который присваивает уникальный идентификатор для каждого специального символа. Число таких символов (иконок, значков) постоянно растет и сегодня их более 110 000. Но не все браузеры понимают все такие символы. Браузеры работают на базе иконок которые доступны в вашей системе: Windows, Linux, OS X, Android и iOS. В этой заметке собраны иконки, которые установлены во всех таких системах, а значит можно сказать что они универсальные

и их в 99% случаев поймет и отобразит любой браузер.

Как использовать Unicode символы

Значки, приведенные в таблицах ниже, являются обычными символами, которые можно копировать и вставлять, как если бы они были буквами текста. Однако, если кодировка файла (HTML/CSS) куда вставляется скопированный значок не UTF-8 вставленный значок отображаться не будет, более того — он потеряется. Для таких случаев в таблице приведён HTML код знака.

Что нужно сделать, чтобы использовать иконки:

  • Найти нужный значок.
  • Скопировать иконку или её код.
  • Вставить
    скопированное в HTML/JS/PHP как обычный текст. В CSS его можно использовать в качестве значения свойства content:'★';, или так если используется код content:'\2605';.

Использование кода иконки в разных языках. Например UTF8 код ◑ = 25D1, тогда:

CSS                      \25D1
JavaScript / JSON        \u25D1
C / C++ / Java / Python  \u25D1
Perl                     \x{25D1}
Ruby                     \u{25D1}

Значки по сути являются обычным текстом, поэтому им можно указать стили текста: тень, размер, цвет и т.

д.

Иконки

Иконка Decimal Entity css Название
☺ \263A Улыбка
♨ \2668 Хот-спрингс
➑ \2791 8-мяч
☆ \2606 Белая звезда
★ \2605 Черная звезда
✪
\272A Белая звезда обведенная
✰ \2730 Белая звезда
✧ \2727 Белая четырехконечная звезда
✦ \2726 Черная четырехконечная звезда
♡ \2661 Белое сердце
❤ \2764 Черное сердце
✈
\2708 Самолет
✂ \2702 Черные ножницы
✄ \2704 Белые ножницы
♕ \2655 Корона
✝ \271D Крест
† † \2020 Кинжал
‡ ‡ \2021 Двойной Кинжал
◑ \25D1 Черно-белый круг
♪ \266A Нота
♫ \266B Ноты
✣ \2723 Четыре звездочки с шарами
☑ \2611 Чекбокс с галочкой
✔ \2714 Галочка
✘ \2718 Крестик
╳ \2573 Квадратный крестик
✎ \270E Карандаш
✍ \270D Пишущая рука
♀ \2640 Женщина
♂ \2642 Мужчина
☎ \260E Черный телефон
☏ \260F
Белый телефон
✉ \2709 Конверт
✆ \2706 Знак телефона
меню

Стрелки

Иконка Decimal Entity css Название
← ← \2190 Стрелка влево
→ → \2192 Стрелка вправо
↑ ↑ \2191 Стрелка вверх
↓ ↓ \2193 Стрелка вниз
↔ ↔ \2194 Стрелка влево вправо
↕ \2195 Стрелка вверх вниз
⇄ \21C4 Стрелки вправо и влево
⇅ \21C5 Стрелки вверх и вниз
↲ \21B2 Вниз-влево 90 градусов
↳ \21B3 Стрелка вниз-вправо 90 градусов
↱ \21B1 Стрелка вверх-вправо 90 градусов
⇤ \21E4 Стрелка влево к полосе
↶ \21B6 Полукруг против часовой стрелки
↷ \21B7 Полукруг по часовой стрелке
↺ \21BA Круг против часовой стрелки
↻ \21BB Круг по часовой стрелке
➔ \2794 Широкоугольная стрелка вправо
↯ \21AF Зигзагообразная стрелка вниз
↖ \2196 Стрелка Северо-Запада
➘ \2798
Тяжелая юго-восточная стрела
➙ \2799 Тяжелая стрелка вправо
➚ \279A Тяжелая северо-восточная стрела
➟ \279F Пунктирная стрелка вправо
⇠ \21E0 Пунктирная стрелка влево
➤ \27A4 Черная стрелка вправо
▶ \25B6 Стрелка вправо (max)
◀ \25C0 Стрелка влево (max)
▲ \25B2 Стрелка вверх (max)
▼ \25BC Стрелка вниз (max)
▸ \25B8 Стрелка вправо (min)
◂ \25C2 Стрелка влево (min)
▴ \25B4 Стрелка вверх (min)
▾ \25BE Стрелка вниз (min)
► \25BA Стрелка вправо (удлиненная)
◄ \25C4 Стрелка влево (удлиненная)
▷ \25B7 Белый указатель вправо
◁ \25C1 Белый указатель влево
△ \25B3 Белый указатель вверх
▽ \25BD Белый указатель вниз
⇦ \21E6 Белая стрелка влево
⇨ \21E8 Белая стрелка вправо
⇒ ⇒ \21D2 Двойная стрелка вправо
⇐ ⇐ \21D0 Двойная стрелка влево
⇑ ⇑ \21D1 Двойная стрелка вверх
⇓ ⇓ \21D3 Двойная стрелка вниз
⇔ ⇔ \21D4 Двойная стрелка влево-вправо
↵ ↵ \21B5 Возврат каретки
меню

Кавычки

Иконка Decimal Entity css Название
« « « \00AB Кавычки слева
» » » \00BB Кавычек справа
‘ ‘ \2018 Открывающая одинарная кавычка
’ ’ \2019 Закрывающая одинарная кавычка
‚ ‚ \201A Нижняя одинарная кавычка
“ “ \201C Открывающая двойная кавычка
” ” \201D Закрывающая двойная кавычка
„ „ \201E Нижняя двойная кавычка
′ ′ \2032 Штрих, минуты, лапка
″ ″ \2033 Двойной штрих
‴ \2034 Тройной штрих
меню

Специальные

Иконка Decimal Entity css Название
№ \2116 Номер
© © © \00A9 Авторское право
® ® ® \00AE Зарегистрированный
™ ™ \2122 Товарный знак
℮ \212E Предполагаемый
· · · \00B7 Средняя Точка (Маркер списка)
• • \2022 Точка
■ \25A0 Черный квадрат
□ \25A1 Белый квадрат
— — \2014 Длинное тире
‰ ‰ \2030 Знак промилле
… … \2026 Многоточие
¶ ¶ \00B6 Знак абзаца
меню

Валюта

Иконка Decimal Entity css Название
€ € \20AC Евро
£ £ £ \00A3 Фунт
₤ \20A4 Лира
¥ ¥ ¥ \00A5 Иена
¢ ¢ ¢ \00A2 Цент
¤ ¤ ¤ \00A4 Валюта
меню

Погода

Иконка Decimal Entity css Название
° ° ° \00B0 Градус
☀ \2600 Солнце маленькое
☼ \263C Солнце большое
☁ \2601 Облако
❆ \2746 Снежинка 1
❅ \2745 Снежинка 2
❄ \2744 Снежинка 3
меню

Указатели

Иконка Decimal Entity css Название
☚ \261A Указатель Влево черный
☛ \261B Указатель Вправо черный
☜ \261C Указатель Левый белый
☝ \261D Указатель Вверх белый
☞ \261E Указатель Вправо белый
☟ \261F Указатель Вниз белый
меню

Фракции

Иконка Decimal Entity css Название
½ ½ ½ \00BD Половина (1/2)
¼ ¼ ¼ \00BC Четверть (1/4)
¾ ¾ ¾ \00BE Три четверти (3/4)
⅓ \2153 Одна треть (1/3)
⅔ \2154 Две трети (2/3)
⅛ \215B Одна восьмая (1/8)
⅜ \215C Три восьмых (3/8)
⅝ \215D Пять восьмых (5/8)
⅞ \215E Семь восьмых (7/8)
меню

Римские цифры

Иконка Decimal Entity css Название
Ⅰ \2160 Один (римская цифра)
Ⅱ \2161 Два (римская цифра)
Ⅲ \2162 Три (римская цифра)
Ⅳ \2163 Четыре (римская цифра)
Ⅴ \2164 Пять (римская цифра)
Ⅵ \2165 Шесть (римская цифра)
Ⅶ \2166 Семь (римская цифра)
Ⅷ \2167 Восемь (римская цифра)
Ⅸ \2168 Девять (римская цифра)
Ⅹ \2169 Десять (римская цифра)
Ⅺ \216A Одиннадцать (римская цифра)
Ⅻ \216B Двенадцать (римская цифра)
меню

Математика

Иконка Decimal Entity css Название
∞ ∞ \221E Бесконечность
± ± ± \00B1 Плюс-минус
≅ ≅ \2245 Приблизительно равно
≈ ≈ \2248 Асимптотически равно
≠ ≠ \2260 Не равно
≡ ≡ \2261 Тождественно равно
≤ ≤ \2264 Меньше или равно
≥ ≥ \2265 Больше или равно
÷ ÷ ÷ \00F7 Деление
× × × \00D7 Умножение х
✖ \2716 Тяжелое умножение x
¹ ¹ ¹ \00B9 Один (верхний индекс)
² ² ² \00B2 Два (верхний индекс)
³ ³ ³ \00B3 Три (верхний индекс)
⊕ ⊕ \2295 Прямая сумма
⊗ ⊗ \2297 Векторное произведение
∏ ∏ \220F N-арное произведение
∑ ∑ \2211 N-арная сумма (Сигма)
∅ ∅ \2205 Пустое множество. Диаметр.
∠ ∠ \2220 Угол
∥ \2225 Параллельно
⊥ ⊥ \22A5 Перпендикулярно
△ \25B3 Треугольник
○ \25CB Круг
□ \25A1 Квадрат
‾ ‾ \203E Надчеркивание
⁄ ⁄ \2044 Дробная черта
Иконка Decimal Entity css Название
√ √ \221A Радикал
∝ ∝ \221D Пропорционально
∩ ∩ \2229 Пересечение
∪ ∪ \222A Объединение
∫ ∫ \222B Интеграл
∴ ∴ \2234 Следовательно
∼ ∼ \223C Оператор тильда
⊂ ⊂ \2282 Подмножество
⊃ ⊃ \2283 Надмножество
⊄ ⊄ \2284 Не подмножество
⊆ ⊆ \2286 Подмножество или равно
⊇ ⊇ \2287 Надмножество или равно
∧ ∧ \2227 Логичское И
∨ ∨ \2228 Логичское ИЛИ
Иконка Decimal Entity css Название
ℑ ℑ \2111 Мнимая часть числа
ℜ ℜ \211C Действительная часть числа
ℵ ℵ \2135 Алеф
Иконка Decimal Entity css Название
∀ ∀ \2200 Квантор всеобщности
∃ ∃ \2203 Квантор существования
∂ ∂ \2202 Дифференциал
∇ ∇ \2207 Набла
∈ ∈ \2208 Принадлежит множеству
∉ ∉ \2209 Не принадлежит множеству
∋ ∋ \220B Является членом
Иконка Decimal Entity css Название
Δ Δ Δ \0394 Дельта (прописная)
ƒ ƒ ƒ \0192 Курсивное f
Α Α Α \0391 Альфа (прописная)
Β Β Β \0392 Бета (прописная)
Γ Γ Γ \0393 Гамма (прописная)
Ε Ε Ε \0395 Эпсилон (прописной)
Ζ Ζ Ζ \0396 Дзета (прописная)
Η Η Η \0397 Эта (прописная)
Θ Θ Θ \0398 Тета (прописная)
Ι Ι Ι \0399 Иота (прописная)
Κ Κ Κ \039A Каппа (прописная)
Λ Λ Λ \039B Ламбда (прописная)
Μ Μ Μ \039C Мю (прописная)
Ν Ν Ν \039D Ню (прописная)
Ξ Ξ Ξ \039E Кси (прописная)
Ο Ο Ο \039F Омикрон (прописной)
Π Π Π \03A0 Пи (прописная)
Ρ Ρ Ρ \03A1 Ро (прописная)
Σ Σ Σ \03A3 Сигма (прописная)
Τ Τ Τ \03A4 Тау (прописная)
Υ Υ Υ \03A5 Ипсилон (прописная)
Φ Φ Φ \03A6 Фи (прописная)
Χ Χ Χ \03A7 Хи (прописная)
Ψ Ψ Ψ \03A8 Пси (прописная)
Ω Ω Ω \03A9 Омега (прописная)
α α α \03B1 Альфа (строчная)
β β β \03B2 Бета (строчная)
γ γ γ \03B3 Гамма (строчная)
δ δ δ \03B4 Дельта (строчная)
ε ε ε \03B5 Эпсилон (строчная)
ζ ζ ζ \03B6 Дзета (строчная)
η η η \03B7 Эта (строчная)
θ θ θ \03B8 Тета (строчная)
ι ι ι \03B9 Иота (строчная)
κ κ κ \03BA Каппа (строчная)
λ λ λ \03BB Ламбда (строчная)
μ μ μ \03BC Мю (строчная)
ν ν ν \03BD Ню (строчная)
ξ ξ ξ \03BE Кси (строчная)
ο ο ο \03BF Омикрон (строчный)
π π π \03C0 Пи (строчная)
ρ ρ ρ \03C1 Ро (строчная)
ς ς ς \03C2 Сигма конечная (строчная)
σ σ σ \03C3 Сигма (строчная)
τ τ τ \03C4 Тау (строчная)
υ υ υ \03C5 Ипсилон (строчная)
φ φ φ \03C6 Фи (строчная)
χ χ χ \03C7 Хи (строчная)
ψ ψ ψ \03C8 Пси (строчная)
ω ω ω \03C9 Омега (строчная)
ϑ ϑ ϑ \03D1 Тета (строчная)
ϒ ϒ ϒ \03D2 Ипсилон с крючком
ϖ ϖ ϖ \03D6 Пи
меню

Карты

Иконка Decimal Entity css Название
♠ ♠ \2660 Пики черные
♥ ♥ \2665 Сердце черные
♦ ♦ \2666 Буби черные
♣ ♣ \2663 Крести черные
♤ \2664 Пики белые
♡ \2661 Сердце белые
♢ \2662 Буби белые
♧ \2667 Крести белые
меню

Шахматы

Иконка Decimal Entity css Название
♔ \2654 Король белый
♕ \2655 Ферзь белый
♖ \2656 Ладья белая
♗ \2657 Слон белый
♘ \2658 Конь белый
♙ \2659 Пешка белая
♚ \265A Король черный
♛ \265B Ферзь черный
♜ \265C Ладья черная
♝ \265D Слон черный
♞ \265E Конь черный
♟ \265F Пешка черная
меню

Дерево папок

Иконка Decimal Entity css Название
├ \251C
└ \2514
┬ \252C
─ \2500

Статьи до этого: HTML

Использование спецсимволов — HTML, CSS, JavaScript, Perl, PHP, MySQL: Weblibrary.

biz

В HTML и, соответственно, в броузерах реализована возможность прорисовки
символов по их кодам. Символы могут быть общепринятыми, вводимыми с кла
виатуры, нестандартными и используемыми в HTML в качестве служебных. Все
их будем называть спецсимволами. Первый способ ввода спецсимвола заключает
ся в указании его кода. Например, латинскую букву А можно задать так: &#65. Для
некоторых символов предусмотрена мнемоническая кодировка. В табл. 2.1 приве
ден набор часто используемых спецсимволов (по стандарту ISO 88591). Для от
деления кода символа от последующего текста надо вводить точку с запятой.


Зачастую мнемонические коды символов бывают очень полезны: особенно для
тех символов, которые нельзя ввести с клавиатуры. Например, для указания раз
решения экрана можно использовать такую конструкцию:


640×480

Двойная кавычка, угловые скобки и амперсанд (“, <, >, &) являются служебными в
HTML. Если их надо использовать в обычном тексте на Webстранице, то они
должны быть указаны только при помощи кодов.

Интересно, что кириллица тоже может быть реализована в виде набора спецсимво
лов. Русские буквы расположены (при кодировании Windows1251) в том месте
кодовой таблицы, где первоначально располагались латинские буквы с тильдами,
умляутами и т. д. Поэтому англоязычные редакторы HTML при переключении
клавиатурного регистра часто записывают кириллицу в виде кодов. Эта особен
ность рассмотрена в разделе «HoTMetaL PRO 5.0» главы 8.

Таблицы спецсимволов расположены в файле Spec.htm на прилагаемой дискете.
Вы можете проделать эксперимент с этим файлом. Создайте его копию и удалите
из текста указание на кодовую страницу (charset=windows1251). Затем откройте
страницу в броузере и посмотрите, как изменятся образцы символов. Например,
вместо русских могут появиться символы европейских алфавитов (буквы с тильда
ми, умляутами и т. д.). Может измениться и вид кириллицы, набранной при помо
щи мнемокодов. Изменив вид кодировки в броузере, можно увидеть самые разные
буквы. Если же вид некоторых спецсимволов не зависит от выбранной кодиров
ки, то эти символы можно с уверенностью использовать в своих Webстраницах.

Типы данных

Выше упоминалось, что основным типом данных Webстраницы является тек
стовый. Существует много элементов, которые являются контейнерами для тек
ста или используются для форматирования текста. Числовые и мнемонические
коды, обозначающие символы, предваряются знаком амперсанда &. Таким обра
зом, амперсанд и угловые скобки могут быть введены в текст не напрямую, а толь
ко при помощи кодов. Текстовые данные, являющиеся значениями атрибутов,
заключаются в прямые двойные кавычки.

Числовые данные требуются только для указания значений атрибутов и записы
ваются без кавычек.

Гиперссылки (координаты переходов) обычно состоят из двух частей: текста под
сказки и адреса, который определяет координату перехода. Текст подсказки или
заменяющий его рисунок располагается внутри элемента А, а адрес задается при
помощи атрибута href. Гиперссылка обычно выделяется на фоне обычного текста
цветом или подчеркиванием. Кроме того, вид указателя мыши обязательно измЪ
няется, когда пользователь помещает его над гиперссылкой.

На Webстраницах используются и другие формы ссылок. Так, графические дан
ные хранятся в отдельных файлах, и для указания места расположения этих фай
лов служит элемент IMG с атрибутом src. Для указания Webстраниц, размещае
мых внутри фреймов, служит элемент FRAME с атрибутом src.

Существуют правила для определения размеров элементов. Размер, заданный
обычным числом, выражается в пикселах. Так, например, задается длина горизон
тальной линии в 100 пикселов:


<HR w.idth=100>

Горизонтальный размер может быть задан и в процентном отношении к ширине
окна броузера:


<HR width=50%>

Если размер окна будет изменен, то изменится и длина горизонтальной линии.
Символ * может использоваться для разделения пространства страницы в опреде
ленных пропорциях. Ниже показаны два способа определения фреймов (атрибут
cols создает фреймы с вертикальным делением), причем левый фрейм в данном
случае всегда будет в три раза уже, нежели правый.


<FRAMESET cols="25%, 75%">
<FRAMESET cols="1*. 3*">

Управление цветом

Кодирование цвета используется для раскрашивания шрифтов, горизонтальных
линий и фона, других элементов страницы. Цвета обозначаются английскими
названиями или числовыми шестнадцатеричными кодами. Существует несколь
ко атрибутов, значениями которых являются параметры цвета. Самый простой
способ определить цвет — написать название цвета на английском языке. Так,
например, задается красный цвет шрифта в элементе FONT:


color="red"

В табл. 2.2. представлены все допустимые названия цветов. Но в общем случае
цвет определяется так называемым RGBкодом, шаблоны которого уже упомина
лись выше. Любой цвет представляется в этом случае как комбинация красного
(R), зеленого (G) и синего (В) цветов, взятых в определенных пропорциях

Доля каждой цветовой составляющей определяется интенсивностью цвета и вы
ражается двуразрядным шестнадцатеричным числом. В десятичном исчислении
эти числа соответствуют диапазону от 0 до 255. Легко подсчитать, что комбинируя
интенсивности трех базовых цветов, разработчик Webстраницы имеет возмож
ность запрограммировать любой из 16 777 216 доступных оттенков. В Windows 95
это соответствует цветовому режиму монитора True Color (24разрядное двоич
ное кодирование цвета). Это наилучший на сегодняшний день режим цветопере
дачи. Таким он, видимо, останется и в дальнейшем, так как возможности цветово
го зрения человека и возможности мониторов в смысле точного воспроизведения
цветовых нюансов подходят здесь к своему пределу. Таким образом, пользовате
ли и разработчики Webстраниц нисколько не ущемлены в своих «цветовых пра
вах» по сравнению с остальным компьютерным миром.

Если вы внимательно посмотрите на коды, приведенные в табл. 2.2, то обнаружи
те, что для формирования стандартных цветов часто используются или крайние
значения интенсивности базового цвета 00 и FF, или среднее значение 80. Многие
современные приложения имеют средства для работы с цветом, предоставляя
пользователю возможность, выбрав в палитре цвет, увидеть его численные ха
рактеристики. И наоборот, задав численные значения получить новый оттенок.
Нельзя, правда, сказать, что все подобные программы совместимы между собой в
смысле генерации цвета. Создав некоторый цвет в одной программе и задав его
RGBкод в другой, вы не обязательно получите тот же самый оттенок. Цветовые
нюансы для Webстраниц лучше всего проверять на самих страницах. В файле
Color.htm на прилагаемой дискете приведен пример подбора оранжевого цвета.
Он труднее всего воспроизводится на компьютере и требует визуального тестиро
вания. Подобную страницу можно использовать и для подбора других оттенков.
Фрагмент HTMLфайла для этого приведен ниже:

<TABLE border=3 width=200>
<TR>
<TD align="cerrter" bgcolor="white" ><В>Код</Ь>
<TD align="center" bgcolor="white" ><В>Цвет</Ь>
<TRXTD>#FFBOOO <TD bgcolor=#FFBOOO >1
<TRXTD>#FFA800 <TD bgcolor=#FFA800 >2
<TRXTD>#FFAOOO <TD bgcolor=#FFAOOO >3
<TR><TD>#FF9800 <TD bgcolor=#FF9800 >4
<TRxTD>#FF9000 <TD bgcolor=#FF9000 >5
<TRxTD>«FF8800 <TD bgcolor=#FF3800 >6
<TRxTD>#FF8000 <TD bgcolor=#FF8000 >7
<TRxTD>#FF7800 <TD bgcolor=#FF7800 >8
<TRXTD>#FF7000 <TD bgcolor=#FF7000 >9
<TRXTD>#FF6800 <TD bgcolor=#FF6800 >10
<TR><TD>#FF6000 <TD bgcolor=#FF6000 >11
<TR><TD>#FF5800 <TD bgcolor=#FF5800 >12
</table>

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


bgcolor=#/?/?GGfl6

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

Еще один аспект применения цвета. Выше упоминалось, что элемент HR, создающий
горизонтальную линию, допускает использование ряда атрибутов. С их помощью
линию можно превратить в цветной прямоугольник. Вот, например, прямоугольник
светлозеленого цвета, выровненный влево, высотой 20 и шириной 18 пикселов:


<HR color="lime" size=20 width=18 align="left">

Подобные изображения можно использовать для разделения частей страницы или
в качестве маркеров списка. Теоретически их можно указывать и в гинерссылках
(как деталь, на которой надо щелкать мышью), но это не совсем удобно: элемент
HR всегда размещается на отдельной строке.
Ну, и наконец, осталось привести HTMLкод, рисующий радугу на Webстранице:


<FONT color="red"> РАДУГА </font>
<TABLE border=0 width=100% >
<TR><TD bgcolor=#FF3030 Ж
<TR><TD bgcolor=FFDOOO >0
<TR><TD bgcolor=#F3FF5F >Ж
<TR><TD bgcolor=#OOFFOO >3
<TR><TD bgcolor=#6FD3F7 >F
<TR><TD bgcolor=f}5F72FDF >C
<TRXTD bgcolor=#B568F4 >Ф
</table>

Можно сделать вывод, что «раскрашивание» Webстраницы — хороший способ при
дать ей современный, профессиональный вид. Но в данном случае большое значение
имеют не только изобретательность и вкус, но особенно чувство меры. Цветовая
проработка Webстраницы является альтернативой использованию многочислен
ных рисунков и позволяет обеспечить более быструю загрузку документа. Так уж
повелось, что многие мелкие детали (например, маркеры) представляют собой фай
лы формата GIF, и часто приходится долго ждать, пока загрузятся все кружочки,
квадратики, черточки и другая графическая мелочь. Солидные фирмы могут себе
это позволить, так как заинтересованному клиенту не остается другого выхода, как
ждать окончания загрузки нужной страницы. Если вы создаете личную страницу,
то есть резон сделать ее быстро загружаемой. Иначе ваши потенциальные читатели,
не дождавшись прорисовки всех деталей, уйдут «бродить» по другим уголкам Сети.
Я думаю, не будет большой ошибкой утверждать, что разработчики HTML серь
езно просчитались, не включив в язык элементы, позволяющие строить примитив
ные графические объекты. Это практически безграничное ноле деятельности для
совершенствования гипертекста. Важность графики, поддерживаемой броузером,
явно недооценили, а теперь, видимо, слишком поздно наверстывать упущенное,
так как признание завоевали другие подходы.

ПРИМЕЧАНИЕ
К сожалению, данный раздел по технологическим соображениям невозможно дополнить цвет
ными иллюстрациями, но такие иллюстрации можно найти в примерах в файле Color.htm на
прилагаемой дискете.

Спецсимволы HTML для сайта

Вид HTML-код CSS-код Описание
&#9731; \2603 Снеговик
&#9766; \2626 Православный крест
&#9875; \2693 Якорь
&#10163; \27B3 Стрела направо
&#9990; \2706 Знак телефона
&#9749; \2615 Горячие напитки
&#9998; \270E Карандаш, направленный вправо-вниз
&#9999; \270F Карандаш
&#10000; \2710 Карандаш, направленный вправо-вверх
&#10001; \2711 Незакрашенное острие пера
&#10002; \2712 Закрашенное острие пера
&#9884; \269C Геральдическая лилия
&#10052; \2744 Снежинка
&#10084; \2764 Закрашенное жирное сердце
&#10053; \2745 Зажатая трилистниками снежинка
&#10054; \2746 Жирная остроугольная снежинка
&#9733; \2605 Закрашенная звезда
&#9734; \2606 Незакрашенная звезда
&#10026; \272A Незакрашенная звезда в закрашенном круге
&#10027; \272B Закрашенная звезда с незакрашенным кругом внутри
&#10031; \272F Вращающаяся звезда
&#10057; \2749 Звёздочка с шарообразными окончаниями
&#10059; \274B Жирная восьмиконечная каплеобразная звёздочка-пропеллер
&#10034; \2732 Звёздочка с незакрашенным центром
&#9055; \235F Apl функциональный символ звезда в круге
&#8859; \229B Оператор звездочки в круге
&#9728; \2600 Закрашенное солнце с лучами
&#9729; \2601 Облака
&#9730; \2602 Зонтик
&#9745; \2611 Галочка в квадрате
&#9746; \2612 Крестик в квадрате
&#9785; \2639 Нахмуренный смайлик
&#9786; \263A Улыбающийся смайлик
&#9787; \263B Закрашенный улыбающийся смайлик
&#9773; \262D Серп и молот
&#9776; \2630 Триграмма
&#10047; \273f Закрашенный цветок
&#10048; \2740 Незакрашенный цветок
&#10046; \273E Цветок с шестью лепестками
&#10049; \2741 Закрашенный обведённый цветок
&#10050; \2742 Цветок из точек
&#9993; \2709 Конверт
&#10086; \2766 Сердце в виде цветка
&#10102; \2776 Номер 1
&#10103; \2777 Номер 2
&#10104; \2778 Номер 3
&#10105; \2779 Номер 4
&#10106; \277A Номер 5
&#10107; \277B Номер 6
&#10108; \277C Номер 7
&#10109; \277D Номер 8
&#10130; \2792 Номер 9
&#10131; \2793 Номер 10
&#10144; \27A0 Летящая стрела
&#10148; \27A4 Наконечник стрелы
&#10149; \27A5 Изогнутая стрела, указывающая вниз и вправо
&#10150; \27A6 Изогнутая стрела, указывающая вверх и вправо
&#10076; \275C Жирная одинарная верхняя запятая
&#10075; \275B Жирная одинарная повёрнутая верхняя запятая
&#10006; \2716 Жирный знак умножения
&#10008; \2718 Жирный крестик
&#10004; \2714 Жирная отметка галочкой
&#10010; \271A Жирный крест
&#8634; \21BA Круглая стрелка с наконечником против часовой стрелки
&#8635; \21BB Круглая стрелка с наконечником против часовой стрелки
&nbsp; \00A0 Неразрывный пробел
­ &shy; \00AD Место возможного переноса
< &lt; \003C Знак «меньше чем» (начало тега)
> &gt; \003E Знак «больше чем» (конец тега)
« &laquo; \00AB Левая двойная угловая скобка
» &raquo; \00BB Правая двойная угловая скобка
&lsaquo; \2039 Левая угловая одиночная кавычка
&rsaquo; \203A Правая угловая одиночная кавычка
« &quot; \0022 Двойная кавычка
&prime; \2032 Одиночный штрих
&Prime; \2033 Двойной штрих
&lsquo; \2018 Левая одиночная кавычка
&rsquo; \2019 Правая одиночная кавычка
&sbquo; \201A Нижняя одиночная кавычка
&ldquo; \201C Левая двойная кавычка
&rdquo; \201D Правая двойная кавычка
&bdquo; \201E Нижняя двойная кавычка
& &amp; \0026 Амперсанд
&apos; \0027 Апостроф (одинарная кавычка)
§ &sect; \00A7 Параграф
© &copy; \00A9 Знак copyright
¬ &not; \00AC Знак отрицания
® &reg; \00AE Знак зарегистрированной торговой марки
¯ &macr; \00AF Знак долготы над гласным
° &deg; \00B0 Градус
± &plusmn; \00B1 Плюс-минус
¹ &sup1; \00B9 Верхний индекс «1»
² &sup2; \00B2 Верхний индекс «2»
³ &sup3; \00B3 Верхний индекс «3»
¼ &frac14; \00BC Одна четверть
½ &frac12; \00BD Одна вторая
¾ &frac34; \00BE Три четверти
´ &acute; \00B4 Знак ударения
µ &micro; \00B5 Микро
&para; \00B6 Знак абзаца
· &middot; \00B7 Знак умножения
¿ &iquest; \00BF Перевернутый вопросительный знак
ƒ &fnof; \0192 Знак флорина
&trade; \2122 Знак торговой марки
&bull; \2022 Маркер списка
&hellip; \2026 Многоточие
&oline; \203E Надчеркивание
&ndash; \2013 Среднее тире
&mdash; \2014 Длинное тире
&permil; \2030 Промилле
} &#125; \007D Правая фигурная скобка
{ &#123; \007B Левая фигурная скобка
= &#61; \003D Знак равенства
&ne; \2260 Знак неравенства
&cong; \2245 Конгруэнтность (геометрическое равенство)
&asymp; \2248 Почти равно
&le; \2264 Меньше чем или равно
&ge; \2265 Больше чем или равно
&ang; \2220 Угол
&perp; \22A5 Перпендикулярно (кнопка вверх)
&radic; \221A Квадратный корень
&sum; \2211 N-ичное суммирование
&int; \222B Интеграл
&larr; \2190 Стрелка влево
&uarr; \2191 Стрелка вверх
&rarr; \2192 Стрелка вправо
&darr; \2193 Стрелка вниз
&harr; \2194 Стрелка влево-вправо
&crarr; \21B5 Стрелка вниз и влево – знак возврата каретки
&lArr; \21D0 Двойная стрелка налево
&uArr; \21D1 Двойная стрелка вверх
&rArr; \21D2 Двойная стрелка направо
&dArr; \21D3 Двойная стрелка вниз
&hArr; \21D4 Двойная стрелка влево-вправо
&spades; \2660 «Пики»
&clubs; \2663 «Трефы»
&hearts; \2665 «Червы»
&diams; \2666 «Бубны»
&#9825; \2661 Контур «Червы»
&#9826; \2662 Контур «Бубны»
&#9828; \2664 Контур «Пики»
&#9831; \2667 Контур «Трефы»
¢ &cent; \FFE0 Цент
£ &pound; \FFE1 Фунт стерлингов
¥ &yen; \00A5 Йена или юань
&euro; \20AC Евро
$ &#36; \0024 Доллар
&#8372; \20B4 Знак гривны
&#8377; \20B9 Индийская рупия
&#22291; \5713 Китайский юань
&#8376; \20B8 Казахстанский тенге
&#9800; \2648 Овен
&#9801; \2649 Телец
&#9802; \264A Близнецы
&#9803; \264B Рак
&#9804; \264C Лев
&#9805; \264D Дева
&#9806; \264E Весы
&#9807; \264F Скорпион
&#9808; \2650 Стрелец
&#9809; \2651 Козерог
&#9810; \2652 Водолей
&#9811; \2653 Рыбы

Спецсимволы HTML.

Как добавить смайлики в HTML

Привет, сегодня я покажу вам подборку самых популярных спецсимволов  HTML. Спецсимволы HTML , или символы-мнемоники, представляют собой конструкцию SGML.

Чтобы разместить символ на веб-странице, необходимо указать HTML-код или мнемонику.

Спецсимволы чувствительны к регистру, поэтому их необходимо прописывать точно так, как указано в таблице. Спецсимволы, не имеющие мнемоники, могут не отображаться вовсе или же некорректно отображаться в тех или иных браузерах.

Как добавить спецсимвол.

Для вставки символов внутрь тегов воспользуйтесь HTML-кодом символа, а для использования символов в таблицах стилей, например, в качестве значения свойства content — CSS-код.

Спецсимвол наследует цвет от цвета текста родительского элемента. Чтобы изменить цвет спецсимвола, можно поместить HTML-код внутрь тега <span> или задать нужное значение свойства color (при вставке спецсимволов через свойство content).

1. Полезные знаки и символы

Вид HTML-код CSS-код Описание
&#9731; \2603 Снеговик
&#9766; \2626 Православный крест
&#9875; \2693 Якорь
&#9990; \2706 Знак телефона
&#9742; \260E Телефон
&#9749; \2615 Горячие напитки
&#9998; \270E Карандаш, направленный вправо-вниз
&#9999; \270F Карандаш
&#10000; \2710 Карандаш, направленный вправо-вверх
&#10001; \2711 Незакрашенное острие пера
&#10002; \2712 Закрашенное острие пера
&#9884; \269C Геральдическая лилия
&#9937; \26D1 Шлем с белым крестом
&#9885; \269D Начерченная белая звезда
&#10052; \2744 Снежинка
&#10084; \2764 Закрашенное жирное сердце
&#10053; \2745 Зажатая трилистниками снежинка
&#10054; \2746 Жирная остроугольная снежинка
&#9733; \2605 Закрашенная звезда
&#9734; \2606 Незакрашенная звезда
&#10026; \272A Незакрашенная звезда в закрашенном круге
&#10027; \272B Закрашенная звезда с незакрашенным кругом внутри
&#10031; \272F Вращающаяся звезда
&#10057; \2749 Звёздочка с шарообразными окончаниями
&#10059; \274B Жирная восьмиконечная каплеобразная звёздочка-пропеллер
&#10034; \2732 Звёздочка с незакрашенным центром
&#9728; \2600 Закрашенное солнце с лучами
&#9729; \2601 Облака
&#9730; \2602 Зонтик
&#9745; \2611 Галочка в квадрате
&#9746; \2612 Крестик в квадрате
&#9785; \2639 Нахмуренный смайлик
&#9786; \263A Улыбающийся смайлик
&#9787; \263B Закрашенный улыбающийся смайлик
&#9773; \262D Серп и молот
&#9873; \2691 Закрашенный флаг
&#9872; \2690 Незакрашенный флаг
&#9776; \2630 Триграмма
&#10047; \273f Закрашенный цветок
&#10048; \2740 Незакрашенный цветок
&#10046; \273E Цветок с шестью лепестками
&#10049; \2741 Закрашенный обведённый цветок
&#10050; \2742 Цветок из точек
&#9993; \2709 Конверт
&#10086; \2766 Сердце в виде цветка
&#10102; \2776 Номер 1
&#10103; \2777 Номер 2
&#10104; \2778 Номер 3
&#10105; \2779 Номер 4
&#10106; \277A Номер 5
&#10107; \277B Номер 6
&#10108; \277C Номер 7
&#10109; \277D Номер 8
&#10130; \2792 Номер 9
&#10131; \2793 Номер 10
&#10006; \2716 Жирный знак умножения
&#10008; \2718 Жирный крестик
&#10004; \2714 Жирная отметка галочкой
&#10010; \271A Жирный крест
&#9883; \269B Символ атома
&#9850; \267A Символ переработки
&#10065; \2751 Незакрашенный квадрат с правой нижней тенью
&#10066; \2752 Незакрашенный квадрат с правой верхней тенью
&#9672; \25C8 Алмаз в оправе
&#9680; \25D0 Круг с левой закрашенной половиной
&#9681; \25D1 Круг с закрашенной правой половиной
&#8258; \2042 Три звездочки

2.

Знаки пунктуации
Вид HTML-код CSS-код Описание
&nbsp; \00A0 Неразрывный пробел
&shy; \00AD Место возможного переноса
< &lt; \003C Знак «меньше чем» (начало тега)
> &gt; \003E Знак «больше чем» (конец тега)
« &laquo; \00AB Левая двойная угловая скобка
» &raquo; \00BB Правая двойная угловая скобка
&lsaquo; \2039 Левая угловая одиночная кавычка
&rsaquo; \203A Правая угловая одиночная кавычка
« &quot; \0022 Двойная кавычка
&prime; \2032 Одиночный штрих
&Prime; \2033 Двойной штрих
&lsquo; \2018 Левая одиночная кавычка
&rsquo; \2019 Правая одиночная кавычка
&sbquo; \201A Нижняя одиночная кавычка
&ldquo; \201C Левая двойная кавычка
&rdquo; \201D Правая двойная кавычка
&bdquo; \201E Нижняя двойная кавычка
&#10076; \275C Жирная одинарная верхняя запятая
&#10075; \275B Жирная одинарная повёрнутая верхняя запятая
& &amp; \0026 Амперсанд
&apos; \0027 Апостроф (одинарная кавычка)
§ &sect; \00A7 Параграф
© &copy; \00A9 Знак copyright
¬ &not; \00AC Знак отрицания
® &reg; \00AE Знак зарегистрированной торговой марки
¯ &macr; \00AF Знак долготы над гласным
° &deg; \00B0 Градус
± &plusmn; \00B1 Плюс-минус
¹ &sup1; \00B9 Верхний индекс «1»
² &sup2; \00B2 Верхний индекс «2»
³ &sup3; \00B3 Верхний индекс «3»
¼ &frac14; \00BC Одна четверть
½ &frac12; \00BD Одна вторая
¾ &frac34; \00BE Три четверти
´ &acute; \00B4 Знак ударения
µ &micro; \00B5 Микро
&para; \00B6 Знак абзаца
· &middot; \00B7 Знак умножения
¿ &iquest; \00BF Перевернутый вопросительный знак
ƒ &fnof; \0192 Знак флорина
&trade; \2122 Знак торговой марки
&bull; \2022 Маркер списка
&hellip; \2026 Многоточие
&oline; \203E Надчеркивание
&ndash; \2013 Среднее тире
&mdash; \2014 Длинное тире
&permil; \2030 Промилле
} &#125; \007D Правая фигурная скобка
{ &#123; \007B Левая фигурная скобка
= &#61; \003D Знак равенства
&ne; \2260 Знак неравенства
&cong; \2245 Конгруэнтность (геометрическое равенство)
&asymp; \2248 Почти равно
&le; \2264 Меньше чем или равно
&ge; \2265 Больше чем или равно
&ang; \2220 Угол
&perp; \22A5 Перпендикулярно (кнопка вверх)
&radic; \221A Квадратный корень
&sum; \2211 N-ичное суммирование
&int; \222B Интеграл
&#8251; \203B Знак сноски
÷ &divide; \00F7 Знак деления
&infin; \221E Знак бесконечности
@ &#64; \0040 Символ собака
[ &#91; \005B Левая квадратная скобка
] &#93; \005D Правая квадратная скобка

3.

Стрелки
Вид HTML-код CSS-код Описание
&larr; \2190 Стрелка влево
&uarr; \2191 Стрелка вверх
&rarr; \2192 Стрелка вправо
&darr; \2193 Стрелка вниз
&harr; \2194 Стрелка влево-вправо
&crarr; \21B5 Стрелка вниз и влево – знак возврата каретки
&lArr; \21D0 Двойная стрелка налево
&uArr; \21D1 Двойная стрелка вверх
&rArr; \21D2 Двойная стрелка направо
&dArr; \21D3 Двойная стрелка вниз
&hArr; \21D4 Двойная стрелка влево-вправо
&#10144; \27A0 Летящая стрела
&#10148; \27A4 Наконечник стрелы
&#10149; \27A5 Изогнутая стрела, указывающая вниз и вправо
&#10150; \27A6 Изогнутая стрела, указывающая вверх и вправо
&#10163; \27B3 Стрела направо
&#8634; \21BA Круглая стрелка с наконечником против часовой стрелки
&#8635; \21BB Круглая стрелка с наконечником против часовой стрелки
&#8679; \21E7 Толстая полая стрелка вверх
&#8617; \21A9 Стрелка налево с крючком
&#10155; \27AB Наклонённая вниз объёмная стрелка
&#11015; \2B07 Закрашенная стрелка вниз
&#11014; \2B06 Закрашенная стрелка вверх

4.

Карточные масти
Вид HTML-код CSS-код Описание
&spades; \2660 «Пики»
&clubs; \2663 «Трефы»
&hearts; \2665 «Червы»
&diams; \2666 «Бубны»
&#9825; \2661 Контур «Червы»
&#9826; \2662 Контур «Бубны»
&#9828; \2664 Контур «Пики»
&#9831; \2667 Контур «Трефы»

5. Деньги

Вид HTML-код CSS-код Описание
¢ &cent; \FFE0 Цент
£ &pound; \FFE1 Фунт стерлингов
&#8381; \20BD Российский рубль
¥ &yen; \00A5 Йена или юань
&euro; \20AC Евро
$ &#36; \0024 Доллар
&#8372; \20B4 Знак гривны
&#8377; \20B9 Индийская рупия
&#22291; \5713 Китайский юань
&#8376; \20B8 Казахстанский тенге

6.

Знаки зодиака
Вид HTML-код CSS-код Описание
&#9800; \2648 Овен
&#9801; \2649 Телец
&#9802; \264A Близнецы
&#9803; \264B Рак
&#9804; \264C Лев
&#9805; \264D Дева
&#9806; \264E Весы
&#9807; \264F Скорпион
&#9808; \2650 Стрелец
&#9809; \2651 Козерог
&#9810; \2652 Водолей
&#9811; \2653 Рыбы

Все файлы из данной записи:

Полный список символов HTML, представленный в записи — https://yadi. sk/d/MH-1Tk583RdgQf

Что такое спецсимволы html

Здравствуйте уважаемые начинающие веб-мастера.

Продолжим изучать элементы HTML.

Чтоб посмотреть, о чём мы будем говорить в этой статье, загляните в таблицы спецсимволов.

Специальные символы (мнемоники) применяются для отображения знаков, которых нет на клавиатуре.

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

Вот поэтому в html, и были разработаны спецсимволы. Число им — тьма. В моей таблице приведены только те, которые, возможно, могут быть использованы нами.

Я не стану долго распространяться над их происхождением, так как цель этой статьи — случаи их наиболее частого применения.

Самым распространённым, является написание угловых скобок < >.

Дело в том, что в угловые скобки в html заключаются теги, и если редакторе типа Notepad++, в тексте html файла, вам вдруг захочется поставить знаки больше или меньше, то браузер воспримет их как начало, или конец тега.

Но так как никакого тега нет и в помине, то всё, что будет находится после знака, в браузере не отразиться.

Поэтому, вывести угловую скобку на экран, можно только написав вместо угловой скобки, спецсимвол.

Ещё одним, часто применяемым спецсимволом, является «Неразрывный пробел».

При помощи него решаются следующие задачи:

1. Ориентируясь на настройки выравнивания, браузер самостоятельно определяет, когда делать перенос слова на следующую строку.

При помощи спецсимвола «Неразрывный пробел» можно дать браузеру команду, не выполнять перенос в определённом месте.

Для выполнения, этот спецсимвол ставится между двумя словами, второе из которых браузер переносил на новую строку.

В результате слово останется в той же строке, что и предыдущее.

2. Если Вам потребуется увеличить расстояние между абзацами статьи, то сделать это обычным переносом (клавиша Enter) не получится.

Для реализации, после переноса клавишей Enter, ставится спецсимвол «Неразрывный пробел», затем ещё раз Enter.

В результате, браузер разместит абзацы, на расстоянии равном двум обычным пробелам.

3. При помощи спецсимвола «Неразрывный пробел», можно создать красную стоку.

Если перед первым словом строки вставить несколько (лучше 4) спецсимволов, то получится отступ, то есть «Красная строка.»

Следующий популярный спецсимвол — это двойная кавычка. Особо он популярен у владельцев сайтов, управляемых CMS WordPress.

Дело в том, что WordPress, по замыслу разработчиков, переделывает двойную кавычку, которую Вы ставите в тексте, в угловую.

Когда в угловую кавычку помещается слово, то это визуально воспринимается нормально, но если Вы выкладываете код, в котором есть прямые кавычки, то угловые там смотрятся, как что-то инородное.

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

Желаю творческих успехов.


Перемена

Таблицы < < < В раздел > > > Мета-теги

Css content коды символов – Тарифы на сотовую связь