Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.

Синтаксис

<div>...</div>

Атрибуты

align
Задает выравнивание содержимого тега <div>.
title
Добавляет всплывающую подсказку к содержимому.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег DIV</title>
  <style type="text/css">
   .block1 { 
    width: 200px; 
    background: #ccc;
    padding: 5px;
    padding-right: 20px; 
    border: solid 1px black; 
    float: left;
   }
   .block2 { 
    width: 200px; 
    background: #fc0; 
    padding: 5px; 
    border: solid 1px black; 
    float: left; 
    position: relative; 
    top: 40px; 
    left: -70px; 
   }
  </style> 
 </head>
 <body>

  <div>Lorem ipsum dolor sit amet, consectetuer 
   adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.</div>
  <div>Ut wisis enim ad minim veniam, quis nostrud 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
   ea commodo consequat.</div> 

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид блоков, оформленных с помощью стилей

Блоки и встроенные элементы HTML — Веб учебники

На сайте нет рекламы

Каждый HTML элемент имеет значение отображения по умолчанию, в зависимости от типа элемента.

Существует два значения отображения: блочный и встроенный.

Элементы блочного уровня

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).

Элемент <div> является элементом блочного уровня.

Здесь представлены блочные элементы в HTML:

Встроенный элемент

Встроенный элемент не начинается с новой строки и занимает только столько ширины, сколько необходимо.

Это элемент <span> внутри параграфа.

Вот встроенные элементы в HTML:

Примечание: Встроенный элемент не может содержать элемент блочного уровня!

Элемент

<div>

Элемент <div> часто используется в качестве контейнера для других HTML элементов.

Элемент <div> не имеет обязательных атрибутов, но style, class и id являются общими.

При использовании вместе с CSS, элемент <div> можно использовать для стилизации блоков контента:

Пример

<div>
  <h3>Лондон</h3>
  <p> Лондон-столица Англии. Это самый густонаселенный город в Соединенном Королевстве, с метрополией более 13 миллионов жителей.</p>
</div>

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

Элемент

<span>

Элемент <span> — это встроенный контейнер, используемый для разметки части текста или части документа.

Элемент <span> не имеет обязательных атрибутов, но style, class и id являются общими.

При использовании вместе с CSS, элемент <span> элемент можно использовать для стилизации частей текста:

Пример

<p>У моей матери есть <span>blue</span> уши и у моего отца есть <span>dark green</span> глаза.</p>

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

Краткое содержание главы

  • Существует два значения отображения: блочный и встроенный
  • Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину
  • Встроенный элемент не начинается с новой строки и занимает только столько ширины, сколько необходимо
  • Элемент <div> является блочным уровнем и часто используется в качестве контейнера для других HTML элементов
  • Элемент <span> — это встроенный контейнер, используемый для разметки части текста или части документа

HTML Теги

ТегОписание
<div>Определяет раздел в документе (блока)
<span>Определяет раздел в документе (встроенный)

Блоки в CSS | Шнайдер блог

7939 Посещений

Блоки позволяют создавать веб-страницы без использования таблиц. Ключевые свойства  блока ー высота и длина (задаются в процентах и пикселях). Одним из самых популярных блочных элементов считается <div>. Он нужен для выделения той или иной части документа для изменения содержимого.

Говоря о блоках, не стоит забывать и о позиционировании, которое разделяют на три вида:

  • Абсолютное позиционирование.
  • Перемещаемый объект.
  • Абсолютное позиционирование.

Для веб-страниц как нельзя лучше подходит именно абсолютное позиционирование, за которое отвечает свойство position с заданным свойством absolute, а смещение блоков делается при помощи свойств top, left, right и bottom. Например:

<html>

<head>

 <meta charset=»utf-8″>

 <title>Блоки в CSS</title>

 <style>

  .block1 {

   width: 200px;

   background: #fe4164;

   padding: 5px;

   padding-right: 20px;

   float: left;

  }

  .block2 {

   width: 200px;

   background: #cd5c5c;

   padding: 5px;

   float: left;

   position: relative;

   top: 30px;

   left: -60px;

  }

 </style>

</head>

<body>

 <div>Блок A</div>

 <div>Блок B</div>

</body>

</html>

