Элементы Div
Часть раздела Fundamentals путешествия по HTML на Coddy — урок 25 из 60.
Представьте, что вы хотите разбить свою веб-страницу на блоки, чтобы организовать контент. В HTML вы можете использовать div для группировки элементов вместе.
Теги div отлично подходят для создания макетов и разделения разделов.
Вот базовый синтаксис:
<div>
<!-- Здесь располагается содержимое -->
</div>Вы можете добавлять другие HTML-элементы внутрь div, такие как параграфы, заголовки, изображения и даже другие div элементы.
Вот пример того, как использовать теги div для создания простой разметки с заголовком, основной областью содержимого и футером:
<div>
<h1>Header</h1>
</div>
<div>
<p>Main content goes here.</p>
</div>
<div>
<p>Footer</p>
</div>
Задание
ЛегкоСоздайте 3 элемента div, расположенных друг за другом в вашем HTML-документе.
Внутри каждого div добавьте тег p, содержащий название фильма, который вам нравится.
Шпаргалка
Используйте теги div для группировки элементов и организации контента в блоки:
<div>
<!-- Контент размещается здесь -->
</div>Вы можете вкладывать другие HTML-элементы внутрь div, включая абзацы, заголовки, изображения и другие элементы div:
<div>
<h1>Header</h1>
</div>
<div>
<p>Main content goes here.</p>
</div>
<div>
<p>Footer</p>
</div>Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<!-- Напишите код здесь -->
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Fundamentals
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header
Фото профиляСекция «Обо мне»Ссылки на социальные сети2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция HeaderСекция деталей мероприятияФорма регистрацииСекция Footer9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2