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

Введение

В HTML мы можем создать упорядоченный список, используя тег <ol>. Упорядоченный список представляет собой список элементов, пронумерованных в определенном порядке. Тег <ol> используется для создания упорядоченного списка, а тег <li> используется для определения каждого элемента в списке.

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

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

Настройка HTML-файла

В этом шаге мы создадим базовый HTML-файл и настроим тег <ol>. Откройте файл "index.html" и введите следующий код:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
  </body>
</html>

Добавить больше элементов в список

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

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

Изменить тип номера

В этом шаге мы изменим тип нумерации, используемый в упорядоченном списке. По умолчанию упорядоченный список использует десятичную нумерацию. Однако мы можем изменить это на другие типы чисел, такие как римские цифры или буквы. Чтобы изменить тип нумерации, используйте атрибут type в теге <ol>. Например:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol type="I">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

В приведенном выше коде мы установили атрибут type на I, что означает римские цифры в верхнем регистре.

Начинать нумерацию с определенного числа

В этом шаге мы изменим начальное число для элементов упорядоченного списка. По умолчанию первый элемент в упорядоченном списке начинается с "1". Однако мы можем изменить это и начать нумерацию с определенного числа. Чтобы изменить начальное число, используйте атрибут start в теге <ol>. Например:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol start="3">
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

В приведенном выше коде мы установили атрибут start на 3, что означает, что первый элемент в упорядоченном списке будет пронумерован как "3".

Резюме

В этом практическом занятии мы узнали, как создавать упорядоченный список в HTML с использованием тега <ol>. Мы также узнали, как добавлять элементы в список, изменять тип нумерации и начинать нумерацию с определенного числа. С этими знаниями мы можем создавать на наших веб-страницах списки, имеющие профессиональный вид.