smsc banner 468x60smsc banner 728x90smsc banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180

Руководство по спискам в HTML

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

  • Неупорядоченные списки (ul, сокращенно от unordered lists) — список элементов, где каждый элемент списка помечен маркером;
  • Упорядоченные списки (ol, сокращенно от ordered lists) — список элементов, где каждый элемент списка помечен номером;
  • Список определений (dl, сокращенно от definition list) — список элементов с описанием каждого элемента.

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

Теперь рассмотрим списки по очереди.

Использование HTML-тега <ul>

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

Элементы списка в неупорядоченных списках отмечены маркерами. Вот пример:

<ul>
    <li>Chocolate Cake</li>
    <li>Black Forest Cake</li>
    <li>Pineapple Cake</li>
</ul>

Результат вышеприведенного примера будет выглядеть примерно так:

  • Chocolate Cake
  • Black Forest Cake
  • Pineapple Cake

Вы также можете изменить тип маркера в неупорядоченном списке, используя CSS-свойство list-style-type. Следующее правило изменяет тип маркера с диска по умолчанию на квадрат:

ul {
    list-style-type: square;
}

См. Руководство по спискам в CSS, чтобы узнать подробнее о стилизации списков HTML.

Использование HTML-тега <ol>

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

Элементы списка в упорядоченном списке отмечены номерами. Вот пример:

<ol>
    <li>Fasten your seatbelt</li>
    <li>Starts the car's engine</li>
    <li>Look around and go</li>
</ol>

Результат вышеприведенного примера будет выглядеть примерно так:

  1. Fasten your seatbelt
  2. Starts the car’s engine
  3. Look around и go

Нумерация элементов в упорядоченном списке обычно начинается с 1. Однако, если вы хотите изменить это, вы можете использовать атрибут start, как показано в следующем примере:

<ol start="10">
    <li>Mix ingredients</li>
    <li>Bake in oven for an hour</li>
    <li>Allow to stand for ten minutes</li>
</ol>

Результат вышеприведенного примера будет выглядеть примерно так:

  1. Mix ingredients
  2. Bake in oven for an hour
  3. Allow to stи for ten minutes

Как и неупорядоченный список, вы можете использовать CSS-свойство list-style-type для изменения типа нумерации в упорядоченном списке. Следующее правило меняет тип маркера на римские цифры.

ol {
    list-style-type: upper-roman;
}

Вы также можете использовать атрибут type для изменения типа нумерации, например, type="I". Однако вам следует избегать этого атрибута, вместо этого используйте CSS-свойство list-style-type.

Использование HTML-тега <dl>

Список описаний — это список элементов с описанием или определением каждого элемента.

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

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

<dl>
    <dt>Bread</dt>
    <dd>A baked food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>

Результат вышеприведенного примера будет выглядеть примерно так:

Bread
A baked food made of flour.
Coffee
A drink made from roasted coffee beans.
kwork banner 480x320kwork banner 728x90kwork banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…
Подробнее

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…
Подробнее

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…
Подробнее