Html список определений: Список определений | htmlbook.ru — Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Содержание

Список определений | htmlbook.ru

Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера <dl>, термин — тегом <dt>, а его определение — с помощью тега <dd>. Вложение тегов для создания списка определений продемонстрировано в примере 11.5.

Пример 11.5. Общая структура списка определений

<dl>
  <dt>Термин 1</dt>
    <dd>Определение 1</dd>
  <dt>Термин 2</dt>
    <dd>Определение 2</dd>
</dl>

Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д. В примере 11.6 показано одно из возможных использований этого вида списка.

Пример 11.6. Создание списка определений

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Список определений</title>
 </head>
 <body>
  <dl>
   <dt>Тег</dt>
     <dd>Тег — это специальный символ разметки, который применяется для 
         вставки различных элементов на веб-страницу таких как: рисунки, 
         таблицы, ссылки и др., и для изменения их вида.</dd>
   <dt>HTML-документ</dt>
     <dd>Обычный текстовый файл, который может содержать в себе текст, 
         теги и стили. Изображения и другие объекты хранятся отдельно. 
         Содержимое такого файла обычно называется HTML-код.</dd>
   <dt>Сайт</dt>
   <dd>Cайт — это набор отдельных веб-страниц, которые связаны между собой 
         ссылками и единым оформлением.</dd>
  </dl>
 </body>
</html>

Результат примера показан на рис. 11.5.

Рис. 11.5. Вид списка определений

Как видно на картинке, текст термина прижимается к левому краю окна браузера, а его определение сдвигается вправо.

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	2.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <dl> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина.

Синтаксис

<dl>
  <dt>Термин 1</dt>
   <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
   <dd>Определение термина 2</dd>
</dl>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список определений</title>
  <style>
   dd {
    font-style: italic; /* Курсивное начертание текста */
   }
   dt {
    margin-top: 1em; /* Отступ сверху */
   }
  </style>
 </head>
 <body> 

 <dl>
  <dt>GIF</dt>
  <dd>Формат графических файлов, широко применяемый при создании сайтов. 
   GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, 
   при этом сохраняя детали изображения.</dd>
  <dt>JPEG</dt>
  <dd>Популярный формат графических файлов, широко применямый при создании 
  сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет 
  яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, 
  поскольку алгоритм JPEG выборочно отвергает данные.
  Метод сжатия может исказить 
  деталь в рисунке, особенно содержащий текст или изображение с четкими краями. 
  Формат JPEG не поддерживает прозрачность, когда вы сохраняете фотографию в формате 
  JPEG, прозрачные пиксели заполняются определенным цветом.</dd>
 </dl>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид списка определений

Основы работы с HTML — тест 5

Главная / Интернет-технологии / Основы работы с HTML / Тест 5
Упражнение 1:

Номер 1

Каким тегом начинается неупорядоченный список?

Ответ:

&nbsp(1) <UL> &nbsp

&nbsp(2) <DD> &nbsp

&nbsp(3) <DT> &nbsp

Номер 2

Каким тегом начинается упорядоченный список?

Ответ:

&nbsp(1)

<DD> &nbsp

&nbsp(2) <DT> &nbsp

&nbsp(3) <OL> &nbsp

Номер 3

Какой тег определяет термин?

Ответ:

&nbsp(1) <OL> &nbsp

&nbsp(2) <DL> &nbsp

&nbsp

(3) <DT> &nbsp

Упражнение 2:

Номер 1

В каком примере упорядоченный список вложен в неупорядоченный список?

Ответ:

&nbsp(1) <UL> <LI> А <LI> Б <OL> <LI> В <LI> Г </OL> </UL> &nbsp

&nbsp(2) <OL> <LI> А <LI> Б <UL> <LI> В <LI> Г </UL> </OL> &nbsp

&nbsp(3) <DL> <DT>А <DD>Б <UL> <LI>В <LI>Г </UL> </DL> &nbsp

Номер 2

В каком примере неупорядоченный список вложен в упорядоченный список?

Ответ:

&nbsp(1) <UL> <LI> А <LI> Б <OL> <LI> В <LI> Г </OL> </UL> &nbsp

&nbsp(2) <OL> <LI> А <LI> Б <UL> <LI> В <LI> Г </UL> </OL> &nbsp

&nbsp(3) <DL> <DT> А <DD> Б <UL> <LI> В <LI> Г </UL> </DL> &nbsp

Номер 3

В каком примере список определений является вложенным?

Ответ:

&nbsp(1) <UL> <LI> А <LI> Б <OL> <LI> В <LI> Г </OL> </UL> &nbsp

