Спецсимволы | htmlbook.ru

Для отображения символов, которых нет на клавиатуре, применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). В табл. 7.1 приведены некоторые популярные спецсимволы.

Табл. 7.1. Спецсимволы
Имя Код Вид Описание
      неразрывный пробел
£ £ £ фунт стерлингов
€ € знак евро
¶ ¶ символ параграфа
§ § § параграф
© © © знак copyright
® ® ® знак зарегистрированной торговой марки
™
™
знак торговой марки
° ° ° градус
± ± ± плюс-минус
¼ ¼ ¼ дробь — одна четверть
½ ½ ½ дробь — одна вторая
¾ ¾ ¾ дробь — три четверти
× × × знак умножения
÷ ÷ ÷ знак деления
ƒ ƒ ƒ знак функции
Греческие буквы
Α Α Α греческая заглавная буква альфа
Β Β Β греческая заглавная буква бета
Γ Γ Γ греческая заглавная буква гамма
Δ Δ Δ греческая заглавная буква дельта
Ε Ε Ε греческая заглавная буква эпсилон
Ζ Ζ Ζ греческая заглавная буква дзета
Η Η Η греческая заглавная буква эта
Θ Θ Θ греческая заглавная буква тета
Ι Ι Ι греческая заглавная буква иота
Κ Κ Κ греческая заглавная буква каппа
Λ Λ Λ греческая заглавная буква лямбда
Μ Μ Μ греческая заглавная буква мю
Ν Ν Ν греческая заглавная буква ню
Ξ Ξ Ξ греческая заглавная буква кси
Ο Ο
Ο
греческая заглавная буква омикрон
Π Π Π греческая заглавная буква пи
Ρ Ρ Ρ греческая заглавная буква ро
Σ Σ Σ греческая заглавная буква сигма
Τ Τ Τ греческая заглавная буква тау
Υ Υ Υ греческая заглавная буква ипсилон
Φ Φ Φ греческая заглавная буква фи
Χ Χ Χ греческая заглавная буква хи
Ψ Ψ Ψ греческая заглавная буква пси
Ω Ω Ω греческая заглавная буква омега
α α α греческая строчная буква альфа
β β β греческая строчная буква бета
γ γ γ греческая строчная буква гамма
δ δ δ греческая строчная буква дельта
ε ε ε греческая строчная буква эпсилон
ζ ζ ζ греческая строчная буква дзета
η η η греческая строчная буква эта
θ θ θ греческая строчная буква тета
ι ι ι греческая строчная буква иота
κ κ κ греческая строчная буква каппа
λ λ λ греческая строчная буква лямбда
μ μ μ греческая строчная буква мю
ν ν ν греческая строчная буква ню
ξ ξ ξ греческая строчная буква кси
ο ο ο греческая строчная буква омикрон
π π π греческая строчная буква пи
ρ ρ ρ греческая строчная буква ро
ς ς ς греческая строчная буква сигма
σ σ σ греческая строчная буква сигма
τ τ τ греческая строчная буква тау
υ υ υ греческая строчная буква ипсилон
φ φ φ греческая строчная буква фи
χ χ χ греческая строчная буква хи
ψ ψ ψ греческая строчная буква пси
ω ω ω греческая строчная буква омега
Стрелки
← ← стрелка влево
↑ ↑ стрелка вверх
→ → стрелка вправо
↓
↓
стрелка вниз
↔ ↔ стрелка влево-вправо
Прочие символы
♠ ♠ знак масти «пики»
♣ ♣ знак масти «трефы»
♥ ♥ знак масти «червы»
♦ ♦ знак масти «бубны»
" " « двойная кавычка
& & & амперсанд
&lt; &#60; < знак «меньше»
&gt; &#62; > знак «больше»
Знаки пунктуации
&hellip; &#8230; многоточие …
&prime; &#8242; одиночный штрих — минуты и футы
&Prime; &#8243; двойной штрих — секунды и дюймы
Общая пунктуация
&ndash; &#8211; тире
&mdash; &#8212; длинное тире
&lsquo; &#8216;
левая одиночная кавычка
&rsquo; &#8217; правая одиночная кавычка
&sbquo; &#8218; нижняя одиночная кавычка
&ldquo; &#8220; левая двойная кавычка
&rdquo; &#8221; правая двойная кавычка
&bdquo; &#8222; нижняя двойная кавычка
&laquo; &#171; « левая двойная угловая скобка
&raquo; &#187; » правая двойная угловая скобка

