Содержание

Атрибут type | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Устанавливает вид маркера. Тип маркера и его значение зависит от внешнего контейнера <ul> или <ol>.

Синтаксис

<li type="disc | circle | square">...</li>
<li type="A | a | I | i | 1">...</li>

Значения

Для маркированного списка (тег <ul>) маркеры могут принимать один из трех видов: круг, окружность и квадрат. Значения атрибута type и получаемый вид показан в табл. 1.

Табл 1. Параметры маркированного списка
КодПример
<li type=»disc»>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<li type=»circle»>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<li type=»square»>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк

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

  • заглавные латинские буквы;
  • строчные латинские буквы;
  • заглавные римские цифры;
  • строчные римские цифры;
  • арабские цифры.

В табл. 2 приведены различные значения атрибута type тега <li> и результат их применения.

Табл 2. Параметры нумерованного списка
КодПример
<ol> <li type=»A»> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type=»a»> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type=»I»> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type=»i»> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type=»1″> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк

Значение по умолчанию

disc и 1

Аналог CSS

list-style-type

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!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>Тег LI, атрибут type</title>
 </head>
 <body>

  <ul>
   <li type="square">Чебурашка</li>
   <li>Крокодил Гена</li>
   <li type="circle">Шапокляк</li>
  </ul>
 
 </body>
</html>

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

Рис. 1. Разные маркеры в списке

: The Unordered List element — HTML

HTML-элемент <ul> используется для неупорядоченного списка — в частности для маркированного списка.

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

Категории контентаОсновной поток, и если дочерний элемент <ol> включает в себя хотя бы один элемент
<li>
, явный контент.
Разрешённое содержимоеНоль или больше <li> элементов, содержат вложенные элементы <ol> или <ul>.
Пропуск теговНет, открывающий и закрывающий теги обязательны.
Разрешённые родителиЛюбой элемент, который принимает основной поток.
Разрешённые ARIA-ролиdirectory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation
DOM-интерфейсHTMLUListElement (en-US)

Этот элемент включает глобальные атрибуты.

compact
Атрибут логического значения (bool) говорит о том, что список будет представлен в более компактном стиле. Интерпретация этого атрибута зависит от user agent и не работает со всеми браузерами.
Предупреждение: Не используйте этот атрибут, ибо он устаревший и больше не используется, используйте CSS. Для схожего эффекта с compact, подойдёт свойство CSS line-height с значением 80%.
type
Этот атрибут добавляет маркеры (bullets) в список. Значения установлены под HTML3.2 и переходными на HTML 4.0/4.01 являются:

Четвёртый маркер задан в интерфейсе WebTV, но не все браузеры смогут его отобразить: triangle.

Если данный атрибут отсутствует и если атрибут CSS list-style-type (en-US) не присвоен к данному элементу, пользовательский агент (user agent) выберет маркер в зависимости от вложенного уровня в списке.

Предупреждение: Не используйте этот атрибут, ибо он устаревший; используйте свойство CSS list-style-type (en-US).
  • Элемент <ul> используется для группировки непронумерованных элементов данных, и их последовательность в списке не нужна. Что характерно, непорядочные списки используют маркеры, которые могут быть разных форм (в форме точки, круга или прямоугольной формы). Стиль задаётся не в HTML, а со связанным с ним CSS,  используя свойство
    list-style-type
    (en-US).
  • Элементы <ul> и <ol> могут быть вложены на любом уровне. Более того, вложенные списки могут чередоваться между <ol> и <ul> без ограничений.
  • Элементы <ol> и <ul> используются для списков. Различие лишь в том, что в элементе <ol> порядок имеет значение. Согласно эмпирической закономерности (или правилу большого пальца), чтобы определить, какую маркировку использовать, попробуйте поменять порядок элементов в списке. Если суть списка меняется, то тогда подойдёт элемент
    <ol>
    , в противном случае используйте <ul>.

Простой список

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

Результат HTML кода выше:

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

<ul>
  <li>first item</li>
  <li>second item
  
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem
      
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li> 
      <li>second item third subitem</li>
    </ul>
  
  </li>
  <li>third item</li>
</ul>

Результат HTML кода выше:

Упорядоченный список внутри неупорядоченного списка

<ul>
  <li>first item</li>
  <li>second item
  
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  
  </li>
  <li>third item</li>
</ul>

Результат HTML кода выше:

BCD tables only load in the browser

  • Остальные списковые HTML элементы: <ol>, <li>, <menu> и устаревший <dir> (en-US);
  • CSS свойства, которые могут быть полезны для стилизации <ul> элементов:
    • свойство list-style, полезное для выбора способа отображения маркеров,
    • CSS счётчики, для более сложных вложенных списков,
    • свойство line-height, для замены убранного свойства compact,
    • свойство margin, для контроля отступа в списке.

— HTML | MDN

