Список описаний | WebReference
Список описаний или список определений, как он ещё называется, состоит из двух частей — термина и его определения. Сам список задаётся с помощью элемента <dl> (от англ. Description List — список описаний), термин — <dt> (от англ. Definition Term — термин), а его определение — с помощью элемента <dd> (от англ. Description — описание). Вложение элементов для создания списка описаний продемонстрировано в примере 1.
Пример 1. Общая структура списка описаний
<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
</dl>Список описаний хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т. д. В примере 2 показан один из возможных вариантов применения этого вида списка.
Пример 2. Создание списка описаний
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Список определений</title> </head> <body> <dl> <dt>Сепульки</dt> <dd>Важный элемент цивилизации ардритов с планеты Энтеропия.</dd> <dt>Сепулькарии</dt> <dd>Устройства для сепуления.</dd> <dt>Сепуление</dt> <dd>Занятие ардритов с планеты Энтеропия.</dd> </dl> </body> </html>
Результат примера показан на рис. 2.
Рис. 2. Вид списка описаний
Как видно на картинке, текст термина прижимается к левому краю окна браузера, а его определение сдвигается вправо. Можно изменить вид представления списка, расположив термин и определение на одной строке (пример 3).
Пример 3. Горизонтальный список
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список определений</title>
<style>
dt {
float: left; /* Выстраиваем по горизонтали */
width: 150px; /* Ширина термина */
overflow: hidden; /* Обрезаем длинную строку */
text-align: right; /* Выравниваем вправо */
text-overflow: ellipsis; /* Добавляем многоточие */
}
dd {
margin-left: 170px; /* Отступ слева */
margin-bottom: 5px; /* Расстояние между терминами */
}
</style>
</head>
<body>
<dl>
<dt>Сепульки</dt>
<dd>Важный элемент цивилизации ардритов с планеты Энтеропия.</dd>
<dt>Сепулькарии</dt>
<dd>Устройства для сепуления.</dd>
<dt>Сепуление</dt>
<dd>Занятие ардритов с планеты Энтеропия.</dd>
</dl>
</body>
</html> Результат данного примера показан на рис. 3. Расположение задаётся с помощью свойства float со значением left, под термин отводится ширина 150 пикселей и если слово не помещается, то оно будет обрезано и в конце добавлено многоточие.
Рис. 3. Горизонтальный список описаний
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.11.2015
Редакторы: Влад Мержевич
Вложенные (многоуровневые) списки. Список определений
Список определений
Списки определений — это особый тип структуризации информации, идеально подходящий для отображения толковых и терминологических словарей, а также справочников средствами html.
В отличие от нумерованных и маркированных списков, которые могут содержать по несколько элементов, расположенных друг за другом, элементы списка определений должны состоять из двух частей: самого определения (термина) и его содержательной части (описания).
Список определений создается с помощью тега <dl> (Definition List), внутри которого указывается тег <dt> (Definition Term), выделяющий термин, и тег <dd> (Definition Description), содержащий описание к данному термину:
<html>
<body>
<h5>Список определений:</h5>
<dl>
<dt>Кофе</dt><dd>Бодрящий горячий напиток</dd>
<dt>Молоко</dt><dd>Полезный холодный напиток</dd>
</dl>
</body>
</html>
Попробовать »Внутри элемента <dd> вы можете размещать абзацы, строки, изображения, ссылки, другие списки и т.д.
Вложенные списки
Часто информация имеет сложную разветвленную структуру, которую, с одной стороны, будет трудно отобразить в виде одного списка, с другой — невозможно разбить на несколько отдельных списков. В этом случае используются так называемые вложенные списки (список, вложенный в другой список).
Для создания вложенного списка, надо в родительский список поместить дочерний список так, чтобы все элементы дочернего списка были вложены в элемент <li> родительского списка:
<html>
<body>
<h5>Вложенный список:</h5>
<ul>
<li>Кофе</li>
<li>Чай
<ol>
<li>Черный чай</li>
<li>Зеленый чай</li>
</ol>
</li>
<li>Молоко</li>
</ul>
</body>
</html>
Попробовать »Таким образом можно создавать многоуровневые списки.
Примечание: обычно вложенный список отображается с небольшим отступом вправо от родительского списка.
С этой темой смотрят:
HTML теги. HTML списки. Списки определений.
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена спискам определений HTML. Список определений формируется тегами <dl>, <dd>, <dd>.
Список определений. Формирования списка определений в HTML. Теги <dl>, <dd>, <dt>.
Содержание статьи:
Как говорилось ранее, в списки определений формируются тремя тегами <dl>, <dd>, <dt>. Списки определений — это одна из разновидностей HTML списков.
Тег <dl> формирует сам список определений. HTML элемент <dl> является блочным элементом, для блочных HTML элементов характерно то, что их размеры, то есть, высота и ширина, зависят от области, в которой они стоят. Внутри блочных элементов могут любы HTML элементы. Но внутри элемента <dl> могут располагаться только элементы <dd> и <dt>.
Тег <dd>
Тег <dt> служит для записи термина, которому дается определение. Элемент <dt> строчный HTML элемент, то есть, его ширина и высота зависят от содержимого контейнера <dt>. Внутри элемента <dt> могут располагаться любые строчные HTML элементы.
Если к спискам определений не применяются дополнительные стили и правила CSS, то браузер отобразит их шрифтом, заданным по умолчанию, но, определение от термина будет сдвинуто на 40 пикселов вправо.
Синтаксис списка определений
Теги <dl>, <dd>, <dt> являются парными HTML тегами, то есть для их корректной работы необходим закрывающий тег, но, у тегов <dd> и <dt> можно закрывающий тег не писать, хотя это считается дурным тоном.
<dl> <dt>Первый термин</dt> <dd>Определение первого термина</dd> <dt>Второй термин</dt> <dd>Определение второго термина</dd> </dl>
<dl>
<dt>Первый термин</dt>
<dd>Определение первого термина</dd>
<dt>Второй термин</dt>
<dd>Определение второго термина</dd>
</dl> |
Атрибуты тегов списка определений
У тегов <dd>, <dt>, <dl> имеются только универсальные HTML атрибуты и атрибуты событий HTML
Другие HTML списки
Помимо списка определений. Есть еще четыре HTML списка:
Тег <li> во всех этих случаях служит для формирования элементов списка или его пунктов
Пример формирования списка определений
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Пример использования тега DT</title> </head> <body> <dl> <dt>HTML</dt> <dd>Язык разметки гипертекста. Стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. </dd> <dt>JavaScript</dt> <dd>Прототипно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript</dd> </dl> </body> </html>
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Пример использования тега DT</title> </head> <body> <dl> <dt>HTML</dt> <dd>Язык разметки гипертекста. Стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. </dd> <dt>JavaScript</dt> <dd>Прототипно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript</dd> </dl> </body> </html> |
Если вы скопируете пример в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:
На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru
Список определений
Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списков. В отличие от других типов списков каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка указывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина.
Списки определений задаются с помощью тега-контейнера <DL>. Внутри него тегом <DT> отмечается определяемый термин, а тегом <DD> – абзац с его определением. Внутри элемента <DT> нельзя использовать абзацы (P) и заголовки (h2-H6), но их можно использовать внутри элемента <DD>. Атрибутов для элементов списка определений нет. В общем случае список определений записывается следующим образом:
<DL>
<DT>Термин</DT>
<DD>Определение термина</DD>
</DL>
Пример использования списка определений:
<HTML>
<HEAD>
<TITLE>Пример списка определений</TITLE>
</HEAD>
<BODY>
<DL>
<h3 ALIGN=»CENTER»>Состав Microsoft Office</h3>
<DT>Microsoft Word</DT>
<DD>Многофункциональный текстовый процессор</DD>
<DT>Microsoft Excel</DT>
<DD>Программа для работы с электронными
таблицами</DD>
<DT>Microsoft Access</DT>
<DD>Система управления базами данных</DD>
</DL>
</BODY>
</HTML>
Этот пример отобразится в броузере так:
|
Форматирование текста
В языке HTML предусмотрены специальные теги, предназначенные для форматирования текста. Они позволяют изменять вид шрифта, цвет, раз-мер и др.
Чтобы отобразить текст полужирным шрифтом, используют тег <B>. Например:
<P>Это <B>полужирный</B> шрифт</P>
Тег <I> отображает текст курсивом. Например:
<P>Выделение <I>курсивом</I></P>
Используя тег <TT>, можно отобразить текст шрифтом, в котором все буквы имеют одинаковую ширину. Это так называемый моноширинный шрифт. Например:
<P>Это <TT>моноширинный</TT> шрифт</P>
Для отображения текста подчеркнутым используется тег <U>. Например:
<P>Пример <U>подчеркивания</U> текста</P>
Тег <S> отображает текст, перечеркнутый горизонтальной линией. Например:
<P>Пример <S>зачеркивания</S> текста</P>
Тег <BIG> выводит текст шрифтом большего (чем непомеченная часть текста) размера. Например:
<P>Шрифт <BIG>большего</BIG> размера</P>
Тег <SMALL> выводит текст шрифтом меньшего размера. Например:
<P>Шрифт <SMALL>меньшего</SMALL> размера</P>
Тег <SUB> сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:
<P>Шрифт <SUB>нижнего</SUB> индекса</P>
Тег <SUP> сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:
<P>Шрифт <SUP>верхнего</SUP> индекса</P>
Теги форматирования могут быть вложенными друг в друга. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере. Например:
<P>Этот текст <B><I>полужирный и
курсивный</I></B></P>
|
Вот так броузер отобразит приведенные выше примеры:
Тег <FONT>
Тег <FONT> позволяет изменить шрифт для блока текста. Этот тег имеет следующую спецификацию:
<FONT
FACE=»тип шрифта»
COLOR=»цвет шрифта»
SIZE=»размер шрифта»
>
Атрибут FACE служит для указания типа шрифта, которым броузер будет выводить текст (если такой шрифт имеется на компьютере). Значением данного атрибута служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющимся у пользователя. Если такой шрифт не найдется, то данное указание проигнорируется и будет использован шрифт, установленный по умолчанию.
Можно установить как один, так и несколько названий шрифтов, разделяя их запятыми. Тогда список шрифтов будет просматриваться слева направо так: если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий и т.д. Если ни одного шрифта найти не удалось, то будет использоваться шрифт, установленный броузером по умолчанию.
Атрибут COLOR устанавливает цвет шрифта. Значение этого атрибута может быть указано в формате RGB или символьной нотацией.
Атрибут SIZE служит для указания размера шрифта. Указывать размер шрифта можно двумя способами: абсолютной величиной или относительной величиной. При указании размера абсолютной величиной значением атрибута является число от 1 до 7. 1 – самый маленький шрифт, 7 – самый большой. При указании размера относительной величиной значением атрибута является число со знаком + или -. В данном случае шрифт будет увеличен (+) или уменьшен (-) от размера, принятого по умолчанию.
Пример использования тега <FONT>:
<HTML>
<HEAD>
<TITLE>Пример изменения шрифта</TITLE>
</HEAD>
<BODY>
<P>Шрифт по умолчанию<BR>
<FONT COLOR=»GREEN»>зеленый шрифт</FONT><BR>
<FONT FACE=»Arial»>другая форма шрифта</FONT><BR>
<FONT SIZE=»6″>размер шрифта – 6</FONT><BR>
<FONT SIZE=»+1″>размер увеличен на 1</FONT></P>
</BODY>
</HTML>
Этот пример отобразится так:
|
Список определений. HTML, XHTML и CSS на 100%
Список определений
Бывает, что на сайте нужно создать список терминов или словарь. Это особенно актуально для сайтов узкой направленности. Для создания подобных конструкций служит список определений.
Список определений – это особый вид списка, который применяется для форматирования словарей или когда необходимо пояснять значения терминов.
Особенность списка определений следует из его функций: элемент такого списка всегда состоит из двух частей. Первая часть задает определяемое слово, а вторая – описание или расшифровку термина. При этом форматирование производится таким образом, что описание термина отображается с отступом от края экрана и, возможно, с пропуском строки от определения.
Для организации списков определений служит элемент DL – внутри него будут находиться определение и описание термина. У этого элемента нет атрибутов, кроме стандартных style и class, с помощью которых к данному определению можно подключить стили.
Чтобы внести информацию внутрь элемента DL, нужно задать элементы DT и DD. Первый используется для того, чтобы задать определение; у него нет никаких особенных атрибутов.
Второй применяется для описания термина из элемента DT. Особых атрибутов в нем также не предусмотрено. Чтобы изменить вид информации, представленной в этом элементе, нужно использовать таблицы стилей.
В листинге 2.10 представлен пример создания списков определений.
Листинг 2.10. Списки определений
<html>
<head>
<title>Списки</title>
<body>
<dl>
<dt>Земля</dt>
<dd>Третья планета Солнечной системы</dd>
<dt>Марс</dt>
<dd>Четвертая планета Солнечной системы</dd>
</dl>
</body>
</html>
Результат работы кода из листинга 2.10 показан на рис. 2.10.
Рис. 2.10. Списки определений
На рис. 2.10 видны особенности форматирования списков определений; информацию в таком виде гораздо проще воспринимать.
Данный текст является ознакомительным фрагментом.Читать книгу целиком
Поделитесь на страничкеСледующая глава >
Списки в HTML, виды списков html // Вебшкола онлайн
В HTML используются упорядоченные, неупорядоченные списки и списки определений.
Пример
- Это первый пункт списка
- Это второй пункт списка
- Это третий пункт списка
Примеры
Неупорядоченный список
Упорядоченный список
Неупорядоченный списки
Неупорядоченный список — это перечень элементов. Элементы списка обозначаются буллетами (обычно черные закрашенные кружочки).
Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>:
<ul>
<li>Кофе</li>
<li>Чай</li>
</ul>
Вот как это будет выглядеть в браузере:
В пункты списка можно помещать параграфы, горизонтальные линии, изображения, ссылки, другие списки и т.д.
Упорядоченные списки
Упорядоченный список — это тоже перечень элементов. Элементы списка обозначаются числами.
Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Вот как это будет выглядеть в браузере:
- Coffee
- Milk
Список определений
Список определений — это не просто список элементов. Это список элементов с описанием каждого элемента.
Список определений начинается с тега <dl>.
Каждый элемент списка определений начинается с тега <dt>.
Каждое описание элемента списка начинается с тега <dd>.
<dl>
<dt>Кофе</dt>
<dd>Темный горячий напиток</dd>
<dt>Молоко</dt>
<dd>Белый прохладный напиток</dd>
</dl>
Вот как это будет выглядеть в браузере:
- Кофе
- Темный горячий напиток
- Молоко
- Белый прохладный напиток
Еще примеры
Виды упорядоченных списков
Различные виды упорядоченных списков.
Виды неупорядоченных списков
Вложенные списки
Пример демонстрирует, как вложить списки друг в друга.
Теги списков
| Тег | Описание |
|---|---|
| <ol> | Упорядоченный список |
| <ul> | Неупорядоченный список |
| <li> | Элемент списка |
| <dl> | Список определений |
| <dt> | Элемент списка определений |
| <dd> | Описание элемента в списке определений |
| <dir> | Устарело. Используйте тег <ul> |
| <menu> | Устарело. Используйте тег <ul> |
Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!
Практическая работа HTML списки
Создание списков
Практически ни одна Web-страница не обходится без использования списков. Со списками мы постоянно сталкиваемся в повседневной жизни. Это может быть список класса, список дел, которые нужно сделать в течение дня и т.д. Их применение оправдывается следующими преимуществами:
- они используются для объединения фрагментов информации в единую структуру;
- их удобно применять при описании сложных пошаговых процессов;
- они располагают информацию в стиле оглавления, пункты которого указывают на соответствующие разделы документа.
В языке HTML предусмотрен специальный набор тэгов для представления информации в виде списков следующих типов:
- маркированный;
- нумерованный;
- список определений.
I. Для создания маркированного (ненумерованного, неупорядоченного) списка используется тэг-контейнер <UL> (Unordered List – неупорядоченный список), внутри которого располагаются все элементы списка. Каждый элемент списка начинается тэгом <LI> (List Item — элемент списка).
Приведем пример HTML–документа с маркированным списком.
<HTML><HEAD><TITLE> Пример маркированного списка. </TITLE></HEAD><BODY><UL> <!— Начало списка. —><B> Знаки зодиака: </B><LI> Овен <!— Элементы списка.—><LI> Телец<LI> Близнецы<LI> Рак<LI> Лев<LI> Дева<LI> Весы<LI> Скорпион<LI> Стрелец<LI> Козерог<LI> Водолей<LI> Рыбы</UL> <!— Конец списка. —></BODY></HTML>Как видно из текста приведенного примера для тэга <LI> можно не записывать соответствующий ему закрывающий тэг </LI>. Отметим также, что кроме элементов списка между тэгами <UL> и </UL> могут располагаться другие элементы языка HTML. В приведенном примере таким элементом является текст, выделенный жирным шрифтом и выполняющий роль заголовка списка.
Тэг <UL> имеет параметр TYPE, задающий внешний вид маркера.
Замечание. Cледует помнить, что конкретный вид маркера будет зависеть от используемого браузера.
Перечислим возможные значения этого параметра:
- disc (значение по умолчанию) – маркеры отображаются закрашенными кружками;
- circle — маркеры отображаются не закрашенными кружками;
- square – маркеры отображаются закрашенными квадратиками.
Замечание.
1.При задании значений параметра TYPE используйте только маленькие буквы (регистр имеет значение)!
2.Если используются вложенные (о них разговор пойдет позже) маркированные списки, то на первом уровне по умолчанию используется значение disc, на втором – circle, на третьем и далее – square.
3.Параметр TYPE может использоваться с тэгом <LI> для задания внешнего вида отдельных маркеров.
Тег <UL> только указывает браузеру, что вся информация, располагаемая после него, отображается со сдвигом вправо. Тэги <LI>, указывающие на отдельные элементы списка, обеспечивают вывод стандартных маркеров элементов списка.
Если требуется построить список с маркером в виде графического изображения, то нужно отказаться от использования тэга <LI>! Достаточно вставить перед каждым элементом желательное графическое изображение и в конце каждой строки разместить тэг абзаца <P> или принудительного перевода строки <BR>. Таким образом, структура каждого элемента списка будет следующей:
Изменим предыдущий пример, взяв в качестве маркера графическое изображение:
Замечание. Обратите внимание на тот факт, что если мы используем тэг <IMG>, то нам доступны все его параметры, влияющие на изображение!
II. Для создания нумерованного списка следует использовать тэг–контейнер <OL> (Ordered List – упорядоченный список), внутри которого располагаются все элементы списка. Элементы нумерованного списка также начинаются с тэга <LI>.
<HTML><HEAD><TITLE> Пример маркированного списка. </TITLE></HEAD><BODY><OL> <!— Начало списка. —><B> Знаки зодиака: </B><LI> Сириус<LI> Канопус<LI> Арктур<LI> Альфа Центавра<LI> Вега<LI> Капелла <LI> Ригель<LI> Процион<LI> Ахернар<LI> Бета Центавра<LI> Бетельгейзе<LI> Альдебаран <BR>….<BR><LI VALUE = 58> Мицар <LI> Полярная</OL></BODY></HTML>Value используется для изменения нумерации внутри списка и, соответственно, может использоваться только в тэге <LI>.
Start – задает начальное значение нумерации тэга <OL> например: <OL START=5> В этом случае начальный номер элемента списка будет равен 5.
Type –применяется для задания вида списка и может принимать следующие значения (все буквы латинские):
- A– задает маркеры в виде прописных латинских букв;
- a – задает маркеры в виде строчных латинских букв;
- I – задает маркеры в виде больших римских цифр;
- i – задает маркеры в виде маленьких римских цифр;
- 1 – задает маркеры в виде арабских цифр.
По умолчанию всегда используется значение TYPE=1 (арабские цифры). Заметим, что после номера всегда выводится точка. Параметр TYPE может употребляться в тэге элемента списка <LI>.
III. Частным случаем списка является список определений. Списки определений задаются с помощью тэга–контейнера <DL> (Definition List — определение списка). Внутри тэга <DL> тэгом <DT>(Definition Term — определение термина) помечается определенный термин, а тэгом <DD>(Definition Description – задание описания) – абзац с его определением. Для тэгов <DT> и <DD> можно не записывать соответствующие закрывающие тэги. Таким образом, общий вид такого списка следующий:
<DL> <!— Начало списка. —>
<DT> Термин.
<DD> Его определение.
. . . . .
</DL> <!— Конец списка. —>
Замечание. В тексте после тэга <DT> не могут использоваться тэги абзаца <P> или заголовков <h2> — <H6>.
<HTML>
<HEAD>
<TITLE> Список определений. </TITLE>
</HEAD>
<BODY>
<DL> <h3 ALIGN=CENTER><B>Определения.</B><h3>
<DT> <CITE>Протокол </CITE>
<DD> это набор правил, определяющих способы передачи данных между компьютерами
в сети.
<DT> <CITE>Модем </CITE>
<DD> устройство, позволяющее передавать данные от одного компьютера к другому
по телефонным линиям.
</DL>
</BODY>