TOC

This article has been localized into Russian by the community.

Основы HTML:

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

Мы посмотрели на некоторые элементы 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 уже здесь, чтобы изменить это
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!