htmlbook.ru

Инструкция как в HTML коде сделать длинный неразрывный пробел

nbsp — как вставить неразрывный пробел в html

В этой инструкции вы узнаете о том как вставить неразрывный пробел в HTML. Расскажу об особенностях и нюансах вставки длинных пробелов в код.

Самое главное — не стоит путать неразрывный пробел с обычным!

Что такое неразрывный пробел в HTML?

Неразрывный пробел — спецсимвол в HTML (см. также что такое HTML), благодаря которому браузер будет воспринимать каждый из этих пробелов как те, которые нужно отобразить, а не игнорировать.

Пример предельно простой. Многие из вас наверное помнят, как осуществляли «форматирование пробелами» какого-нибудь важного документа, будучи начинающими пользователями Ворда. Поставишь 30 пробелов подряд и, что называется, будет выравнено как надо!

В HTML такие фокусы не прокатят. Если я сейчас напишу 30 пробелов при написании поста в HTML-редакторе, он просто проигнорирует их, отображая лишь один.

И, соответственно, не проигнорирует неразрывный пробел как элемент форматирования вашего HTML-кода.

Еще одна фишка длинного неразрывного пробела в том, что использование его в длинной строке «запрещает» ее разбиение в местах использования. Что это значит? Это значит, что такой пробел будет уместно использовать в тех местах, где перенос словосочетания на новую строку нужно осуществить полностью, не разбивая его на отдельные слова.

Как в HTML сделать неразрывный пробел?

Приведу пример для интернет-магазинов. В длинной строке использование пробела в тексте или таблице обычным текстом «25 000 долларов» может привести к тому что в отдельных случаях у вас «25» будет на одной строке, а «000 долларов» — на другой. Сходные ситуации действительно возможны и неразрывный пробел страхует от этого. Код:

25&nbsp;000 долларов

При использовании этого кода, запись «25 000 долларов» будет целиком на новой строке, если браузер вдруг захочет ее перенести (в случае если не влезает).

Пример кода неразрывного пробела (non-breaking space) позволит вам сделать пробел в любом месте HTML-страницы:

Неразрывный пробел, это не тег, а спецсимвол. Поэтому его нужно сопровождать сначала амперсандом, а в конце — точкой с запятой. Что это дает? Браузер видит где у спецсимвола начало и конец, а значит вы сможете вставить несколько пробелов подряд:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Обычно конечно это не требуется. Все гораздо приземленнее, например, если нужно перенести на новую строку ФИО целиком, а не делая инициалы «повисшими» на предыдущей строке (или если речь идет о большом и длинном числе вида 900 000 000). Код:

Кстати, в Ворде неразрывный пробел вставляется CTRL+SHIFT+SPACE.

Распространено некорректное применение неразрывного пробела в верстке — для задания отступов между элементами навигации или абзацем и картинкой. Вы должны понимать, что не надо так. Лучшее решение подобных задач — тегом <div></div> или <span></span>.

Итог

Резюмируя:

  • Если у вас встречается потребность в нескольких пробелах подряд, используйте спецсимвол nbsp между словами столько раз, сколько нужно.
  • Помните, что длинный пробел не позволяет разорвать строку на месте словосочетания — используйте этот спецсимвол с умом, не злоупотребляя и не применяя в качестве «напильника» для того, чтобы поправить немного верстку.
  • Для регулирования длины пробела используйте ensp и emsp. Ensp — длинный пробел, равный длине двух обычных пробелов (длина «N»). Emsp — самый длинный пробел, по длине равный четырем обычным пробелам (длина «M»).

Есть также принудительный разрыв строки br и предварительное форматирование текста тегами <pre></pre>, но это тема отдельной статьи и поговорим мы об этом как-нибудь потом.

Памятка: не забудьте о том, что набор HTML-кода нужно осуществлять в редакторе для обработки кода (в WordPress есть специальная вкладка для этого).

blogwork.ru

Спецсимволы | htmlbook.ru

Для отображения символов, которых нет на клавиатуре, применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). В табл. 7.1 приведены некоторые популярные спецсимволы.