В таблице стилей вы прописываете нужные параметры (высота, длина, фон и пр), а затем прописываем идентификатор: <div>Блок A</div>. В браузере блоки выглядя так:

Разберемся, как сделать четыре блока на веб-странице. Например, мы хотим, чтобы на нашей станице появились блоки для логотипа, левого меню, ленты новостей и центральной части. Пропишем стили для каждого из них и зададим ID:

<html>

<head>

 <meta charset=»utf-8″>

 <title>Блоки в CSS</title>

 <style>

#logo {

width: 618px;

height: 800px;

position: absolute;

top:0px;

left:0px;

border: 1px solid blue;

}

#leftmenu {

width: 90px;

height: 200px;

position: absolute;

top:50px;

left:0px;

border: 1px solid blue;

}

#rightnews {

width: 90px;

height: 200px;

position: absolute;

top:50px;

left:528px;

border: 1px solid blue;

}

#center {

width: 396px;

height: 200px;

position: absolute;

top: 50px;

left:110px;

border: 1px solid blue;

}

</style>

</head>

<body>

<div>Логотип</div>

<div>Меню</div>

<div>Лента новостей</div>

<div>Центральный блок</div>

</body>

</html>

В браузере:

CSS: работа с блоками | СХОСТ блог

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

Наиболее популярным блочным элементом принято считать <div>, который используется для выделения частей веб-документа и последующего их изменения. Что касается позиционирования, то оно бывает трех типов:

  • Абсолютное позиционирование.

  • Перемещаемый объект.

  • Абсолютное позиционирование.

Первый тип позиционирования подходит именно для веб-страниц. Уточним, что за абсолютное позиционирование отвечает свойство position с заданным свойством absolute, тогда как смещение блоков возможно за счет свойств top, left, right и bottom. Например, пропишем в таблице стилей такие параметры как высота, длина, фон и т.д., а также добавим идентификаторы <div>Блок 1</div> и <div>Блок 2</div>:

<html>

<head>

<meta charset=»utf-8″>

<title>Блоки</title>

<style>

 .block1 {

  width: 200px;

  background: #fe4164;

  padding: 5px;

  padding-right: 20px;

  float: left;

 }

 .block2 {

  width: 200px;

  background: #cd5c5c;

  padding: 5px;

  float: left;

  position: relative;

  top: 30px;

  left: -60px;

 }

</style>

</head>

<body>

<div>Блок 1</div>

<div>Блок 2</div>

</body>

</html>

Блоки в браузере:

Теперь добавим на страницу четыре блока, добавив для каждого из них ID:

<html>

<head>

<meta charset=»utf-8″>

<title>Блоки в CSS</title>

<style>

#logo {

width: 618px;

height: 800px;

position: absolute;

top:0px;

left:0px;

border: 1px solid blue;

}

#leftmenu {

width: 90px;

height: 200px;

position: absolute;

top:50px;

left:0px;

border: 1px solid blue;

}

#rightnews {

width: 90px;

height: 200px;

position: absolute;

top:50px;

left:528px;

border: 1px solid blue;

}

#center {

width: 396px;

height: 200px;

position: absolute;

top: 50px;

left:110px;

border: 1px solid blue;

}

</style>

</head>

<body>

<div>Логотип компании</div>

<div>Меню</div>

<div>Новости компании</div>

<div>Основной блок</div>

</body>

</html>

Блоки в браузере:

HTML5 | Вложенные плавающие блоки

Вложенные плавающие блоки

Последнее обновление: 24.04.2016

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

Определим сначала последовательно все блоки веб-страницы:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
			div{
				margin: 10px;
				border: 1px solid black;
				font-size: 20px;
				height: 80px;
			}
            #header{ 
				background-color: #ccc;
			}
			#sidebar{
				background-color: #bbb;
				float: right;
				width: 150px;
			}
			#main{
				background-color: #fafafa;
				height: 200px;
				margin-right: 170px;
			}
			#menu{
				background-color: #ddd;
			}
			#content{
				background-color: #eee;
			}
			#footer{ 
				background-color: #ccc;
			}
        </style>
    </head>
    <body>
		<div>Шапка сайта</div>
		<div>Правый сайдбар</div>
		<div>
			<div>Меню</div>
			<div>Основное содержимое</div>
		</div>
		<div>Футер</div>
    </body>
