Как создавать списки в HTML?

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

Вялый контент

Предположим, вы хотите разместить свое резюме на своей веб-странице со списком всех ваших навыков. Как бы вы создали свою страницу? Исходный HTML-код вашей страницы будет выглядеть примерно так:

<H1>My resume</H1>
<HR>
Hi,<BR>
I am an extremely enthusiastic and energetic person and am an expert in the following - <P>
Cutting apples<BR>
Making paper aeroplanes<BR>
Turning chairs upside down<BR>
Walking backwards<BR>
Folding newspapers<P>
Please consider me for any vacancy that you deem fit.<P>
Sincerely yours, <BR>
I M Dumb.

И страница выглядит так:

Создание резюме без списка

HTML-списки

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

    • — Ненумерованный или Ненумерованный список
      1. — Упорядоченный или нумерованный список
      2. — Список определений или описаний

    Каждый элемент в списке должен быть отделен <LI>Вещь</LI> теги. Мы обсудим каждый из этих списков в следующем разделе с примерами.

    Ненумерованные или ненумерованные списки

    Давайте посмотрим на простую структуру списка HTML и разберемся с каждым элементом.

    <H1>My resume</H1>
    <HR>
    Hi,<BR>
    I am an extremely enthusiastic and energetic person and am an expert in the following - <P>
    <UL>
    <LI>Cutting apples</LI>
    <LI>Making paper aeroplanes</LI>
    <LI>Turning chairs upside down</LI>
    <LI>Walking backwards</LI>
    <LI>Folding newspapers</LI>
    </UL>
    Please consider me for any vacancy that you deem fit.<P>
    Sincerely yours, <BR>
    I M Dumb.

    Так как это выглядит?

    Использование неупорядоченного списка на странице резюме
    Использование неупорядоченного списка на странице резюме

      Список атрибутов

    Стиль маркера по умолчанию — это стиль диска, но вы можете настроить его с помощью атрибута «type», например

      . Допустимые значения атрибута «тип» — «квадрат», «диск» и «круг».

      Стили маркеров неупорядоченного списка HTML
      Стили маркеров неупорядоченного списка HTML

      Упорядоченные или нумерованные списки

      Предположим, вы хотите, чтобы в списке были какие-то числа, как показано ниже?

      1. Нарезка яблок
      2. Изготовление бумажных самолетиков
      3. Переворачивая стулья вверх ногами
      4. Ходьба назад
      5. Складные газеты

      Тег упорядоченного списка

        используется для создания нумерованного списка в HTML, и вы можете заменить теги
        тегами
        для создания нумерованного списка.

        <OL>
        <LI>Cutting apples</LI>
        <LI>Making paper aeroplanes</LI>
        <LI>Turning chairs upside down</LI>
        <LI>Walking backwards</LI>
        <LI>Folding newspapers</LI>
        </OL>

          Список атрибутов

        По умолчанию числа 1, 2, 3… используются в упорядоченном списке, что, если вы хотите использовать маленькие римские цифры или буквы вместо чисел? Просто! Подобно тегу

          , тег
            может также иметь атрибут, называемый «тип», для настройки чисел. Значение атрибута «type» может быть «I», «i», «A» или «a», а его синтаксис следующий:

              …….

            Ниже представлена ​​таблица, в которой показаны различные значения атрибута «тип» для упорядоченного списка:

            Атрибуты упорядоченного списка HTML
            Атрибуты упорядоченного списка HTML

            Списки определений или описаний

            В этом списке есть ряд терминов и их определений. Определение обычно отображается на новой строке с отступом. См. Пример ниже, чтобы узнать, как это работает:

            Список определений HTML
            Список определений HTML

            Как упорядоченные, так и неупорядоченные списки могут использоваться со списком определений. В приведенном выше примере первый элемент списка используется с упорядоченным списком, а второй элемент — с неупорядоченным списком. Код для примера приведен ниже.

            <DL>
            <DT>Optimist
            <DD><ul><li>A person who thinks a gloomy rainy day is a good chance to show off his umbrella</li></ul>
            <DT>Pessimist
            <DD><ul><li>A person who sees the sun shining brightly and thinks how hot and uncomfortable it is</li></ul>
            </DL>

            Список определений содержит еще два тега в дополнение к тегу.

            • — Это Срок
            • — это определение термина

            Вложенные списки

            Все три тега HTML-списка

              ,
                и
                могут использоваться вложенным образом в соответствии с вашими требованиями. Ниже приведен пример вложения двух упорядоченных и неупорядоченных списков:

                <UL>
                <LI>Cutting apples</LI>
                <LI>Making paper aeroplanes</LI>
                <UL>
                <LI>Turning chairs upside down</LI>
                <LI>Walking backwards</LI>
                </UL>
                <LI>Folding newspapers</LI>
                </UL>

                И результат в браузере должен быть таким, как показано ниже:

                • Нарезка яблок
                • Изготовление бумажных самолетиков
                  • Переворачивая стулья вверх ногами
                  • Ходьба назад
                • Складная газета

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *