Форматирование HTML
Существует разница между тем, что написано в вашем коде HTML и что отображается в браузере.
Как мы уже видели, теги HTML, такие как , только читаются браузером (чтобы знать, какой тип содержимого написан), но не отображаются в нём.
Мы также видели, как можно писать комментарии в коде HTML, чтобы помочь человеку с чтением кода, без необходимости отображать эти комментарии в браузере.
Другим видом написанного кода, который игнорируется браузером, является пробел, он включает в себя:
- переносы строк;
- пустые строки;
- табуляция (или отступы).
Переносы строк
Переносы строк и пустые строки (которые представляют собой последовательность переносов строк) в коде HTML игнорируются браузером. Они составляют лишь единое пространство.
Первоначальная идея веба была в том, что он должен быть совместным пространством, где вы можете общаться путём обмена информацией.
Чтобы реально вставить перенос строки вам нужно использовать элемент
:
В лучшем случае, жизнь совершенно
непредсказуема
Табуляция
Табуляция — это специальный символ, полученный с помощью клавиши Tab . Она обычно перемещает курсор на следующую позицию табуляции, но иногда превращается в два пробела.
Во всяком случае, как и обычный пробел, табуляция невидима. Она также игнорируется браузером:
Давайте толкнём этот текст табуляцией.
Если вы хотите добавить пространство перед словом, вам придётся использовать CSS.
Если вы хотите закрыть элемент HTML, то должны сперва закрыть все его дочерние элементы.
Форматирование в виде дерева
Поскольку элементы HTML могут быть вложены друг в друга, вы должны следить за порядком, в котором они были открыты, так как это будет влиять на порядок, в котором они закрыты.
Данный код написан в одну строку.
Из-за того, что может быть сложно следить за порядком, в котором были открыты элементы HTML, рекомендуется писать HTML в виде дерева:
Данный код написан в несколько строк, но тем не менее, будет отображаться как одна строка.
Форматирование в виде дерева позволяет визуально воспроизвести уровень вложенности вашего кода HTML. Это позволяет легко увидеть, что:
Пишите HTML для себя, чтобы его читать
Табуляция, пустые строки, набор пробелов и переносы строк опускаются компьютером и все они превращаются в один пробел.
HTML-документ пишется и читается человеком, но компьютером только читается. Учитывая, что табуляция, пробелы и переносы строк не влияют на то, как браузер будет читать и впоследствии отображать веб-страницу, вы можете отформатировать свой документ наиболее читаемым для себя способом.
Нет конкретных правил, касающихся форматирования HTML, но есть неявные соглашения, в частности:
- используйте табуляцию, чтобы помочь визуализировать вложения элементов HTML;
- вставляйте открывающие и закрывающие теги блочных элементов на отдельные строки;
- пишите строчные элементы в одну строку (включая открывающие и закрывающие теги).
tab-size
Используется для изменения ширины отступа, заданного с помощью символа табуляции (клавиша Tab ).
Синтаксис
Значения
<число>Число символов в табуляции. Значение должно быть целым положительным числом.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
tab-size final class Div implements HtmlWidgetInterface < private $_content; public function __construct($content) < if (!is_string($content) || empty($content)) < throw new HtmlWidgetException('Element must be a non-empty string.'); >$this->_content = $content; > public function getContent() < return $this->_content; > public function render() < return '<div>' . $this->_content . '</div>'; > >
Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Текст с изменненной табуляцией
Браузеры
Opera поддерживает свойство -o-tab-size . Firefox поддерживает свойство -moz-tab-size .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
CSS по категориям
Поля
Анимация
Градиент
Скруглённые уголки
Изображения
Псевдоэлементы
Псевдоклассы
Печать
Контент
Интерфейс
Таблица
Отступы
Список
Текст
Шрифт
Форматирование
Размеры
Позиционирование
Границы
Цвет и фон
Селекторы
- Селекторы тегов
- Идентификаторы
- Классы
- Мультиклассы
- Универсальный селектор
- Вложенные селекторы
- Дочерние селекторы
- Соседние селекторы
- Родственные селекторы
- Селекторы атрибутов
- [атрибут=»значение»]
- [атрибут^=»значение»]
- [атрибут$=»значение»]
- [атрибут*=»значение»]
- [атрибут~=»значение»]
- [атрибут|=»значение»]
Что такое табуляция в html
На странице есть часть текста, которая являет собою исходный код программы, написанной на Си. Для текста установлен шрифт — Courier.
Задача: сделать отступы (табуляцию) для частей кода, тем самым значительно повысив читаемость текста программы.
Есть идея создавать отступы пробелами . Но неужели больше никак нельзя? Может существует какой-то код специального символа табуляции? Я наверное плохо искал, потому и не нашел.
автор: AlexSol (25.11.2007 в 14:45) письмо автору
исли поместить текст в то он будет обображен также как и в исходнике html файла
автор: GMile (27.11.2007 в 10:16) письмо автору
автор: THERAPYbrother (27.11.2007 в 18:14) письмо автору
а css не пробовал?бывает помогает))
автор: jangot (27.11.2007 в 18:20) письмо автору
автор: sim5 (27.11.2007 в 18:43) письмо автору
Ну-ну, а как быть если код:
| for (.. if (.. else var > > > |
например, парсить по строкам и каждой строке стиль указывать? PRE — просто и без головной боли.
автор: AlexSol (27.11.2007 в 19:25) письмо автору
смотреть надо, о чем спрашивают.
Что такое табуляция в html
Табуляция, отступы и HTML
Табуляторы и отступы, которые используются в текстовых процессорах, неизвестны в HTML. Вы должны таким образом всегда избегать использовать табуляторы в любых разделах, предназначенных для вывода в HTML-основанные форматы, то есть Справку HTML, Броузерную справку и eBook.
Любые попытки использовать пробелы, чтобы создать эффекты отступа в HTML-основанном выводе будут также терпеть неудачу. Это потому, что HTML всегда игнорирует многократные пробелы: не имеет значения, вводите ли Вы единственный пробел или 100, результатом всегда будет единственный пробел.
Табуляция и отступы не одно и то же:
В экране установок Табуляция диалога Формат > Параграф Help & Manual Вы будете видеть следующее страшное предупреждение:
Это могло бы заставить Вас думать, что Вы не можете использовать отступы вообще для HTML-основанного вывода, но дело обстоит не так. Вы можете использовать параграфы с отступом, Вы только не должны пробовать использовать табуляторы или пробелы, чтобы сделать отступы. Вы должны всегда использовать функции отступа параграфа Help & Manual.
Как Help & Manual обрабатывает отступы в HTML:
То, как Help & Manual обрабатывает параграфы с отступом, зависит от того, как они отформатированы. Параграфы с простыми отступами отформатированы установками поля. Это также работает для параграфов с выступами, они не содержат табулятор.
Сложные выступы, содержащие табулятор, преобразуются в таблицы, потому что это — единственный способ сделать эту конструкцию устойчивой в HTML.
Специальный случай — выступы с табулятором:
Выступы, содержащие табулятор, как пример ниже (это — рисунок, чтобы показать табулятор), также надежно преобразованы в таблицы. Это — также единственное исключение, где Вы можете использовать табулятор в HTML-основанном выводе. Табулятор, который является частью выступа, как это, преобразован в структуру таблицы в HTML, которая делает это устойчивым.
Как упомянуто в примере, это также работает, если начало первой строки отступлено от левого поля. Это будет также преобразовано к структуре таблицы, которая будет устойчива в HTML-основанном выводе.