Табл. 7.1. Спецсимволы
Имя Код Вид Описание
&nbsp; &#160;   неразрывный пробел
&pound; &#163; £ фунт стерлингов
&euro; &#8364; знак евро
&para; &#182; символ параграфа
&sect; &#167; § параграф
&copy; &#169; © знак copyright
&reg; &#174; ® знак зарегистрированной торговой марки
&trade; &#8482; знак торговой марки
&deg; &#176; ° градус
&plusmn; &#177; ± плюс-минус
&frac14; &#188; ¼ дробь — одна четверть
&frac12; &#189; ½ дробь — одна вторая
&frac34; &#190; ¾ дробь — три четверти
&times; &#215; × знак умножения
&divide; &#247; ÷ знак деления
&fnof; &#402; ƒ знак функции
Греческие буквы
&Alpha; &#913; Α греческая заглавная буква альфа
&Beta; &#914; Β греческая заглавная буква бета
&Gamma; &#915; Γ греческая заглавная буква гамма
&Delta; &#916; Δ греческая заглавная буква дельта
&Epsilon; &#917; Ε греческая заглавная буква эпсилон
&Zeta; &#918; Ζ греческая заглавная буква дзета
&Eta; &#919; Η греческая заглавная буква эта
&Theta; &#920; Θ греческая заглавная буква тета
&Iota; &#921; Ι греческая заглавная буква иота
&Kappa; &#922; Κ греческая заглавная буква каппа
&Lambda; &#923; Λ греческая заглавная буква лямбда
&Mu; &#924; Μ греческая заглавная буква мю
&Nu; &#925; Ν греческая заглавная буква ню
&Xi; &#926; Ξ греческая заглавная буква кси
&Omicron; &#927; Ο греческая заглавная буква омикрон
&Pi; &#928; Π греческая заглавная буква пи
&Rho; &#929; Ρ греческая заглавная буква ро
&Sigma; &#931; Σ греческая заглавная буква сигма
&Tau; &#932; Τ греческая заглавная буква тау
&Upsilon; &#933; Υ греческая заглавная буква ипсилон
&Phi; &#934; Φ греческая заглавная буква фи
&Chi; &#935; Χ греческая заглавная буква хи
&Psi; &#936; Ψ греческая заглавная буква пси
&Omega; &#937; Ω греческая заглавная буква омега
&alpha; &#945; α греческая строчная буква альфа
&beta; &#946; β греческая строчная буква бета
&gamma; &#947; γ греческая строчная буква гамма
&delta; &#948; δ греческая строчная буква дельта
&epsilon; &#949; ε греческая строчная буква эпсилон
&zeta; &#950; ζ греческая строчная буква дзета
&eta; &#951; η греческая строчная буква эта
&theta; &#952; θ греческая строчная буква тета
&iota; &#953; ι греческая строчная буква иота
&kappa; &#954; κ греческая строчная буква каппа
&lambda; &#955; λ греческая строчная буква лямбда
&mu; &#956; μ греческая строчная буква мю
&nu; &#957; ν греческая строчная буква ню
&xi; &#958; ξ греческая строчная буква кси
&omicron; &#959; ο греческая строчная буква омикрон
&pi; &#960; π греческая строчная буква пи
&rho; &#961; ρ греческая строчная буква ро
&sigmaf; &#962; ς греческая строчная буква сигма
&sigma; &#963; σ греческая строчная буква сигма
&tau; &#964; τ греческая строчная буква тау
&upsilon; &#965; υ греческая строчная буква ипсилон
&phi; &#966; φ греческая строчная буква фи
&chi; &#967; χ греческая строчная буква хи
&psi; &#968; ψ греческая строчная буква пси
&omega; &#969; ω греческая строчная буква омега
Стрелки
&larr; &#8592; стрелка влево
&uarr; &#8593; стрелка вверх
&rarr; &#8594; стрелка вправо
&darr; &#8595; стрелка вниз
&harr; &#8596; стрелка влево-вправо
Прочие символы
&spades; &#9824; знак масти «пики»
&clubs; &#9827; знак масти «трефы»
&hearts; &#9829; знак масти «червы»
&diams; &#9830; знак масти «бубны»
&quot; &#34; « двойная кавычка
&amp; &#38; & амперсанд
&lt; &#60; < знак «меньше»
&gt; &#62; > знак «больше»
Знаки пунктуации
&hellip; &#8230; многоточие …
&prime; &#8242; одиночный штрих — минуты и футы
&Prime; &#8243; двойной штрих — секунды и дюймы
Общая пунктуация
&ndash; &#8211; тире
&mdash; &#8212; длинное тире
&lsquo; &#8216; левая одиночная кавычка
&rsquo; &#8217; правая одиночная кавычка
&sbquo; &#8218; нижняя одиночная кавычка
&ldquo; &#8220; левая двойная кавычка
&rdquo; &#8221; правая двойная кавычка
&bdquo; &#8222; нижняя двойная кавычка
&laquo; &#171; « левая двойная угловая скобка
&raquo; &#187; » правая двойная угловая скобка

