Модуль: Введение в HTML


8. Списки в HTML


В HTML существует два основных типа списков: упорядоченные и неупорядоченные. Каждый из них имеет свои особенности и предназначение.

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

Неупорядоченные списки используются для представления элементов, где порядок не имеет значения. Каждый элемент списка обозначается маркером (обычно точкой или кружком).
  • Тег: <ul> (unordered list)
  • Элементы списка: <li> (list item)
Пример
<ul>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ul>		 Результат
  • Первый элемент
  • Второй элемент
  • Третий элемент
 

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

Упорядоченные списки используются для представления элементов, где порядок имеет значение (например, шаги в инструкции). Каждый элемент списка обозначается номером.
  • Тег: <ol> (ordered list)
  • Элементы списка: <li> (list item)
Пример
<ol>
    <li>Первый шаг</li>
    <li>Второй шаг</li>
    <li>Третий шаг</li>
</ol>		 Результат
  1. Первый шаг
  2. Второй шаг
  3. Третий шаг
 

3. Смешанные (вложенные) списки

Можно создавать вложенные списки, комбинируя упорядоченные и неупорядоченные списки.
Пример
<ol>
    <li>Первый шаг
        <ul>
            <li>Подшаг A</li>
            <li>Подшаг B</li>
        </ul>
    </li>
    <li>Второй шаг</li>
</ol>		 Результат
  1. Первый шаг        
    • Подшаг A
    • Подшаг B
  2. Второй шаг

Примечение
В HTML вложенные списки должны быть полностью содержаться внутри родительского элемента <li>.
Это означает, что тег <ul> для вложенного списка должен находиться внутри тега <li>, а не на одном уровне с ним.

Атрибуты списков

Атрибуты списков в HTML влияют на их внешний вид и поведение. 

Атрибут type у тегов <ul> и <ol> определяет вид маркера или нумерации.
  • Для <ul>:
    • type="disc": круглый маркер (по умолчанию).
    • type="circle": пустой круг.
    • type="square": квадратный маркер.
  • Для <ol>:
    • type="1": арабские цифры (по умолчанию).
    • type="A": заглавные буквы.
    • type="a": строчные буквы.
    • type="I": большие римские цифры.
    • type="i": маленькие римские цифры.

Начальное значение:
  • Атрибут start у тега <ol> позволяет задать начальное значение для нумерации списка. Например, start="3" начнет нумерацию с 3.

Примеры
<ol type="A">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
</ol>		 Результат
  1. Первый элемент
  2. Второй элемент
<ol start="5">
    <li>Пятый элемент</li>
    <li>Шестой элемент</li>
</ol>		 Результат
  1. Пятый элемент
  2. Шестой элемент
<ul type="square">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
</ul>		 Результат
  • Первый элемент
  • Второй элемент
 

time 1000 ms
memory 256 Mb

Комментарий учителя

     

Обсуждения (0)
Пропустить Навигационные Ссылки.
Чтобы оставить комментарий нужна авторизация
Решения (0)

Решения:

Нет доступных решений