HTML Списки: Создание неупорядоченных и упорядоченных списков

Введение

Списки HTML являются фундаментальной частью веб-разработки, используемой для группировки и организации связанных элементов. Они делают контент более читаемым и доступным. Существует два основных типа списков:

Неупорядоченные списки (<ul>): Используются, когда порядок элементов не имеет значения. Обычно они отображаются с помощью маркированных точек.
Упорядоченные списки (<ol>): Используются, когда порядок элементов важен. Обычно они отображаются с помощью нумерации.

В этой лабораторной работе вы научитесь создавать оба типа списков, добавлять в них элементы и даже создавать вложенные подсписки для построения более сложных структур. К концу работы у вас будет одна HTML-страница, демонстрирующая эти типы списков.

Создайте тег ul для неупорядоченного списка

На этом шаге вы создадите неупорядоченный список. Неупорядоченные списки определяются тегом <ul> и используются для элементов, где последовательность не важна.

Сначала найдите файл index.html в файловом проводнике слева от WebIDE. Щелкните по нему, чтобы открыть в редакторе.

Внутри тега <body> вашего файла index.html добавьте пустой неупорядоченный список, разместив теги <ul> и </ul> сразу после заголовка <h1>.

Ваш файл index.html теперь должен выглядеть следующим образом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul></ul>
  </body>
</html>

После добавления кода сохраните файл. Вы можете просмотреть изменения, переключившись на вкладку Web 8080. На данный момент вы не увидите никаких элементов списка, так как мы их еще не добавили.

Добавьте теги li внутри ul для элементов списка

На этом шаге вы добавите элементы в неупорядоченный список. Каждый элемент в списке определяется тегом <li> (list item). Эти теги <li> должны быть помещены внутрь родительского тега <ul>.

Давайте добавим три элемента в наш список покупок. Измените файл index.html, чтобы включить "Milk", "Bread" и "Cheese" в качестве элементов списка.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
  </body>
</html>

Сохраните файл и переключитесь на вкладку Web 8080, чтобы увидеть изменения. Теперь вы должны увидеть маркированный список с тремя продуктами.

Создайте тег ol для нумерованного списка

На этом шаге вы создадите упорядоченный список. Упорядоченные списки определяются тегом <ol> и используются, когда порядок элементов важен, например, в рецепте или списке дел. Браузер автоматически пронумерует элементы.

Давайте добавим новый раздел для списка дел. В файле index.html добавьте новый заголовок <h2>To-Do List</h2> и пустой упорядоченный список <ol></ol> под существующим неупорядоченным списком.

Ваш файл index.html теперь должен содержать обе структуры списков:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol></ol>
  </body>
</html>

Сохраните файл и проверьте предварительный просмотр на вкладке Web 8080. Вы увидите новый заголовок, но упорядоченный список пока будет пустым.

Добавьте теги li внутри ol для нумерованных элементов

На этом шаге вы добавите элементы в ваш новый упорядоченный список. Как и в случае с неупорядоченными списками, для определения каждого элемента используется тег <li>. Браузер автоматически позаботится о нумерации.

Давайте добавим три задачи в наш список дел. Отредактируйте файл index.html и поместите следующие элементы <li> внутрь тегов <ol>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>Go to the gym</li>
    </ol>
  </body>
</html>

Сохраните файл и обновите вкладку Web 8080. Теперь вы увидите нумерованный список с вашими тремя задачами.

Вложите ul в ol для подсписков

На этом шаге вы научитесь создавать вложенные списки, также известные как подсписки. Это полезно для разбиения элемента списка на более мелкие, связанные пункты. Вы можете вложить список (<ul> или <ol>) внутрь элемента <li>.

Давайте добавим больше деталей к задаче "Go to the gym" (Пойти в спортзал). Мы добавим вложенный неупорядоченный список, чтобы указать виды тренировок. Для этого поместите новый блок <ul> внутрь элемента <li>Go to the gym</li>.

Обновите файл index.html следующим кодом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>
        Go to the gym
        <ul>
          <li>Treadmill</li>
          <li>Weights</li>
        </ul>
      </li>
    </ol>
  </body>
</html>

Сохраните файл и просмотрите его на вкладке Web 8080. Вы увидите отступ с маркированным подсписком под пунктом "Go to the gym". Это демонстрирует, как вы можете создавать более сложные и организованные структуры контента.

Резюме

Поздравляем с завершением лабораторной работы!

В этой лабораторной работе вы изучили основы создания списков в HTML. Вы успешно:

Создали неупорядоченный список (<ul>) для элементов без определенного порядка.
Создали упорядоченный список (<ol>) для элементов, где важна последовательность.
Использовали тег элемента списка (<li>) для добавления элементов в оба типа списков.
Создали вложенный список для построения иерархической структуры.

Списки являются важным инструментом для организации контента и улучшения читаемости ваших веб-страниц. Теперь вы можете эффективно использовать их в своих будущих веб-проектах.