Списки
(теги <ul>, <ol>, <li>, <dl>, <dt>, <dd>)
Для оформления списочной информации, такой как список литературы и
т.п., в HTML существуют три типа списков: маркированные, нумерованные
и списки определений.
Маркированные списки задаются при помощи тега <ul>, а нумерованные
– с помощью тега <ol>. Пункты обоих списков представляются тегом
<li>. Различия между этими списками, как следует из названия,
состоят в том, что в случае использования маркированного списка перед
каждым пунктом будет установлен маркер, в то время как пункты нумерованных
списков будут пронумерованы. Как для маркированных, так и для нумерованных
списков можно указывать тип маркера, так как номера в нумерованных списках
являются маркерами. В маркированных списках имеются три типа маркеров,
которые задаются с помощью атрибута type, принимающего следующие значения:
disc, circle и square. Браузерами они обычно (хотя и не обязательно)
отображаются следующим образом: disc – закрашенный кружок, circle –
незакрашенный кружок, square – закрашенный квадрат. По умолчанию атрибуту
type присваивается значение disc.
Далее следует пример маркированных списков с различными видами маркеров
– закрашенным кружком (по умолчанию); то же самое, но заданным в явном
виде; незакрашенным кружком и закрашенным квадратом, соответственно:
<ul>
<h3>Маркированный список</h3>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul type="disc">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul type="circle">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul type="square">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
Ниже представлены примеры нумерованных списков с различными маркерами:
<ol>
<h3>Нумерованный список</h3>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ol>
<ol type="a">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ol>
<ol type="A">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ol>
<ol type="I">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ol>
<ol type="I">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ol>
Списки HTML представляют собой структуры, которые допускают вложение
одной в другую:
<ul>
<h3>Пример вложенных списков</h3>
<li>Пункт 1</li>
<ol>
<li>Пункт 1.1</li>
<li>Пункт 1.2</li>
</ol>
<li>Пункт 2</li>
<ol type="i">
<li>Пункт 2.1</li>
<li>Пункт 2.2</li>
<li>Пункт 2.3</li>
</ol>
<li>Пункт 3</li>
<ol type="I">
<li>Пункт 3.1</li>
</ol>
</ul>
Списки определений можно использовать в случае необходимости создания
некого подобия словаря: когда имеются определяемое понятие и его определение.
Они используются при размещении на веб-страницах всевозможных глоссариев.
Список определений задается с помощью тега <dl>. Определяемое
понятие заключается в тег <dt>, а его определение в тег <dd>:
<dl>
<h3>Список определений</h3>
<dt>Понятие 1</dt>
<dd>Определение понятия 1</dd>
<dt>Понятие 2</dt>
<dd>Определение понятия 2</dd>
</dl>
|
