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

Введение

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70875{{"HTML Неупорядоченный список"}} html/head_elems -.-> lab-70875{{"HTML Неупорядоченный список"}} html/lists_desc -.-> lab-70875{{"HTML Неупорядоченный список"}} html/layout -.-> lab-70875{{"HTML Неупорядоченный список"}} html/doc_flow -.-> lab-70875{{"HTML Неупорядоченный список"}} html/inter_elems -.-> lab-70875{{"HTML Неупорядоченный список"}} html/custom_attr -.-> lab-70875{{"HTML Неупорядоченный список"}} end

Настройка структуры 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 Неупорядоченный список