Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ПРОЕКТ № 4 - пятница.docx
Скачиваний:
1
Добавлен:
27.08.2019
Размер:
1.19 Mб
Скачать

Урок 10. Создание списков.

Содержание урока:

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

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

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

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

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

Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы. Чтобы указать браузеру, что список будет нумерованным, используются теги <ol></ol>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>. Пример кода для нумерованного списка:

<html>

<head>

<title>html списки</title>

</head>

<body>

<ol>

<li>кошки</li>

<li>собаки</li>

<li>лошади</li>

</ol>

</body>

</html>

Результат:

  1. кошки

  2. собаки

  3. лошади

Как видите, по умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type: - 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>

Результат:

  1. кошки

  2. собаки

  3. лошади

Если нам нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите). Пример кода:

<html>

<head>

<title>html списки</title>

</head>

<body>

<ol type="I" start="3">

<li>кошки</li>

<li>собаки</li>

<li>лошади</li>

</ol>

</body>

</html>

Результат:

  1. кошки

  2. собаки

  3. лошади

У тега <li> можно задать параметр value, который позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов. Пример кода:

<html>

<head>

<title>html списки</title>

</head>

<body>

<ol>

<li>красный</li>

<li>оранжевый</li>

<li>желтый</li>

<br>...............

<li value="7">фиолетовый</li>

</ol>

</body>

</html>

Результат:

  1. красный

  2. оранжевый

  3. желтый

...............

  1. фиолетовый

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

В маркированном списке вместо букв и цифр используются маркеры. Чтобы указать браузеру, что список будет маркированным, используются теги <ul></ul>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>. Пример кода для маркированного списка:

<html>

<head>

<title>html маркированные списки</title>

</head>

<body>

<ul>

<li>кошки</li>

<li>собаки</li>

<li>лошади</li>

</ul>

</body>

</html>

Результат:

  • кошки

  • собаки

  • лошади

По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type: - 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>

Результат:

  • кошки

  • собаки

  • лошади

  • кошки

  • собаки

  • лошади

  • кошки

  • собаки

  • лошади

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.