&nbsp(2) <OL> <LI> А <LI> Б <UL> <LI> В <LI> Г </UL> </OL> &nbsp

&nbsp(3) <OL> <LI> А <LI> Б <DL> <DT> В <DD> Г </DL> </OL> &nbsp

Упражнение 3:

Номер 1

В каких примерах элементы неупорядоченного списка маркируются кругами?

Ответ:

&nbsp(1) <UL type="disc"> &nbsp

&nbsp(2) <OL type="disc"> &nbsp

&nbsp(3) <DL type="disc"> &nbsp

Номер 2

В каком примере элементы неупорядоченного списка маркируются квадратами?

Ответ:

&nbsp(1) <OL type="square"> &nbsp

&nbsp(2) <DL type="square"> &nbsp

&nbsp(3) <UL type="square"> &nbsp

Номер 3

В каких примерах элементы неупорядоченного списка, маркируются пустыми кружками?

Ответ:

&nbsp(1) <DL type="circle"> &nbsp

&nbsp(2) <UL type="circle"> &nbsp

&nbsp(3) <OL type="circle"> &nbsp

Упражнение 4:

Номер 1

В каких примерах упорядоченный список использован корректно?

Ответ:

&nbsp(1) <OL> <LI> . ..первый элемент списка… <LI> …второй элемент списка… </OL> &nbsp

&nbsp

(2) <OL> <LI> …первый элемент списка… <LI> …второй элемент списка… &nbsp

&nbsp(3) <UL> <LI> …первый элемент списка… <LI> …второй элемент списка… <OL> <LI> …первый элемент списка… <LI> …второй элемент списка… </OL> </UL> &nbsp

Номер 2

В каких примерах неупорядоченный список использован корректно?

Ответ:

&nbsp(1) <UL> <LI> …первый элемент списка… <LI> …второй элемент списка… <DL> <DT>Dweeb <DD>young excitable person who may mature </DL> <LI> …третий элемент списка… </UL> &nbsp

&nbsp(2) <UL> <LI> …первый элемент списка… <LI> …второй элемент списка… <OL> <LI> …первый элемент списка… <LI> …второй элемент списка… </OL> </UL> &nbsp

&nbsp(3) <UL> <LI> …первый элемент списка… <LI> …второй элемент списка… </UL> &nbsp

Номер 3

В каких примерах список определений использован корректно?

Ответ:

&nbsp(1) <DL> <DT>Hacker</DT> <DD>a clever programmer</DD> </DL> &nbsp

&nbsp(2) <DL> <DT> А <DD> Б <UL> <LI> . ..первый элемент списка… <LI> …второй элемент списка… </UL> </DL> &nbsp

&nbsp(3) <DL> <DT> А</DT> <DD> Б</DD> <DL> <DT> В</DT> <DD> Г</DD> </DL> </DL> &nbsp

Упражнение 5:

Номер 1

В каком случае описан список определений?

Ответ:

&nbsp(1) <DT> <DT></DT> <DL></DL> </DT> &nbsp

&nbsp(2) <DD> <DL></DL> <DD></DD> </DD> &nbsp

&nbsp(3) <DL> <DT></DT> <DD></DD> </DL> &nbsp

Номер 2

В каком случае описан корректный пример определения?

Ответ:

&nbsp(1) <DT> <DL>РФ</DL> <DD>Российская Федерация</DD> </DT> &nbsp

&nbsp(2) <DT> <DT>РФ</DT> <DL>Российская Федерация</DL> </DT> &nbsp

&nbsp(3) <DL> <DT>РФ</DT> <DD>Российская федерация</DD> </DL> &nbsp

Номер 3

С какого элемента начинается список определений?

Ответ:

&nbsp(1) <OL> &nbsp

&nbsp(2) <DL> &nbsp

&nbsp(3) <UL> &nbsp

Упражнение 6:

Номер 1

Какой список является неупорядоченным?

Ответ:

&nbsp(1) <UL> <LI> . ..первый элемент списка… <LI> …второй элемент списка… </UL> &nbsp

&nbsp(2) <OL> <LI> …первый элемент списка… <LI> …второй элемент списка… </OL> &nbsp

&nbsp(3) <DL> <DT> …первый элемент списка… <DD> …второй элемент списка… </DL> &nbsp

Номер 2

Какой список является упорядоченным?

Ответ:

&nbsp(1) <UL> <LI> …первый элемент списка… <LI> …второй элемент списка… </UL> &nbsp

&nbsp(2) <OL> <LI> …первый элемент списка… <LI> …второй элемент списка… </OL> &nbsp

