Урок html 4. Списки

Урок 4. Списки

Любой текст становиться более наглядный и понятный когда в нем есть блок-схемы, таблицы, рисунки, списки. Сегодня поговорим про списки. В HTML списки могут быть 3х видов: маркированные списки, нумерованные списки, списки определений. Списки — очень гибкий механизм. Очень часто именно списками делаются меню, подменю, выпадающие списки, горизонтальные меню, и много других интересных фишек. Гораздо чаще списки используются именно не в классическом их варианте. Но сегодня мы поговорим о классическом представлении списков в тексте.

Маркированные списки

Самое простое, что можно придумать – простой маркированный список для перечислений. Для создания маркированных списков в HTML используется тег <ul>. Для создания элемента – используется тег <li>. Теги являются парными, не забывайте, что их нужно закрывать. У этих списков есть настройки. В css много настроек для списков, даже можно элементы располагать не в столбик, а в строку, что и используется при создании горизонтальных меню. Но пока мы не затрагиваем css. В HTML можно изменить вид маркера перед строкой. По умолчанию для разных уровней вложенности тип маркера разный (списки в списке).

Пример:

HTML:

<ul>
  <li>Элемент один</li>
  <li>Элемент два</li>
  <li>Элемент три
  <ul>
    <li>Подэлемент один</li>
    <li>Подэлемент два</li>
  </ul></li>
</ul>

Результат:

  • Элемент один
  • Элемент два
  • Элемент три
    • Подэлемент один
    • Подэлемент два

Атрибуты и значения

<ul type=“disc | circle | square“>…</ul> – тип маркера списка

<li type=“disc | circle | square“>…</li> – тип маркера для данного элемента

disc – заштрихованный кружок
circle – выколотый кружок
square — квадрат

Так же могут быть применены стандартные атрибуты, например style, class, id,…

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

Нумерованные списки, как и маркированные, делают наш текст интересней, красивее. Не нужно вручную проставлять номера пунктов. Для создания маркированных списков в HTML используется тег <ol>. Для создания элемента – используется тег <li>. Для нумерованных списков настроек чуть больше.

Пример:

HTML:

<ol>
  <li>Строка один</li>
  <li>Строка два</li>
  <li>Строка три
  <ol>
    <li>Подстрока один</li>
    <li>Подстрока два</li>
  </ol></li>
</ol>

Результат:

  1. Строка один
  2. Строка два
  3. Строка три
    1. Подстрока один
    2. Подстрока два

Атрибуты и значения

<ol reversed>…</ol> – нумерация будет в обратном порядке

<ol start=”10”>…</ol> – начать нумерацию с этого значения

<ol type=”A | a | I | i | 1”>…</ol> – тип маркера списка
A – нумерация заглавными латинскими буквами (A, B, C…)
a – нумерация маленькими латинскими буквами (a, b, c…)
I – нумерация заглавными римскими цифрами (I, II, III…)
i – нумерация заглавными римскими цифрами (i, ii, iii…)
1 – нумерация арабскими цифрами (1, 2, 3…)

<li value=”10”>…</li> – назначить элементу номер, следующие элементы будут пересчитаны от этого значения

Так же могут быть применены стандартные атрибуты, например style, class, id,…

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

Список определений используется редко. Суть его в том, что мы добавляем термины и для каждого термина добавляем несколько определений. Обычно используется для составления описаний (определений) для каких-либо терминов. Для создания маркированных списков в HTML используется тег <dl>. Для создания термина используется тег <dt>. Для создания определения используется тег <dd>.

Пример:

HTML:

<dl>
  <dt>Основа 1</dt>
    <dd>Элемент основы один</dd>
  <dt>Основа 2</dt>
    <dd>Элемент основы один</dd>
    <dd>Элемент основы два</dd>
    <dd>Элемент основы три</dd>
    <dd>Элемент основы четыре</dd>
</dl>

Результат:

Основа 1
Элемент основы один
Основа 2
Элемент основы один
Элемент основы два
Элемент основы три
Элемент основы четыре

Списки делают наш текст красивым, удобным для восприятия. Используйте этот механизм в меру. В последующих уроках мы познакомимся с css, вы увидите, что с помощью стилей со списками можно творить чудеса. Всем успехов!

2 Ответов
  1. Андрей приветствую! Мне кажется удобнее пользоваться визуальным редактором, по крайней мере мне. Хотя там бывает мало функционала

    1. Да Михаил, в некоторых случаях можно и визуальным редактором обойтись. Но в большинстве случаев никто не создает сайты на HTML. Для этого есть хорошие готовые движки типа WordPress. Если нужно залезть в шаблон и поменять цвет кнопок или что-то в этом духе — визуальный редактор вряд ли спасёт.

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.