Как реализовать различные типы списков в HTML?

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

Списки HTML позволяют содержимому следовать правильной семантической структуре. Все теги в списке требуют открывающих и закрывающих тегов. В HTML существует 3 типа списков, а именно:

Неупорядоченный список
Упорядоченный список
Описание Список

Мы рассмотрим все типы List в HTML, а также их реализацию на примерах.

Неупорядоченный список. Неупорядоченный список используется для создания списка связанных элементов в маркированном или неупорядоченном формате. Он начинается с тега <ul>, за которым следует тег <li> для отображения элементов списка внутри тега <ul>.

Синтаксис:

<ul>
   <li>Item1</li>
   ...
</ul>

Мы также можем использовать различные свойства CSS для создания списка с разными стилями. Он может иметь одно из следующих значений:

circle: дает маркер элемента списка круга.
square: дает квадрат в качестве маркера элемента списка.
disk: это закрашенный круговой маркер по умолчанию.
none: используется для снятия пометок с элементов списка.

Пример 1: В этом примере описывается неупорядоченный список в HTML.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>HTML Lists</title>

</head>

<body>

    <h2>GeeksforGeeks</h2>

    <h4>HTML Unordered List</h4>

    <h4>Coding Language</h4>

    <ul>

        <li>C</li>

        <li>C++</li>

        <li>Core-Java</li>

        <li>Python</li>

        <li>Javascript</li>

    </ul>

</body>

</html>

Выход:

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

Пример 2. В этом примере мы создадим неупорядоченный список с квадратным маркером элемента списка.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>HTML Lists</title>

</head>

<body>

    <h2>GeeksforGeeks</h2>

    <h4>HTML Unordered List</h4>

    <h4>Coding Language</h4>

    <ul style="list-style-type:square;">

        <li>C</li>

        <li>C++</li>

        <li>Core-Java</li>

        <li>Python</li>

        <li>Javascript</li>

    </ul>

</body>

</html>

Выход:

Читайте также: ravel python numpy

Ненумерованный список квадратного типа

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

Синтаксис:

<ol>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
</ol>

Упорядоченный список имеет оператор типа, который определяет тип порядка списка, например, будет ли список начинаться с числового значения или с алфавитного значения. Различные способы использования упорядоченного списка приведены ниже:

type = «1»: список начнется с 1.
type = «A»: здесь список будет начинаться с A.
type = «a»: Здесь список будет начинаться со строчной буквы a.
type = «I»: список будет начинаться с римских цифр.
type = «i»: TheList будет начинаться с латинских цифр нижнего регистра.

Пример 1. Этот пример описывает упорядоченный список в HTML.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>HTML Lists</title>

</head>

<body>

    <h2>GeeksforGeeks</h2>

    <h4>HTML Ordered List</h4>

    <h4>Coding Language</h4>

    <ol>

        <li>C</li>

        <li>C++</li>

        <li>Core-Java</li>

        <li>Python</li>

        <li>Javascript</li>

    </ol>

</body>

</html>

Выход:

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

Пример 2: В этом примере мы создадим упорядоченный список с римскими цифрами.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>HTML Lists</title>

</head>

<body>

    <h2>GeeksforGeeks</h2>

    <h4>HTML Ordered List</h4>

    <h4>Coding Language</h4>

    <ol type="I">

        <li>C</li>

        <li>C++</li>

        <li>Core-Java</li>

        <li>Python</li>

        <li>Javascript</li>

    </ol>

</body>

</html>

Выход:

Читайте также: Else if C++

Упорядоченный список с римским шрифтом

Упорядоченный список имеет еще один атрибут, называемый «начало», где вы можете указать начальную точку для порядка списка.

start: используется для указания начальной точки маркера элемента списка.

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

HTML

<!DOCTYPE html>

<html>

<head>

    <title>HTML Lists</title>

</head>

<body>

    <h2>GeeksforGeeks</h2>

    <h4>HTML Ordered List</h4>

    <h4>Coding Language</h4>

    <ol start="12">

        <li>C</li>

        <li>C++</li>

        <li>Core-Java</li>

        <li>Python</li>

        <li>Javascript</li>

    </ol>

</body>

</html>

Выход:

Упорядоченный список с начальным атрибутом

Список описаний. Список описаний — это тип списка, в котором каждый элемент имеет описание. Он также известен как список определений. Тег <dl> используется для создания списка описаний, тег <dt> определяет элемент, а тег <dd> описывает каждый элемент в списке.

Синтаксис:

<dl> Contents... </dl>

Список определений HTML содержит следующие 3 тега:

<dl>: определяет начало списка.
<dt>: определяет элемент.
<dd>: определяет описание каждого элемента.

Пример: этот пример иллюстрирует список описаний в HTML.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>HTML Lists</title>

</head>

<body>

    <h2>GeeksforGeeks</h2>

    <h4>Description List</h4>

    <strong>Developers Life</strong>

    <dl> <dt>Code</dt>

        <dd>- Code all day!</dd>

            <dt>Eat</dt>

        <dd>- Eat healthy food</dd>

            <dt>Sleep</dt>

        <dd>- Sleep soundly!</dd>

    </dl>

</body>

</html>

Выход :

Описание Список