Каким блоком является элемент списка. Основы html

В этой главе:

Синтаксис элемента

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

Все элементы в HTML следуют одному формату:

  • Элемент начинается с открывающего тега.
  • Элемент заканчивается закрывающим тегом.
  • Содержимым элемента является все, что находится между открывающим и закрывающим тегами.
  • Некоторые элементы не имеют содержимого (пустые элементы).
  • Большинство элементов могут содержать атрибуты

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

Пустые элементы

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

Вложенные элементы

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

Следующий пример состоит из трех элементов, два из которых вложенные:

Мой первый абзац

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

Это очень

интересно

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

,
,
,
,
,

,...,

,
,
    ,

    , 

    , 
, 
      
 и некоторые устаревшие. Также блочным становится элемент, если в стиле для него свойство display
 задано как block
, list-item
, table
 и в некоторых случаях run-in
.
      

      Для блочных элементов характерны следующие особенности.
      

      • Блоки располагаются по вертикали друг под другом.
        • 
 
      • На прилегающих сторонах элементов действует эффект схлопывания отступов.
        • 
 
      • Запрещено вставлять блочный элемент внутрь строчного. Например, 
        
Заголовок
        
 не пройдёт валидацию, правильно вложить теги наоборот - 
        
Заголовок
        
.
        • 
 
      • По ширине блочные элементы занимают всё допустимое пространство.
        • 
 
      • Если задана ширина контента (свойство width
), то ширина блока складывается из значений width
, полей, границ, отступов слева и справа.
        • 
 
      • Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
        • 
 
      • Если задана высота контента (свойство height
), то высота блока складывается из значения height
, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
        • 
 
      • На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align
.
        • 
 
      • Текст по умолчанию выравнивается по левому краю.
        • 

      Не все блочные теги допустимо вкладывать один в другой, поэтому при создании структуры кода активную роль выполняет 
      
 как универсальный кирпичик вёрстки. Тег 
      
 допустимо вкладывать один в другой, другие блочные элементы также можно помещать внутрь 
      
. В примере 3.13 показан фрагмент кода сайта CSS Zen Garden , где активно применяются эти теги для формирования требуемой конструкции.
      

      Пример 3.13. Использование тега 
      
 
      
 
      
 
 
      
 
      A demonstration of what can be accomplished
 visually through CSS
 - based design. Select any style sheet from the list to load it into
 this page.
      
 
      
 
      

      

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

      Пример 3.14. Анонимный блок
      

      
 

 
 
 Анонимный блок
 
 
 
      
 
      Первый абзац
      
 Анонимный блок
 
      Второй абзац
      
 
      
 


      Схематично блоки в данном примере показаны на рис. 3.23. Серым цветом выделены блочные теги 
      А пунктиром - анонимный блок.
      

      Рис. 3.23. Блоки в документе
      

      Преобразование в блочный элемент
      

      В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width
 и height
. В примере 3.15 показано создание меню, в котором ссылками является вся доступная область.
      

      Пример 3.15. Меню
      

      XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx

      
 

 
 
 Меню
 
 
 
 
      
 
      Метод простых итераций
      
 
      Метод случайных чисел
      
 
      Метод дихотомии
      
 
      Метод золотого сечения
      
 
      
 


      

      


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

      Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).

      

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

      Блочные элементы

      

      HTML
      
 
      Этот абзац - блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.
      

      CSS
      
 p { background-color: #8ABB55; }

      Использование
      

      • Блочные элементы могут отображаться только внутри элемента  и его потомков.
        • 

      Блочные против строчных
      

      Существует несколько ключевых отличий между блочными и строчными элементами:
      Содержание
 Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого
 структурного
 различия
 является идея, что
 блочные элементы
 создают
 «более крупную»
 структуру
, чем
 встроенные элементы
.


 Форматирование по умолчанию
 По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.

      Разделение элементов на
 блочные
 и строчные использовалось в спецификации
 HTML
до версии
 4.01
.
 В
 HTML5
 это
 противопоставление заменено более
 сложным набором
категорий контента .
 Категория

«строчных

» элементов примерно соответствует категории , а для
«блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют
 категории
 потокового контента  в
 HTML5 (т.е., грубо говоря, «блочные» элементы - это потоковый контент минус текстовый контент).
Кроме того, есть
 и другие категории, например, интерактивный контент.

      

      Элементы
      

      Ниже приведен
 полный список всех
 блочных элементов
 (хотя

формально понятие

«блочный

» не применяется к
 новым элементам
 в HTML5
)
.


      

        
 Контактная информация.

 ) представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для дальнейшего распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого."> 
       HTML5

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


 представляет собой раздел документа с контентом, косвенно связанным с основным содержимым документа (часто представленным как боковая панель).">  HTML5

 Побочное содержание.

 (от англ. Block Quotation) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом ."> 
      
 Длинная («блочная») цитата.

 используется для раскрытия скрытой (дополнительной) информации."> 
       HTML5

 Раскрывающийся блок с подробностями.
 определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы  могут интегрироваться с диалогом с помощью указания атрибута method=" dialog returnvalue value submit.>  HTML5

 Диалоговое окно.
 
      
 Описание определения.

 ) является базовым контейнером для элементов основного потока (flow content). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя "> 
      
 Фрагмент документа.

 (от англ. Description List), служащий контейнером для списка пар терминов и их описаний. Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение)."> 
      
 Список определений.

 
      
 Термин в списке определений.
 
      
 Группирование элементов формы.
 
       HTML5

 Описание для тега 
      ), и обычно используется как единое целое."> 
       .

 представляет самостоятельный контент, часто с подписью (
      ), и обычно используется как единое целое."> 
       HTML5

 Группирование медиа-контента с подписью

 (см. 
      ).
 представляет нижний колонтитул (футер, подвал) для своего ближайшего элемента секционного контента или секционного корня. Футер обычно содержит информацию об авторе секции, информацию об авторском праве или ссылки на связанные документы."> 
    
,