belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

2.6. Использование списков. Вложенные списки.
Теги <ol>, <ul>, <li>, <dl>, <dt>, <dd>, <menu>

В HTML 5 используется три вида списков: нумерованный, маркированный и список определения.

Нумерованный список формируется парным тегом <ol> (от англ. ordered list). Сам элемент 'ol' используется, как контейнер для пунктов списка, которые формируются парными тегами <li> и располагаются друг за другом.

По умолчанию пункты списка нумеруются браузером по порядку, начиная с единицы. Если нумерацию нужно начать не с единицы, то используется атрибут start, который задает число, с которого будет начинаться нумерованный список. В качестве значения атрибут принимает целые числа. Можно также изменить порядок нумерации на обратный. Для этого служит атрибут reversed, который используется без значений. Атрибут введен в HTML 5 и работает во всех браузерах, кроме IE.

Имеется также возможность устанавливать вид маркера нумерованного списка. Для этого используется атрибут type, который может принимать значения "A | a | I | i | 1", которые, соответственно, означают:

Поскольку все перечисленные значения, и не только, могут быть с легкостью установлены через стили CSS, использование атрибута type, по мнению автора, не целесообразно, хотя и допускается в HTML 5.

Использование нумерованного списка показано в примере 2.10.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Нумерованный список</title>
</head>
<body>
	<em style="color: green">Весенние месяцы по порядку:</em>
	
	<ol start="3" title="Весенние месяцы">
		<li>март</li>
		<li>апрель</li>
		<li>май</li>
	</ol>
	
	<em style="color: red">Летние месяцы в обратном порядке:</em>
	
	<!-- Перечисляем в обратном порядке. В IE не работает! -->
	<ol start="8" reversed>
		<li>август</li>
		<li>июль</li>
		<li>июнь</li>
	</ol>
</body>
</html>

Пример 2.10. Использование элемента 'ol'

Кстати, браузеры отображают все списки как блочные элементы, поэтому при отображении примера отчетливо видны вертикальные отступы. Попробуйте набрать код самостоятельно, задайте спискам желтый фон и посмотрите результат.

Маркированный список формируется парным тегом <ul> (от англ. unordered list). Сам элемент 'ul' используется, как контейнер для пунктов списка, которые формируются, как и в случае с нумерованными списками, парными тегами <li> и располагаются друг за другом.

Маркированный список вместо цифр и букв использует маркеры в виде кружков. Изменить внешний вид маркеров можно при помощи стилей CSS. Что касается атрибута type, то его в HTML 5 убрали. Так что, остались только универсальные атрибуты и атрибуты-события.

Код, содержащий элемент 'ul', показан в примере 2.11.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Маркированный список</title>
</head>
<body>
	<em style="color: green">Весенние месяцы:</em>
	<!-- Задаем фон, чтобы визуально увидеть область,  
	занимаемую списком, как блочным элементом -->
	<ul style="background-color: yellow">
		<li>март</li>
		<li>апрель</li>
		<li>май</li>
	</ul>
</body>
</html>

Пример 2.11. Использование элемента 'ul'

Список определений формируется парным тегом <dl> (от англ. definition list). Сам элемент 'dl' используется, как контейнер для пунктов списка. Каждый такой пункт, в свою очередь, состоит из элементов 'dt' (от англ. definition term) и 'dd' (от англ. definition description), сформированных, соответственно, парными тегами <dt> и <dd>. Первый из них содержит определяемый термин, а второй – определение термина.

Давайте для наглядности посмотрим пример 2.12.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Список определений</title>
</head>
<body>
		
	<dl title="Список из двух определений">
		<dt>HTML</dt>
			<dd>Стандартный язык гипертекстовой разметки веб-документов, <br>
			который повсеместно используется во Всемирной паутине.</dd>
		
		<dt>CSS</dt>
			<dd>Формальный язык описания внешнего вида документа, <br>
			написанного с использованием языка разметки.</dd>
	</dl>
</body>
</html>

Пример 2.12. Использование элемента 'dl'

Иногда возникает необходимость создания вложенных списков, которые представляют собою списки, расположенные в пунктах внешнего списка. Рассмотрим создание вложенных списков на примере 2.13.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Вложенные списки</title>
</head>
<body>
	<!-- Пусть будет нумерованный список -->	
	<ol>
		<!-- В каждый пункт помещаем новый список -->
		<li>Три сорта яблок:
			<ul>
				<li>Антоновка,</li>
				<li>Штрефель,</li>
				<li>Кубань.</li>
			</ul>
		</li>
		<!-- А сюда поместим нумерованный список -->
		<li>Три сорта груш:
			<ol>
				<li>Чижовская,</li>
				<li>Вильямс,</li>
				<li>Дюшес.</li>
			</ol>
		</li>
	</ol>
</body>
</html>	

Пример 2.13. Использование вложенных списков

Как видим, создавать вложенные списки совсем не трудно. Для этого нужно внимательно между открывающим тегом <li> и закрывающим тегом </li> для нумерованных и маркированных списков расположить вложенный список требуемого вида. Что касается списков определений, то вложенный список следует располагать между открывающим тегом <dd> и закрывающим тегом </dd>. Это может понадобиться, например, если нужно дать термину несколько определений.

Контрольные вопросы и задания

  1. Что такое нумерованный список? Опишите его структуру.
  2. Что такое маркированный список? Опишите его структуру.
  3. Что такое список определений? Опишите его структуру.
  4. Как создаются вложенные списки? Напишите пример кода.

Словарь новых английских слов

word [wə:d] – слово.
break [breɪk] – разрыв, прекратить.
opportunity [,ɔpə'tju:niti] – возможность,
удобный случай.
division [di'viʒən] – раздел, разделение.
bold [bəuld] – жирный.
italic [i'tælik] – курсив, наклонный.
underline [ˌʌndəˈlaɪn] – подчеркнуть.
strike out [strʌɪk ˈaut] – вычеркивать.
subscript [ˈsʌbskrɪpt] – нижний индекс.
superscript [ˈsuːpəskrɪpt] – верхний индекс.
emphasis [ˈɛmfəsɪs] – акцент, выделение.
strong [strɔɳ] – сильный, прочный.
variable ['vɛəriəbl] – переменная.
sample ['sa:mpl] – образец.
definition [defi'ni∫ən] – определение.
quote [kwəut] – цитата.
insert [ɪnˈsɜːt] – вставлять.
reversed [rɪˈvɜːst] – перевернутый, обратный.
ordered [ˈɔːdəd] – упорядоченный, нумерованный (список).
unordered [ʌnˈɔːdəd] – маркированный (список).
description [dis'krip∫ən] – описание.
row [rou] – строка, ряд.
column ['kɔləm] – столбец, колонка.
cell [cel] – ячейка, элемент, клетка.
table ['teibl] – таблица, стол.
row span – диапазон строк.
column span – диапазон столбцов.
self [self] – сам.
parent ['pɛərənt] – родитель.
blank [blæɳk] – чистый, пустой, бланк.
anchor ['æɳkə] – якорь, привязка.
link [link] – связь, ссылка.
foot [fut] – нижнее поле, ступня.
header ['hedə] – заголовок, верхний колонтитул.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх