, и т. д.
Строчные элементы
В отличие от блочного, строчный элемент не переносится на новую строку, а располагается на той же строке, что и предыдущий элемент. Такие элементы, как правило, находятся внутри блочных элементов и их ширина зависит лишь от содержимого и настроек CSS. Еще одно отличие строчного элемента от блочного заключается к том, что в нем может находиться только контент и другие строчные элементы. Блочные элементы в строчные вкладывать нельзя.
Примеры строчных элементов:
, , , , и т. д.
Примечание:
в HTML5 порядок вложения тегов такой роли не играет. Элементы уже не просто делятся на блочные и строчные, а группируются по смыслу и назначению, представляя собой категории контента .
CSS-свойство display: меняем тип элемента
При помощи крайне полезного свойства display в CSS можно заставить блочный элемент выглядеть как строчный и наоборот. Чтобы блочный элемент вел себя как inline-элемент (т. е. не переводился на новую строку), для него необходимо записать правило:
Display: inline;
Если же необходимо отобразить строчный элемент как block-элемент (чтобы до и после элемента происходил перенос строки), запишите следующее:
Display: block;
Действие {display:inline} и {display:block}
Также можно сделать «гибрид» - блочный элемент с поведением, как у строчного. В этом случае всё содержимое таких блочных элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости. Схлопывание margin в таких случаях перестает действовать. Для превращения элемента в блочно-строчный запишите:
Display: inline-block;
Действие {display:inline-block}
Далее в учебнике:
свойство CSS border . Вы узнаете, как добавлять границы для элементов веб-страницы и какие настройки к ним можно применить, используя каскадные таблицы стилей.
В этой главе:
Синтаксис элемента
Элемент HTML
- это основная структурная единица веб-страницы, написанная на языке HTML. Изображение ниже демонстрирует синтаксис элементов. Для большинства тегов синтаксис элементов будет выглядеть одинаково, за исключением одиночных тегов.
Все элементы в HTML следуют одному формату:
- Элемент начинается с открывающего тега.
- Элемент заканчивается закрывающим тегом.
- Содержимым элемента является все, что находится между открывающим и закрывающим тегами.
- Некоторые элементы не имеют содержимого (пустые элементы).
- Большинство элементов могут содержать атрибуты
Примечание:
не забывайте в закрывающем теге ставить символ "/
", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом.
Пустые элементы
В HTML есть несколько элементов, которые не имеют закрывающего тега, например или
. Такие элементы называются пустыми
, потому что они не содержат в себе никакого содержимого и не имеют закрывающего тега.
Вложенные элементы
Все HTML-документы состоят из вложенных элементов. Большинство из них могут либо содержать в себе другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.
Следующий пример состоит из трех элементов, два из которых вложенные:
Мой первый абзац
Когда вы размещаете один элемент внутри другого, стоит быть внимательными и следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, следующий пример является неверным:
Это очень
интересно
Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).
Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:
Блочные элементы
HTML
Этот абзац - блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.
CSS
p { background-color: #8ABB55; }
Использование
- Блочные элементы могут отображаться только внутри элемента и его потомков.
Блочные против строчных
Существует несколько ключевых отличий между блочными и строчными элементами:
Содержание
Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого
структурного
различия
является идея, что
блочные элементы
создают
«более крупную»
структуру
, чем
встроенные элементы
.
Форматирование по умолчанию
По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.
Разделение элементов на
блочные
и строчные использовалось в спецификации
HTML
до версии
4.01
.
В
HTML5
это
противопоставление заменено более
сложным набором
категорий контента .
Категория
«строчных
» элементов примерно соответствует категории , а для
«блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют
категории
потокового контента в
HTML5 (т.е., грубо говоря, «блочные» элементы - это потоковый контент минус текстовый контент).
Кроме того, есть
и другие категории, например, интерактивный контент.
Элементы
Ниже приведен
полный список всех
блочных элементов
(хотя
формально понятие
«блочный
» не применяется к
новым элементам
в HTML5
)
.
Контактная информация.
) представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для дальнейшего распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого."> HTML5
Содержание
статьи.
представляет собой раздел документа с контентом, косвенно связанным с основным содержимым документа (часто представленным как боковая панель)."> HTML5
Побочное содержание.
(от англ. Block Quotation) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом .">
Длинная («блочная») цитата.
используется для раскрытия скрытой (дополнительной) информации."> HTML5
Раскрывающийся блок с подробностями.
определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы