Теги li ol ul: Списки (ul, ol, li) в HTML

Применимость

HTML, XHTML

Этот метод относится к:

• Критерий успеха 1.3.1 (Информация и отношения)
  • Как познакомиться 1.3.1 (Информация и отношения)
  • Понимание критерия успеха 1.3.1 (информация и отношения)

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

См. примечания по поддержке агента пользователя для h58.

Описание

Целью этого метода является создание списков связанных элементов с использованием элементов списка. соответствующие их целям. 9Элемент 0075 ol используется, когда список упорядочен, а элемент ul используется, когда список неупорядочен. Определение списки ( dl ) используются для группировки терминов с их определениями.

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

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

Структура списка ( ul / ol ) также полезна для группировки гиперссылок. Когда это сделано, это помогает пользователям программ чтения с экрана переходить от первого элемента в списке к концу списка или переходить к следующему списку. Это помогает им обходить группы ссылок, если они захотят.

Примеры

Пример 1. Список, показывающий шаги в последовательности

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

Пример кода:

 

  
В миске смешайте яйца и молоко.
  
Добавить соль и перец.
 

Пример 2. Список продуктов

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

Пример кода:

 <ул>
  
Молоко
  
Яйца
 
  
Сливочное масло
 

Пример 3. Слово и его определение

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

Пример кода:

 

  
мигать
  
включаться и выключаться от 0,5 до 3 раз в секунду
  
 

Пример 4.

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

 

имя:
Джон Доу
тел.:
01-2345678
факс:
02-3456789
электронная почта:
[email protected]

 

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

 dt, dd{float: left;margin: 0;padding: 0; }
dt {очистить: оба; вес шрифта: полужирный}
DT span {дисплей: встроенный блок; ширина: 70 пикселей;}
дд пролет {дисплей: встроенный блок; поле справа: 5px;}
 

Это показано в рабочем примере контактной информации с использованием списка определений.

Пример 5: Использование списков для группировки ссылок

В этом примере ссылки сгруппированы с использованием ul и li элементы.

Пример кода:

  
Категории товаров
 
<ул>
    
Кухня
    
Кровать & Ванна
    
Изысканные рестораны
    
Освещение 
    
Хранилище

 

Для стилизации элементов списка можно использовать CSS, поэтому этот метод можно использовать с разнообразие визуальных образов.

Вот стиль, который удаляет маркеры списка и левое заполнение, создающее отступ и размещение отдельных элементов списка по горизонтали.

Пример кода:

 ул.навигация {
  стиль списка: нет;
  заполнение: 0;
}
ul.navigation li {
  дисплей: встроенный;
} 

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

Пример кода:

 ул.навигация {
 стиль списка: нет;
 заполнение: 0;
}
ul.navigation li {
 дисплей: блок;
 плыть налево;
} 

Ресурсы

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

• HTML 4.01 Неупорядоченные списки (UL), упорядоченные списки (OL) и элементы списка (LI)

• HTML 4.01 Списки определений: элементы DL, DT и DD

• h50: Использование списков описаний

Тесты

Процедура

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

2. Убедитесь, что содержимое, имеющее внешний вид нумерованного списка, помечено как упорядоченный список.

3. Убедитесь, что содержимое помечено как список определений, когда термины и их определения представлены в виде списка.

Ожидаемые результаты

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

Тег HTML — использование, атрибуты, примеры

❮ Пред. Следующий ❯

Тег HTML

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

Каждый элемент ненумерованного списка объявляется внутри тега

• .

  Тег

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

  Тег

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

  Теги

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

     С помощью CSS можно изменить маркер элемента списка. Однако семантическое значение, выраженное выбором типа списка, не может быть изменено с помощью CSS.

     Тег

     идет парами. Содержимое записывается между открывающим (
     ) и закрывающим (
     ) тегами.

     Пример тега HTML

     :

      
     
       <голова>
         
       
       <тело>
         <ул>
           
     Элемент списка
           
     Элемент списка
           
     Элемент списка
         

     Попробуй сам »

     Результат

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

     Пример тега HTML

     с атрибутом type:

      
     
       <голова>
         
       
       <тело>
         
     
           
     Элемент списка 
           
     Элемент списка
           
     Элемент списка
         
         
     
           
     Элемент списка
           
     Элемент списка
           
     Элемент списка
         
       
      

     Попробуй сам »

     Вы также можете использовать свойство CSS list-style-type или list-style-image для определения типа элемента элемента списка.

     Пример HTML-тега

     , используемого со свойством list-style-type CSS:

      
     
       <голова>
         
       
       <тело>
          
     Примеры ненумерованных списков:
      
         <ул>
           
     Прохладительные напитки
           
     Горячие напитки
           
     Мороженое
         

     <ул>
     • Кока-Кола
     • Фанта
     • Чай со льдом
     <ул>
     • Кока-Кола
     • Фанта
     • Чай со льдом

     Попробуй сам »

     Тег

     также поддерживает глобальные атрибуты и атрибуты событий.

     Как оформить тег

     ?

     Общие свойства для изменения визуального веса/выделения/размера текста в теге

     :
     • Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
     • Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
     • Свойство CSS font-size устанавливает размер шрифта.
     • Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
     • Свойство CSS text-transform управляет регистром и регистром текста.
     • Свойство CSS text-decoration определяет украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

     Цветной текст в теге

     :
     • Свойство CSS color описывает цвет текстового содержимого и оформления текста.
     • Свойство CSS background-color устанавливает цвет фона элемента.