htmlbook.ru

Все символы HTML

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

символ html-код десятичный
код
описание
  &nbsp; &#160;неразрывный пробел
&ensp; &#8194;узкий пробел (еn-шириной в букву n)
&emsp; &#8195;широкий пробел (em-шириной в букву m)
&ndash;&#8211;узкое тире (en-тире)
&mdash;&#8212;широкое тире (em -тире)
­&shy;&#173;мягкий перенос
а́ &#769;ударение, ставится после «ударной» буквы
 
©&copy;&#169;копирайт
®&reg;&#174;знак зарегистрированной торговой марки
&trade;&#8482;знак торговой марки
º&ordm;&#186;копье Марса
ª&ordf;&#170;зеркало Венеры
&permil;&#8240;промилле
π&pi;&#960;пи (используйте Times New Roman)
¦&brvbar;&#166;вертикальный пунктир
§&sect;&#167;параграф
°&deg;&#176;градус
µ&micro;&#181;знак «микро»
&para;&#182;знак абзаца
&hellip;&#8230;многоточие
&oline;&#8254;надчеркивание
´&acute;&#180;знак ударения
 &#8470;знак номера
🔍 &#128269;Лупа (наклонённая влево)
🔎 &#128270;Лупа (наклонённая вправо)
 &#9742;Телефон
 &#9993;Конверт, email, почта
💾 &#128190;Дискета
🛠 &#128736;Молоток и гаечный ключ, настройка
🔒 &#128274;Замок закрыт
🔓 &#128275;Замок открыт
🔔 &#128276;Колокольчик
🔕 &#128277;Колокольчик перечеркнутый
🗑 &#128465;Урна
🔥 &#128293;Огонь
🛇 &#128711;Запрещено
 &#9940;Вход запрещен (кирпич)
 &#9971;Фраг в воронке, местоположение, место встречи, гольф


знаки арифметических и математических операций
×&times;&#215;умножить
÷&divide; &#247;разделить
<&lt; &#60;меньше
>&gt; &#62;больше
±&plusmn; &#177;плюс/минус
¹&sup1; &#185;степень 1
²&sup2; &#178;степень 2
³&sup3; &#179;степень 3
¬&not; &#172;отрицание
¼&frac14; &#188;одна четвертая
½&frac12; &#189;одна вторая
¾&frac34; &#190;три четверти
 frasl; &#8260;дробная черта
 minus; &#8722;минус
&le; &#8804;меньше или равно
&ge; &#8805;больше или равно
&asymp; &#8776;приблизительно (почти) равно
&ne; &#8800;не равно
&equiv; &#8801;тождественно
&radic; &#8730;квадратный корень (радикал)
&infin; &#8734;бесконечность
&sum; &#8721;знак суммирования
&prod; &#8719;знак произведения
&part; &#8706;частичный дифференциал
&int; &#8747;интеграл
&forall; &#8704;для всех (видно только если жирным шрифтом)
&exist; &#8707;существует
&empty; &#8709;пустое множество
Ø&Oslash; &#216;диаметр
&isin; &#8712;принадлежит
&notin; &#8713;не принадлежит
&ni; &#8727;содержит
&sub; &#8834;является подмножеством
&sup; &#8835;является надмножеством
&nsub; &#8836;не является подмножеством
&sube; &#8838;является подмножеством либо равно
&supe; &#8839;является надмножеством либо равно
&oplus; &#8853;плюс в кружке
&otimes; &#8855;знак умножения в кружке
&perp; &#8869;перпендикулярно
&ang; &#8736;угол
&and; &#8743;логическое И
&or; &#8744;логическое ИЛИ
&cap; &#8745;пересечение
&cup; &#8746;объединение
знаки валют
&euro; &#8364;Евро
¢ &cent; &#162;Цент
£ &pound; &#163;Фунт
¤ &current; &#164;Знак валюты
¥ &yen; &#165;Знак йены и юаня
ƒ &fnof; &#402;Знак флорина
  &#8381;Знак рубля
