Как? Так! Ответы на популярные вопросы

Поделиться:

Как вставить пробелы в HTML

Содержимое:

2 части:

Когда вы пишете код, несколько пробелов, клавиши Tab и Enter игнорируются. HTML интерпретирует их как пробел между словами, отображая только его. Тогда как CSS позволяет более тонко настраивать пробелы и отступы, в HTML есть пара инструментов для управления пробелами.

Часть 1 Вставка одиночных пробелов и табуляции

  1. 1 Вставьте неразрывный пробел. По умолчанию HTML отображает только один пробел между словами, сколько бы раз он ни был нажат. Чтобы добавить дополнительный пробел, напечатайте   или  . С помощью этого кода вы сможете отобразить символ, который называется «неразрывный пробел».
    • Неразрывный пробел не позволяет разорвать в этом месте строку. Не злоупотребляйте этим символом, иначе браузерам будет сложно вставлять разрывы строк аккуратным и понятным образом.
  2. 2 Вставьте пробелы различной ширины. Существуют также и другие символы, которые сообщают браузеру, что нужно отобразить пробел. Различные браузеры по-разному их отображают, но, в отличие от  , на разрывы строк они влиять не должны:
    •   – Названный так в честь блока «N» ручного типографского станка. Пробел длины N примерно равен длине двух стандартных пробелов.
    •   – Пробел длины «М» примерно равен длине четырех стандартных пробелов.
  3. 3 Сымитируйте знак табуляции при помощи неразрывных пробелов. Чтобы воспроизвести абзац, вставьте несколько неразрывных пробелов подряд:     . Данный метод является единственным для HTML, но если у вас есть доступ к CSS (который описан в другом шаге), то он вам не пригодится.
    • Если вам нужно вставить абзац со сложным расположением текста, .
  4. 4 Сделайте отступ вправо при помощи CSS. Отступы или поля в CSS напрямую отправляют браузеру дисплейную команду, поэтому результат этой команды является более единообразным. Процесс его добавления достаточно прост, даже если вы не знакомы с CSS и у вас нет таблицы стилей. Вот пример смещения вправо всего абзаца:
    • Вставьте следующий код в сегмент <head></head> вашего HTML документа:
      <style>p.indent{ padding-left: 1.8em }</style>
      «p.indent» определяет тип абзаца (тег «р») тега с именем «indent» (можете использовать любое имя). Остальная часть кода добавляет пропуски слева от этих абзацев.
    • Теперь вернитесь к телу своего HTML-документа. Каждый раз, когда вы захотите сделать отступ, поместите его в эти теги:
      <p class="indent"></p>
    • Чтобы настроить отступ, измените в коде CSS число «1.8». Сохраните код «em», так как он является мерой длины, связанной с размером шрифта.

Часть 2 Добавление более широких отступов

  1. 1 Используйте предварительно отформатированный текст. Внутри тегов <pre></pre> любое нажатие клавиш space или ⌅ Enter будет отображаться как положено. Используйте их, чтобы привести примеры кода, стихов или любого другого текста, в котором важны интервалы и разрывы строк.
    • Основным недостатком предварительно отформатированного текста является его масштаб. В отличие от обычного HTML, он не будет подстраивать свой размер относительно размера окна пользователя.
  2. 2 Вставьте разрывы строк. Тег <br> принудительно переносит строку. С помощью нескольких тегов можно создать пустые строки. Это идеальный вариант для тех, кто только начинает знакомиться с HTML, но как только вы ознакомитесь с CSS, лучше забыть о подобном способе принудительного форматирования.
  3. 3 Обозначьте абзацы тегом «p». Наличие тега <p></p> вокруг текста обозначает абзац. Большинство браузеров разделяют абзацы пустой строкой, но при этом не гарантируют точность стиля.

Советы

  • Если при просмотре страницы вы увидите лишние символы, «плавающие» среди кода, перепроверьте незакрытые теги, скажем, <br вместо <br>.
  • CSS – гораздо более мощный и предсказуемый инструмент для форматирования страницы и расположения текста на ней.
  • Не вставляйте пробелы после открывающего или перед закрывающим тегами. Например, правильно писать: Руководство о <a>пробелах</a>, а не Руководство о <a> Пробелах </a>.
  • Неразрывный пробел ( ) является примером единого символа – кода, содержащего символы, которые нельзя напечатать на клавиатуре.

Предупреждения

  • Набирайте HTML-код не в редакторе для обработки текстов, а в специальном редакторе или в Блокноте. Если в браузере ваши отступы превращаются в странные символы, скорее всего, это вызвано дополнительными данными, хранящимися в формате обработки текстов, который не предназначен для отображения на веб-странице.
  • HTML код клавиши Tab ↹ – (&#09;) не будет работать как положено. Стандартный HTML-документ не имеет табуляции, поэтому код табуляции ни к чему не приведет.

Похожие статьи

Прислал: Шестакова Мария . 2017-11-05 16:21:55
Поделиться: