Тег HTML <div>

  • Предыдущая страница <dir>
  • Следующая страница <dl>

Определение и использование

<div> Метка определяет разделы или части HTML-документа (разделы или разделы, разделение/раздел, division/section).

<div> Метка может разделить документ на независимые, различные части. Она может использоваться в качестве строгого организационного инструмента и не связана с любым форматом.

任何类型的内容都可以放在 <div> <div> внутри!

тег, если доступен, затем использовать CSS для настройки стилей или JavaScript для управления. id или class маркировать <div>если использовать class или id атрибуты, можно легко настроить <div> теги устанавливают стили.

Обратите внимание:По умолчанию, браузеры всегда устанавливают стили для <div> элементы перед и после элемента следует放置 символ переноса строки.

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

<div> Это блочный элемент. Это означает, что его содержимое автоматически начинается с новой строки. Фактически, перенос строки это <div> внутренняя уникальная форматировка. Ее можно изменить с помощью <div> с class или id применения.

Не нужно добавлять дополнительные стили для каждого <div> класс или id, хотя это также имеет свои преимущества.

Можно добавить на один и тот же <div> Применение элементов class или id Атрибуты, но в более распространенных случаях используется только один из них. Основное различие между ними заключается в том, что class используется для группы элементов (аналогичных элементов или, можно сказать, класса элементов), а id используется для идентификации отдельного уникального элемента.

См. также:

HTML учебник:HTML блоковые и инлайн элементы

HTML учебник:HTML разметка

HTML DOM справочник:Объект Div

Пример

Часть div, используемая в документе для настройки стилей CSS:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Это заголовок в элементе div</h2>
  <p>Это текст в элементе div.</p>
</div>
</body>
</html>

Попробуйте сами

Кейсовый анализ

<body>
 <h1>Новый сайт</h1>
  <p>Некоторые тексты. Некоторые тексты. Некоторые тексты...</p>
  ...
 <div class="news">
  <h2>Новая новость 1</h2>
  <p>Некоторые тексты. Некоторые тексты. Некоторые тексты...</p>
  ...
</div>
 <div class="news">
  <h2>Новая новость 2</h2>
  <p>Некоторые тексты. Некоторые тексты. Некоторые тексты...</p>
  ...
 </div>
 ...
</body>

Пример объяснение

Как вы видите, этот фрагмент HTML имитирует структуру веб-сайта новостей. Каждый div комбинирует заголовок и резюме новости, что означает, что div добавляет дополнительную структуру документу. В то же время, так как эти div относятся к одному и тому же классу элементов, их можно идентифицировать с помощью class="news", что не только добавляет им подходящее семантическое значение, но и упрощает дальнейшее форматирование div с помощью стилей, что можно назвать двойной пользой.

Совет:Для более глубокого изучения использования class и id, пожалуйста, читайте раздел «Структурированные маркеры W3school» в главе «div, id и другие помощники».

Глобальные атрибуты

<div> Тег также поддерживает Глобальные атрибуты в HTML.

атрибуты событий

<div> Тег также поддерживает Атрибуты событий в HTML.

Стандартные CSS настройки

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <div> Элемент:

div {
  display: block;
}

Попробуйте сами

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <dir>
  • Следующая страница <dl>