From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/html/element/div/index.html | 148 +++++++++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 files/ru/web/html/element/div/index.html (limited to 'files/ru/web/html/element/div') diff --git a/files/ru/web/html/element/div/index.html b/files/ru/web/html/element/div/index.html new file mode 100644 index 0000000000..27ca73a4ae --- /dev/null +++ b/files/ru/web/html/element/div/index.html @@ -0,0 +1,148 @@ +--- +title: '
: Элемент разделения контента' +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - Web + - div + - Веб + - Группировка контента + - Потоковый контент + - Разделение контента + - Справка + - Элемент +translation_of: Web/HTML/Element/div +--- +
{{HTMLRef}}
+ +

Элемент разделения контента HTML (<div>) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью {{glossary("CSS")}}.

+ +
{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}
+ + + +

Являясь "чистым" контейнером, элемент <div>, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты {{htmlattrxref("class")}} или {{htmlattrxref("id")}}, помечать раздел документа, написанный на разных языках (используя атрибут {{htmlattrxref("lang")}}), и так далее.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Категории контентаПотоковый контент, явный контент.
Разрешенное содержимоеПотоковый контент или (в {{glossary("WHATWG")}} HTML), если родительским является элемент {{HTMLElement("dl")}}: один или несколько элементов {{HTMLElement("dt")}}, сопровождаемых одним или более элементами {{HTMLElement("dd")}}, в ряде случаев смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.
Пропуск тегаНи одного; Оба тега, открывающий и закрывающий, являются обязательными.
Разрешенные родительские элементыЛюбой элемент, который разрешает потоковый контент в качестве содержимого..
+ Или (в {{glossary("WHATWG")}} HTML): элемент {{HTMLElement("dl")}}.
Разрешенные роли ARIAЛюбые
DOM-интерфейс{{domxref("HTMLDivElement")}}
+ +

Атрибуты

+ +

К этому элементу применимы глобальные атрибуты.

+ +
+

Заметка: Атрибут align устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства {{glossary("CSS")}} или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов <div> на странице.

+
+ +

Примечание

+ + + +

Примеры

+ +

Простой пример

+ +
<div>
+  <p>Любой тип контента. Например,
+  &lt;p&gt;, &lt;table&gt;. Все что угодно!</p>
+</div>
+ +

Результат будет выглядеть так:

+ +

{{EmbedLiveSample("Простой_пример", 650, 60)}}

+ +

Стилизованный пример

+ +

Этот пример создаёт прямоугольник с тенью, применяя стили к  <div> с помощью CSS. Заметьте, что использование атрибута {{htmlattrxref("class")}} на элементе <div> даёт применение стилей "shadowbox" (в дословном переводе означает "теневая коробка") к элементу.

+ +

HTML

+ +
<div class="shadowbox">
+  <p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.</p>
+</div>
+ +

CSS

+ +
.shadowbox {
+  width: 15em;
+  border: 1px solid #333;
+  box-shadow: 8px 8px 5px #444;
+  padding: 8px 12px;
+  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
+}
+ +

Результат

+ +

{{EmbedLiveSample("Стилизованный_пример", 650, 120)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}{{Spec2('HTML WHATWG')}}Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохраненное в определенный момент времени)
{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}{{Spec2('HTML5 W3C')}}Атрибут align больше не поддерживается
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}{{Spec2('HTML4.01')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("html.elements.div")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf