Списки в документах HTML

  1. 10,1 Введение в списки HTML предлагает авторам несколько механизмов для определения списков информации....

10,1 Введение в списки

HTML предлагает авторам несколько механизмов для определения списков информации. Все списки должны содержать один или несколько элементов списка. Списки могут содержать:

  • Неупорядоченная информация.
  • Заказанная информация.
  • Определения.

Предыдущий список, например, является неупорядоченным списком, созданным с UL элемент:

<UL> <LI> Неупорядоченная информация. <LI> Заказанная информация. <LI> Определения. </ UL>

Упорядоченный список, созданный с использованием OL Элемент, должен содержать информацию, где следует подчеркнуть порядок, как в рецепте:

  1. Тщательно перемешайте сухие ингредиенты.
  2. Налейте влажные ингредиенты.
  3. Смешайте в течение 10 минут.
  4. Выпекать в течение часа при температуре 300 градусов.

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

Более низкая стоимость

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

определяется в HTML как:

<DL> <DT> <STRONG> Более низкая стоимость </ STRONG> <DD> Новая версия этого продукта стоит значительно дешевле, чем предыдущая! <DT> <STRONG> Легче в использовании </ STRONG> <DD> Мы изменили продукт, чтобы его было намного проще использовать! <DT> <STRONG> Безопасно для детей </ STRONG> <DD> Вы можете оставить своих детей одних в комнате с этим продуктом, и они не пострадают (не гарантия). </ DL>

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

Ингредиенты:
  • 100 г. мучной
  • 10 г. сахар
  • 1 стакан воды
  • 2 яйца
  • соль перец
Процедура:
  1. Тщательно перемешайте сухие ингредиенты.
  2. Налейте влажные ингредиенты.
  3. Смешайте в течение 10 минут.
  4. Выпекать в течение часа при температуре 300 градусов.
Примечания:

рецепт можно улучшить, добавив изюм.

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

Начальный тег: требуется , Конечный тег: требуется

Начальный тег: обязательно , Конечный тег: необязательно

Определения атрибутов

типзнак равноинформация

о стиле [ДИ] Устаревшее. Этот атрибут устанавливает стиль элемента списка. Доступные в настоящее время значения предназначены для визуальных пользовательских агентов. Возможные значения описаны ниже (вместе с информацией о деле). Начните знак равно число [CN] Устаревшее. За OL только. Этот атрибут указывает начальный номер первого элемента в упорядоченном списке. Начальный номер по умолчанию - «1». Обратите внимание, что хотя значение этого атрибута является целым числом, соответствующая метка может быть не числовой. Таким образом, когда стиль элемента списка состоит из заглавных латинских букв (A, B, C, ...), start = 3 означает «C». Когда стиль состоит из строчных римских цифр, start = 3 означает значение «iii» и т. Д. знак равно число [CN] Устаревшее. За LI только. Этот атрибут устанавливает номер текущего элемента списка. Обратите внимание, что хотя значение этого атрибута является целым числом, соответствующая метка может быть не числовой (см. Начните атрибуты). компактный [ДИ] Устаревшее. Если установлено, этот логический атрибут дает подсказку визуальным пользовательским агентам для более компактной визуализации списка. Интерпретация этого атрибута зависит от агента пользователя.

Атрибуты, определенные в другом месте

  • Я бы , учебный класс ( идентификаторы всего документа )
  • языки ( информация о языке ), реж ( направление текста )
  • заглавие ( название элемента )
  • стиль ( встроенная информация о стиле )
  • по щелчку , ondblclick , OnMouseDown , OnMouseUp , при наведении мыши , OnMouseMove , onmouseout , OnKeyPress , OnKeyDown , OnKeyUp ( внутренние события )

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

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

Этот пример иллюстрирует базовую структуру списка.

<UL> <LI> ... первый элемент списка ... <LI> ... второй элемент списка ... ... </ UL>

Списки также могут быть вложенными:

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

<ol> <li value = "30"> делает этот элемент списка номером 30. <li value = "40"> делает этот элемент списка 40. <li> делает этот элемент списка номером 41. </ ol> <! - - списки определений - DT для термина, DD для его определения -> <! ELEMENT DL - - (DT | DD) + - список определений -> <! ATTLIST DL % ATTRS; - % coreattrs , % i18n , %События ->

