Списки в HTML позволяют структурировать и упорядочивать информацию. В этом уроке мы рассмотрим различные виды списков, их атрибуты и примеры использования, а также предложим тестовое задание для закрепления материала.
Нумерованные списки создаются с помощью тега <ol>, а элементы списка — с помощью тега <li>.
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
Маркированные списки создаются с помощью тега <ul>, а элементы списка — с помощью тега <li>.
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
Списки определений используются для создания пар термин-определение. Создаются с помощью тегов <dl> (список определений), <dt> (термин) и <dd> (определение).
<dl>
<dt>HTML</dt>
<dd>Язык гипертекстовой разметки</dd>
<dt>CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>
type: тип маркера (1, A, a, I, i).start: начальное значение маркера.
<ol type="A" start="5">
<li>Пятый элемент списка</li>
<li>Шестой элемент списка</li>
<li>Седьмой элемент списка</li>
</ol>
type: тип маркера (disc, circle, square).
<ul type="square">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
Списки могут быть вложенными, создавая сложные структуры данных.
<ol>
<li>Первый элемент списка
<ul>
<li>Вложенный первый элемент</li>
<li>Вложенный второй элемент</li>
</ul>
</li>
<li>Второй элемент списка</li>
</ol>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Список покупок</title>
</head>
<body>
<h1>Список покупок</h1>
<ul>
<li>Хлеб</li>
<li>Молоко</li>
<li>Яйца</li>
<li>Масло</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Шаги выполнения задачи</title>
</head>
<body>
<h1>Шаги выполнения задачи</h1>
<ol>
<li>Изучить требования</li>
<li>Спланировать задачу</li>
<li>Выполнить задачу</li>
<li>Проверить результат</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Словарь терминов</title>
</head>
<body>
<h1>Словарь терминов</h1>
<dl>
<dt>HTML</dt>
<dd>Язык гипертекстовой разметки</dd>
<dt>CSS</dt>
<dd>Каскадные таблицы стилей</dd>
<dt>JavaScript</dt>
<dd>Язык программирования для создания интерактивных элементов на веб-страницах</dd>
</dl>
</body>
</html>
<li>Элементы списка должны быть заключены в теги <li>, иначе браузер не сможет правильно отобразить список.
<!-- Неправильно -->
<ol>
Первый элемент списка
Второй элемент списка
Третий элемент списка
</ol>
<!-- Правильно -->
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
При вложении списков убедитесь, что вложенный список находится внутри элемента <li>.
<!-- Неправильно -->
<ol>
<ul>
<li>Вложенный первый элемент</li>
<li>Вложенный второй элемент</li>
</ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
</ol>
<!-- Правильно -->
<ol>
<li>Первый элемент списка
<ul>
<li>Вложенный первый элемент</li>
<li>Вложенный второй элемент</li>
</ul>
</li>
<li>Второй элемент списка</li>
</ol>
В этом уроке мы рассмотрели, как использовать различные виды списков в HTML, их атрибуты и примеры использования. Списки позволяют структурировать информацию и делать страницы более удобными для восприятия.
Создайте веб-страницу, которая содержит следующие элементы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мои списки</title>
</head>
<body>
<h1>Мои любимые фильмы</h1>
<ol>
<li>Фильм 1</li>
<li>Фильм 2</li>
<li>Фильм 3</li>
</ol>
<h1>Список покупок</h1>
<ul>
<li>Продукт 1</li>
<li>Продукт 2</li>
<li>Продукт 3</li>
</ul>
<h1>Термины и определения</h1>
<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
<dt>Термин 3</dt>
<dd>Определение 3</dd>
</dl>
</body>
</html>
Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.
Наша цель и главная задача сделать качественное образование в вашем браузере
Телефон: +375 33 910-08-92
Email: info@codefor.tech
Адрес: г. Барановичи, ул. Пирогова, д. 7
© 2024-2025 Все права защищены. CodeFor.
