Списки в HTML

1.1 Виды списков

Списки в HTML являются важным инструментом для организации и структурирования информации. Они позволяют отображать элементы с числами или с жирными точками (маркерами). Рассмотрим подробно каждый из элементов списков в HTML: <ul>, <ol> и <li>.

Ненумерованные списки <ul>

Тег <ul> используется для создания ненумерованных (маркированных) списков. Элементы списка отображаются с маркерами (точками, кружками, квадратами).

Пример:

    
      <ul>
        <li>Первый элемент списка</li>
        <li>Второй элемент списка</li>
        <li>Третий элемент списка</li>
      </ul>
    
  

Нумерованные списки <ol>

Тег <ol> используется для создания нумерованных списков. Элементы списка отображаются с числами или буквами.

Пример:

    
      <ol>
        <li>Первый элемент списка</li>
        <li>Второй элемент списка</li>
        <li>Третий элемент списка</li>
      </ol>
    
  

1.2 Элементы списка <li>

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

Как легко запомнить эти теги:

• Ordered List – упорядоченный (пронумерованный) список
• Unordered List – неупорядоченный (непронумерованный) список
• List Item – элемент списка

Атрибут type

Этот атрибут можно использовать внутри <ul> и <ol> для изменения типа маркеров или нумерации. Например, для <ol> можно использовать значения "1", "A", "a", "I", "i", а для <ul> - "disc", "circle", "square".

Пример изменения типа маркера для <ul>:

    
      <ul type="square">
        <li>Первый элемент списка</li>
        <li>Второй элемент списка</li>
      </ul>
    
  

Пример изменения типа нумерации для <ol>:

    
      <ol type="A">
        <li>Первый элемент списка</li>
        <li>Второй элемент списка</li>
      </ol>
    
  

Атрибут start:

Этот атрибут используется только с <ol> для указания начального числа нумерации.

Например:

    
      <ol start="5">
        <li>Пятый элемент списка</li>
        <li>Шестой элемент списка</li>
      </ol>
    
  

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

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

Пример вложенного списка:

    
      <ul>
        <li>Первый элемент списка</li>
          <ul type="circle">
            <li>Вложенный первый элемент</li>
            <li>Вложенный второй элемент</li>
          </ul>
        <li>Второй элемент списка</li>
        <li>Третий элемент списка</li>
      </ul>
    
  

1.3 Стилизация списков

Списки можно стилизовать с помощью CSS, изменяя цвет маркеров, типы маркеров и отступы.

Пример стилизации:

    
      ul.custom-list {
        list-style-type: katakana; /* Японская слоговая азбука */
        color: blue; /* Цвет текста */
      }

      ol.custom-list {
        list-style-type: hiragana-iroha; /* Японская система упорядочения */
        color: green; /* Цвет текста */
      }
    
  

    
      <ul class="custom-list">
        <li>Первый элемент списка</li>
        <li>Второй элемент списка</li>
      </ul>

      <ol class="custom-list">
        <li>Первый элемент списка</li>
        <li>Второй элемент списка</li>
      </ol>
    
  

Таким образом, использование <ul>, <ol> и <li> помогает cтруктурировать контент и улучшает его читаемость на веб-страницах.

1

Задача

Модуль 1: Web Core, 3 уровень, 0 лекция

Недоступна

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

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

Открыть

1

Задача

Модуль 1: Web Core, 3 уровень, 0 лекция

Недоступна

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

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

Открыть