Лабораторная работа по HTML неупорядоченному списку

Введение

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

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

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

Настройте структуру HTML-документа

Создайте файл index.html в новой папке проекта и откройте его в текстовом редакторе.

Создайте базовую структуру HTML-документа, добавив теги html, head и body. Внутри тега head добавьте тег title и задайте заголовок документа "HTML Unordered List Lab".

<!doctype html>
<html>
  <head>
    <title>HTML Unordered List Lab</title>
  </head>
  <body>
    <!-- Add content here -->
  </body>
</html>

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

Внутри тега body создайте неупорядоченный список с использованием тега ul. Чтобы добавить элементы списка, используйте тег li внутри тега ul.

<ul>
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Добавьте атрибуты к тегу ul

Тег ul не имеет собственных специфических атрибутов, но поддерживает глобальные и атрибуты событий. Вот пример добавления атрибута class к тегу ul.

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Примените CSS-стили к тегу ul

Для стилизации тега ul можно использовать CSS. В следующем примере мы устанавливаем list-style-type в 'квадрат' и добавляем отступы.

<style>
  ul {
    list-style-type: square;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50px;
  }
</style>

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Вложение неупорядоченных списков

Вы можете вложить один неупорядоченный список внутрь другого, поместив тег <ul> внутри тега <li>. Вот пример вложенного неупорядоченного списка.

<ul>
  <li>This is the first item in the parent list</li>
  <li>
    This is the second item in the parent list
    <ul>
      <li>This is a nested item</li>
      <li>This is another nested item</li>
    </ul>
  </li>
  <li>This is the third item in the parent list</li>
</ul>

Резюме

В этом практическом занятии вы узнали, как создавать неупорядоченный список с использованием тега ul в HTML. Также вы узнали, как добавлять атрибуты и стили CSS к тегу ul. Помните, что тег ul используется для создания списка элементов с маркерами. Тег ul требует открывающего и закрывающего тегов, а элементы списка должны добавляться с использованием тега li внутри тега ul. Вы можете вложить один неупорядоченный список внутрь другого, поместив тег ul внутри тега li.

HTML Неупорядоченный список