This article has been localized into Russian by the community.
Блочные и встроенные элементы
Мы посмотрели на некоторые элементы HTML5, из которых состоит веб-страница. А теперь пришло время представить еще одно свойство элементов HTML5. Существует 2 типа элементов: встроенные элементы и блочные элементы. На то, как браузер отображает элемент, влияет то, является ли он встроенным или блочным.
Блочные элементы
Элемент блока отображает, как указывает название, фактический блок. Блок-элемент настолько широк, насколько это возможно. Это прямоугольник, который не разбивается на линии, а ширину и высоту элемента можно регулировать. Блочные элементы могут содержать встроенные элементы и другие блочные элементы.
Встроенные элементы
Встроенные элементы являются частью потока документа, и размер обычно не изменяться вручную. Только встроенные элементы могут находиться во встроенных элементах. И что еще более запутанно, встроенные элементы - это единственные элементы, которые могут содержаться в элементе абзаца, даже если <p> -элемент является блочным элементом.
<p></p>; элемент является блочным элементом, тогда как <b> - встроенный . (b обозначает жирный и меняет внешний вид текста)
Примеры
Наиболее часто используемым элементом уровня блока является <div>. (Div - это сокращение от Division). <div> элемент - это блочный элемент, используемый для разделения различных типов информации на вашей веб-странице. Представьте, что у вас есть две записи в блоге, состоящие из самой записи, названия, вашего имени и даты публикации, это может выглядеть так:
Просто еще один день
Автор Кристина
11 января
Это моя вторая запись в блоге, и я просто хотела проверить, как вы
Моя первая запись в блоге
Написано Кристиной
11 января
Я так счастлива сделать свою первую запись в блоге! УРА!
Как видите, в блоге есть две записи, и мы разделяем их, используя блочный элемент - в этом случае мы выбираем <div>. Внутри блочного элемента находится другой блочный элемент, абзац (<p>). Используя только самую необходимую разметку, HTML-код для вашей веб-страницы будет выглядеть следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<div>
<p>Just Another Day<br />
Written by Christina<br />
On January 11th
</p>
<p>This is my second blog entry, and I just wanted to check in on you
</p>
</div>
<div>
<p>My First Blog Entry<br />
Written by Christina<br />
On January 10th
</p>
<p>
I’m so happy to write my first blog entry – yay!
</p>
<div>
</body>
</html>Элементы <div> используются для разделения двух записей блога. Внутри каждого из элементов <div>- есть два абзаца, состоящих из заголовка и автора и самой записи.
Элемент <div> широко используется в качестве контейнера, который может применять форматирование в любом месте на вашей веб-странице. Ограничение заключается в том, что элементы <div> ничего не говорят вам о содержании самого обзаца. Таким образом, браузер знает, что он нашел отдельный раздел, но не знает, что это за раздел. В HTML5 было введено много новых элементов, чтобы заменить использование <div>. Некоторые из них описаны далее,посмотреть статьи о новых семантических элементах, чтобы разобраться в семантической разметке.
Ранее мы говорили о вложенных элементах и о тот факт, что элементы <p> находятся внутри тега <div>, является примером вложенных элементов.
Чему вы научились
- Блочные элементы похожи на квадраты
- Встроенные элементы не имеют разрывов в документе
- Вы можете вкладывать блочные элементы в другие блочные элементы
- Вы не можете вкладывать блочные элементы во встроенные элементы
- Параграф является единственным блочным элементом, который должен содержать только встроенные элементы
- <div> элементы в настоящее время используются в качестве контейнера, но новые элементы HTML5 уже здесь, чтобы изменить это
