PostHeaderIcon Специальные символы HTML таблица символов Unicode



Привет всем! Сегодня пост будет коротким, но для некоторых блоггеров очень полезным. Дело в том, что читая некоторые блоги, я часто замечаю ошибки при написании кода, т.е. когда в текст статьи вставляется пример php кода, ссылки в этом коде вместо вида <a href=”site.ru/kak-raskrutit…”>, становятся кликабельными, либо php код вставляет какой-либо блок, типа связных записей, вместо того чтобы отображаться просто как пример кода.
А посему сегодня я хотел бы поговорить о спецсимволах html.

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

Когда я только начинал заниматься сайтостроением, я не понимал почему примеры кусков кода, которые я вставляю в пост, отображаются у меня не так как хотелось бы. Оказывается всё намного проще. Есть символы, использующиеся при написании атрибутов HTML, либо в языке программирования PHP, которые настоятельно не рекомендуется при написании в статьях использовать в чистом виде (например открывающая и закрывающая угловые скобки < >, которые используются при написании HTML кода, либо знак амперсанд &, использующийся в PHP. А так же есть символы, которые вы не сможете ввести с клавиатуры по одной простой причине – на клавиатуре их просто нет (например стрелка вправо → или знак йены ¥ ). Для написания этих символов используются специальные комбинации кода, которые можно посмотреть в таблице символов.

Таблица символов Unicode (Юникод)

Когда мне срочно надо посмотреть как пишется какой либо символ, знак фунта стерлингов £, например, то я использую таблицу символов юникод, которая находится в Windows. Для того, чтобы открыть таблицу символов в Windows XP перейдите в меню Пуск/Все программы/Стандартные/Служебные/Таблица символов.
В Windows 7 войдите в меню «Пуск». В поле поиска введите Таблица символов, и в списке результатов выберите пункт Таблица символов. Откроется таблица символов Unicode, которая выглядит примерно следующим образом:

В верхней части таблицы находится меню, где вы можете выбрать шрифт. Ниже находятся символы выбранного вами шрифта. При выделении символа он увеличивается в размерах и его код и название отображаются в правом нижнем углу таблицы. Символы отображаются в Юникоде (Unicode).
Для справки, что такое Юникод?
Выдержка из Википедии:

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


На изображении вы видите выделенный знак «авторские права». В нижнем правом углу отображается его код в юникоде. Для того, чтобы вставить в текст этот символ нужно написать знак амперсанд &, решётку #, маленькую английскую букву икс x и индекс в юникоде, который отображается после U+, т.е. в нашем случае 00A9, завершаем эту комбинацию кода обязательно точкой с запятой. Должно получиться следующее: & #x00A9; а выглядеть в тексте статьи будет так: ©
Следовательно код &#x будет стандартным во всех случаях, а далее индекс в юникоде в виде 4-х значного значения будет индивидуальным для каждого символа. И точка с запятой в конце кода обязательно.

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


cfd66238

Чтобы легче было запоминать все эти символы было введено альтернативное обозначение этих символов в html, так называемые мнемоники. Например тот же знак «авторские права» © можно ещё написать следующим образом &copy; Наиболее часто использующиеся символы (мнемоники) я вывел ниже, в таблице специальных символов HTML. В принципе в этой таблице находятся все необходимые символы, которые могут понадобиться. Если в данной таблице нет какого либо символа, можете подсмотреть в таблице символов Windows. Пользуйтесь на здоровье!

Символы Отображение Код Написание
Двойные кавычки (знак дюйма) " &#34; &quot;
Амперсант (Англ. and) & &#38; &amp;
Открывающая угловая
скобка(знак меньше)
< &#60; &lt;
Закрывающая угловая
скобка(знак больше)
> &#62; &gt;
Троеточие &#133;  
Стрелка вправо &#8594; &rarr;
Стрелка влево &#8592; &larr;
Стрелка вверх &#8593; &uarr;
Стрелка вниз &#8595; &darr;
Крестик &#134;  
Двойной крестик &#135;  
Циркумфлекс ˆ &#136;  
Промилле &#137;  
Левая одинарная кавычка &#145;  
Правая одинарная кавычка &#146;  
Левая двойная кавычка &#147;  
Правая двойная кавычка &#148;  
Жирная средняя точка &#149;  
Короткое тире &#150;  
Длинное тире &#151;  
Тильда ˜ &#152;  
Товарный знак &#153;  
Неразрывный пробел   &#160; &nbsp;
Перевернутый
восклицательный знак
¡ &#161; &iexcl;
Знак цента ¢ &#162; &cent;
Знак фунта стерлингов £ &#163; &pound;
Знак валюты ¤ &#164; &curren;
Знак иены ¥ &#165; &yen;
Знак евро ? &#128  
Пунктирная
вертикальная черта
¦ &#166; &brvbar;
Знак параграфа § &#167; &sect;
Умляут ¨ &#168; &uml;
Знак авторские права © &#169; &copy;
Порядковое числительное
женского рода
ª &#170; &ordf;
Левая угловая кавычка « &#171; &laquo;
Знак «не» ¬ &#172; &not;
Программный перенос ­ &#173; &shy;
Знак зарегистрировано ® &#174; &reg;
Знак долготы гласного звука ¯ &#175; &macr;
Знак градуса ° &#176; &deg;
Плюс/минус ± &#177; &plusmn;
Показатель степени
2 (в квадрате)
² &#178; &sup2;
Показатель степени
3 (в кубе)
³ &#179; &sup3;
Острое ударение ´ &#180; &acute;
Приставка «микро» µ &#181; &micro;
Знак абзаца &#182; &para;
Средняя точка · &#183; &middot;
Седиль ¸ &#184; &cedil;
Показатель степени 1 ¹ &#185; &sup1;
Порядковое числительное
мужского рода
º &#186; &ordm;
Правая угловая кавычка » &#187; &raquo;
Дробь одна четвертая ¼ &#188; &frac14;
Дробь одна вторая ½ &#189; &frac12;
Дробь три четверти ¾ &#190; &frac34;
Перевернутый
вопросительный знак
¿ &#191; &iquest;
Знак умножения × &#215; &times;
Знак деления ÷ &#247; &divide;
Восклицательный знак ! &#33;  
Решетка # &#35;  
Звездочка * &#42;  
Функция ƒ &#131;  
Левая фигурная скобка { &#123;  
Правая фигурная скобка } &#125;  
Вертикальная черта | &#124;  
Масть винни (пики) &#9824; &spades;
Масть крести &#9827; &clubs;
Масть черви &#9829; &hearts;
Масть буби &#9830; &diams;

Если символы слишком маленькие и их плохо видно, зажмите клавишу Ctrl и прокрутите колесо мыши вверх.
Ну вот, обещал короткий пост с таблицей спецсимволов, а получился длинный пост про специальные символы Unicode. Я надеюсь понятным языком написал, а то у меня в 10 классе за экзамен по литературе (за сочинение) двойка была. :) Но это было 21 год назад… В любом случае, что будет непонятно отписывайтесь в комментах.
С уважением, Михалыч!