маркеры, птички, галочки, check mark
&bull; &#8226;простой маркер
  &#9675;круг
· &middot; &#183;средняя точка
  &#8224;крестик
  &#8225;двойной крестик
&spades; &#9824;пики
&clubs; &#9827;трефы
&hearts; &#9829;червы
&diams; &#9830;бубны
&loz; &#9674;ромб
  &#10084;жирное сердце
  &#10003;Символ галочка
  &#10004;Жирная отметка галочкой
𐄂   &#65794;Крестик
🗸   &#128504;Тонкая галочка
  &#9989;Жирная незакрашенная отметка галочка
  &#9745;Галочка в квадрате
🗹   &#128505;Жирная галочка в квадрате
  &#9888;Внимание!
карандаши, перья, кисти
  &#9997;пишущая рука
  &#9998;карандаш, направленный вправо-вниз
  &#9999;карандаш
  &#10000;карандаш, направленный вправо-вверх
  &#10001;незакрашенное острие пера
  &#10002;закрашенное острие пера
🖌   &#128396;кисть, направленная влево-вниз
кавычки
» &quot; &#34;двойная кавычка
& &amp; &#38;амперсанд
« &laquo; &#171;левая типографская кавычка (кавычка-елочка)
» &raquo; &#187;правая типографская кавычка (кавычка-елочка)
  &#8249;одиночная угловая кавычка открывающая
  &#8250;одиночная угловая кавычка закрывающая
&prime; &#8242;штрих (минуты, футы)
&Prime; &#8243;двойной штрих (секунды, дюймы)
&lsquo; &#8216;левая верхняя одиночная кавычка
&rsquo; &#8217;правая верхняя одиночная кавычка
&sbquo; &#8218;правая нижняя одиночная кавычка
&ldquo; &#8220;кавычка-лапка левая
&rdquo; &#8221;кавычка-лапка правая верхняя
&bdquo; &#8222;кавычка-лапка правая нижняя
  &#10075;одиночная английская кавычка открывающая
  &#10076;одиночная английская кавычка закрывающая
  &#10077;двойная английская кавычка открывающая
  &#10078;двойная английская кавычка закрывающая
стрелки
&larr; &#8592;стрелка влево
&uarr; &#8593;стрелка вверх
&rarr; &#8594;стрелка вправо
&darr; &#8595;стрелка вниз
&harr; &#8596;стрелка влево и вправо
  &#8597;стрелка вверх и вниз
&crarr; &#8629;возврат каретки
&lArr; &#8656;двойная стрелка влево
&uArr; &#8657;двойная стрелка вверх
&rArr; &#8658;двойная стрелка вправо
&dArr; &#8659;двойная стрелка вниз
&hArr; &#8660;двойная стрелка влево и вправо
 &#8661;двойная стрелка вверх и вниз
 &#9650;треугольная стрелка вверх
 &#9660;треугольная стрелка вниз
 &#9658;треугольная стрелка вправо
 &#9668;треугольная стрелка влево
звездочки, снежинки
  &#9731;Снеговик
  &#10052;Снежинка
  &#10053;Зажатая трилистниками снежинка
  &#10054;Жирная остроугольная снежинка
  &#9733;Закрашенная звезда
  &#9734;Незакрашенная звезда
  &#10026;Незакрашенная звезда в закрашенном круге
  &#10027;Закрашенная звезда с незакрашенным кругом внутри
  &#10031;Вращающаяся звезда
  &#9885;Начерченная белая звезда
  &#9898;Средний незакрашенный круг
  &#9899;Средний закрашенный круг
  &#9913;Секстиле (типа снежинка)
  &#10037;Восьмиконечная вращающаяся звезда
  &#10057;Звёздочка с шарообразными окончаниями
  &#10059;Жирная восьмиконечная каплеобразная звёздочка-пропеллер
  &#10042;Шестнадцатиконечная звёздочка
  &#10041;Двенадцатиконечная закрашенная звезда
  &#10040;Жирная восьмиконечная прямолинейная закрашенная звезда
  &#10038;Шестиконечная закрашенная звезда
  &#10039;Восьмиконечная прямолинейная закрашенная звезда
  &#10036;Восьмиконечная закрашенная звезда
  &#10035;Восьмиконечная звёздочка
  &#10034;Звёздочка с незакрашенным центром
  &#10033;Жирная звёздочка
  &#10023;Заострённая четырёхконечная незакрашенная звезда
  &#10022;Заострённая четырёхконечная закрашенная звезда
  &#9055;Звезда в круге
  &#8859;Снежинка в круге