&nbsp(3) <DL> <DT> …первый элемент списка… <DD> …второй элемент списка… </DL> &nbsp

Номер 3

Какой список является списком определений?

Ответ:

&nbsp(1) <UL> <LI> …первый элемент списка… <LI> …второй элемент списка… </UL> &nbsp

&nbsp(2) <OL> <LI> …первый элемент списка… <LI> …второй элемент списка. .. </OL> &nbsp

&nbsp(3) <DL> <DT>РФ <DD>Российская Федерация </DL> &nbsp

Упражнение 7:

Номер 1

Как устанавливается номер текущего элемента списка?

Ответ:

&nbsp(1) <LI value="1"> &nbsp

&nbsp(2) <LI value="10"> &nbsp

&nbsp(3) <LI value="i"> &nbsp

Номер 2

Как устанавливается номер первого элемента списка?

Ответ:

&nbsp(1) <OL type="a" start=23> &nbsp

&nbsp(2) <UL type="a" start=21> &nbsp

&nbsp(3) <DL type="a" start=22> &nbsp

Упражнение 8:

Номер 1

Какой из приведенных примеров нумерует список заглавнымии римскими цифрами?

Ответ:

&nbsp(1) <OL type="I"> &nbsp

&nbsp(2) <UL type="i"> &nbsp

&nbsp(3) <DL type="i"> &nbsp

Номер 2

Какой из приведенных примеров нумерует список строчными буквами?

Ответ:

&nbsp(1) <UL type="i"> &nbsp

&nbsp(2) <DL type="i"> &nbsp

&nbsp(3) <OL type="a"> &nbsp

Номер 3

Какой из приведенных примеров нумерует список строчными римскими цифрами, начиная с 10?

Ответ:

&nbsp(1) <OL type="i" start=10> &nbsp

&nbsp(2) <UL type="i" start=10> &nbsp

&nbsp(3) <UL type="a" start=10> &nbsp

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> предназначен для хранения определения термина списка определений. Элемент <dd> блочный HTML элемент, для блочных элементов характерно то, что их размеры зависят от области, в которой они стоят. Внутри элемента <dd> могут располагаться любые HTML элементы.

Тег <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>

<title>Пример использования тега DT</title>

</head>

<body>

<dl>

<dd>Язык разметки гипертекста. Стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. </dd>

<dt>JavaScript</dt>

<dd>Прототипно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript</dd>

</dl>

</body>

</html>

Если вы скопируете пример в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru

Гибкие многострочные списки определений при помощи двух строк CSS 2.1 — CSS-LIVE

Если вы когда-либо использовали списки определений (<dl>) то вы в курсе проблемы. По дефолту, у <dt> и <dd> стоит display: block. Для того, чтобы превратить их в то, что нам надо в большинстве случаев (каждая пара термина и определения на одной строке) мы обычно используем несколько техник:

Используем разный <dl> для каждой пары: разметка доминирует над стилями, что плохо
Float: не гибко
display: run-in; для <dt>: плохая поддержка браузерами (не поддерживается в Firefox)
Добавление <br> после каждого <dd> и установка термину и определению display: inline;: невалидная разметка. Нужно ли продолжать?

Ах, если бы добавление <br> было валидным… Или, даже так: что если бы мы могли вставлять <br> при помощи CSS? На самом деле мы можем!

Наверняка вы в курсе, что символы CR и LF которые представляют собой разрыв строки — это обычные unicode-символы, которые могут быть вставлены где угодно как и все остальные unicode-символы. Им соответствуют коды 000D и 000A соответсвенно. Это значит, что они тоже могут быть вставлены в генерируемый контент если их должным образом экранировать. Далее, мы можем использовать соответствующее значение white-space, чтобы заставить браузеры обращать внимание только на вставленные разрывы строк. Выглядит это вот так:

dd:after {
    content: '\A';
    white-space: pre;
}

Заметьте, что ничего из вышеперечисленного не относится к CSS3. Все это старый добрый CSS 2.1

Конечно если у вас есть несколько <dd> для каждого <dt>, то вам придется немного изменить код. Но в этом случае вам, скорее всего, не понадобится такое форматирование.

Добавлено: как заметил Кристиан Хейльман (Christian Heilmann), в HTML3(!) в элементах <dl> использовался атрибут compact, который, собственно, делал тоже самое. Сейчас в HTML5 он считается устаревшим, как и остальной фукнкционал представления в HTML.

Вот так выглядит финальный результат:

Протестировано в IE8, Chrome, Firefox 3+, Opera 10, Safari 4+.

Перевод статьи Flexible multiline definition lists with 2 lines of CSS 2.1 автор Lea Verou

