HTML-список | Упорядоченный список в html - httpdoc.ru

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

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

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Ordered List </title>  
</head>

<body>

<h2>HTML Ordered list</h2>
<ol>
  <li>Audi</li>
  <li>Mercedes</li>
  <li>Lamborghini</li>  
</ol>  

</body>
</html>

Выход

HTML Ordered List
  1. Audi
  2. Мерседес
  3. Ламборджини

Упорядоченный список Тип Атрибут

type Атрибут используется для изменения типа серии.

Ценить Описание
type = "1" Пункты списка будут пронумерованы цифрами (по умолчанию).
type = "A" Пункты списка будут пронумерованы заглавными буквами.
type = "а" Пункты списка будут пронумерованы строчными буквами.
type = "I" Пункты списка будут пронумерованы римскими числами в верхнем регистре.
type = "я" Пункты списка будут пронумерованы римскими цифрами в нижнем регистре.

Список номеров

Числа как тип - <ol type="1"> . Здесь числа будут использоваться для упорядочивания элементов. Каждый новый элемент будет получать увеличенное значение по сравнению с предыдущим в списке.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Ordered List </title>  
</head>

<body>

<h2>HTML Ordered list</h2>
<ol>
  <li>Audi</li>
  <li>Mercedes</li>
  <li>Lamborghini</li>  
</ol>  

</body>
</html>

Выход

HTML Ordered List
  1. Audi
  2. Мерседес
  3. Ламборджини

Верхний регистр

Заглавные буквы как тип - <ol type="A"> . Здесь для упорядочивания элементов будут использоваться буквы верхнего регистра.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Ordered List Uppercase </title>  
</head>

<body>

<ol type="A">
  <li>Audi</li>
  <li>Mercedes</li>
  <li>Lamborghini</li>  
</ol>  

</body>
</html>

Выход

HTML Ordered List Uppercase
  1. Audi
  2. Мерседес
  3. Ламборджини

Строчные буквы

Строчные алфавиты как тип - <ol type="a"> . То же, что и выше, но алфавиты будут в нижнем регистре.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Ordered List Lowercase </title>  
</head>

<body>

<ol type="a">
  <li>Audi</li>
  <li>Mercedes</li>
  <li>Lamborghini</li>  
</ol>  

</body>
</html>

Выход

HTML Ordered List Lowercase Example
  1. Audi
  2. Мерседес
  3. Ламборджини

Римские цифры в верхнем регистре

Римские числа в верхнем регистре как тип <ol type="I"> .

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Ordered List Uppercase Roman </title>  
</head>

<body>

<ol type="I">
  <li>Audi</li>
  <li>Mercedes</li>
  <li>Lamborghini</li>  
</ol>  

</body>
</html>

Выход

HTML Ordered List Uppercase Roman
  1. Audi
  2. Мерседес
  3. Ламборджини

Строчные римские числа

Римские числа в нижнем регистре как тип <ol type="i">

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Ordered List Lowercase Roman </title>  
</head>

<body>

<ol type="i">
  <li>Audi</li>
  <li>Mercedes</li>
  <li>Lamborghini</li>  
</ol>  

</body>
</html>

Выход

HTML Ordered List Lowercase Roman
  1. Audi
  2. Мерседес
  3. Ламборджини

Атрибут "Старт"

start Атрибут используется для управления подсчетом в списке. По умолчанию подсчет начинается с «1» или с «а», но мы можем изменить счет, чтобы он начинался с указанного числа или алфавита. Посмотрите на пример ниже, чтобы увидеть синтаксис использования этого атрибута.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> Ordered List Start Attribute </title> 
</head> 
<body>

<ol start="50">
  <li>Samsung</li>
  <li>OnePlus</li>
  <li>Nokia</li>
</ol>

<ol type="I" start="50">
  <li>Oppo</li>
  <li>Vivo</li>
  <li>Xiaomi</li>
</ol>

</body>
</html>

Выход

Ordered List Start Attribute
  1. Samsung
  2. OnePlus
  3. Nokia
  1. Оппо
  2. Vivo
  3. Xiaomi

Поддержка браузера

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
<ol>
да
да
да
да
да