Блоки в HTML

Вконтакте
Google+

#U0433#U043b#U0430#U0432#U043d#U0430#U044fВсе элементы HTML можно разделить на две категории (а) блочные элементы уровня (б) встроенные элементы

Блочные элементы
Блочные элементы появляются на экране, как будто у них есть разрыв строки до и после них. Например:<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote> и <address> являются все элементы уровня блока. Все они начинаются на собственном новой линии, и все, что следует за ними по собственной новой строке.

Встроенные элементы
Встроенные элементы, могут появляться в предложениях и не появляются на новой линии самостоятельно. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd> и <var>   все встроенные элементы.

Группировка HTML элементов
Есть два важных тега, которые мы используем очень часто, чтобы группировать различные другие теги HTML     (1) <div> тег и (2) <SPAN> тег

<DIV> тег
Это очень важный блочный тег, который играет большую роль в группировке различных других  HTML  тегов с применением CSS стилей  на группы элементов.  <DIV> тег может быть использован для создания макета веб-страницы , где определены разные части (слева, справа, сверху и т.д.) на странице используя <div> тег. Этот тег не предоставляет визуального изменения блоке, но это имеет большое значение, когда он используется с CSS.

Пример:
Ниже простой пример <div> тега:

 

Это даст следующий результат:

ЭТО ПЕРВАЯ ГРУППА
Ниже список из овощей
свекла
имбирь
картофель
редис
ЭТО ВТОРАЯ ГРУППА
Ниже список фруктов
яблоко
банан
манго
клубника

<SPAN> тег
Тег  <SPAN> является встроенным элементом, и он может быть использован для группированных инлайн-элементов в HTML документе. Этот тег также не предоставляет никакого визуального изменения  блока, но имеет большое значение, когда он используется с CSS.

Разницей между <SPAN> тегом и <div> тегом является то, что <SPAN> тег используется с встроенными элементами, а  <DIV> тег используется с блочными элементами.

Пример:
Ниже простой пример использования <SPAN> тега:

 

Это даст следующий результат:

Это красный и это зеленый

HTML
27.06.2015
AMEERTEAM
ameerteam@timurziev.ru
Печалиться о прошлом абсурдно, ты не сможешь его изменить. Бояться будущего бессмысленно, оно не существует.

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

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