P.S. Это тоже может быть интересно:

Списки в HTML • Vertex Academy

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

В повседневной жизни мы часто записываем информацию в виде списков:

список дел на завтра
список достопримечательностей, которые хотим посмотреть в очередной поездке
список покупок и т.д. и т.п.

На сайтах тоже часто часть информации оформляется в виде списков. Итак, учимся делать списки в HTML!

Всего выделяют 4 вида списков:

Ненумерованные (неупорядоченные)
Нумерованные (упорядоченные)
Списки определений
Вложенные списки

Названия звучат может быть немного угрожающе. На самом деле создавать списки — легко! И Вы сейчас в этом убедитесь.

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

Ненумерованный список — список, в котором элементы выделяются специальными маркерами – буллетами (визуально похоже на след от пули). А вот и пример ненумерованного списка:

Как сделать ненумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег <ul>. ..</ul>

<ul> — это аббревиатура от английского «Unordered List», что в переводе означает «неупорядоченный список».

Шаг 2: Каждый элемент списка поместить в теге <li> …</li>

<li> — это аббревиатура от английского «List Item», что в переводе означает «элемент списка».

Давайте посмотрим, как это работает на примере:

По умолчанию маркер отображается жирной черной точкой, но можно их «нарисовать» и по другому, с помощью специальных атрибутов.

list-style-type:circle — маркер будет отображаться кружочком

list-style-type:square — будет выглядеть как квадратик

list-style-type:none — список будет без маркеров.

Посмотрим, как например будет выглядеть список с квадратиками

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

Нумерованный список — список, в котором каждый элемент имеет свой порядковый номер. Нумерованный список используют, если важен порядок элементов. Например:

Так как же сделать нумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег <ol>…</ol>

<ol> — это аббревиатура от английского «Ordered List», что в переводе означает «упорядоченный список».

Шаг 2: Каждый элемент списка поместить в теге <li> …</li>

<li> — это аббревиатура от английского «List Item», что в переводе означает «элемент списка».

Пример упорядоченного (нумерованного) списка ниже:

По умолчанию элементы нумерованного списка помечаются арабскими цифрами (1, 2, 3, 4, 5 и т.д.). С помощью атрибута type можно это поменять:

type=»A» — строки будут нумероваться заглавными буквами

type=»a» — строчными буквами

type=»I» — заглавными римскими цифрами

type=»i»— строчными римскими цифрами

Давайте к примеру пронумеруем наш список дел римскими цифрами

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

Также в HTML существуют списки определений, где каждый элемент состоит из понятия и его определения. Это напоминает статьи в словаре или энциклопедии.

Список определений, (англ Description List, тег <dl>) включает в себя элементы, которые

обозначают какое-то понятие, термин (description term) — тег <dt>
описывают каждое из этих понятий (description data) — тег <dd>

Например:

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

Иногда в элемент списка нужно включить еще один список. HTML позволяет «вкладывать» один список в другой, при этом вложенные списки отображаются с большим отступом по сравнению с родительским списком. К тому же, для неупорядоченных (ненумерованных) списков, браузер обычно изменяет вид маркеров вложенного списка.

Вот как это выглядит:

Списки можно комбинировать между собой, например:

Смотрим как это выглядит в HTML:

В качестве элементов списков можно использовать картинки или ссылки. Также, с помощью CSS список можно расположить горизонтально, а если заменить в нем каждый элемент ссылкой — получится полноценное меню сайта. Но это тема для отдельного урока.
До встречи!

HTML тег dl | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 25.02.2009

Тег <dl> (definition list — список определений) — тег-контейнер, используется при создании списка определений вместе с <dt> и <dd>. Является контейнером списка.
Блочный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<dl> <dt>...<dt> <dd>...<dd> </dl>

Атрибуты

Основные Вспомогательные События

class	определяет имя используемого класса
dir	определяет направление символов: ltr — слева направо rtl — справа налево
compact	флаг. Выводит список с уменьшенными отступами. Отсутствует в спецификации HTML 4.01!
id	уникальный индетификатор
lang	определяет язык отображаемого документа
onclick	щелчек на элементе
ondblclick	двойной щелчек на элементе
onkeydown	нажатие клавиши, когда элемент имеет фокус
onkeypress	нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup	освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown	нажатие кнопки мыши, когда элемент имеет фокус
onmousemove	движение указателя мыши, когда элемент имеет фокус
onmouseout	смещение указателя мыши с элемента
onmouseover	помещение указателя мыши на элемент
onmouseup	освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style	задает встроенную таблицу стилей
title	всплывающая подсказка

Пример

Создаем список определений. HTML код:

<dl> <dt>dl</dt> <dd>тег-контейнер списка определений</dd> <dt>dt</dt> <dd>задает термин в списке</dd> <dt>dd</dt> <dd>задает описание термина</dd> </dl>

: Элемент списка описаний — HTML: язык разметки гипертекста

Элемент HTML

) и описаний (предоставленных элементами

). Обычно этот элемент используется для создания глоссария или для отображения метаданных (списка пар ключ-значение).

Исходный код этого интерактивного примера хранится в репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Единый термин и описание

  
   Firefox 
  
    Бесплатная кроссплатформенная платформа с открытым исходным кодом,
    графический веб-браузер, разработанный
    Mozilla Corporation и сотни
    волонтеры.

Несколько терминов, одно описание

  
   Firefox 
   Mozilla Firefox 
   Fx 
  
    Бесплатная кроссплатформенная платформа с открытым исходным кодом,
    графический веб-браузер, разработанный
    Mozilla Corporation и сотни
    волонтеры.

Один термин, несколько описаний

  
   Firefox 
  
    Бесплатная кроссплатформенная платформа с открытым исходным кодом,
    графический веб-браузер, разработанный
    Mozilla Corporation и сотни
    волонтеры.
  
  
    Красная панда, также известная как Малая
    Panda, Wah, Bear Cat или Firefox - это
    в основном травоядное млекопитающее, немного крупнее
    чем домашняя кошка (длиной 60 см).

Несколько терминов и описаний

Также можно определить несколько терминов с несколькими соответствующими описаниями, объединив приведенные выше примеры.

Метаданные

Списки описаний полезны для отображения метаданных в виде списка пар ключ-значение.

  
   Имя 
   Годзилла 
   Родился 
   1952 
   Место рождения 
   Япония 
   Цвет 
   Зеленый

Совет: может быть удобно определить разделитель значений ключа в CSS, например:

  dt :: after {
  содержание: ": ";
}

Обертывание групп «имя-значение» в элементы

WHATWG HTML позволяет заключать каждую группу «имя-значение» в элемент

в элемент

.Это может быть полезно при использовании микроданных или когда глобальные атрибуты применяются ко всей группе, или для стилизации.

  
  
     Имя 
     Годзилла 
  
  
     Родился 
     1952 
  
  
     Место рождения 
     Япония 
  
  
     Цвет 
     Зеленый

Не используйте этот элемент (или элементы

Чтобы изменить отступ термина описания, используйте свойство CSS margin .

Каждое средство чтения с экрана объявляет содержимое

по-разному. Начиная с iOS 14, VoiceOver объявляет, что содержимое

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

таблицы BCD загружаются только в браузере

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

списков определений Разрешенный контекст: % Body.Content,% flow,% block
Content Модель: Дополнительный заголовок списка (LH), за которым следуют один или несколько терминов (DT) и определений (DD).

Список определений — это список терминов и соответствующих определений. Списки определений обычно форматируются термином слева с определение, следующее справа или на следующей строке. В текст определения обычно имеет отступ по отношению к термину.

В альтернативном формате термин размещается с выравниванием по левому краю на широком поле. и определение в одной или нескольких строках справа от термина. Если термин ОУ не помещается в столбце ОУ (одна треть дисплея область), его можно растянуть по странице с перемещением раздела DD в следующую строку, или она может быть перенесена на следующие строки слева ручная колонка.

Тег открывающего списка должен быть

) и определения (

заголовок ).Например:

 
 Заголовок списка 
 Термин 1 
 Это определение первого термина.
 Термин 2 
 Это определение второго термина.

, который можно представить как:

Заголовок списка

Термин 1: Это определение первого термина.
Термин 2: Это определение второго термина.

Элемент списка определений может принимать атрибут COMPACT, который предлагает использовать компактный рендеринг и подходит, если элементы списка маленькие и / или весь список большой.

Примечание: Используйте элемент ПРИМЕЧАНИЕ, когда вы хотите иметь заметку с отступом. Практика использования элементов

без соответствующих элементов

устарел.

Разрешенные атрибуты для элемента DL

ID

Идентификатор SGML, используемый в качестве цели для гипертекста ссылки или для наименования определенных элементов в связанных таблицах стилей. Идентификаторы являются токенами NAME и должны быть уникальными в пределах текущий документ.

LANG

