HTML элемент списка: мастерство неупорядоченных и упорядоченных списков

Введение

HTML-списки используются для отображения элементов в виде списка, и они играют важную роль в веб-разработке. HTML-тег li используется для определения элемента в списке. Тег li используется совместно с тегами ul или ol, и он идеален для создания неупорядоченных и упорядоченных списков. В этом практикуме будут даны пошаговые инструкции по созданию HTML-списков с использованием тега li.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 97%. Он получил 100% положительных отзывов от учащихся.

Создать неупорядоченный список

Мы можем создать неупорядоченный список с использованием HTML-тега ul. Чтобы добавить элементы в список, мы должны использовать тег li. Создадим неупорядоченный список из трех элементов.

<!-- index.html -->

<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

В приведенном выше коде мы использовали тег ul для создания неупорядоченного списка и тег li для определения каждого элемента в списке.

Создать упорядоченный список

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

<!-- index.html -->

<ol>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ol>

В приведенном выше коде мы использовали тег ol для создания упорядоченного списка и тег li для определения каждого элемента в списке.

Добавление атрибутов к тегу li

Тег li поддерживает несколько атрибутов, которые можно использовать для изменения стиля маркера списка. Часто используемым атрибутом является атрибут type, который позволяет изменить маркер элемента списка. Обновим неупорядоченный список из шага 1 с использованием атрибута type.

<!-- index.html -->

<ul>
  <li type="circle">Элемент 1</li>
  <li type="disc">Элемент 2</li>
  <li type="square">Элемент 3</li>
</ul>

В приведенном выше коде мы использовали атрибут type для добавления различных маркеров к элементам списка. Мы использовали значение circle, чтобы сделать маркер незаполненной окружностью, значение disc, чтобы сделать маркер заполненной окружностью, и значение square, чтобы сделать маркер заполненным квадратом.

Вложение списков

Мы можем вкладывать несколько списков внутри одного списка. Создадим упорядоченный список и добавим неупорядоченный список внутри второго элемента упорядоченного списка.

<!-- index.html -->

<ol>
  <li>Элемент 1</li>
  <li>
    Элемент 2
    <ul>
      <li>Под-элемент 1</li>
      <li>Под-элемент 2</li>
    </ul>
  </li>
  <li>Элемент 3</li>
</ol>

В приведенном выше коде мы использовали тег ul для создания неупорядоченного списка и тег li для определения каждого элемента в списке. Мы также вложили неупорядоченный список внутри второго элемента упорядоченного списка.

Резюме

В этом практическом занятии мы научились создавать HTML-списки с использованием тега li. Начали с создания неупорядоченного списка с использованием тегов ul и li. Затем создали упорядоченный список с использованием тегов ol и li. Также узнали, как добавлять атрибуты к тегу li, чтобы изменить стиль маркера элемента списка. Наконец, научились вкладывать несколько списков внутри одного списка.