Тег // Вебшкола онлайн
Пример
<div>
<h4>Это заголовок третьего уровня</h4>
<p>А это обычный параграф</p>
</div>
Описание и использование
Тег <div> определяет секцию (блок) в hml-документе.
Его часто используют для группировки блочных элементов с целью последующего форматирования.
Браузерная поддержка
Тег <div> поддерживается всеми основными браузерами.
Отличия между HTML и XHTML
Атрибут align тега <div> был признан устаревшим в HTML 4.01 и не поддерживается в XHTML 1.0 Strict DTD.
Совет
Тег <div> часто используют вместе с CSS для верстки страниц.
Помните, что браузеры обычно добавляют пустую строку до и после тега <div>.
Альтернативные атрибуты
DTD показывает в какой версии DTD использование атрибута разрешено. S=Strict, T=Transitional и F=Frameset.
| Значение | Описание | DTD | |
|---|---|---|---|
| align | left right center justify |
Устарело. Используйте CSS. Определяет выравнивание содержимого элемента div |
TF |
Стандартные атрибуты
Тег <div> поддерживает следующие стандартные атрибуты:
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| class | название класса | Указывает название класса для элемента | STF |
| dir | rtl ltr |
Указывает направление вывода текста для элемента | STF |
| id | id | Указывает id для элемента | STF |
| lang | код_языка | Указывает код языка содержимого элемента | STF |
| style | описание_элемента | Указывает строчный стиль элемента | STF |
| title | текст | Указывает дополнительную информацию об элементе | STF |
| код_языка | Указывает код языка содержимого элемента в XHTML документах | STF |
Дополнительная информация о стандартных атрибутах.
События
Тег <div> поддерживает следующие атрибуты событий:
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| onclick | скрипт | Скрипт, который должен быть выполнен при одинарном щелчке мышью | STF |
| ondblclick | скрипт | Скрипт, который должен быть выполнен при двойном щелчке мышью | STF |
| onmousedown | скрипт | Скрипт, который должен быть выполнен, если пользователь зажал кнопку мыши | STF |
| onmousemove | скрипт | Скрипт, который должен быть выполнен при движении курсора мыши | STF |
| onmouseout | скрипт | Скрипт, который должен быть выполнен, если пользователь передвинул курсор мыши за пределы элемента | STF |
| onmouseover | скрипт | Скрипт, который должен быть выполнен, когда пользователь двигает курсор мыши над элементом | STF |
| скрипт | Скрипт, который должен быть выполнен, когда пользователь отпускает кнопку мыши | STF | |
| onkeydown | скрипт | Скрипт, который должен быть выполнен при нажатии клавиши пользователем | STF |
| onkeypress | скрипт | Скрипт, который должен быть выполнен при нажатии и отпускании клавиши пользователем | STF |
| onkeyup | скрипт | Скрипт, который должен быть выполнен при отпускании клавиши пользователем | STF |
Дополнительная информация о cобытиях HTML.
Теги DIV и SPAN и их атрибуты
Теги DIV и SPAN и их атрибуты
Тег DIV — в сайтостроении применяется как удобный контейнер для различных блоков html кода веб-страницы, которым просто манипулировать динамически – перемещать,определять отступы,другими словами — изменять вид содержимого.Обычно, вид блока управляется при помощи стилей. Содержимое тега <DIV>, как правило начинают с новой строки. Закрывающий тег обязателен! Элемент DIV: <div>…</div>.
Параметры тега DIV
ALIGN — определяет способ выравнивания контейнера по горизонтали.
Используемые значения: left, center, right, justify. По умолчанию применяется значение left.
TITLE — Определяет всплывающую подсказку к содержимому тега DIV.
Рассмотрим примеры:
Добавим в наш шаблон такие строчки:
<div align=»right» title=»тег DIV, выровненный по правому краю»>
Тег DIV, выровненный по правому краю.
</div>
<div align=»left» title=»тег DIV, выровненный по левому краю»>
</div>
<div align=»center» title=»тег DIV, выровненный по центру»>
Тег DIV, выровненный по центру.
</div>
<div align=»justify» title=»тег DIV, выровненный по ширине контейнера DIV»>
Тег DIV, выровненный по ширине контейнера DIV.
</div>
На первом скриншоте видно, что расстояние между аонтейнерами DIV меньше нежели между абзацами.
Данный рисунок показывает результат действия параметра TITLE.
SPAN — применяется для выделения части информации и присвоения этой части различных стилей. Закрывающий тег обязателен!
Без стилей — сам по себе, элемент SPAN никакого смысла не имеет. Для примера вставим в наш шаблон две одинаковые фразы, заключённые в элемент SPAN:
<span>Действие тега SPAN без стилей.</span><br>
<span>Действие тега SPAN с применением(меняем цвет текста) стилей.</span>
Результат наглядно показывает бесполезность применения тега SPAN без стилей.
Так же можно отметить, что с помощью элемента SPAN можно присвоить даже одной букве в тексте разные стили(цвет, размер, и.т.д.) При изучении CSS мы подробнее рассмотрим все действия с тегом SPAN.
HTML тег div | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 22.01.2011
Тег <div> (англ. division — разделение) — тег-контейнер, выделяет логический блок. Один из основных элементов блочной верстки. В сочетании с таблицами стилей используется для разметки страницы, разбивки страницы на независимые секции.
Блочный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<div>...</div>
Атрибуты
Основные Вспомогательные События
выраванивание содержимого контейнера
| |
| class | определяет имя используемого класса |
| dir | определяет направление символов:
|
| id | уникальный идентификатор |
| lang | определяет язык отображаемого документа |
| onclick | щелчок на элементе |
| ondblclick | двойной щелчок на элементе |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| style | задает встроенную таблицу стилей |
| title | всплывающая подсказка |
Пример
Различные способы применения <div>:
<div>
Блок красного цвета
</div>
<div>
Выравниваем текст по центру...
</div>
Рекомендации по использованию
- закрывающий тег обязателен (</div>)
- может содержать CDATA, строчные и блочные элементы
- обязательных атрибутов нет
- не рекомендуется использовать атрибуты для форматирования содержимого, вместо используйте таблицы стилей
Твой код:
<html> <head> <title></title> </head> <body> <div>Блок красного цвета</div> <div>Выравниваем текст по центру</div> </body> </html> Сделай код и жми тутРезультат:
большой полигонПо теме
seodon.ru | Теги HTML — Тег DIV
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Атрибут align, тега <DIV>, устанавливает горизонтальное выравнивание содержимого блока относительно его самого.
Значения
- center — Содержимое выравнивается по центру блока <DIV>.
- justify — Выравнивание сразу по левой и правой сторонам. В этом случае каждая строка блока равномерно распределяется по ширине, в случае необходимости между элементами или словами добавляются пробелы.
- left — Содержимое прижимается к левой стороне блока.
- right — Прижимается к правой стороне.
Значение по умолчанию: left.
Синтаксис
<div align="значение">...</div>Обязательный атрибут: нет.
Пример HTML: применение атрибута align
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Применение тега DIV</title>
</head>
<body>
<div align="center">
<table border="1">
<tr><td>По центру</td><td>По центру</td></tr>
</table>
<div align="right">
<table border="1">
<tr><td>Справа</td><td>Справа</td></tr>
</table>
</div>
<p>Текст абзаца.</p>
</div>
</body>
</html>Результат примера
Результат. Применение атрибута align. в браузере Google Chrome.
В браузере Internet Explorer.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Частично | Нет | Частично | Нет |
В HTML 4.01 и XHTML 1.0 использовать атрибут align допускается только с <!DOCTYPE> Transitional и Frameset, в противном случае будет невалидный код. А вообще, рекомендуется применять стили (CSS).
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
Браузеры по разному понимают атрибут align. Google Chrome и Mozilla Firefox выравнивают только сами элементы, содержащиеся в контейнере <DIV>. А вот Internet Explorer и Opera выравнивают еще и содержимое этих элементов.