Это одно из сокращений стандартного языка ISO, е.грамм. «en.uk» — вариант английского языка, на котором говорят в Соединенном Королевстве. Он может использоваться парсерами для выбора языковых настроек для кавычки, лигатуры, правила гипенации и т. д. Язык Атрибут состоит из двухбуквенного кода языка из ISO 639, необязательно, за которым следует точка и двухбуквенный код страны из ISO 3166.

КЛАСС

Это список токенов SGML NAME, разделенных пробелами. используется для создания подклассов имен тегов. По соглашению имена классов интерпретируется иерархически, с наиболее общим классом слева и наиболее конкретный справа, где классы разделены период.Атрибут CLASS чаще всего используется для присоединения другой стиль для какого-либо элемента, но рекомендуется, чтобы практические имена классов следует выбирать на основе семантика, так как это разрешит другое использование, такое как ограничение поиска через документы путем сопоставления имен классов элементов. Соглашения для выбора имен классов выходят за рамки данной спецификации.

CLEAR

Этот атрибут является общим для всех блочных элементов. Когда текст обтекает рисунок или таблицу на полях, иногда требуется для начала элемента, такого как заголовок, абзац или список под рисунком а не рядом с ним.Атрибут CLEAR позволяет вам двигаться вниз безоговорочно:

очистить = влево

двигаться вниз, пока левое поле не очистится

ясно = право

двигаться вниз, пока правое поле не станет чистым

clear = все

двигаться вниз, пока оба поля не станут чистыми

В качестве альтернативы вы можете разместить элемент рядом с фигура ровно до тех пор, пока есть достаточно места. Минимальная необходимая ширина задается как:

clear = «40 en»

двигаться вниз, пока не останется не менее 40 единиц en.

clear = «100 пикселей»

перемещаться вниз, пока не останется не менее 100 пикселей свободный

Таблица стилей (или настройки браузера по умолчанию) может предоставлять минимум по умолчанию ширины для каждого класса блочных элементов.

COMPACT

Наличие этого атрибута указывает на пользовательский агент следует использовать уменьшенные межэлементные интервалы. Атрибут COMPACT может также уменьшить ширину левого (DT) столбца.
На практике есть несколько способов увеличить компактность списки: уменьшенный вертикальный межэлементный интервал, меньший размер шрифта или даже чтобы избежать разрывов строк между элементами. Лучше всего с этим справиться связанные таблицы стилей и атрибут класса.

Тег открывающего списка должен быть DL COMPACT.Это должно быть немедленно за которым следует первый член (DT). Например:

Термин
Это первое определение в компактном формате.
Термин
Это второе определение в компактном формате.

Используйте списки определений для подробных шагов

Список определений — это список терминов (или чисел) и соответствующих определений или описаний. Нам нравится использовать списки определений в наших статьях, чтобы дать читателям четкое представление о шагах, необходимых для выполнения задачи, но почти все, что соответствует в списке.В этой статье вы узнаете, как использовать списки определений в Документах.

В этой статье

Создание списков в редакторе HTML

Элемент списка определений (
) содержит термин (
) и описание (
). Чтобы создать свой список, вы можете:

Напишите содержимое списка в текстовом редакторе, затем перейдите в редактор HTML, щелкнув значок на панели инструментов, чтобы разметить список.

Напишите содержимое списка полностью в редакторе HTML, заключая текст в список по мере продвижения.

Просмотрите список ниже и посмотрите, как он размечен в HTML. Номер шага — это наш термин определения
, а соответствующий текст инструкции — это описание определения
.

1

Я называю это удачей. Мне не все равно. Итак, что ты о ней думаешь, Хан? Должно быть, она спрятала планы в спасательной капсуле.Отправьте отряд за ними и позаботьтесь об этом лично, командир.

2

Сила сильна с этим. Теперь у меня есть ты. Ваши глаза могут вас обмануть. Не верь им. Я удивлен, что у вас хватило смелости взять на себя ответственность.

1

Я называю это удачей. Мне не все равно. Итак, что ты о ней думаешь, Хан? Должно быть, она спрятала планы в спасательной капсуле. Отправьте отряд за ними и позаботьтесь об этом лично, командир.

2

Сила сильна с этим. Теперь у меня есть ты. Ваши глаза могут вас обмануть. Не верь им. Я удивлен, что у вас хватило смелости взять на себя ответственность.

Примечание: По умолчанию фон номера в списке определений серый. Мы используем собственный CSS, чтобы сделать фон нашего номера синим. Если вы используете свою собственную таблицу стилей, вы можете изменить цвет фона термина с помощью:

#fullArticle dt { фон: # 3197D1; }

Общие вопросы

Будут ли списки работать во всех браузерах?
Списки определений поддерживаются в Chrome, Firefox, Safari, Opera, Internet Explorer и Edge.

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

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