HTML-элемент <li> используется для создания элементов списка. Он также должен находиться в родительском элементе: упорядоченном списке (<ol>), неупорядоченном списке (<ul>), или меню (<menu>). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы.

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

Категории контентаНет.
Разрешённое содержимоеПотоковый контент
Пропуск теговЗакрывающий тег может быть опущен, если за элементом непосредственно следует другой элемент <li> или если в родительском элементе нет больше содержимого.
Разрешённые родителиЭлементы <ul>, <ol>, или <menu>. Хотя и не соответствует использованию, устаревший <dir> (en-US) тоже может быть родительским элементом.
Разрешённые ARIA-ролиmenuitem, menuitemcheckbox, menuitemradio, option, presentation, radio, separator, tab, treeitem
DOM-интерфейсHTMLLIElement (en-US)

Этот элемент включает глобальные атрибуты.

value
Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента <ol>. Единственное разрешённое значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут value не имеет значения для неупорядоченных списков (<ul>) или для меню (<menu>).

Примечание: Этот атрибут был убран в HTML4, но заново добавлен в HTML5.

Примечание: Предыдущие до Gecko 9.0, отрицательные значения неправильно конвертировались в 0. Начиная с Gecko 9.0 все числовые значения воспринимаются правильно.

type
Этот символьный атрибут указывает на тип нумерации:

Строчные буквы — это которые не заглавные.

  • a: строчные буквы
  • A: заглавные буквы
  • i: строчные римские цифры
  • I: заглавные римские цифры
  • 1: цифры
Этот атрибут переопределяет тип унаследованный от родительского элемента <ol> или любого другого. Примечание к использованию: Этот атрибут был убран: используйте CSS свойство list-style-type (en-US) взамен.

Для более подробных примеров смотрите страницы <ol> и <ul>.

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

<ol>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>

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

<ol type="I">
    <li value="3">Третий элемент</li>
    <li>Четвёртый элемент</li>
    <li>Пятый элемент</li>
</ol>

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

<ul>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ul>

BCD tables only load in the browser

  • Остальные списковые HTML элементы: <ul>, <li>, <menu> и устаревший <dir> (en-US);
  • CSS свойства, которые были бы полезны для стилизации <li> элементов:
    • свойство list-style (en-US), для выбора стиля маркера/порядкового номера,
    • CSS счётчики, для обработки сложных вложенных списков,
    • свойство margin, для контроля отступа между элементами списка.

Списки и ключи – React

Сначала давайте вспомним, как работать со списками в JavaScript.

В коде ниже мы используем функцию map(), чтобы удвоить значения в массиве numbers. Мы присваиваем массив, возвращаемый из map(), переменной doubled, и выводим её в консоль:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);

Этот код выведет [2, 4, 6, 8, 10] в консоль.

В React преобразование массивов в список элементов выглядит похожим образом.

Рендер нескольких компонентов

Вы можете создать коллекцию элементов и встроить её в JSX с помощью фигурных скобок {}.

К примеру, пройдём по массиву numbers, используя функцию JavaScript map(), и вернём элемент <li> в каждой итерации. Получившийся массив элементов сохраним в listItems:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>  <li>{number}</li>);

Теперь мы включим массив listItems внутрь элемента <ul> и отрендерим его в DOM:

ReactDOM.render(
  <ul>{listItems}</ul>,  document.getElementById('root')
);

Посмотреть на CodePen

Этот код выведет список чисел от 1 до 5.

Простой компонент-список

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

Мы можем отрефакторить предыдущий пример с использованием компонента, который принимает массив numbers и выводит список элементов.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>    <li>{number}</li>  );  return (
    <ul>{listItems}</ul>  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,  document.getElementById('root')
);

Когда вы запустите данный код, то увидите предупреждение о том, что у каждого элемента массива должен быть ключ (key). «Ключ» — это специальный строковый атрибут, который нужно указывать при создании списка элементов. Мы обсудим, почему это важно, ниже на странице.

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

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Посмотреть на CodePen

Ключи

Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>    {number}
  </li>
);

Лучший способ выбрать ключ — это использовать строку, которая будет явно отличать элемент списка от его соседей. Чаще всего вы будете использовать ID из ваших данных как ключи:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>    {todo.text}
  </li>
);

Когда у вас нет заданных ID для списка, то в крайнем случае можно использовать индекс элемента как ключ:

const todoItems = todos.map((todo, index) =>
    <li key={index}>    {todo.text}
  </li>
);

Мы не рекомендуем использовать индексы как ключи, если порядок элементов может поменяться. Это негативно скажется на производительности и может вызвать проблемы с состоянием компонента. Почитайте статью Робина Покорни (Robin Pokorny), которая объясняет, почему индексы-ключи приводят к проблемам. Если вы опустите ключ для элемента в списке, то React по умолчанию будет использовать индексы как ключи.

Вот подробное объяснение о том, почему ключи необходимы.

Ключи нужно определять непосредственно внутри массивов.

Например, если вы извлекаете компонент ListItem, то нужно указывать ключ для <ListItem /> в массиве, а не в элементе <li> внутри самого ListItem.

Пример неправильного использования ключей

function ListItem(props) {
  const value = props.value;
  return (
        <li key={value.toString()}>      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
        <ListItem value={number} />  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Пример правильного использования ключей

function ListItem(props) {
    return <li>{props.value}</li>;}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
        <ListItem key={number.toString()} value={number} />  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Посмотреть на CodePen

Как правило, элементам внутри map() нужны ключи.

Ключи должны быть уникальными среди соседних элементов

Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не нужно быть уникальными глобально. Можно использовать один и тот же ключ в двух разных массивах.

function Blog(props) {
  const sidebar = (    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>    <div key={post.id}>      <h4>{post.title}</h4>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}      <hr />
      {content}    </div>
  );
}

const posts = [
  {id: 1, title: 'Привет, мир', content: 'Добро пожаловать в документацию React!'},
  {id: 2, title: 'Установка', content: 'React можно установить из npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

Посмотреть на CodePen

Ключи служат подсказками для React, но они никогда не передаются в ваши компоненты. Если в компоненте нужно то же самое значение, то передайте его явно через проп с другим именем:

const content = posts.map((post) =>
  <Post
    key={post.id}    id={post.id}    title={post.title} />
);

В примере выше компонент Post может прочитать значение props.id, но не props.key.

Встраивание map() в JSX

В примерах выше мы отдельно определяли переменную listItems и вставляли её в JSX:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>    <ListItem key={number.toString()}              value={number} />  );  return (
    <ul>
      {listItems}
    </ul>
  );
}

JSX позволяет встроить любое выражение в фигурные скобки, так что мы можем включить результат выполнения map():

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>        <ListItem key={number.toString()}                  value={number} />      )}    </ul>
  );
}

Посмотреть на CodePen

Иногда это приводит к более чистому коду, но бывает и наоборот. Как и в любом JavaScript-коде, вам придётся самостоятельно решать, стоит ли извлекать код в переменную ради читабельности. Не забывайте, что если код внутри map() слишком громоздкий, имеет смысл извлечь его в отдельный компонент.

Руководство HTML Lists

В HTML чтобы создать список (List), вы можете использовать пару тегов <ul>, <li> или пару тегов <ol>, <li>:

<h4>Unordered List (UL + LI)</h4>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h4>Ordered List (OL + LI)</h4>

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>
  • <UL> это аббревиатура Unordered List, помогает вам создать список без порядка.
  • <OL> это аббревиатура​​​​​​​ Ordered List, помогает вам создать список с порядком.
  • <LI> это аббревиатура​​​​​​​ List Item. Это пункт (item) списка.

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

nested-example.html

<h4>Nested Unordered List</h4>

<ul>
    <li>HTML</li>
    <li>CSS
        <ul>
            <li>Basic CSS</li>
            <li>Advanced CSS</li>
        </ul>
    </li>
    <li>Javascript</li>
</ul>

<h4>Nested Ordered List</h4>

<ol>
    <li>HTML</li>
    <li>CSS
        <ol>
            <li>Basic CSS</li>
            <li>Advanced CSS</li>
        </ol>
    </li>
    <li>Javascript</li>
</ol>

<h4>Nested List (3)</h4>
<ol>
    <li>HTML</li>
    <li>CSS
        <ul>
            <li>Basic CSS</li>
            <li>Advanced CSS</li>
        </ul>
    </li>
    <li>Javascript</li>
</ol>

<h4>Nested List (4)</h4>
<ul>
    <li>HTML</li>
    <li>CSS
        <ol>
            <li>Basic CSS</li>
            <li>Advanced CSS</li>
        </ol>
    </li>
    <li>Javascript</li>
</ul>

2- Ordered-List Attributes

В отличии от тега <UL>, тег <OL> имеет несколько важных атрибутов (attribute), они включают:

type

Атрибут type определяет вид нумерации (numbering type), он может принять один из следующих значений:

TypeОписание
«1»Использует числа (1,2,..) для нумерации списка. (По умолчанию)
«a»Использует строчные буквы (lowercase) для нумерации списка.
«A»Использует заглавные буквы (uppercase) для нумерации списка.
«i»Использует строчные (lowercase) римские цифры (Roman numerals) для нумерации списка.
«I»Использует заглавные (uppercase) римские цифры (Roman numerals) для нумерации списка.
<h4>OL type="1" (Default)</h4>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h4>OL type="i"</h4>
<ol type="i">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h4>OL type="I"</h4>
<ol type="I">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h4>OL type="a"</h4>
<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h4>OL type="A"</h4>
<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

reversed

Атрибут reversed имеет значение true/false, Если значение является true, список будет пронумерован в обратном порядке.

