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

Создание 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>

Выход:

Читайте также:  Программа Python для извлечения одного значения из ответа JSON

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

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

Упорядоченные списки: Упорядоченные списки имеют порядок, который может быть числовым или алфавитным. Тег <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>

Выход:

Читайте также:  Профессиональные термины программистов

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

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

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

  • 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>

Выход :

исание Сп

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

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector