HTML Символы

Спецсимволы HTML (символы-мнемоники) представляют собой конструкцию SGML, ссылающуюся на определенные символы из символьного набора документа. В основном они используются для указания символов, которых нет в стандартной компьютерной клавиатуре, либо которые не поддерживает кодировка HTML-страницы (Windows-1251, UTF-8 и т.д.).

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

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

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



Популярные спецсимволы HTML

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

ВидHTML-кодCSS-кодОписание
&#9731;\2603Снеговик
&#10052;\2744Снежинка
&#10053;\2745Зажатая трилистниками снежинка
&#10054;\2746Жирная остроугольная снежинка
&#9733;\2605Закрашенная звезда
&#9734;\2606Незакрашенная звезда
&#10026;\272AНезакрашенная звезда в закрашенном круге
&#10027;\272BЗакрашенная звезда с незакрашенным кругом внутри
&#10031;\272FВращающаяся звезда
&#10057;\2749Звёздочка с шарообразными окончаниями
&#10059;\274BЖирная восьмиконечная каплеобразная звёздочка-пропеллер
&#10034;\2732Звёздочка с незакрашенным центром
&#9055;\235FApl функциональный символ звезда в круге
&#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Круглая стрелка с наконечником против часовой стрелки

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Нижняя двойная кавычка
&&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;\2211N-ичное суммирование
&int;\222BИнтеграл

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Двойная стрелка влево-вправо

4. Карточные масти

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

5. Деньги

ВидHTML-кодКодОписание
¢&cent;&#162;Цент
£&pound;&#163;Фунт стерлингов
¤&curren;&#164;Денежная единица
¥&yen;&#165;Йена или юань
&euro;&#8364;Евро

6. Знаки зодиака

ВидHTML-кодКодОписание
&#9800;“Овен”
&#9801;“Телец”
&#9802;“Близнецы”
&#9803;“Рак”
&#9804;“Лев”
&#9805;“Дева”
&#9806;“Весы”
&#9807;“Скорпион”
&#9808;“Стрелец”
&#9809;“Козерог”
&#9810;“Водолей”
&#9811;“Рыбы”

7. Шахматные фигуры

ВидHTML-кодКодОписание
&#9812;Белый король
&#9813;Белый ферзь
&#9814;Белая ладья
&#9815;Белый слон
&#9816;Белый конь
&#9817;Белая пешка
&#9818;Чёрный король
&#9819;Чёрный ферзь
&#9820;Чёрная ладья
&#9821;Чёрный слон
&#9822;Чёрный конь
&#9723;Чёрная пешка

Источник



Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.