Приглашаю присоединиться ко мне в следующих сервисах:

21 комментарий на “Специальные символы HTML таблица символов Unicode”

  • Антон пишет:

    Супер! Я даже распечатал себе эту таблицу. Вроде вещь элементарная, а раньше не знал.

  • Ирина пишет:

    Я и не знала о Таблице символов. Всё время с Ворда копирую)

  • Яна пишет:

    Спасибо)) Я только учу HTML и мне эта табличка очень пригодится))

  • Полезные советы пишет:

    Спасибо за статью. Я не использую эти символы(кроме ©), ну в дальнейшем может пригодиться.

  • wdeymosw пишет:

    Есть определенные правила для верстки текстов под веб. Одно из них это обязательное применение применение спецсимволов. Хотя современные HTML редакторы и переводят их в спец код, но лучше сразу делать как надо. Один из примеров: знаки и « - есть правила их применения, и не стоит их путать.

  • Михалыч пишет:

    Именно это я и хотел сказать, только попытался выразить это простым языком для начинающих вникать в веб. Хотя цель этой статьи рассказать о спецсимволах html, а не о правилах вёрстки под веб. А о правилах применения французских «ёлочек» и немецких “лапок” энто мы и так знаем :)

  • Олег пишет:

    Действительно, кроме как спасибо за пост, больше сказать и нечего.
    Не часто, но возникали ситуации - надо написать какой то символ, а не знаю как. Еще раз спасибо.

  • seo-самурай пишет:

    Если нужно вставить символ (¥ ), то я ищу готовый и вставляю.

  • Михалыч пишет:

    Олег, пожалуйста! seo самурай, а не лучше ли, чем тратить время на поиски нужного вам символа, взять его из готовой таблицы? Кстати эту таблицу можно распечатать и повесить на видное место, как я собственно и сделал.

  • Rufacts пишет:

    тоже распечатал и повесил возле монитора.

  • Вячеслав пишет:

    Автору спасибо за очередной отличный пост) Уже 5 ваших постов прочитал)

  • Владимир пишет:

    Всегда хотел вставить на свой сайт знак копирайта но не знал как это сделать!Спасибо теперь я знаю:)

  • Марк пишет:

    Огромное спасибо! Полезная статья, как раз то что искал))

  • Елена пишет:

    Большущее спасибо! Очень нужная и полезная статья!

  • SSR пишет:

    Спасибо) есть очень интересные фигуры))

  • overbag пишет:

    Иногда возникает необходимость написать такой символ, а запомнить все коды нереально, так что спасибо за таблицу!

  • Владимир пишет:

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

  • Mechanismo пишет:

    Статью в закладки!

  • Соратник пишет:

    Автору спасибо огромное! Выручил! Молодцом!

  • Артём пишет:

    Круто сайт в закладки добавил!

  • lesic пишет:

    для веб разработчика очень полезно знать код написания! спасибо очень хорошая статья

Оставить комментарий

Приглашаю к обсуждению статьи. Всегда рад вашим комментариям. Задавайте вопросы, критикуйте, делитесь своим опытом.
С уважением, Михалыч!
artafish.ru alexeysedov.ru
Найти
Топ-комментатор
  • Полезные сове...
  • Юрий
  • Блог о покере
  • ELuS1vE
  • Владимир
В топ ПС по НЧ
Статистика