ol-reversed-example.html

<h4>OL reversed = "false" (Default)</h4>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h4>OL reversed = "true"</h4>
<ol reversed="true">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

start

Атрибут start определяет начальное значение для нумерации списка.

ol-start-example.html

<h4>OL start ="3" type="1"</h4>
<ol start="3">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h4>OL start ="3" type="i"</h4>
<ol start="3" type="i">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h4>OL start ="3" type="a"</h4>
<ol start="3" type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

Тег — пункты списка

Поддержка браузерами

Описание

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

Тег <li> может быть расположен в трех элементах: в нумерованных (<ol>) и маркированных (<ul>) списках, а также в меню (<menu>). В каждом из этих элементов он будет отображаться по разному, например, в нумерованном списке, каждому элементу списка будет предшествовать порядковое значение в виде цифры или алфавитного символа.

Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения.

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

Примечание: по стандарту HTML5 элемент <li> не обязательно должен завершаться закрывающим тегом.

Атрибуты

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

Примечание: работает только с нумерованными списками.

Тег <li> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию


li {
    display: list-item;
} 

Пример


<ol>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Результат данного примера в окне браузера:

| HTML | WebReference

Элемент <li> (от англ. list item — пункт списка) определяет отдельный пункт списка. Внешний элемент <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.

Синтаксис

<ul>
  <li>элемент маркированного списка</li>
</ul> 

<ol>
  <li>элемент нумерованного списка</li>
</ol>

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

Не обязателен.

Атрибуты

type
Устанавливает вид маркера нумерованного или маркированного списка.
value
Число, с которого будет начинаться нумерованный список.

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

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>LI</title> </head> <body> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> </body> </html>

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

Рис. 1. Вид маркированного списка в браузере

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

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