</html>

Опять же в главном блоке вложенные блоки идут последовательно: сначала блок меню, а потом блок основного текста.

Теперь применим обтекание к блоку меню:


#menu{
	background-color: #ddd;
	float: left;
	width: 160px;
}
#content{
	background-color: #eee;
	margin-left: 180px;
}

Опять же у плавающего элемента, коим является блок меню, устанавливаются свойства float и width. А у обтекающего его блока content устанавливается отступ слева.

Аналогично можно сделать блок меню справа:


#menu{
	background-color: #ddd;
	float: right;
	width: 160px;
}
#content{
	background-color: #eee;
	margin-right: 180px;
}

Блочные элементы — HTML | MDN

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

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

HTML

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

CSS

p { background-color: #8ABB55; }
  • Блочные элементы могут отображаться только внутри элемента <body> и его потомков.

Существует несколько ключевых отличий между блочными и строчными элементами:

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

Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором категорий контента. Категория «строчных» элементов примерно соответствует категории текстового контента, а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории потокового контента в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент.

Ниже приведён полный список всех блочных элементов (хотя формально понятие «блочный» не применяется к новым элементам в HTML5).

<address>
Контактная информация.
<article> HTML5
Содержание статьи.
<aside> HTML5
Побочное содержание.
<blockquote>
Длинная («блочная») цитата.
<details> HTML5
Раскрывающийся блок с подробностями.
<dialog> HTML5
Диалоговое окно.
<dd>
Описание определения.
<div>
Фрагмент документа.
<dl>
Список определений.
<dt>
Термин в списке определений.
<fieldset>
Группирование элементов формы.
<figcaption> HTML5
Описание для тега <figure>.
<figure> HTML5
Группирование медиа-контента с подписью (см. <figcaption>).
<footer> HTML5
Нижняя часть («подвал») раздела или страницы.
<form>
Форма ввода.
<h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US)
Заголовки от первого до шестого уровня.
<header> HTML5
Верхняя часть («шапка») раздела или страницы.
<hgroup> HTML5
Группирование заголовков раздела или страницы.
<hr>
Горизонтальная разделительная линия.
<li>
Пункт списка.
<main> HTML5
Содержит основной контент, уникальный для страницы.
<nav> HTML5
Содержит навигационные ссылки.
<ol>
Упорядоченный список.
<p>
Текстовый абзац.
<pre>
Предварительно форматированный текст.
<section> HTML5
Раздел веб-страницы.
<table> (en-US)
Таблица.
<ul>
Неупорядоченный список.

 

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

Изучаем html блоки тег div — верстка, примеры, видео

Добрый день друзья! Как то в своих нескольких уроках по html я говорил и употреблял такое понятие как div верстка.

У вас наверняка возникли вопросы, особенно если вы новички, что же это такое?

В сегодняшней статье я развею все ваши сомнения и отвечу на вопросы что из себя представляют div блоки в

Приступим к изучению.

HTML div блоки и верстка

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

Здесь располагался логотип Тут телефон
Здесь был сайдбарС пунктами менюРаздел меню 1Раздел меню 2Раздел меню 3

Вот примерно таким было создание сайтов. Это очень примитивный пример, зато вы наглядно можете представить как создавались сайты в те далекие времена. Технологии интернет не стоят на месте и в какой-то момент к нам пришло такое понятие как html div верстка. И тут, как говорится, понеслось.

Ее значение в сайтостроении действительно велико. Теперь создавать сайты и управлять блоками html стало проще простого. Сайты стали получаться красивыми, интересными. Теперь весь мир верстает ими только в путь.

Вот так теперь можно изобразить упрощенно модель использования div html блоков.

Удобство заключается в независимости блоков друг от друга, ими легко управлять по отдельности, двигать как вам угодно, добавлять стили, можно задавать общие стили через CSS правила для нескольких групп Div. Согласитесь это удобно.

Примеры использования тегов div

Давайте разберем на практике несколько примеров как можно применить теги div на html странице. На простом примере мы создадим 4 блока на странице. Я буду всегда использовать в этом и дальнейших примерах программу Notepad++