Синтаксис
…

Характеристики атрибутов

Содержание Один или несколько элементов DT или DD

Содержится в APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Элемент DL определяет список определений . Запись в списке создается с использованием элемента DT для определяемого термина и элемента DD для определения термина.

Список определений может содержать несколько терминов для данного определения, а также несколько определений для данного термина. Авторы также могут давать термин без соответствующего определения, и наоборот, но такая структура редко имеет смысл.

Пример:

Элементы блочного уровня В HTML элементы блочного уровня обычно могут содержать встроенные элементы и другие элементы уровня блока.Они есть обычно форматируются иначе, чем встроенные элементы, обычно с новой строки в визуальных браузерах. Встроенные элементы Элементы уровня текста Встроенные (или текстовые) элементы обычно содержат только символьные данные и другие встроенные элементы.

Элемент DL может быть адаптирован для использования со структурами, которые не являются строгими терминами и определениями, практика, которая оправдана, когда другие элементы HTML не могут адекватно описать структуру.Ниже приведены некоторые примеры:

Календарь сообщества 8 марта Симфонический оркестр представляет Восходящую звезду в Центре Андерсона. За подробностями обращайтесь по телефону 555-1234. 10 марта Вечер поддержки семей погибших, с 7:00 до 9:00 в 523 Главная St.

Брут Целую твою руку, но не из лести, Цезарь; Желаю тебе, чтобы Публий Цимбер мог Имейте немедленную свободу отмены. Цезарь Что, Брут! Кассий Простите, Цезарь; Цезарь, простите: Кассий падает ниже твоих ног, Просить о предоставлении избирательных прав Публию Цимберу.

Обратите внимание на использование атрибута CLASS в предыдущих примерах.Это позволяет автору легко предлагать через таблицы стилей отличительное представление для различных видов списков определений.

В дополнение к общим атрибутам, общим для большинства элементов, DL принимает атрибут COMPACT . Этот атрибут, устаревший в HTML 4 и плохо поддерживаемый браузерами, предполагает, что визуальные браузеры визуализируют список компактно, возможно, с уменьшенным интервалом между элементами.

Дополнительная информация

Вложенные списки HTML | Список определений

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

Списки определений — это особый тип структурирования информации, который идеально подходит для отображения толковых и терминологических словарей, а также справочников с помощью HTML.

В отличие от упорядоченных и неупорядоченных списков, которые могут содержать несколько элементов, расположенных друг за другом, элементы списка определений должны состоять из двух частей: самого определения (термин) и его контентной части (описания).

Список определений создается с помощью тега
(список определений), внутри которого указывается тег
(термин определения), разделяющий термин, и
(описание определения ), который содержит описание термина:

Заголовок страницы
Список определений:

Кофе

Бодрящий горячий напиток

Молоко

Полезный холодный напиток

Попытайся »
Внутри элемента
вы можете размещать абзацы, строки, изображения, ссылки, другие списки и т. Д.

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

Часто информация имеет сложную разветвленную структуру, которую, с одной стороны, будет сложно отобразить одним списком, с другой — невозможно разбить на несколько отдельных списков. В этом случае используются так называемые вложенные списки (список, вложенный в другой список).

Чтобы создать вложенный список, поместите дочерний список в родительский список так, чтобы все элементы дочернего списка были вложены в элемент
родительского списка:

Заголовок страницы
Вложенный список:

Кофе

Чай

Черный чай

Зеленый чай

Молоко

Попытайся »
Таким образом можно создавать многоуровневые списки.

Примечание: обычно вложенный список отображается с небольшим отступом справа от родительского списка.
Списки
HTML — Простое руководство по HTML

Узнайте, как создавать списки на веб-странице. Списки — это предпочтительный способ отображения элементов один за другим вместо использования тегов . Списки имеют тег для начала и окончания самого списка, а также тег для каждого элемента в списке.

Существует три типа списков: упорядоченный, неупорядоченный и определение списков.

Неупорядоченные списки

Неупорядоченный список представляет собой маркированный список, похожий на меню справа (хотя меню было изменено с использованием таблиц стилей для использования изображений вместо стандартных маркеров).

Определить неупорядоченный список — ...

Используйте теги
для определения начала и конца неупорядоченного списка. Некоторые элементы списка ( li элементов) будут помещены в теги ul .

Неупорядоченный элемент списка — какой-то элемент

Добавьте текст для каждого элемента между тегами
и
. Каждый элемент списка должен иметь свои собственные теги li .

Тип пули

По умолчанию в браузере отображается круглая точка. Это можно изменить с помощью атрибута type тега ul , который изменит тип маркера для всего списка.