Начальный тег: требуется , Конечный тег: требуется

Начальный тег: обязательно , Конечный тег: необязательно

Атрибуты, определенные в другом месте

  • Я бы , учебный класс ( идентификаторы всего документа )
  • языки ( информация о языке ), реж ( направление текста )
  • заглавие ( название элемента )
  • стиль ( встроенная информация о стиле )
  • по щелчку , ondblclick , OnMouseDown , OnMouseUp , при наведении мыши , OnMouseMove , onmouseout , OnKeyPress , OnKeyDown , OnKeyUp ( внутренние события )

Списки определений незначительно отличаются от других типов списков, в которых элементы списка состоят из двух частей: термина и описания. Термин дается DT элемент и ограничен встроенным контентом. Описание дано с DD элемент, содержащий контент уровня блока.

Вот пример:

<DL> <DT> Двеб <DD> молодой возбудимый человек, который может стать <EM> Nerd </ EM> или <EM> Geek </ EM> <DT> Hacker <DD> умным программистом <DT> Nerd < DD> Технически яркий, но социально неумелый человек </ DL>

Вот пример с несколькими терминами и описаниями:

<DL> <DT> Центр <DT> Центр <DD> Точка, равноудаленная от всех точек на поверхности сферы. <DD> В некоторых полевых видах спорта игрок, который занимает среднюю позицию на поле, корте или передней линии. </ DL>

Другое применение DL Например, для разметки диалогов, с каждым DT называя спикера, и каждый DD содержащий его или ее слова.

10.3.1 Визуальное отображение списков

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

Визуальные пользовательские агенты обычно делают отступ во вложенных списках относительно текущего уровня вложенности.

Для обоих OL а также UL , тип Атрибут определяет параметры рендеринга для визуальных пользовательских агентов.

Для UL элемент, возможные значения для тип Атрибутом являются диск, квадрат и круг. Значение по умолчанию зависит от уровня вложенности текущего списка. Эти значения не чувствительны к регистру.

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

Графический пользовательский агент может отображать это как:

для значения диск   для значения круг   для значения квадрат для значения "диск"
для значения "круг"
для значения "квадрат"

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

Тип Стиль нумерации 1 арабские цифры 1, 2, 3, ... нижняя альфа a, b, c, ... верхняя альфа A, B, C, ... i нижняя латиница i, ii, iii, .. . I верхнеримский I, II, III, ...

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

Например, используя CSS, можно указать, что стиль чисел для элементов списка в нумерованном списке должен быть строчными римскими цифрами. В выдержке ниже каждый OL элемент, принадлежащий классу «withroman», будет иметь римские цифры перед элементами списка.

<STYLE type = "text / css"> OL.withroman {list-style-type: lower-roman} </ STYLE> <BODY> <OL class = "withroman"> <LI> Шаг первый ... <LI> Шаг второй ... </ OL> </ BODY>

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

<DL> <DT> Двеб <DD> молодой возбудимый человек, который может стать <EM> Nerd </ EM> или <EM> Geek </ EM> <DT> Hacker <DD> умным программистом <DT> Nerd < DD> Технически яркий, но социально неумелый человек </ DL>

может быть представлен следующим образом:

Dweeb молодой возбужденный человек, который может превратиться в Nerd или Geek Hacker, умный программист Nerd технически яркий, но социально неумелый человек

DIR и MENU осуждается ,

Увидеть Переходный DTD для формального определения.

Атрибуты, определенные в другом месте

  • Я бы , учебный класс ( идентификаторы всего документа )
  • языки ( информация о языке ), реж ( направление текста )
  • заглавие ( название элемента )
  • стиль ( встроенная информация о стиле )
  • по щелчку , ondblclick , OnMouseDown , OnMouseUp , при наведении мыши , OnMouseMove , onmouseout , OnKeyPress , OnKeyDown , OnKeyUp ( внутренние события )

DIR Элемент был разработан для использования в списках каталогов из нескольких столбцов. МЕНЮ Элемент был разработан для использования в списках меню с одним столбцом. Оба элемента имеют ту же структуру, что и UL Просто другой рендеринг. На практике пользовательский агент будет DIR или же МЕНЮ список точно как UL список.

Мы настоятельно рекомендуем использовать UL вместо этих элементов.