18:51
Александр
HTML список
Нумерованные списки html
Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы.
Чтобы указать браузеру, что список будет нумерованным, используются теги <ol></ol>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.
Пример кода для нумерованного списка:
<html>
<head>
<title>html списки</title>
</head>
<body>
<ol>
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ol>
</body>
</html>
- кошки
- собаки
- лошади
- type="A" - нумерация заглавными латинскими буквами (A, B, C).
- type="a" - нумерация прописными латинскими буквами (a, b, c).
- type="I" - нумерация большими римскими цифрами (I, II, III) .
- type="i" - нумерация маленькими римскими цифрами (i, ii, iii).
Пример кода с римскими цифрами:
<html>
<head>
<title>html списки</title>
</head>
<body>
<ol type="I">
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ol>
</body>
</html>
- кошки
- собаки
- лошади
Пример кода:
<html>
<head>
<title>html списки</title>
</head>
<body>
<ol type="I" start="3">
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ol>
</body>
</html>
- кошки
- собаки
- лошади
Пример кода:
<html>
<head>
<title>html списки</title>
</head>
<body>
<ol>
<li>красный</li>
<li>оранжевый</li>
<li>желтый</li>
<br>...............
<li value="7">фиолетовый</li>
</ol>
</body>
</html>
- красный
- оранжевый
- желтый
- фиолетовый
...............
Маркированные списки
В маркированном списке вместо букв и цифр используются маркеры. Чтобы указать браузеру, что список будет маркированным, используются теги <ul></ul>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.
Пример кода для маркированного списка:
<html>
<head>
<title>html маркированные списки</title>
</head>
<body>
<ul>
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ul>
</body>
</html>
- кошки
- собаки
- лошади
- type="disc" - закрашенный кружочек.
- type="circle" - пустой кружочек.
- type="square" - закрашенный квадратик.
Пример кода для маркированных списков:
<html>
<head>
<title>html маркированные списки</title>
</head>
<body>
<ul type="disc">
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ul>
<ul type="circle">
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ul>
<ul type="square">
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ul>
</body>
</html>
- кошки
- собаки
- лошади
- кошки
- собаки
- лошади
- кошки
- собаки
- лошади
Списки определений
Таки списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение. Чтобы указать браузеру, что будет список определений, используются теги <dl></dl>. Каждый термин заключается в теги <dt></dt>, а их определения - в теги <dd></dd>.
Пример кода списка определений:
<html>
<head>
<title>Списки определений</title>
</head>
<body>
<dl>
<dt>Термин 1</dt>
<dd>Определение термина 1</dd>
<dt>Термин 2</dt>
<dd>Определение термина 2</dd>
</dl>
</body>
</html>
Вложенные списки
Бывают ситуации, когда в элемент списка необходимо включить свой список. Такие списки называются многоуровневыми или вложенными. Для этого используется комбинация уже известных нам тегов списков.
Пример кода многоуровневого списка:
<html>
<head>
<title>Вложенные списки</title>
</head>
<body>
<ul>
<li>Животные
<ol>
<li>кошки</li>
<li>собаки</li>
</ol>
</li>
<li>Растения
<ol>
<li>деревья</li>
<li>цветы</li>
</ol>
</li>
</ul>
</body>
</html>
0 коментарі:
Отправить комментарий