Итак, давайте поясню. У нас есть конструкция <!DOCTYPE html>  она годна для современных браузеров и поддерживает разметку html 5 про нее мы поговорим в дальнейших выпусках.

Далее открывается большой «родительский» контейнер <html> . Он парный его нужно закрыть в конце обязательно! Потом идет открытие служебного тега <head> , который тоже парный и в нем содержится служебная информация о кодировке <meta charset> , самый главный seo заголовок страницы title, описание (его сюда я не включал, ибо нет необходимости, мы разбираем чисто технический аспект), сюда же подключают CSS стили, шрифты (библиотека Google Fonts), яваскрипты.

Следующим идет тег <body> . В нем уже будет хранится вся наша разметка блоков и все контейнеры с тегами. Просто запомните его как огромную «бочку».

И вот, наконец, пошли наши контейнеры div.

<div></div> <div></div> <div></div> <div></div>

<div></div>

<div></div>

<div></div>

<div></div>

Важно! Они тоже парные их нужно также наряду с другими тегами закрывать.

Каждый блок див как видите имеет атрибут class, после знака равенства вы можете самостоятельно и произвольно задавать их. Эти классы созданы специально для CSS. Т.е браузер заходит на страницу, видит блок div и смотрит, какая информация в нем содержится и идет в CSS файл и уже там ищет нужный класс.

Можно задавать не только атрибут class, но также можно использовать и id (идентификатор). Вы можете задать вопрос: «А какая мне разница, какой использовать?» Отвечу, для верстки можете применить любой способ. С одним лишь отличием — по приоритету id имеет больше привилегий, чем class .

Это я поясню в видео шпаргалке ниже.

У каждого свой стиль создания сайтов, мне больше нравится использовать именно class, поскольку эта запись в CSS отображается с точкой .selector

Да, кстати, хочу сказать, что header, sidebar, content, footer — это все селекторы CSS, а они уже будут иметь атрибуты.

Итак, продолжаем разгребать кашу в головах пользователей. Div блоки с class мы создали теперь приступим к CSS.

Откроем внутри тега head css правила для нашей страницы, т.е оформим ее. Сделаем это вот так:

