Специальные символы HTML

Таблица специальных символов HTML

В таблице будут приведены символы, которые можно скопировать и вставить ВКонтакте, Одноклассники, на веб-страницу.

« »
́ § °
± × ÷ ƒ
² ³ α β γ π ½
¼ ¾
¢ £ ¥ © ®
😘
используемые в HTML коде веб-страницы
  &nbsp; & &amp; < &lt; > &gt; " &quot; ' &#39;

Конвертер.

ASCII  

Unicode

HEX    

Символ-мнемоника (только в обратном направлении)

Зачем нужны специальные символы HTML.

Все цифры, буквы, символы - это определённый набор в указанной кодировке (самая современная и наиболее распространённая UTF-8 - история развития). Например, имя Наташа - &#1053;&#1072;&#1090;&#1072;&#1096;&#1072;
  1. Не все символы возможно разместить на клавиатуре (вспомним очень обширный набор иероглифов), такая таблица предоставляет более широкий выбор. Полный вариант можно увидеть с помощью скрипта
    <style type="text/css">p {float: left; padding: 0 15px; margin: 0; font-size: 140%;}</style>
    <script type="text/javascript">
    for (var i=0; i<111000; i++)
      document.writeln ((i%256?'':'<p>') + i + ': ' + String.fromCharCode (i) + '<br>');
    </script>
  2. Иногда нужно показать код посетителям сайта. Но часть символов, используемых в HTML-документе (например, < > для тегов), не будут видны читателям при их публикации на веб-странице. Чтобы автоматизировать процесс перевода этих элементов в специальные символы, можно воспользоваться небольшой программой CoderHTML.
  3. Вместо изображения, чтобы увеличить скорость загрузки страницы.

Пример использования специальных символов HTML

Рейтинг звёзд без использования картинок
<style type="text/css">
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}  
</style>

<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>

Как сделать стрелочки в HTML

Стоит помнить, что с изменением шрифта, вид спец. символов также будет меняться. Например, эта стрелочка имеет шрифт Courier, а эта Arial.
Дополнение: Иконки "Домик", Emoji
в f t
наверх ↑

49 комментариев:

Олеся_Fialka
у меня ни в какую не хочет ставиться знак копирайта... может я конечно не так делаю, что скорее всего.
NMitra
Олесь, скопируй в буфер не код, а сам символ. Его и вставляй.

Код нужно добавлять на вкладке "Изменить HTML".
Олеся_Fialka
Не знаю в чем прикол, но попробовала чуть позже, и все получилось))) Наверное лениво блогу было)
SynVelesa
какова практическая польза от этих символов? и подскажите, пжлст, где можно раздобыть подобную, но более подробную и полезную таблицу тегов?
NMitra
Практическую польза указана вначале статьи.

Полный список символов можете посмотреть здесь: http://www.unicode.org/charts/
KRASOTA NAIL
посмотри пожалуйста , что у меня не так . что посоветуешь переделать
http://krasotanail.blogspot.com/
NMitra
Что именно посмотреть? Задавайте конкретные вопросы. Блог не оптимизирован, поисковыми системами, но проиндексирован. Не понятно по каким запросам продвигается.
PANIC
Вы рассказывали про мета-теги (где используется условная конструкция) и говорили, что элемент "— Ваш_бренд" для стат.страниц и отдельных сообщений можно не указывать. А если я хочу его указать, можно ли там использовать символ ' ? Как будет правильнее - ' или &apos; ?
NMitra
Приемлемы оба варианта. Программа сама в данном месте меняет элемент на спец символ.
Дмитрий46
Взял у вас код стрелки. Очень нужная таблица, на мой взгляд.
Psylone
Вероятно, использование специальных символов поможет предотвратить атаки XSS, когда вместе с данными формы на сервер может передаться вредоносный код, заключенный в тег script, например.
NMitra
Честно говоря, по данному вопросу совсем немного знаю. Решила не углубляться. Думаю, Гугл должен справиться.
О нас
Здорово! Нашла то, что нужно! Спасибо!
VPK
В мозиле всё замечательно выглядит, поробовал посмотреть через Эксплорер, он далеко не все символы распознаёт... Что же микрософтовцы никак его до ума не доведут? Кстати а кто нибудь пробовал через оперу или сафари смотреть, скажите результат...
NMitra
Я смотрю только в последних версиях браузера. В IE, Опере, Мозиле нормально.
Yuriy Kurnat
Мучился, как придурок с этим < > - уже отчаялся, а вставил (блоггер гугл) < - и о, боги!!! - есть, и никто не подсказал, только вы!!! Спасибо, отличная таблица!!!
NMitra
Да, табличка зачётная, сама к ней постоянно возвращаюсь.
Анонимный
А как будет символ домик?
NMitra
Я как-то не нашла. Символов очень много, особенно иероглифов. К тому же не все показывает браузер. Вот что-то близкое, но не то:

☖ ☗
Валерий
Здравствуйте! Для анонимного: можете посмотреть на http://copypastecharacter.com/symbols ⌂
NMitra
Здравствуйте, это решение предложено выше. Но на домик не очень похоже.
NMitra
Вот альтернативное решение http://shpargalkablog.ru/2013/02/home-css.html
Serge Kaplun
Понять бы еще как заставить звезды работать
NMitra
Нужно подключать php
Геннадий
Добрый день! Нужна помощь. "Оптимизировал" блог до такой степени, что теперь при ошибке не выходит "Страница не найдена", а выходит главная страница блога и то искаженная. Адрес блога: http://life-bonn.blogspot.com
Где-то перемудрил.
NMitra
Нет, главная не появляется, просто стандартное сообщение отсутствует http://life-bonn.blogspot.ru/2012/09/blog-post_3631.ht

Мой код http://shpargalkablog.ru/2010/09/optimizatsiya-blogger.html#404
Геннадий
Спасибо за оперативность. Не получилось, пытался дублировать как было сказано выше, результат тот же. Где-то я снес нужный код?
NMitra
Там нажмите на кнопку Код в шаблоне "Показать".

Если не получиться восстановить, то придётся сбрасывать настройки http://shpargalkablog.ru/2012/03/shablon-blogger-polomalsya.html , если не делали бэкап
Геннадий
Не могу найти эту кнопку...
NMitra
Синенькая такая сразу после кода
Геннадий
"шаблон - изменить HTML.." там?
NMitra
Верно
Геннадий
Ну где же у него там кнопка??
NMitra
Перейдите по http://shpargalkablog.ru/2010/09/optimizatsiya-blogger.html#404 , спуститесь чуть ниже, увидите синею кнопку, нажмите её и посмотрите код. Проверьте наличие кода в "Шаблон"... с галкой "Расширенные шаблоны виджета". Если его нет, заведите новый блог, посмотрите где этот фрагмент присутствует и добавьте его.

Перед всеми манипуляциями сделайте резервную копию шаблона http://shpargalkablog.ru/2011/01/bezopastnost-blogger.html#neobyazatelnye
Геннадий
Эксперименты привели к полной замене шаблона и постов ))) Но в причине разобрался, оказывается стандартное сообщение "Страница не найдена" исчезает в том случае, когда при оптимизации кода блога убирается сообщение "Показаны сообщения с ярлыком ххххххх. Показать все сообщения" Поэтому как ни прискорбно это придется оставить. У меня к Вам вопрос, как можно, чтобы при нажатии на ярлык выводилось только то сообщение, которому указанный ярлык присвоен, а не все сразу сообщения?
NMitra
Посмотрите как сделано у меня http://shpargalkablog.ru/2010/08/ubrat-lishnie-ssylki-iz-hablona-blogger.html

Вы же ярлык присваиваете сразу нескольким статьям? Иначе его применение не имеет смысла. Они группируют статьи по темам.
Геннадий
Солидно, теперь и я смогу сделать что-то похожее. Я ярлык присваиваю только тем статьям, которые попадают у меня в публикации.
NMitra
Смотрите, у меня "Blogger" "HTML/CSS" "Оптимизация" - это ярлыки, благодаря которым группируются статьи и благодаря которым в верхнем меню подчёркивается нужный пункт.

У меня также есть ярлык "feed". Пометив им, статьи уходят в RSS. Но он скрыт от глаз пользователей.
Геннадий
Я на Вашем сайте уже весь вечер сижу, довольно много интересной и разнообразной информации. С помощью блога за вечер практически с нуля более-менее создал свой блог. Но пока толком не разобралсся с сообщениями.У меня получается так, что всем нужным мне сообщениям, я присваиваю ярлык и они будут отображаться с помощью гаджета "Ярлыки"... но начинаю задумываться, правильно ли поступаю?
NMitra
Не нужно каждому сообщению присваивать индивидуальный ярлык. Они существуют именно для группировки нескольких статей. Количество ярлыков - максимум 15. В вашем случае существует такой гаджет, как популярные сообщения или последние сообщения или список ссылок.
Геннадий
Спасибо за подсказку
Tanjah Kram
Замечательная подборка и конвектор тоже! Спасибо
NMitra
Благодарю ) Взгляните ещё на эту страницу http://unicodinator.com/
Космо Мизраил Горыныч
Натаааш, всё ужасно D: Теперь при редактировании шаблона в Блоггере спецсимволы в цсс никак не сохраняются. Конвертация из аски в юникод более не работает, на сайте остаются кракозябры с амперсандом. От этого использование шрифтов-иконок сильно затрудняется(

Есть ли способ это как-нибудь исправить??

Пы.сы. На винде восьмой в мазилке спецсимволы в табличке такие цветастые, няняня
NMitra
"спецсимволы в цсс"? В :before или :after? Проверила, всё вроде работает. Но спец.символ нужно в HEX перевести, посмотри, там конвертер http://shpargalkablog.ru/2012/02/before-after-css.html И это не только к Blogger относится.

Ага))
zendo
У вас ошибка:   - это не пробел, а неразрывный пробел. Совсем другой символ, и пробелом его не заменить. %A0
NMitra
Спасибо за замечание, исправилась! Когда писала статью, ещё не знала разницы
марат марат
если вы хотите больше симвлов скачайте bootstrap
NMitra
Пригодится https://en.wikipedia.org/wiki/Emoji