Тип позиции

Вы можете установить тип маркера для элемента в середине списка, установив атрибут type тега li .

Списки заказов

Этот список используется для создания и индексирования списка, такого как нумерованный или алфавитный список.

Определить упорядоченный список — ...

Используйте теги
, чтобы установить начало и конец списка.После этого между тегами упорядоченного списка будет находиться ряд элементов списка.

Упорядоченный элемент списка — элемент

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

Тип списка

Установите тип индекса списка с помощью type = "?" атрибут.Стиль по умолчанию — числовой, вы также можете выбрать прописные или строчные, буквенные или римские цифры.

Начальная позиция списка

Установите начальную цифру (или букву), если вы не хотите, чтобы список начинался с 1 или A .

Значение элемента

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

Пример:

Упорядоченный список Пункт первый Пункт второй Измененный упорядоченный список Элемент списка 1 Элемент списка 2 Элемент списка 3 Элемент списка 4

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

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

Этот тип списка используется для определения и описания терминов, как и словарь. Обычно запись в списке состоит из термина и определения этого термина. Браузер обычно выделяет термин жирным шрифтом и делает отступ для определения.

Определить список определений —

Установите начало и конец списка определений. Все записи попадают в теги dl .Каждая запись обычно состоит из одного элемента dt и одного элемента dd .

Определение Заголовок —

Синтаксис	…
Характеристики атрибутов
Содержание	Один или несколько элементов DT или DD
Содержится в	APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Название определяемого термина. Примечание: у вас может быть термин без определения или несколько терминов с одним и тем же определением.

Описание определения —

Определение термина. Примечание: у вас может быть несколько определений для одного термина.

Пример:

Срок 1 Определение термина 1 Срок 2 Определение термина 2

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

HTML неупорядоченный, упорядоченный и список определений, руководство

Содержание страницы —
Неупорядоченные, упорядоченные и описательные списки
Введение в списки HTML

Неупорядоченные списки

Неупорядоченные списки, используемые для навигации

Заказанные списки

Списки описаний

HTML-списки Введение

Введение в списки HTML

Теги списка HTML

Тег Описание

Определяет неупорядоченный список

Определяет упорядоченный список

Определяет элемент списка

Определяет список описаний

Определяет термин в списке описания

Описывает термин в списке описаний

Неупорядоченные списки

Пример вложенного неупорядоченного списка

Элемент списка 1

Элемент списка 2

вложенный элемент списка 2a

дважды вложенный элемент списка 2b

Элемент списка 3

Пункты списка будут отмечены пунктами (маленькие черные диски, за которыми следуют кружки, а затем квадраты во вложении по умолчанию)

Дополнительная информация, включая:

Неупорядоченные списки

Неупорядоченные списки, используемые для навигации

Неупорядоченные списки, используемые для навигации

упорядоченные списки

Списки заказов

Списки описаний

Дополнительная информация Описание Списки

.

No related posts.

Категория: Разное

Список определений | htmlbook.ru

Тег | htmlbook.ru

Спецификация

Описание

Синтаксис

Закрывающий тег

Атрибуты

Основы работы с HTML — тест 5

HTML теги.

Гибкие многострочные списки определений при помощи двух строк CSS 2.1 — CSS-LIVE

P.S. Это тоже может быть интересно:

Списки в HTML • Vertex Academy

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

Например:

HTML тег dl | назначение, синтаксис, атрибуты, примеры

Синтаксис

Атрибуты

Пример

Рекомендации по использованию

Твой код:

Результат:

: Элемент списка описаний — HTML: язык разметки гипертекста

Единый термин и описание

Несколько терминов, одно описание

Один термин, несколько описаний

Несколько терминов и описаний

Метаданные

Обертывание групп «имя-значение» в элементы

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

Заголовок списка

Разрешенные атрибуты для элемента DL

Используйте списки определений для подробных шагов

В этой статье

Создание списков в редакторе HTML

Общие вопросы

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

Календарь сообщества

Дополнительная информация

Вложенные списки HTML | Список определений

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

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

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

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

HTML — Простое руководство по HTML

Неупорядоченные списки

Списки заказов

Пример:

Упорядоченный список

Измененный упорядоченный список

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

Пример:

HTML неупорядоченный, упорядоченный и список определений, руководство

Содержание страницы —

HTML-списки Введение

Теги списка HTML

Неупорядоченные списки

Пример вложенного неупорядоченного списка

Неупорядоченные списки, используемые для навигации

упорядоченные списки

Списки описаний

Добавить комментарий Отменить ответ