Тег nbsp – Спецсимволы | htmlbook.ru

Содержание

Спецсимволы | 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

Спецсимволы | 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 коде сделать длинный неразрывный пробел

В этой инструкции вы узнаете о том как вставить неразрывный пробел в 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

Спецсимволы 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;\2211N-ичное суммирование
&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

Табуляция в HTML: 4 способа сделать отступ

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

Отдельного символа табуляции в HTML не существует, тем не менее, даже без специального кода или знака табуляции, есть много способов достичь нужного результата.

Основные способы сделать табуляцию

Способы сделать табуляцию в HTML:

  • Используя CSS свойство margin-left.
  • С помощью спецсимвола неразрывный пробел &nbsp;.
  • Несколькими пробелами внутри тега <pre>.
  • Задать блоку CSS свойство white-space и использовать пробелы.

Примеры. Табуляция в HTML

Способ 1: Делаем отступ, например, 50 пикселей от левого края с помощью свойства CSS margin-left.

<p>Текст после табуляции.</p>

Способ 2: Используем специальный символ HTML &nbsp; — неразрывный пробел. Каждый nbsp; равен одному пробелу и не будет игнорироваться браузером. Однако неразрывные пробелы не переносятся на следующую строку. Это следует учитывать, если табуляция делается как отступ внутри текста.

<p>&nbsp;&nbsp;&nbsp;&nbsp;Текст после отступа.</p>

Способ 3: Пишем текст внутри тега <pre>. По умолчанию, браузеры не игнорируют пробелы внутри этого тега. Подробнее в статье: Тег <pre> HTML предварительно отформатированный текст.

<pre>    Текст после табуляции.</pre>

Способ 4: Меняем у блока правило учета пробелов через CSS свойство white-space.

<p>    Текст после отступа.</p>

Каждый из этих способов будет работать. Какой больше подойдет в конкретном случае — решать вам. Мне в своей практике доводилось использовать все 4 способа табуляции, приведенные выше. Чаще всего использую CSS отступы и неразрывные пробелы.

guruweba.com

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

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. На этот раз мы поговорим про пробельные символы HTML. На первый взгляд тема кажется не важной да и не очень нужно, но смею вас заверить, что это далеко не так. Пробельные символы в HTML имеют, во-первых, четкое и определенное назначение, а во-вторых, заранее определенное поведение. Думаю, с назначением пробельных символов в HTML более менее всё понятно: пробельные символы в основном используются для форматирования HTML кода, но и не только для этого. А вот с поведением пробельных символов, думаю, понятно не всё. Дело всё в том, что браузеры особым образом обрабатывают пробельные символы, поэтому я и написал, что у пробельных символов есть четко определенное поведение.

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

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

Так же мы рассмотрим во всех деталях каждый из пробельных символов в отдельности. В записи будут описаны следующие вопрос:

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

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

Для чего нужны пробельные символы в HTML

Содержание статьи:

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

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

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

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

Виды пробельных символов в HTML

Раз с назначением пробельных символов всё понятно, то стоит разобраться с видами пробельных символов. В HTML, да и в общем, пробельные символы можно разделить следующим образом: пробел, табуляция и перенос строки. Описать словами пробельные символы хорошо, но хотелось бы их увидеть своими глазами, в этом нам поможет бесплатный HTML редактор Notepad++, у которого есть подсветка синтаксиса, но сейчас для нас важно, что Notepad++ умеет отображать пробельные символы.

Как выглядят пробельные символы в HTML документе

Обратите внимание на рисунок: это скрин из Notepad++, на котором открыт HTML документ из записи, в которой мы говорили про HTML элементы. Оранжевая стрелка – это табуляция в HTML документе. Поскольку я работаю на ОС Windows 10, то перенос строк в HTML у меня отображается двумя символами: CR и LF (такая уж традиция, идущая от печатных машинок, в ОС семейства Linux перенос строки обозначается одни символом LF). А вот пробел в Notepad++ отображается символом красной точки, если присмотритесь к скрину, то заметите ее.

Итак, Notepad++ помог нам увидеть пробельные символы в HTML документе: табуляцию, перенос строки и пробел. Однако большинство этих пробельных символов мы не увидим в HTML странице, которую нам сформирует браузер. Мы уже говорили, что язык HTML не чувствителен к пробельным символам, и браузеры отбрасывают все пробельные символы, расположенные между тэгами.

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

Пробел и неразрывный пробел в HTML