Тег HTML

    определяет упорядоченный список. An упорядоченный список может быть числовым или алфавитным.


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

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

      . Каждый элемент списка начинается с тега
    1. .

      По умолчанию элементы списка будут отмечены цифрами:


      Упорядоченный список HTML — Атрибут типа

      Атрибут type тега

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

        Тип Описание
        type = «1» Элементы списка будут пронумерованы цифрами (по умолчанию)
        type = «A» Элементы списка будут пронумерованы прописными буквами
        type = «a» Элементы списка будут пронумерованы строчными буквами
        type = «I» Элементы списка будут пронумерованы латинскими буквами в верхнем регистре
        type = «i» Элементы списка будут пронумерованы римскими цифрами в нижнем регистре

        Номеров:


        1. Кофе

        2. Чай

        3. Молоко

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

        Заглавные буквы:


        1. Кофе

        2. Чай

        3. Молоко

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

        Строчные буквы:


        1. Кофе

        2. Чай

        3. Молоко

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

        Прописные римские цифры:


        1. Кофе

        2. Чай

        3. Молоко

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

        Строчные римские цифры:


        1. Кофе

        2. Чай

        3. Молоко

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

        Подсчет контрольного списка

        По умолчанию отсчет в упорядоченном списке начинается с 1.Если вы хотите начать отсчет с указанного числа, вы можете использовать атрибут start :

        Пример


        1. Кофе

        2. Чай

        3. Молоко

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

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

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

        Пример


        1. Кофе

        2. Чай

          1. Черный чай

          2. Зеленый чай



        3. Молоко

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

        Примечание: Элемент списка (

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


        Краткое содержание главы

        • Используйте элемент HTML
            для определения упорядоченного списка
          1. Используйте атрибут HTML type для определения типа нумерации
          2. Используйте элемент HTML
          3. для определения элемента списка
          4. Списки могут быть вложенными
          5. Элементы списка могут содержать другие элементы HTML

        Теги списка HTML

        Тег Описание
          Определяет неупорядоченный список
            Определяет упорядоченный список
          1. Определяет элемент списка
            Определяет список описаний
            Определяет термин в списке описания
            Описывает термин в списке описания


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

            Из этого туториала Вы узнаете, как создавать различные типы списков в HTML.

            Работа со списками HTML

            Списки

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

            • Неупорядоченный список — Используется для создания списка связанных элементов без определенного порядка.
            • Упорядоченный список — Используется для создания списка связанных элементов в определенном порядке.
            • Список описаний — Используется для создания списка терминов и их описаний.

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

            В следующих разделах мы рассмотрим все три типа списков один за другим:

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

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

              , каждый элемент которого начинается с элемента
            • .

              Элементы списка в неупорядоченных списках отмечены маркерами. Вот пример:

                
              • Шоколадный торт
              • Торт "Шварцвальд"
              • Ананасовый торт

              — Результат приведенного выше примера будет выглядеть примерно так:

              • Шоколадный торт
              • Торт Шварцвальд
              • Ананасовый торт

              Вы также можете изменить тип маркера в неупорядоченном списке, используя свойство CSS list-style-type .Следующее правило стиля изменяет тип пули с диска по умолчанию на квадрат :

                ul {
                  тип-стиль-список: квадрат;
              }  

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


              Списки упорядоченного HTML

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

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

                Элементы списка в упорядоченном списке отмечены номерами. Вот пример:

                  
                1. Пристегните ремень безопасности.
                2. Запускает двигатель автомобиля.
                3. Посмотри вокруг и иди.

                — Результат приведенного выше примера будет выглядеть примерно так:

                1. Пристегните ремень безопасности
                2. Заводит двигатель автомобиля
                3. Оглянись и иди

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

                  
                1. Смешайте ингредиенты.
                2. Запекать в духовке в течение часа.
                3. Дайте постоять десять минут.

                — Результат приведенного выше примера будет выглядеть примерно так:

                1. Смешайте ингредиенты
                2. Выпекать в духовке час
                3. Дать постоять десять минут

                Как и неупорядоченный список, вы также можете использовать свойство типа списка CSS для изменения типа нумерации в упорядоченном списке.Следующее правило стиля изменяет тип маркера на римские числа.

                  ол {
                    тип-стиль-список: верхний римский;
                }  

                Совет: Вы также можете использовать атрибут type для изменения типа нумерации e.г. type = "I" . Однако вам следует избегать этого атрибута, вместо этого используйте свойство CSS list-style-type .


                Списки описания в формате HTML

                Список описаний - это список элементов с описанием или определением каждого элемента.

                Список описаний создается с использованием элемента

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

                Браузеры обычно отображают списки определений, помещая термины и определения в отдельные строки, где определения терминов имеют небольшой отступ. Вот пример:

                  
                Хлеб
                Выпечка из муки.
                Кофе
                Напиток из жареных кофейных зерен.

                - Результат приведенного выше примера будет выглядеть примерно так:

                Хлеб
                Мука запеченная.
                Кофе
                Напиток из жареных кофейных зерен.
                Списки HTML

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

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

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

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

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

                Определить неупорядоченный список -
                  ...
                Используйте теги
                  для определения начала и конца неупорядоченного списка. Некоторые элементы списка ( li элементов) будут помещены в теги ul .
                Неупорядоченный элемент списка -
              2. какой-то элемент
              3. Добавьте текст для каждого элемента между тегами
              4. и
              5. . Каждый элемент списка должен иметь свои собственные теги li .
                Тип пули
                По умолчанию в браузере отображается круглая точка. Это можно изменить с помощью атрибута type тега ul , который изменит тип маркера для всего списка.
                Тип позиции
              6. Вы можете установить тип маркера для элемента в середине списка, установив атрибут type тега li .

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

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

                Определить упорядоченный список -
                  ...
                Используйте теги
                  , чтобы установить начало и конец списка. После этого между тегами упорядоченного списка будет находиться ряд элементов списка.
                Упорядоченный элемент списка -
              7. элемент
              8. Каждый элемент должен использовать теги
              9. так же, как и в неупорядоченном списке.Но на этот раз браузер будет нумеровать каждый элемент автоматически, вместо того, чтобы отображать маркеры.
              10. Тип списка
                Установите тип индекса списка с помощью type = "?" атрибут. Стиль по умолчанию - числовой, и вы также можете выбрать прописные или строчные, буквенные или римские цифры.
                Начальная позиция списка
                Установите начальную цифру (или букву), если вы не хотите, чтобы список начинался с 1 или A .
                Значение элемента
              11. Вы можете установить значение элемента в середине списка вручную, если вы не хотите, чтобы он следовал за предыдущей буквой или цифрой. Просто установите значение атрибута элемента, который вы хотите изменить. Примечание: последующие элементы будут следовать новому значению.

                Пример:

                  
                 
                   

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

                1. Пункт первый
                2. Пункт второй

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

                1. Элемент списка 1
                2. Элемент списка 2
                3. Элемент списка 3
                4. Элемент списка 4

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

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

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

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

                Пример:

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

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

                Базовый HTML: списки в HTML

                / en / basic-html / text-elements-in-html / content /

                Добавление списков в HTML

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

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

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

                Элемент неупорядоченного списка выглядит так:

                 

                Однако, в отличие от того, что вы видели до сих пор, эти теги сами по себе ничего не делают.Для отображения содержимого в виде списка вам необходимо двух элементов HTML, работающих вместе : сам список, как элемент

                  выше, и элемент списка , элемент , который находится внутри:

                   
                  • Это элемент списка.
                  • Это второй элемент списка.
                  • Здесь три пункта списка.

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

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

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

                  Элемент упорядоченного списка выглядит так:

                   

                  Структура элемента упорядоченного списка в основном такая же , что и структура неупорядоченного списка: элемент

                    является корнем, и любое количество элементов
                  1. входит в него:

                     
                    1. Это элемент списка.
                    2. Это второй элемент списка.
                    3. Здесь три пункта списка.

                    Однако в упорядоченном списке ваш браузер считает элементы списка внутри, и автоматически добавляет рядом с ними числа , а не маркеры. Если бы вы загрузили этот пример в свой браузер, он бы выглядел так:

                    Попробуй!

                    Попробуйте добавить каждый из этих примеров списков во входные данные ниже.

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

                    Сделай сам!

                    Откройте файл index.htm l вашего проекта GCF Programming Tutorials в текстовом редакторе, и давайте добавим список. Для лучшего понимания убедитесь, что вы действительно набираете этот код, а не копируете и вставляете его.

                    1. Для начала найдите второй элемент

                      , который вы добавили:

                       

                      От режиссера Вики Флеминг рассказывается трогательная история о мальчике по имени Пит (Трент Дагсон) и его собаке Ровер ( озвучивает Бринсон Ламблбрунт).Вы можете подумать, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но в этом моменте есть одна особенность: Ровер играет в баскетбол, и у него это хорошо получается.

                    2. Чуть ниже этого элемента давайте добавим небольшое введение для списка:
                       

                      В этом фильме есть все, о чем вы могли бы мечтать:

                    3. Под введением добавьте неупорядоченный список . Обязательно сохраняйте элементы
                    4. с отступом внутри элемента
                        для удобства чтения:
                         
                        • Баскетбольный мяч
                        • Собака
                        • Ожидание грызть ногти

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

                     
                      
                         

                    Обзоры фильмов о классике кино

                    Обзор: Basketball Dog (2018)

                    4 из 5 звезд

                    Режиссер Вики Флеминг представляет трогательную историю о мальчике по имени Пит (Трент Дагсон) и его собаке Ровер (озвучивает Бринсон Ламблбрант).Вы можете подумать, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но в этом моменте есть одна особенность: Ровер играет в баскетбол, и он чертовски хорош в этом.

                    В этом фильме есть все, о чем вы можете мечтать:

                    • Баскетбол
                    • Собака
                    • Ожидание грызть ногти

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

                    Полный список актеров можно найти на сайте Basketball Dog.

                    Откройте File Explorer или Finder и перейдите к своему проекту Programming Tutorials GCF, затем дважды щелкните файл index.html. Ваша веб-страница должна открыться в браузере по умолчанию, и вы должны это увидеть. Поздравляем, на вашей веб-странице появился список!

                    / ru / basic-html / links-and-images-in-html / content /

                    HTML | Списки - GeeksforGeeks

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

                    Например, :

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

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

                    • ul: Неупорядоченный список. Это будет перечислять элементы, используя простые маркеры.
                    • ol: Упорядоченный список. При этом будут использоваться разные схемы номеров для перечисления ваших товаров.
                    • dl: Список определений. Это упорядочивает ваши элементы так же, как они расположены в словаре.
                    Неупорядоченный список HTML
                    Неупорядоченный список начинается с тега «ul». Каждый элемент списка начинается с тега «li». По умолчанию элементы списка отмечены маркерами, то есть маленькими черными кружками.

                    Пример :

                    < html >

                    <

                    h3 > Список покупок h3 >

                    < ul >

                    /000 >

                    < li > Яйца li >

                    < li 000 9000 9000 < li > Кофе li >

                    ul >

                    9000 5

                    body >

                    html >

                    Вывод:


                    Список различных маркеров -

                    1. Диск: Устанавливает маркер элемента списка на маркер i.е по умолчанию.

                      < html >

                      < корпус >

                      000 000

                      000 000 с дисковыми пулями h3 >

                      < h3 > Список продуктов h3 >

                      < <9000 «тип списка: диск» >

                      < li > Хлеб li >

                      s> 000 E li >

                      < li > Молоко li >

                      < li > Кофе li >

                      ul >

                      корпус > корпус > >

                      Выход:

                    2. Круг: Устанавливает маркер элемента списка в круг.

                      < html >

                      < корпус >

                      000 000 000 000 000 с кружком h3 >

                      < h3 > Список продуктов h3 >

                      стиль = «список-стиль-тип: круг» >

                      < li > Хлеб li >

                      > Яйца li >

                      < li > Молоко li >

                      900 04 < li > Кофе li >

                      ul >

                      корпус > > html >

                      Вывод:

                    3. Квадрат: Устанавливает маркер элемента списка в квадрат.

                      < html >

                      < корпус >

                      000 000

                      000 000 с квадратными маркерами h3 >

                      < h3 > Список продуктов h3 >

                      стиль = «список-стиль: квадрат» >

                      < li > Хлеб li >

                      > Яйца li >

                      < li > Молоко li >

                      9000 4 < li > Кофе li >

                      ul >

                      000 > 0004 html >

                      Вывод:

                    Упорядоченный список HTML
                    Упорядоченный список начинается с тега «ol».Каждый элемент списка начинается с тега «li». По умолчанию элементы списка отмечены цифрами.
                    Пример :

                    < html >

                    < корпус > Список продуктов h3 >

                    < ol >

                    < 0004>

                    < li > Яйца li >

                    < li > 000 000 000 000 000 < li > Кофе li >

                    ol >

                    900 03 body >

                    html >

                    Вывод:

                    Список элементов, упорядоченных по HTML, содержит различные маркеры.

                    Атрибут type тега

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

                      1. Введите = ”1 ″: Элементы списка будут пронумерованы числами, то есть по умолчанию.

                        < html >

                        < корпус >

                        000 000

                        с номерами h3 >

                        < ol тип = "1" >

                        0004 li >

                        < li > Яйца li >

                        / k >

                        < li > Кофе li >

                        ol >

                        корпус >

                        html >

                        Выход:

                        40246


                      2. 46 Пункты списка будут пронумерованы заглавными буквами.

                        < html >

                        < корпус >

                        000 000 000 с буквами h3 >

                        < ol тип = "A" >

                        li >

                        < li > Яйца li >

                        / k >

                        < li > Кофе li >

                        ol >

                        корпус >

                        html >

                        Выход:

                        40246


                        46 Пункты списка будут пронумерованы строчными буквами.

                        < html >

                        < корпус >

                        000 000

                        000

                        с строчными буквами h3 >

                        < ol тип = «a» >

                        >

                        >

                        >

                        Хлеб li >

                        < li > Яйца li >

                        000 >

                        < li > Кофе li >

                        ol > 9 0005

                        корпус >

                        html >

                        Тип: 9014 ”6 9001 9014 ”1 9001 : Элементы списка будут пронумерованы римскими цифрами в верхнем регистре.

                        < html >

                        < корпус >

                        000 000

                        с римскими цифрами h3 >

                        < ol тип = "I" >

                        >

                        >

                        Хлеб li >

                        < li > Яйца li >

                        000 >

                        < li > Кофе li >

                        ol >

                        корпус >

                        html >

                        Тип:

                        2

                        Выход:

                        Элементы списка будут пронумерованы римскими цифрами в нижнем регистре.

                        0 905

                        < html >

                        < корпус >

                        000 000

                        с римскими цифрами в нижнем регистре h3 >

                        < ol тип = "i" >

                        000 000 > Хлеб li >

                        < li > Яйца li >

                        li >

                        < li > Кофе li >

                        ol >

                        кузов >

                        html >

                        900 Описание 9014

                        9002 Выход: 9014


                        Список описаний - это список терминов с описанием каждого термина.
                        Тег определяет список описаний, тег определяет имя термина, а тег описывает каждый термин.
                        Пример :

                        < html >

                        < корпус

                        > A Description List h3 >

                        < dl >

                        < 9000 dt> 9000 dt> 9000 dt >

                        < dd > - 500 граммов dd >

                        < dt 000 000 > 9000 0006 < dd > - 1 л Tetra Pack dd >

                        dl >

                        9000 4

                        body >

                        html >

                        Вывод:

                        вложенный список

                        :

                        : вложенный список это список, в котором есть список внутри списка.

                        < html >

                        < корпус >

                        000

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

                        < ul >

                        < li

                        9000 9000 9000 9000 > Кофе < li > Чай

                        < ul >

                        < li 000 9000 000 > > Черный чай < li > Зеленый чай li >

                        ul 900 04>

                        li >

                        < li > Молоко li > 000

                        корпус >

                        html >

                        Выход: 00! Не прекращайте учиться сейчас.Получите все важные концепции конкурентного программирования с Web Design for Beginners | HTML курс.


                        HTML-списки - javatpoint

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

                        1. Упорядоченный список или нумерованный список (ol)
                        2. Неупорядоченный список или маркированный список (ul)
                        3. Список описаний или Список определений (dl)
                        Примечание. Мы можем создать список внутри другого списка, который будет называться вложенным списком.

                        Упорядоченный список HTML или нумерованный список

                        В упорядоченных списках HTML все элементы списка по умолчанию отмечены числами. Он также известен как нумерованный список. Упорядоченный список начинается с тега

                          , а элементы списка начинаются с тега
                        1. .

                          1. Овен
                          2. Бинго
                          3. Лев
                          4. Оракул

                          Проверить это сейчас

                          Выход:

                          1. Овен
                          2. Бинго
                          3. Лев
                          4. Оракул

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


                          Неупорядоченный список HTML или маркированный список

                          В HTML-неупорядоченном списке все элементы списка отмечены маркерами. Он также известен как маркированный список. Неупорядоченный список начинается с тега

                            , а элементы списка начинаются с тега
                          • .

                            • Овен
                            • Бинго
                            • Лев
                            • Оракул

                            Проверить это сейчас

                            Выход:


                            Щелкните здесь, чтобы получить полную информацию о неупорядоченном списке HTML.Неупорядоченный список HTML


                            Список описаний в формате HTML или список определений

                            Список

                            HTML Description также является стилем списка, который поддерживается HTML и XHTML. Он также известен как список определений, где записи перечислены как словарь или энциклопедия.

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

                            Список определений HTML содержит следующие три тега:

                            1. Тег
                              определяет начало списка.
                            2. Тег
                              определяет термин.
                            3. Тег
                              определяет определение термина (описание).

                            Овен
                            -Один из 12 знаков гороскопа.
                            Бинго
                            -Одна из моих вечерних закусок
                            Лев
                            -Это также один из 12 знаков гороскопа.
                            Oracle
                            -Это многонациональная технологическая корпорация.

                            Проверить это сейчас

                            Выход:

                            Овен
                            - Один из 12 знаков гороскопа.
                            Бинго
                            -Одна из моих вечерних закусок
                            Лев
                            -Это также один из 12 знаков гороскопа.
                            Оракул
                            -Это многонациональная технологическая корпорация.

                            Щелкните здесь, чтобы получить полную информацию о списке описаний в формате HTML. Список описаний HTML


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

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

                            Код:

                            .

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

                            Список штатов Индии с их столицей

                            1. Дели
                              • Нью-Дели
                            2. Харьяна
                              • Чандигарх
                            3. Гуджарат
                              • Гандинагар
                            4. Раджастхан
                              • Джайпур
                            5. Махараштра
                              • Мумбаи
                            6. Уттарпрадеш
                              • Лакхнау

                            Проверить это сейчас

                            Выход:


                            Поддерживающие браузеры


                            Доступность в Пенсильвании | Списки в HTML

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

                            Маркированные списки

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

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

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

                            Объединить списки с заголовками

                            Другое решение - использовать заголовки меньшего размера в сочетании с одноуровневыми списками. См. Пример ниже.

                            Вложенный упорядоченный список
                            • Северная Америка
                              • США
                              • Канада
                              • Мексика
                            • Центральная Америка
                              • Гватемала
                              • Гондурас
                              • Коста-Рика
                            Что говорит программа чтения с экрана

                            Примечание: Многие программы чтения с экрана читают этот список регионов и стран в виде одной строки.

                            • Северная Америка
                            • США
                            • Канада
                            • Мексика
                            • Центральная Америка
                            • Гватемала
                            • Гондурас
                            • Коста-Рика
                            с заголовками

                            В этом примере регионы - это заголовки 3 или 4 и отдельные списки стран.

                            Северная Америка
                            • США
                            • Канада
                            • Мексика
                            Центральная Америка
                            • Гватемала
                            • Гондурас
                            • Коста-Рика

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

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

                            Недоступный вложенный список

                            Какой визуальный браузер:

                            Колледжи и факультеты Юниверсити-Парк

                            1. Сельскохозяйственные науки

                            1. Сельскохозяйственная и биологическая инженерия.
                            2. Экономика сельского хозяйства.

                            2. Искусство и архитектура

                            1. Кафедра архитектуры

                            1. Кафедра архитектуры
                            2. Кафедра ландшафтной архитектуры

                            Что говорит программа чтения с экрана:

                            Колледжи и факультеты Юниверсити-Парк

                            1.Сельскохозяйственные науки 1. Сельскохозяйственная и биологическая инженерия… 2. Искусство и архитектура 1. Архитектура и ландшафтная архитектура 1. Кафедра ландшафтной архитектуры.

                            Доступный вложенный список

                            Что видит визуальный браузер:

                            Колледжи и факультеты Юниверсити-Парк

                            1. Сельскохозяйственные науки
                              1. Сельскохозяйственная и биологическая инженерия
                              2. Экономика сельского хозяйства
                            2. Искусство и архитектура
                              1. Архитектура и ландшафтная архитектура
                                1. Архитектурный факультет
                                2. Кафедра ландшафтной архитектуры
                              2. История искусств
                            Что говорит программа чтения с экрана:

                            Колледжи и факультеты Юниверсити-Парк

                            1.Сельскохозяйственные науки A. Сельскохозяйственная и биологическая инженерия… 2. Искусство и архитектура A. Архитектура и ландшафтная архитектура i. Кафедра ландшафтной архитектуры.

                            Использование маркеров изображений

                            Общие предостережения

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

                            CSS

                            В HTML вы можете заменить маркеры пользовательскими изображениями маркеров с помощью атрибута CSS list-style-image: url (path) . Однако пуля будет прочитана так, как если бы она была изменена в программе чтения с экрана.

                            Пример списка с настраиваемыми маркерами:

                            Два цвета штата Пенсильвания:

                            Спецификация файла CSS:

                            ul.paw {list-style-image: url (examples / paw.gif)}

                            Просмотр HTML-кода:

                              class = "paw" >
                            • Синий

                            • Белый

                            Атрибут list-style-image заменяет маркер изображением.