|
Раздел 2.
Язык гипертекстовой разметки HTML. |
|
|
Списки.
- Маркированные списки
- Нумерованные списки
- Вложенные списки
- Списки определений
- Упражнение
Маркированные списки
Маркированные списки - это списки, в которых элементы списка
отмечаются маркерами.
Для установки маркированного списка используются теги <ul> и
<li>
Тег <ul> - unordered list (неупорядоченный список).
Тег <li> - list item (элемент списка)
Код, написанный таким образом
<ul>
<li> Книги </li>
<li> Электроника </li>
<li> CD и DVD </li>
</ul>
будет отображен на экране так:
Маркеры могут принимать один из трех видов: круг (по умолчанию),
окружность и квадрат. Для выбора типа маркера используется параметр
type=... тега <ul>.

С помощью CSS можно задать в качестве маркера любое изображение.
В этом случае следует помнить: при масштабировании текста при
просмотре в браузере стандартные маркеры масштабируются вместе с
ним, а изображения, используемые в качестве маркера, не
масштабируются.
Нумерованные списки
Нумерованные (или упорядоченные) списки представляют собой
списки из пронумерованных пунктов.
Для установки нумерованного списка используется тег <ol>
вместо <ul>
Тег <ol> - ordered list (упорядоченный список).
Самый простой список имеет следующий код:
<ol>
<li> Выйдете на станции метро
Войковская. </li>
<li> Сядьте на троллейбус 57
маршрута.</li>
<li> Выйдете на четвертой
остановке. </li>
<li> Перейдите дорогу. Я Вас
буду ждать у киоска.</li>
</ol>
На экране он отобразится так:
1.
Выйдете на станции метро Войковская.
2. Сядьте на троллейбус 57
маршрута.
3. Выйдете на четвертой
остановке.
4. Перейдите дорогу. Я Вас
буду ждать у киоска.
|
Вид и тип нумерации зависит от параметров тега <ol>
Код HTML |
Отображение на экране |
<ol start="5">
|
Список
начинающийся с пяти:
5. Желтый
6. Синий
7. Красный
|
<ol type="A">
|
Заглавные
латинские буквы:
- Желтый
- Синий
- Красный
|
<ol type="a">
|
Прописные
латинские буквы:
- Желтый
- Синий
- Красный
|
<ol type="I">
|
Cписок с
римскими буквами:
- Желтый
- Синий
- Красный
|
Вложенные списки
Вложенный список - это список, размещенный внутри другого
списка.
Например, код
<ol>
<li> Крупные города России:
<ul type="square">
<li> Москва
<li> Санкт-Петербург
</ul>
<li> Крупные города Украины:
<ul type="square">
<li> Киев
</ul>
</ol>
отобразится на экране так:
- Крупные города
России:
- Крупные города
Украины:
|
Списки определений
Списки определений являются способом определения терминов и
понятий. Списки определений состоят из трех элементов: элемента
списка определений <dl> ... </dl>, элемента определения
термина <dt> ... </dt>, элемента определения описания <dd>
... </dd>.
Код примера
<dl>
<dt>Пиксель</dt>
<dd>Элементарная цветная
точка, совокупность которых образует изображение.</dd>
<dt>Экспозиция</dt>
<dd>Количественная мера
световой энергии, падающая на светочувствительный
элемент.</dd>
<dt>Диафрагма</dt>
<dd>Параметр, регулирующий
количество света, который освещает матрицу.</dd>
</dl>
отобразится в браузере так:
- Пиксель
- Элементарная
цветная точка,
совокупность которых
образует
изображение.
- Экспозиция
- Количественная
мера световой
энергии, падающая на
светочувствительный
элемент.
- Диафрагма
- Параметр,
регулирующий
количество света,
который освещает
матрицу.
|
Упражнение
Создайте по образу скриншота
html-документ с соблюдением всех элементов оформления списков.
©
Васильева Ю.В. Электронное приложение "Уроки сайтостроения"
© 2012 год. При использовании материалов обязательна ссылка на владельца
|