Давайте теперь рассмотрим каждый из пробельных символов в отдельности. Начнем мы с пробелов в HTML. Итак, мы уже знаем, что браузер игнорирует все пробельные символы, расположенные между тэгами. Но как обрабатывает браузер пробельные символы внутри тэгов, это важный вопрос, поскольку от этого зависит то, как будут отображаться тексты на странице. Давайте посмотрим это на примере. Откройте любой удобный для вас редактор, можно даже обычный блокнот, но я порекомендую вам бесплатный PHP редактор NetBeans, у которого есть прекрасные возможности по работе с HTML, и наберите следующий код:

Пример использования пробелов в HTML документе

Сохраните файл с расширением .html в любую удобную для вас папку и откройте его в браузере, вы увидите вот такую картину:

Отображение пробельных символов в браузере

Мы видим, что в первом HTML параграфе браузер «сконвертировал» все лишние пробелы и пробельные символы, отличные от пробела, в один пробел. А во втором параграфе у нас ситуация несколько другая. Здесь мы используем специальный символ, про который часто говорят, что это неразрывный пробел в HTML. Всё дело в том, что говорить неразрывный пробел в HTML не совсем правильно, так как это специальная последовательность кодировки.

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

Обратите внимание на рисунок, в котором показано окно браузера: браузер проигнорировал все переносы строк, несмотря на то, что мы использовали неразрывный пробел внутри HTML тэга <p>. Давайте подведем промежуточный итог: браузер игнорирует все пробельные символы, расположенные вне HTML тэгов, и браузер сжимает все пробельные символы внутри HTML тэгов до одного пробела, если внутри HTML тэга не используется неразрывный пробел.

Табуляция в HTML или еще один пробельный символ

HTML табуляция – это еще один пробельный символ. Чаще всего табуляцию в HTML используют для того, чтобы форматировать HTML код в редакторе. Табуляцию не стоит использовать внутри HTML тэга <pre>, о котором мы поговорим далее. Дело всё в том, что табуляция не имеет фиксированного размера. Размер табуляции можно настроить, как в редакторе, так и в браузере. Поэтому нельзя точно сказать, как табуляция будет отображаться у того или иного пользователя на созданной HTML странице в браузере.

Табуляцию в HTML можно настроить (да и не только в HTML), потому что она представляет собой несколько пробелов, объединенных вместе. Чтобы написать пробельный символ табуляции нажмите клавишу Tab (по-моему, это сработает в любом редакторе). Табуляцию в HTML можно использовать для форматирования кода (не путайте форматирование кода с непосредственным форматированием текста в HTML), но ее не стоит использовать внутри HTML тэгов, поскольку у каждого пользователя она будет отображаться в соответствии с его настройками, а значит по-разному. Пожалуй, мы сказали всё, что можно про использование табуляции в HTML документах и редакторах.

Перенос строки в HTML или третий пробельный символ. Символ переноса строки

Перенос строки в HTML, да и не только в HTML, осуществляется нажатием клавиши Enter. Символ переноса строки в операционных системах Linux: LF. В операционных системах Windows CR LF, в системах Mac OS до версии девять символом переноса строки была последовательность CR. Итак, мы уже знаем, что браузер игнорирует переносы строк в HTML документе, где бы они не располагались.

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

Как браузер делает переносы строк

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

Дело всё в том, что для браузера символы пробела – это ориентиры, по которым он определяет, как будут переноситься строки в том случае, когда нет возможности их уместить в область просмотра. Давайте попробуем реализовать простой пример. Создадим простой HTML документ. Откройте любой удобный редактор, например, бесплатный CSS редактор Brackets и напишите следующий код:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Пробельные символы в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Текстнаписанныйбезпробельныхсимволовперенесеннебудет</h2> <p>Браузер пользуется пробельными символами, чтобы осуществлять перенос строк в том случае, когда области просмора не хватает, чтобы уместить всю строку</p> </body> </html>

<!DOCTYPE html>

<html lang=»ru-RU»>

<head>

<meta charset=»UTF-8″>

<title>Пробельные символы в HTML</title>

<link rel=»stylesheet» type=»text/css» href=»style.css» />

</head>

<body>

<h2>Текстнаписанныйбезпробельныхсимволовперенесеннебудет</h2>

<p>Браузер пользуется пробельными символами, чтобы осуществлять перенос

строк в том случае, когда области просмора не хватает, чтобы

уместить всю строку</p>

</body>

</html>

А затем откройте пример в браузере и сократите область просмотра до минимума, вы увидите примерно такую же картину, как на рисунке ниже.

Пример того, что браузер делает перенос строк, ориентируясь на пробелы в HTML документе

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

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

Принудительный перенос строки в HTML. HTML тэг <br>