Запись будет следующей (просто скопируйте и вставьте в своем примере и посмотрите в браузере)

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>Пример использования div тегов</title> <style> .header { width:600px; height:120px; border:1px solid black; } .sidebar { width:200px; height:300px; border:1px solid black; float:left; } .content { width:370px; height:300px; border:1px solid black; margin-left:230px; } .footer { width:600px; height:130px; border:1px solid black; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<!DOCTYPE HTML>

<html>

<head>

<meta charset=»utf-8″>

<title>Пример использования div тегов</title>

<style>

.header {

width:600px;

height:120px;

border:1px solid black;

}

.sidebar {

width:200px;

height:300px;

border:1px solid black;

float:left;

}

.content {

width:370px;

height:300px;

border:1px solid black;

margin-left:230px;

}

.footer {

width:600px;

height:130px;

border:1px solid black;

}

</style>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</html>

У блока с контентом .content я добавил отступ от левого края margin-right:230px; О том, как сделать отступы я говорил вот в этой статье.

Чтобы увидеть границы наших div блоков я применил атрибут border  и задал значение 1px, solid  — сплошная линия и выбрал цвет черный black.

Также вы наверняка обратили внимание, что у селектора .sidebar я добавил атрибут float:left;  Это обеспечивает «обтекание» других блоков по левому краю. Вот что получилось бы, если мы уберем этот элемент:

Теперь предлагаю вашему вниманию видео урок, где я подробно рассказываю про возможности html div верстки. Смотрите внимательно и просто повторяйте. Ниже можете скачать исходник с нашим примером. Спасибо за внимание!

[sociallocker id=»3259″]Скачать Исходник


[/sociallocker]

HTML-блоки и встроенные элементы

Каждый элемент HTML имеет отображаемое значение по умолчанию, в зависимости от типа элемента это.

Есть два отображаемых значения: блочное и встроенное.

Элементы блочного уровня

Элемент уровня блока всегда начинается с новой строки.

Элемент уровня блока всегда занимает всю доступную ширину (тянется влево и вправо, насколько это возможно).

Элемент уровня блока имеет верхнее и нижнее поле, в то время как встроенный элемент нет.

Элемент

— это элемент уровня блока.

Вот элементы уровня блока в HTML:

Встроенные элементы

Встроенный элемент не начинается с новой строки.

Встроенный элемент занимает ровно столько ширины, сколько необходимо.

Это элемент внутри абзаца.

Вот встроенные элементы в HTML:

Примечание: Встроенный элемент не может содержать уровень блока. элемент!

Элемент

Элемент

часто используется как контейнер для других элементов HTML.

Элемент

не имеет обязательных атрибутов, но стиль , класс и id являются общими.

При использовании вместе с CSS элемент

может использоваться для стилизации блоков содержание:

Пример


Лондон


Лондон — столица Англии. Это самый густонаселенный город Соединенного Королевства, в котором проживает более 13 миллионов жителей.


Попробуй сам »

Элемент

Элемент встроенный контейнер, используемый для разметки части текста или части документа.

Элемент не имеет обязательных атрибутов, но стиль , класс и id являются общими.

При использовании вместе с CSS элемент может использоваться для стилизации частей текста:

Пример

У моей мамы голубые глаза а у моего отца темно зеленые глаза.


Попробуй сам »

Краткое содержание главы

  • Есть два отображаемых значения: блочное и встроенное
  • Элемент уровня блока всегда начинается с новой строки и занимает всю доступная ширина
  • Встроенный элемент не начинается с новой строки и занимает только большая ширина по необходимости
  • Элемент
    является блочным уровнем и часто используется как контейнер для других элементов HTML
  • Элемент является встроенным контейнер, используемый для разметки части текста или части документа

HTML-теги

Тег Описание
 Определяет раздел в документе (на уровне блока)
Определяет раздел в документе (встроенный)


Элементы уровня блока — HTML: язык гипертекстовой разметки

Элементы HTML ( язык разметки гипертекста ) исторически классифицировались как элементы «уровня блока» или как элементы «встроенного уровня».Поскольку это презентационная характеристика, в настоящее время она определяется CSS в макете потока. Элемент уровня блока занимает все горизонтальное пространство своего родительского элемента (контейнера) и вертикальное пространство, равное высоте его содержимого, тем самым создавая «блок». В этой статье мы рассмотрим элементы уровня блока HTML и их отличия от элементов встроенного уровня.

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

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).

Следующий пример демонстрирует влияние элемента уровня блока:

HTML 

  
 Этот абзац является элементом уровня блока; его фон был окрашен для отображения родительского элемента абзаца.

CSS 

  p {background-color: # 8ABB55; }
  • Элементы уровня блока могут появляться только внутри элемента .

Есть несколько ключевых отличий между элементами уровня блока и встроенными элементами:

Модель содержимого
Как правило, элементы уровня блока могут содержать встроенные элементы и (иногда) другие элементы уровня блока. Этому структурному различию присуща идея, что блочные элементы создают «более крупные» структуры, чем встроенные элементы.
Форматирование по умолчанию
По умолчанию элементы уровня блока начинаются с новой строки, но встроенные элементы могут начинаться в любом месте строки.

Различие между блочными и строчными элементами использовалось в спецификациях HTML до 4.01. В HTML5 это двоичное различие заменено более сложным набором категорий контента. В то время как «встроенная» категория примерно соответствует категории фразового содержимого, «блочная» категория не соответствует напрямую какой-либо категории содержимого HTML5, но «блочных» и «встроенных» элементов, объединенных вместе, соответствуют содержимое потока в HTML5. Также есть дополнительные категории, например.г. интерактивный контент.

Ниже приводится полный список всех элементов HTML «блочного уровня» (хотя «блочный уровень» технически не определен для новых в HTML5 элементов).

встроенных элементов и блочных элементов в HTML

Блочные и встроенные элементы

Давайте разберемся с блочными и встроенными элементами, используя следующие примеры:

Пример кода с выводом:

Элемент уровня блока:

Элемент уровня блока занимает все пространство родительского (контейнер), например

и

в примере.

Обратите внимание, что и

, и

каждый раз начинаются с новой строки, образуя структуру , подобную блоку, . Элементы блочного уровня начинаются с новых строк.

Общие элементы уровня блока :

,

,

,
,
,