часы, время
  &#9200;Будильник
  &#8986;Наручные часы
  &#8987;Песочные часы
  &#9203;Песочные часы
🕰   &#128368;Каминные часы

htmlweb.ru

Пробел в html — три простых способа

Здравствуйте) Сегодня мы разберем самый задаваемый вопрос новичков — как сделать пробел в html? Если вы читаете эту статью вы скорее всего недавно узнали об html и хотите создавать крутые сайты, признаюсь честно даже я в начале своего пути web разработчика искал решение в интеренте.

Почему же мы не можем поставить несколько пробелов? Все дело в том что пробелы между словами в html обрабатываются иначе чем в текстовых редакторах, когда браузер интерпретирует html код он соединяет все пробелы в один. Это относится и к другим символам: табуляция, абзац и т.д.

 Три способа как сделать пробел между строк.

Способ первый это использовать тег

<pre>Много текста с пробелами !!!</pre>

<pre>Много текста с     пробелами   !!!</pre>

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

Способ второй это использовать спец символ

Это я считаю самый лучший способ, где нужно вставил сколь необходимо и радуйся жизни. Но переусердствуйте, много таких символов это уже не есть хорошо. Для больших отступов используйте css padding и margin.

Способ третий и самый редкий, я его никогда не использовал свойство css white-space

Выглядит это следующим образом:

p { white-space: pre; }

p {

  white-space: pre;

}

По сути это тот же тег «pre» только через css свойство. Хочу подметить, свойство white-space поддерживается не всеми браузерами (в частности, IE6 и IE7 не поддерживают).

Думаю вы раз и навсегда разобрались с вопросом — как вставить пробел в html. Если вам понравилась статья, делитесь ей в соц. сетях, подписывайтесь на мой youtube канал и группы в вк и facebook. Пока!

comments powered by HyperComments

webupblog.ru

Пробелы в HTML

Вы здесь: Главная — HTML — HTML Основы — Пробелы в HTML

Пробелы в HTML

Все, кто пытался создавать сайты на HTML сталкивались с такой проблемой. Почти все теги HTML вырезают лишние пробелы. И в этот раз я Вам приведу пример этой «вырезки», а также расскажу, как сделать так, чтобы пробелы не вырезались.

Давайте для начала напишем простой HTML-код:

<p>Некий текст           Продолжение...</p>

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

Существуют три варианта отображения дополнительных пробелов в HTML. Первый способ — это использование тега <pre>:

<pre><p>Некий текст      Продолжение...</p></pre>

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

Но есть и другой способ, который я использую регулярно — сущность «&nbsp;«. Данная сущность просто заменяет символ пробела:

<p>Некий текст&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Продолжение...</p>

В результате, Вы также увидите целую череду пробелов. Для меня данный способ лучше тем, что не нужно использовать лишних тегов. Но это дело вкуса. Где нужен дополнительный пробел в HTML, просто вставляете «&nbsp;» и радуетесь результату.

И, наконец, последний способ — это использование CSS. Для этого Вам достаточно добавить такой стиль:

p {
  white-space: pre;
}

Данный способ самый быстрый и простой, однако, я его не использую, так как в моей практике встречается мало случаев, в которых мне приходится добавлять много подряд идущих пробелов. А если они и случаются, то использую сущность «&nbsp;» несколько раз. Вдобавок, свойство white-space поддерживается не всеми браузерами (в частности, IE6 и IE7 не поддерживают), что уже ограничивает область действия данного способа.

В общем, резюмирую:

1) Если у Вас какая-нибудь часть текста содержит много пробелов в разных местах, то используйте тег <pre>.

2) Если у Вас где-нибудь встречается одиночный момент, где нужно несколько пробелов подряд, то используйте сущность «&nbsp«;

3) Если же у Вас вся страница соткана из кучи подряд идущих пробелов (хотя это бывает крайне редко), то используйте свойство white-space со значением pre.

Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

  • Пробелы в HTML Создано 07.12.2010 10:41:18
  • Пробелы в HTML Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

myrusakov.ru

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

Опубликовано: 21 мая 2014 Обновлено: 1 октября 2019

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

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

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

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

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

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

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

Вид HTML-код CSS-код Описание
🖂 &#128386; \1F582 Обратная сторона конверта
&#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 Рыбы

html5book.ru