Итак, мы выяснили, что браузер чихал на символы переноса строк в HTML, но как нам быть, если есть необходимость сделать перенос строки там, где нам хочется, а не там, где заканчивается область просмотра в браузере? Например, мы хотим опубликовать стихи, но параграфом их публиковать не сильно правильно и неудобно. В таких ситуациях нас спасает и, причем очень сильно спасает, HTML тэг <br>.

BR является строчным HTML элементом и одиночным HTML тэгом. Выполняет HTML тэг <br> одну единственную простую, но важную функцию – делает принудительный перенос строк. Когда браузер видит HTML тэг <br>, он формирует HTML элемент, который видят пользователи в виде переноса строк. Давайте сделаем принудительный перенос строк на примере, откройте любой удобный для вас редактор, на мой взгляд одним из самых удобных редакторов является JavaScript редактор Sublime Text 3, и скопируйте следующий код:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Пробельные символы в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <p>Белая береза<br> Под моим окном<br> Принакрылась снегом,<br> Точно серебром.</p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

 

<html lang=»ru-RU»>

 

<head>

 

<meta charset=»UTF-8″>

 

<title>Пробельные символы в HTML</title>

 

<link rel=»stylesheet» type=»text/css» href=»style.css» />

 

</head>

 

<body>

 

<p>Белая береза<br> Под моим окном<br>

 

Принакрылась снегом,<br> Точно серебром.</p>

 

</body>

 

</html>

Четверостишие из произведения Есенина будет отображено следующим образом:

Делаем принудительный перенос строк в HTML документе

Каждая строка стихотворения написана с новой строки, в принципе, этого мы и добивались. Итак, тэг <br> используется для принудительного переноса строк в HTML. Если вы напишите два и более тэгов BR подряд, то браузер сформирует столько принудительных переносов строк, сколько тэгов <br> он встретит в документе.

Важной особенностью тэга <br> является то, что все пробельные символы, которые расположены в коде до него и все символы, которые располагаются после него, игнорируются. Поэтому вы можете спокойно формировать принудительный перенос строки данным тэгом, не опасаясь, что где-нибудь «вылезет» лишний пробельный символ. Стоит заметить, что тэг <br> имеет один уникальный HTML атрибут clear, который сообщает браузеру, как обрабатывать следующую за <br> строку, если текст обтекает плавающий HTML элемент, но об этом мы поговорим в другой записи.

Сохранение пробелов в HTML. HTML тэг <pre>

Теперь давайте обсудим проблему Владимира Маяковского… Вернее его слога, еще точнее, как нам записать стихи Владимира Маяковского в HTML документе.

Неужели нам придется использовать специальные символы HTML, типа неразрывного пробела и после каждой строки тэг <br>? Ответ: конечно же нет. Разработчики стандарта HTML учли этот момент и приняли в стандарт специальный HTML тэг <pre>. Тэг <pre> или preformatted на русский язык можно перевести, как авторское форматирование.

Данный тэг позволяет сохранять пробельные символы в HTML. Когда браузер встречает текст внутри тэга <pre>, он его отображает как есть, то есть с сохранение всех пробельных символов: перенос строк, табуляция и просто пробел будут сохранены внутри тэга <pre> в том виде, как вы их написали.

Стоит отметить, что HTML тэг <pre> является парным, а HTML элемент PRE является блочным. Собственно, тэг получил название авторское форматирование из-за причины, которую мы озвучили выше: браузер сохраняет все пробельные символы текста, внутри данного тэга в том виде, в котором их написал автор. Давайте попробуем сохранить все пробельные символы в HTML, использовав тэг <pre> и посмотрим, как пробельные символы будут показаны в браузере.

Тэг pre, который позволяет сохранять пробельные символы в HTML

Код документа очень простой, стих В. Маяковского помещен в контейнер <pre>. Теперь посмотрим, как обработает браузер пробельные символы внутри HTML элемента PRE.

Пример авторского форматирования в HTML

Видим, что все пробельные символы сохранились в том виде, как мы их написали. Теперь мы убедились, что тэг <pre> действительно сохраняет пробельные символы на HTML страницах.

Итак, подведем итог всему вышесказанному. В HTML есть три вида пробельных символов: табуляция, перенос строки и пробел. Табуляцию в HTML стоит использовать только для форматирования HTML кода в редакторе. Переносы строк в HTML браузеры игнорируют, «сжимая» их до пробела, как и табуляции. Чтобы создать символ переноса строки в HTML используйте тэг <br>.

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

zametkinapolyah.ru

Пробелы в 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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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

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

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