Списки: нумерованные и маркированные
Создавайте нумерованные и маркированные списки
«Списки: нумерованные и маркированные» — бесплатный урок HTML for Kids на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 4 уроков всего.
Списки: нумерованные и маркированные
Добро пожаловать в следующий урок! Сегодня мы научимся создавать списки в HTML. Списки помогают организовать информацию и упрощают её чтение.
Что такое списки
Списки — отличный способ объединить связанные элементы. В HTML есть два основных типа списков:
- Нумерованные списки: элементы пронумерованы (1, 2, 3…).
- Маркированные списки: элементы обозначены маркерами.
Давайте научимся создавать оба типа!
Создание нумерованного списка
Нумерованный список создаётся с помощью тега <ol>. Каждый элемент списка добавляется с помощью тега <li> (элемент списка).
Пример:
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to school</li>
</ol>
Создание маркированного списка
Маркированный список создаётся с помощью тега <ul>. Каждый элемент добавляется с помощью тега <li>, как и в нумерованных списках.
Пример:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
Вложенные списки
Вы можете создать список внутри другого списка. Такой список называется вложенным. Вы можете вкладывать друг в друга нумерованные и маркированные списки.
Пример:
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Spinach</li>
</ul>
</li>
</ul>
Списки с описаниями
В HTML также можно создавать списки описаний с помощью тегов <dl>, <dt> и <dd>:
<dl>: определяет список.<dt>: определяет термин (заголовок).<dd>: определяет описание.
Пример:
<dl>
<dt>HTML</dt>
<dd>The language used to create web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style web pages.</dd>
</dl>Добавление стилей к спискам
С помощью CSS можно изменить внешний вид списков. Например, можно изменить тип маркеров или нумерации.
Пример:
<style>
ul {
list-style-type: square; /* Changes bullets to squares */
}
ol {
list-style-type: upper-roman; /* Changes numbers to Roman numerals */
}
</style>
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
<ol>
<li>First Step</li>
<li>Second Step</li>
</ol>
Попробуйте сами
Давайте создадим простую веб-страницу с нумерованным и маркированным списками. Вот пример:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h1>My To-Do List</h1>
<h2>Morning Routine</h2>
<ol>
<li>Wake up</li>
<li>Brush my teeth</li>
<li>Have breakfast</li>
</ol>
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>
Отличная работа!
Поздравляем! Вы научились создавать нумерованные и маркированные списки, вложенные списки и списки описаний. Это отличные инструменты для упорядочивания информации на веб-страницах. В следующем уроке мы узнаем, как добавлять ссылки, чтобы соединять разные страницы и веб-сайты. Приготовьтесь к новым интересным заданиям!
Часто задаваемые вопросы
Урок «Списки: нумерованные и маркированные» бесплатный?
Да — полный текст урока «Списки: нумерованные и маркированные» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 4 уроков всего.
Чему я научусь в уроке «Списки: нумерованные и маркированные»?
Создавайте нумерованные и маркированные списки Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Списки: нумерованные и маркированные»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Заголовки и абзацы
- Списки: нумерованные и маркированные
- Ссылки: соединяем веб-пространство
- Изображения: добавляем картинки на страницу