Урок №3: создание списков в HTML
Для привлекательного и правильного оформления списков лучше использовать теги. Некоторые новички создают списки, используя клавиши "пробел", "enter" и различные символы в качестве маркеров. Это серьезная ошибка, так как в некоторых браузерах, списки созданные таким образом, отображаются совсем не так, как задумано.
Существует три вида списков. В первом, перечисляемые пункты помечаются цифрами или буквами. Во втором случае, пункты помечаются маркерами. Третий вид предназначен для определений.
Нумерованные списки
- <ol> - парный тег, который задает начало нумерованного списка. Имеет параметр - type, который указывает, как будут нумероваться пункты данного списка, параметр имеет следующие значения:
-
i - маленькие римские цифры
-
I - большие римские цифры
-
а - маленькие английские буквы
-
А - большие английские буквы
Если параметр type не указывать, тогда по умолчанию будут использованы стандартные арабские цифры.
- <li> - парный тег, в который нужно обязательно брать каждый пункт из списка.
Для примера напишем код двух списков:
<ol>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ol>
<ol type="I">
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ol>
|
В браузере он примет такой вид:
- первый пункт
- второй пункт
- третий пункт
- первый пункт
- второй пункт
- третий пункт
|
Если использовать type="A", то нумерация пойдет латинскими буквами - A B C и т.д.
Маркированные списки
- <ul> - парный тег, который задает начало маркированного списка. Также каждый пункт необходимо брать в парный тег <li> и также имеет параметр - type, который указывает какими маркерами будут обозначены пункты данного списка, имеет следующие значения:
- square - левее расположен соответственный маркер
- disc - левее расположен соответственный маркер
- square - левее расположен соответственный маркер
Иногда возникает необходимость создавать список в списке. Давайте попробуем создать один из таких.
<ul>
<li>Первый пункт основного списка</li>
<ul type="circle">
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ul>
<li>Второй пункт основного списка</li>
<ul type="square">
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ul>
<li>Третий пункт основного списка</li>
</ul>
|
Вид в браузере получится такой:
- Первый пункт основного списка
- первый пункт
- второй пункт
- третий пункт
- Второй пункт основного списка
- первый пункт
- второй пункт
- третий пункт
- Третий пункт основного списка
|
Списки определений
Такие списки используют абсолютно другие теги. Конечно, такие списки редко используются, однако лучше с ними ознакомимся
- <dl> - парный тег, который задает начало списка определений
- <dt> - в этот парный тег берется термин, которому будет дано определение
- <dd> - в данном парном теге пишется определение
Пример списка определений:
<dl>
<dt>Сайт</dt>
<dd>
Совокупность нескольких веб-страниц, которые связаны между собой различными ссылками и объединены одним адресом, а также имеют общий дизайн - называется сайтом. Сайты бывают разные, в основном их делят на коммерческие(для рекламы и прибыли) и некоммерческие.
</dd>
<dt>Тег</dt>
<dd>
Тег — это элемент языка разметки гипертекста, который применяется для вставки и редактирования различных элементов веб-страницы.
</dd>
</dl>
|
Вид кода в браузере:
- Сайт
-
Совокупность нескольких веб-страниц, которые связаны между собой различными ссылками и объединены одним адресом, а также имеют общий дизайн - называется сайтом. Сайты бывают разные, в основном их делят на коммерческие(для рекламы и прибыли) и некоммерческие.
- Тег
-
Тег — это элемент языка разметки гипертекста, который применяется для вставки и редактирования различных элементов веб-страницы.
|
В результате видно, что термин находится с левой стороны браузера, а его определение расположено немного правее.
Кстати возможности оформления списков значительно расширяются, если использовать при работе с ними CSS: Списки в CSS
|
R598551293139
