— HTML | MDN
HTML-элемент <li>
используется для создания элементов списка. Он также должен находиться в родительском элементе: упорядоченном списке (<ol>
), неупорядоченном списке (<ul>
), или меню (<menu>
). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы.
Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/interactive-examples и отправьте нам pull request.
Категории контента | Нет. |
---|---|
Разрешённое содержимое | Потоковый контент |
Пропуск тегов | Закрывающий тег может быть опущен, если за элементом непосредственно следует другой элемент или если в родительском элементе нет больше содержимого. |
Разрешённые родители | Элементы <ul> , <ol> , или <menu> . Хотя и не соответствует использованию, устаревший <dir> (en-US) тоже может быть родительским элементом. |
Разрешённые ARIA-роли | menuitem , menuitemcheckbox , menuitemradio , option , presentation , radio , separator , tab , treeitem |
DOM-интерфейс | HTMLLIElement |
Этот элемент включает глобальные атрибуты.
value
- Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента
<ol>
. Единственное разрешённое значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут value не имеет значения для неупорядоченных списков (<ul>
) или для меню (<menu>
).Примечание: Этот атрибут был убран в HTML4, но заново добавлен в HTML5.
Примечание: Предыдущие до Gecko 9.0, отрицательные значения неправильно конвертировались в 0. Начиная с Gecko 9.0 все числовые значения воспринимаются правильно.
type
- Этот символьный атрибут указывает на тип нумерации:
Строчные буквы — это которые не заглавные.
a
: строчные буквыA
: заглавные буквыi
: строчные римские цифрыI
: заглавные римские цифры1
: цифры
<ol>
или любого другого.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
, для контроля отступа между элементами списка.
- свойство
Атрибут type | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает вид маркера. Тип маркера и его значение зависит от внешнего контейнера <ul> или <ol>.
Синтаксис
<li type="disc | circle | square">...</li>
<li type="A | a | I | i | 1">...</li>
Значения
Для маркированного списка (тег <ul>) маркеры могут принимать один из трех видов: круг, окружность и квадрат. Значения атрибута type и получаемый вид показан в табл. 1.
Код | Пример |
---|---|
<li type=»disc»> |
|
<li type=»circle»> |
|
<li type=»square»> |
|
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>, который и используется для создания списка. В качестве маркеров могут быть следующие значения:
- заглавные латинские буквы;
- строчные латинские буквы;
- заглавные римские цифры;
- строчные римские цифры;
- арабские цифры.
В табл. 2 приведены различные значения атрибута type тега <li> и результат их применения.
Код | Пример |
---|---|
<ol> <li type=»A»> </ol> |
|
<ol> <li type=»a»> </ol> |
|
<ol> <li type=»I»> </ol> |
|
<ol> <li type=»i»> </ol> |
|
<ol> <li type=»1″> </ol> |
|
Значение по умолчанию
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. Разные маркеры в списке
Тег HTML элемент списка
Тег <li> в HTML определяет элемент (пункт) списка.
Тег <li> должен быть дочерним тегом нумерованного списка <ol> или маркированного списка <ul>.
При помощи CSS свойств для конкретного пункта списка можно изменять параметры: тип маркера, его положение (для маркированного списка), тип нумерации (для нумерованного списка). Подробнее на странице: Создание списков. Все о HTML списках.
Синтаксис
<li>контент элемента</li>
Отображение в браузере
Тег li в маркированном списке:
Основные характеристики 3D принтера:
- Область печати
- Точность позиционирования по осям X, Y, Z
- Диаметр сопла
- Диаметр нити
- Высота слоя
- Скорость печати
Тег li в нумерованном списке:
Документы для подачи заявки на визу:
- Действительный заграничный паспорт
- Визовая анкета
- Одна фотография длиной и шириной 5 см
- Письмо-подтверждение назначенного собеседования
Пример использования <li> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Элемент li в маркированном HTML списке</title>
</head>
<body>
<ul>
<li>Область печати</li>
<li>Точность позиционирования по осям X, Y, Z</li>
<li>Диаметр сопла</li>
<li>Высота слоя</li>
<li>Скорость печати</li>
</ul>
</body>
</html>
Поддержка браузерами
Атрибуты тега <li>
Атрибут | Значение | Описание |
---|---|---|
value | число |
Устанавливает значение нумерации для текущего пункта. Последующие пункты <li> будут иметь номера идущие за указанным. |
Тег <li> также поддерживает глобальные HTML атрибуты.
Устаревшие атрибуты
Атрибут | Значение | Описание |
---|---|---|
type | 1 A a I i disc square circle |
Тип оформления списка: 1 — арабские цифры (1, 2, 3, 4, 5…). |
Всегда ли должен быть вложен между и ? не
Я знаю, что этот вопрос был задан по-разному, особенно с ‘nav’
Но я постоянно натыкаюсь на веб-страницы, где ‘li’ является дочерним элементом ‘section’ или ‘article’ без предшествующих родительских элементов ‘ ul или ‘ol’. Обычно это делается параграфами. Это метод «correct»? Если да,то какие еще элементы допустимо опустить в ‘ol’ и ‘ul’.
‘section’ ‘li’ Лорем Эпсом лови julgulerum ‘/li’
( Я знаю, что «correct» может быть спорным, особенно если принимать во внимание программы чтения с экрана)
Спасибо.
htmlПоделиться Источник SheaFace 09 октября 2018 в 09:08
4 ответа
- CSS выпадающее меню: nav ul ul li перемещено вправо
Вот изображение : проблема в том, что nav ul ul li переместился вправо, как видно на изображении, вкладка Contact переместилась вправо, и таким образом размер был не тот, что я хотел. Я хочу, чтобы вкладка Contact имела тот же размер, что и About. Это мой кодекс : (HTML) <nav> <ul>…
- Nav ul & li выпуск для автоматической ширины
Я использую навигационный тег для меню. Что вы можете увидеть здесь . Моя проблема в том, что последняя ширина меню F & G не соответствует содержимому. В то время как другие меню от А до Е подходят по содержанию. Помоги мне, я не знаю, как это сделать. Я знаю, что это может быть легко, но я…
2
Согласно странице сети разработчиков Mozilla :
Элемент HTML
<li>
используется для представления элемента в списке. Он должен содержаться в родительском элементе: упорядоченный список (<ol>
), неупорядоченный список (<ul>
) или меню (<menu>
).
Так что да, вам нужно вложить любой элемент <li>
в список или меню. Однако элемент <li>
может содержать почти все остальные элементы внутри. А также да, <article>
или <section>
могут содержаться внутри <li>
.
Поделиться KittMedia 09 октября 2018 в 09:14
0
Страницы, на которых элементы li
вложены непосредственно в элементы section
, article
или даже nav
, явно содержат неверные элементы markup. Как в стандартах WHATWG , так и в стандартах W3C (как в опубликованной , так и в предстоящей версии) указано, что элементы li
могут использоваться только в контексте элементов списка (либо ol
, либо ul
, стандарт WHATWG также добавляет параметр menu
, в то время как стандарт W3C больше не содержит элемента menu
). Нет других контекстов, в которых этот элемент можно было бы использовать.
Однако, поскольку стандарт HTML разработан, чтобы быть устойчивым к ошибкам и устойчивым, в нем также есть правила для браузеров, как обращаться с неправильным markup. Вот почему определение элемента li
содержит (довольно запутанную) часть «otherwise», которая описывает, что должен делать браузер, если он столкнется с этим элементом в контексте, где он не может быть использован. Страница с таким неправильным markup по-прежнему будет отображаться и в основном функциональна, но она будет не так доступна, как страница с правильным markup (например, программы чтения с экрана не смогут объявить, что есть список и сколько элементов он содержит).
Элемент ul
и ol
, содержащий элементы li
, может содержаться в любом элементе секционирования (и, как правило, в любом элементе, модель содержимого которого «Flow content» )., Сами элементы li
технически могут содержать любые «Flow content» (включая разделы и заголовки), но стандарт W3C имеет следующее примечание об этом:
Хотя он соответствует включению элементов заголовка (например,
h3
) и секционированию содержимого внутри элементов li, он, вероятно, не передает семантику, которую предполагал автор. Заголовок начинает новый раздел, поэтому заголовок в списке неявно разбивает список на несколько разделов. Секционирование содержимого явно создает новый раздел и таким образом разбивает список на несколько разделов.
Поэтому, если у вас есть список с различными разделами/статьями в его элементах, рекомендуется проверить эту страницу на доступность, чтобы убедиться, что способ представления информации средствами чтения с экрана соответствует намерениям автора.
Поделиться Ilya Streltsyn 09 октября 2018 в 15:27
- Выберите `li` из `nav > ul`
Как я могу выбрать элементы li , дочерние элементы элемента nav > ul ? Как вы можете видеть в следующем фрагменте, я могу выбрать nav > ul и удалить стиль листинга. Однако я не могу изменить цвет только Link1 , Link2 и Link3 . nav > ul { list-style: none; } nav > ul li { color: red; }…
- Использование ul внутри ol
Я пытаюсь написать действительный HTML, однако это не удается: <ol> <li>First</li> <li>Second</li> <ul> <li>First of second</li> </ul> </ol> Это не удается при генерации javadoc. Там написано: error: tag not allowed here: <ul>…
0
Я не думаю, что это так просто, как кажется. В соответствии с уровнем жизни WHATWG :
Контексты, в которых этот элемент может использоваться:
Внутри элементов ol.
Внутри элементов ul.
Внутренние элементы меню.
Но позже в нем говорится:
Элемент li представляет элемент списка. Если его родительский элемент является элементом ol, ul или меню, то элемент является элементом родительского элемента список элементов, определенный для этих элементов. В противном случае список элемент не имеет определенной связи, связанной со списком, с любым другим элементом li.
Что, по-видимому, предполагает, что было бы законно иметь li, не содержащийся в одном из этих элементов.
Глядя на таблицу стилей агента пользователя в Chrome, кажется, что все «list styling» содержится в родительском элементе:
ul, menu, dir {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
а li
-это просто элемент с компонентом display:list-item
:
li {
display: list-item;
text-align: -webkit-match-parent;
}
Таким образом, казалось бы, было бы законно использовать li
вне списка, если вам требуется элемент с отображением list-item
. Вопрос о том, насколько это было бы полезно вне списка, остается открытым для обсуждения.
Ваш второй вопрос:
‘li’ является родителем ‘section’ или ‘article’. Это «correct»?
Да, <li>
может содержать любой другой HTML. Точно так же, как это может сделать любой контейнер.
Поделиться Liam 09 октября 2018 в 09:23
-1
Если вы просто используете тег li без вложенности внутри тега ul или тега ol , результат визуализации будет представлять собой неупорядоченный список со значками маркеров, предшествующими тегу li . Это не стандартный формат, хотя он дает точно такой же вывод, как вы используете его, вложенный в тег ol или тег ul .
Поделиться Damini Mahawer 09 октября 2018 в 09:23
Похожие вопросы:
Div не может быть вложен внутри ul и li не может быть вложен внутри div
В приведенном ниже коде у меня есть div внутри тега ul для создания сворачиваемого выпадающего списка. Но он бросает див не могут быть вложенными внутри UL и Li не может быть вложен в див….
В то время как стиль ol li применяется к ul li?
Я пытаюсь создать вложенный список: <html> <head> <style> ol li { list-style: decimal outside none; } </style> </head> <body> <ol>…
Как правильно я отношусь к <li> в CSS, должен ли я использовать, например, ul > li или просто ul li
Я узнал, что если я ссылаюсь на <li> в <ul> или <ol> в CSS, я должен использовать ol > li или ul > li , но однажды я забыл поставить знак между ol и li, и я обнаружил, что…
CSS выпадающее меню: nav ul ul li перемещено вправо
Вот изображение : проблема в том, что nav ul ul li переместился вправо, как видно на изображении, вкладка Contact переместилась вправо, и таким образом размер был не тот, что я хотел. Я хочу, чтобы…
Nav ul & li выпуск для автоматической ширины
Я использую навигационный тег для меню. Что вы можете увидеть здесь . Моя проблема в том, что последняя ширина меню F & G не соответствует содержимому. В то время как другие меню от А до Е…
Выберите `li` из `nav > ul`
Как я могу выбрать элементы li , дочерние элементы элемента nav > ul ? Как вы можете видеть в следующем фрагменте, я могу выбрать nav > ul и удалить стиль листинга. Однако я не могу изменить…
Использование ul внутри ol
Я пытаюсь написать действительный HTML, однако это не удается: <ol> <li>First</li> <li>Second</li> <ul> <li>First of second</li> </ul>…
разбор вложенных li внутри ul и ol
У меня есть сценарий, в котором, когда li попадает под ul , мне нужно заменить его точкой (.), а когда li приходит и ol , мне нужно заменить его цифрой. Но проблема в том, что- 1) это не делается…
Разбор тегов ‘ul’ и ‘ol’
Я должен обрабатывать глубокую вложенность тегов ul , ol и li . Мне нужно дать тот же вид, что и мы даем в браузере. Я хочу получить следующий пример в файле pdf: text = <body> <ol>…
увеличение nav и li
У меня проблемы с навигацией. Когда я парю, все это увеличивается, но я не знаю почему. Но раньше, когда я очищаю линию в ol > li width: 150px; все в порядке, но мне нужен контент и 30padding влево…
Тег li
Пример
Один заказанный (<ol>) и один неупорядоченный (<ul>) Список HTML:
Coffee
Tea
Milk
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Подробнее примеры ниже.
Определение и использование
Тег <li> определяет элемент списка.
Тег <li> используется в упорядоченных списках(<ol>), неупорядоченные списки (<ul>), и в списки меню (<menu>).
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<li> | Да | Да | Да | Да | Да |
Различия между HTML 4,01 и HTML5
Атрибут <type> является навестить поддерживается в HTML5.
Атрибут <value> был Устаревшие в HTML 4,01, но поддерживается в HTML5.
Советы и примечания
Совет: Используйте CSS для определения типа списка.
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
type | 1 A a I i disc square circle | Не поддерживается в HTML5. Указывает, какой тип точки маркирования будет использоваться |
value | number | Задает значение элемента списка. Следующие элементы списка будут увеличиваться с этого числа (только для списков <ol>) |
Глобальные атрибуты
Тег <li> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <li> также поддерживает Атрибуты событий в HTML.
Попробуйте примеры
Вложенный список
Список внутри списка.
Другой вложенный список
Более сложный вложенный список.
Похожие страницы
HTML Учебник: HTML Lists
HTML DOM Ссылки: Li Object
CSS Учебник: Styling Lists
Параметры CSS по умолчанию
В большинстве обозревателей элемент <li> будет отображаться со следующими значениями по умолчанию:
li {
display: list-item;
}
Группировка содержимого в HTML5
HTML-элементы для группировки содержимого веб-страниц
1. Элемент <p>
Категории контента: потоковое содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: закрывающий тег элемента <p> может быть пропущен, если сразу за ним следует <address>, <article>, <aside>, <blockquote>, <details>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <header>, <hr>, <main>, <nav>, <ol>, <p>, <pre>, <section>, <table> или <ul> элемент, или если в родительском элементе больше нет содержимого, а родительский элемент не является <a>, <audio>, <del>, <ins>, <map>, <noscript> или <video>.
Для элемента доступны глобальные атрибуты.
Элемент <p> представляет абзац. Абзацы — это блоки текста, физически отделенные от смежных блоков пустыми строками.
<p>Маленький котенок осторожно уселся на кусок ковра. Позже в его жизни это будет упоминаться как время, когда кошка сидела на коврике.</p>
<fieldset>
<legend>Персональная информация</legend>
<p>
<label>Имя: <input name="n"></label>
<label><input name="anon" type="checkbox"> Скрыть от других пользователей</label>
</p>
<p><label>Адрес: <textarea name="a"></textarea></label></p>
</fieldset>
Элемент <p> не должен использоваться, когда уместен более конкретный элемент. Следующий пример является технически правильным:
<section>
...
<p>Последнее изменение: 2001-04-23</p>
<p>Автор: [email protected]</p>
</section>
Тем не менее, это было бы лучше разметить как:
<section>
...
<footer>Последнее изменение: 2001-04-23</footer>
<address>Автор: [email protected]</address>
</section>
Или так:
<section>
...
<footer>
<p>Последнее изменение: 2001-04-23</p>
<address>Автор: [email protected]</address>
</footer>
</section>
Элементы списка (в частности, элементы <ol> и <ul>) не могут быть дочерними элементами <p>. Поэтому, когда предложение содержит маркированный список, его можно разметить следующим образом:
<p>Например, в этом фантастическом предложении есть элементы маркированного списка, относящиеся к</p>
<ul>
<li>волшебникам,
<li>путешествию быстрее скорости света,
<li>телепатии,
</ul>
<p>и это обсуждается ниже.</p>
2. Элемент <address>
Категории контента: потоковое содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты.
Элемент <address> представляет контактную информацию о человеке или организации. Он должен включать физическое и / или цифровое местоположение / контактную информацию и средства идентификации лица (лиц) или организации, к которой относится эта информация. В браузере обычно отображается курсивом.
Например, твиттер-аккаунт W3C:
<address>
<p>W3C в Twitter:
<p><a href="https://twitter.com/w3c">@w3c</a>
</address>
Адрес, телефон и факс организации:
<address>
Центральный офис АО «Почта России»<br>
131000, Москва, Варшавское шоссе, 37<br>
Тел.: +7 (495) 956-20-67 | Факс: +7 (495) 956-99-51
</address>
3. Элемент <hr>
Категории контента: потоковое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты.
Элемент <hr> представляет собой тематический разрыв на уровне абзаца, например, изменение сцены в рассказе или переход к другой теме в разделе справочника.
<section>
<h2>Общение</h2>
<p>Существуют различные способы общения. Этот раздел охватывает несколько важных, используемых проектом.</p>
<hr>
<p>Камни связи, кажется, приходят парами и имеют загадочные свойства:</p>
<ul>
<li>Они могут передавать мысли в двух направлениях после активации, если используются в одиночку.</li>
<li>Если оба камня используются с другим устройством, сознание переключается на другое тело.</li>
</ul>
<hr>
<p>Радиоприемники используют электромагнитный спектр в метровом диапазоне и дольше.</p>
<hr>
<p>Сигнальные вспышки используют электромагнитный спектр в нанометровом диапазоне.</p>
</section>
Нет необходимости в элементе <hr> между разделами, поскольку элементы <section> и элементы <h2> сами подразумевают смену тематики.
Элемент <hr> не влияет на структуру документа.
4. Элемент <pre>
Категории контента: потоковое содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты.
Элемент <pre> представляет собой блок предварительно отформатированного текста, в котором структура представлена типографскими соглашениями, а не элементами.
В синтаксисе HTML ведущий символ новой строки, следующий сразу за начальным тегом <pre>, удаляется.
Для представления блока компьютерного кода, элемент <pre> может использоваться с элементом <code>. Для представления результата выполнения программного кода или скрипта элемент <pre> может использоваться с элементом <samp>. Аналогично, элемент <kbd> может использоваться в элементе <pre> для указания текста, который должен ввести пользователь.
<p>Это конструктор <code>Panel</code>:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
5. Элемент <blockquote>
Категории контента: потоковое содержимое, корневой секционный, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты и необязательный атрибут cite, содержащий ссылку на источник цитаты. Браузеры могут разрешать пользователям переходить по таким ссылкам, но они в первую очередь предназначены для частного использования (например, серверными скриптами, собирающими статистику использования цитат сайта), а не для читателей.
Элемент <blockquote> представляет содержимое, цитируемое из другого источника, необязательно со ссылкой на источник цитирования, которая указывается в элементе <footer> или <cite>, и, необязательно, с изменениями по тексту, такими как аннотации и сокращения.
<blockquote>
<p>От перца, верно, начинают всем перечить... От уксуса - куксятся, от горчицы - огорчаются, от лука - лукавят, от вина - винятся, а от сдобы - добреют. Как жалко, что никто об этом не знает... Всё было бы так просто! Ели бы сдобу и добрели!</p>
<cite>Льюис Кэрролл. Приключения Алисы в Стране чудес</cite>
</blockquote>
<blockquote>
<p>Моя любимая книга <cite>"О водоплавающих"</cite></p>
<footer>- <cite>Майк Смит</cite></footer>
</blockquote>
6. Элемент <ol>
Категории контента: потоковое содержимое. Если содержит хотя бы один элемент <li> — видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице ниже:
Атрибут | Описание, принимаемое значение |
---|---|
reversed | Логический атрибут. Если присутствует, это означает, что список является нисходящим (…, 3, 2, 1). Если атрибут опущен, список является восходящим (1, 2, 3, …). |
start | Целое число, задающее порядковый номер первого элемента списка. По умолчанию равно 1 (если отсутствует атрибут reversed). |
type | Используется для указания типа маркера, по умолчанию используется десятичная нумерация. Принимаемые значения: 1 — десятичная нумерация. A — нумерация списка в алфавитном порядке, прописные буквы латинского алфавита (A, B, C, D). a — нумерация списка в алфавитном порядке, строчные буквы латинского алфавита (a, b, c, d). I — нумерация римскими заглавными цифрами (I, II, III, IV). i — нумерация римскими строчными цифрами (i, ii, iii, iv). |
Элемент <ol> представляет собой список элементов, где элементы были изначально упорядочены таким образом, что изменение порядка изменило бы смысл документа. Элементами списка являются элементы <li>.
<p>Я жил в следующих странах (приведено в порядке, когда я впервые жил там):</p>
<ol>
<li>Швейцария
<li>Великобритания
<li>США
<li>Норвегия
</ol>
7. Элемент <ul>
Категории контента: потоковое содержимое. Если содержит хотя бы один элемент <li> — видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты.
Элемент <ul> представляет собой список элементов, где порядок элементов не важен, то есть когда изменение порядка не приведет к существенному изменению смысла документа.
<p>Я жил в следующих странах:</p>
<ul>
<li>Швейцария
<li>Великобритания
<li>США
<li>Норвегия
</ul>
8. Элемент <li>
Категории контента: отсутствуют.
Контекст, в котором этот элемент может быть использован: внутри элемента <ol> и <ul>.
Пропуск тегов: закрывающий тег </li> может быть опущен, если элемент <li> сразу следует за другим элементом <li>, или если больше нет содержания в элементе, в который вложен тег.
Для элемента доступны глобальные атрибуты. Если элемент является дочерним элементом <ol> — необязательный атрибут value.
Элемент <li> представляет собой элемент списка. Если родительским элементом является элемент <ol>, то элемент <li> имеет порядковый номер.
Атрибут value, если он присутствует, должен быть допустимым целым числом, задающим порядковый номер элемента списка.
<figure>
<figcaption>Топ 10 фильмов всех времен</figcaption>
<ol>
<li value="10"><cite>Джози и кошечки</cite>, 2001</li>
<li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
<li value="8"><cite>Приключения Флика</cite>, 1998</li>
<li value="7"><cite>История игрушек</cite>, 1995</li>
<li value="6"><cite>Корпорация монстров</cite>, 2001</li>
<li value="5"><cite>Тачки</cite>, 2006</li>
<li value="4"><cite>История игрушек 2</cite>, 1999</li>
<li value="3"><cite>В поисках Немо</cite>, 2003</li>
<li value="2"><cite>Суперсемейка</cite>, 2004</li>
<li value="1"><cite>Рататуй</cite>, 2007</li>
</ol>
</figure>
9. Элемент <dl>
Категории контента: потоковое содержимое. Если имеется хотя бы одна пара <dt>—<dd> — видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты.
Элемент <dl> представляет список описаний, состоящий из нуля или более групп термин-описание. Термин представлен элементом <dt>, описание — элементом <dd>.
Группы термин-описание могут быть терминами и определениями, вопросами и ответами, категориями и темами и т.п.
<dl>
<dt>Текила «Бланко»</dt>
<dd>Кристально прозрачная текила с медовым вкусом спелой агавы...</dd>
<dt>Текила «Репосадо»</dt>
<dd>Текила, выдержанная в бочках из белого дуба в течение 8-10 месяцев...</dd>
</dl>
10. Элемент <dt>
Категории контента: отсутствуют.
Контекст, в котором этот элемент может быть использован: перед элементами <dd> или <dt> внутри элементов <dl>.
Пропуск тегов: закрывающий тег элемента <dt> может быть опущен, если за элементом <dt> сразу же следует другой элемент <dt> или элемент <dd>.
Для элемента доступны глобальные атрибуты.
Элемент <dt> представляет термин в списке описаний <dl>.
При использовании в элементе <dl> элемент <dt> не обязательно представляет определяемый термин. Для этой цели можно использовать элемент <dfn>.
<dl>
<dt lang="en-us"><dfn>Color</dfn></dt>
<dt lang="en-gb"><dfn>Colour</dfn></dt>
<dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three
differently filtered analyses of a view.</dd>
</dl>
11. Элемент <dd>
Категории контента: отсутствуют.
Контекст, в котором этот элемент может быть использован: после элементов <dt> или <dd> внутри элементов <dl>.
Пропуск тегов: закрывающий тег элемента <dd> может быть опущен, если за элементом <dd> сразу же следует другой элемент <dd> или элемент <dt> или если в родительском элементе больше нет содержимого.
Для элемента доступны глобальные атрибуты.
Элемент <dd> представляет описание в списке описаний <dl>.
12. Элемент <figure>
Категории контента: потоковое содержимое, корневой секционный, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Элемент <figure> представляет автономное содержимое (необязательно с подписью), являющееся самостоятельным элементом основного потока. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д.
<figure>
<img src="picture.jpg" alt="Осень">
<figcaption>Осенний лес</figcaption>
</figure>
Когда на <figure> ссылаются из основного содержимого документа, идентифицируя его по заголовку (например, по номеру рисунка), это позволяет легко перемещать такое содержимое из основного содержимого, например, в боковую колонку или приложение, не затрагивая поток документа.
Стили браузеров по умолчанию для элемента <figure>:
display: block;
margin-left: 40px;
margin-right: 40px;
margin-top: 1em;
margin-bottom: 1em;
Для элемента доступны глобальные атрибуты.
13. Элемент <figcaption>
Категории контента: отсутствуют.
Контекст, в котором этот элемент может быть использован: как потомок элемента <figure>.
Пропуск тегов: ни один из тегов не может быть пропущен.
Элемент <figcaption> представляет заголовок или легенду для остального содержимого родительского элемента <figure>.
Для элемента доступны глобальные атрибуты.
14. Элемент <main>
Категории контента: потоковое содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое; не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты.
Элемент <main> включает основное содержимое элемента <body> документа или приложения и исключает содержимое, которое повторяется на страницах сайта/приложения, таких как ссылки для навигации по сайту, информация об авторских правах, логотипы сайта и баннеры, а также поисковые формы (за исключением случаев, когда основной функцией документа или приложения является поисковая форма).
Не является секционным содержимым, поэтому не оказывает никакого влияния на структуру документа.
В документе должно быть не более одного элемента <main>.
<body>
<header>
<h2>Пудель</h2>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О породе</a></li>
<li><a href="health.html">Здоровье</a></li>
</ul>
</nav>
</header>
<main>
<section>
<header>
<h3>О породе</h3>
<nav>
<ul>
<li><a href="#basic">Разновидности</a></li>
<li><a href="#app">Внешний вид</a></li>
<li><a href="#temp">Характер</a></li>
</ul>
</nav>
</header>
<section>
<h4>Разновидности</h4>
<p>...</p>
</section>
<section>
<h4>Внешний вид</h4>
<p>...</p>
</section>
<section>
<h4>Характер</h4>
<p>...</p>
</section>
<footer>
<a href="#basic">Разновидности</a>
<a href="#app">Внешний вид</a>
<a href="#temp">Характер</a>
</footer>
</section>
</main>
<footer>
<small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>
</footer>
</body>
15. <div>
Категории контента: потоковое содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое; как дочерний элемент <dl>.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты.
Элемент <div> сам по себе ничего не значит. Он представляет свои дочерние элементы. Может использоваться с атрибутами class, lang и title для разметки семантики, общей для группы последовательных элементов.
Рекомендуется использовать элемент <div> в случаях, когда другой элемент не подходит. Использование более подходящих элементов вместо элемента <div> обеспечивает лучшую доступность для читателей и облегчает обслуживание кода.
С другой стороны, элемент <div> может быть полезны для стилистических целей или для обертывания нескольких абзацев внутри раздела, имеющих общие свойства. В примере ниже мы видим элемент <div>, используемый в качестве способа задания языка двух абзацев сразу, вместо того чтобы устанавливать язык для двух элементов абзаца отдельно:
<article lang="en-US">
<h3>My use of language and my cats</h3>
<p>My cat’s behavior hasn’t changed much since her absence, except that she plays her new physique to the neighbors regularly, in an attempt to get pets.</p>
<div lang="en-GB">
<p>My other cat, colored black and white, is a sweetie. He followed us to the pool today, walking down the pavement with us. Yesterday he apparently visited our neighbours. I wonder if he recognizes that their flat is a mirror image of ours.</p>
<p>Hm, I just noticed that in the last paragraph I used British English. But I’m supposed to write in American English. So I shouldn’t say "pavement" or "flat" or "color"...</p>
</div>
<p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>
По материалам Grouping content
CSS. Как выбрать каждый первый, второй, третий и.т.д. элементы списка, таблицы, блока.
Иногда, при работе с CSS нужно выбрать какой-то определенный по счету элемент, например, в списке, таблице и.т.д. Либо нужно выбрать каждый второй, третий и.т.д. элементы.
Давайте рассмотрим способ, как это можно сделать с помощью CSS и псевдокласса nth-child.
Все мои уроки по CSS (каскадным таблицам стилей) здесь.Для примера возьмем немаркированный список:
<ul> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> <li>Элемент 4</li> <li>Элемент 5</li> <li>Элемент 6</li> <li>Элемент 7</li> <li>Элемент 8</li> <li>Элемент 9</li> <li>Элемент 10</li> </ul>
Давайте выделим красным цветом, например, пятый по счету элемент li. Для этого воспользуемся псевдоклассом CSS nth-child
ul li:nth-child(5) {color:#F00;}
Для того, чтобы выбрать 5 элемент, в качестве параметра для псевдокласса nth-child, нужно указать цифру 5. Все просто. Цифра 5 это позиция элемента, по порядку, в котором он находится в коде.
Вот какой результат получился.
Вместо цифры «5» можно указывать любое другое число, в зависимости от того элемента, который вы хотите выбрать.
Например, для того, чтобы выбрать каждый второй элемент с помощью CSS, необходимо написать:
ul li:nth-child(2) {color:#F00;}
Что делать, если нужно выбрать каждый второй элемент с помощью CSS, а не только второй. Как быть в этом случае?
Используйте следуйющий код:
ul li:nth-child(2n) {color:#F00;}
По сути, добавляем символ «n» к цифре.
Аналогичным образом можно выбирать любые другие элементы, в зависимости от их расположения в дереве (структуре) документа.
Все мои уроки по CSS (каскадным таблицам стилей) здесь.— HTML: язык разметки гипертекста
HTML-элемент
используется для представления элемента в списке. Он должен содержаться в родительском элементе: упорядоченном списке (
), неупорядоченном списке (
) или меню (
). В меню и неупорядоченных списках элементы списка обычно отображаются с помощью маркеров. В упорядоченных списках они обычно отображаются с восходящим счетчиком слева, например цифрой или буквой.
Категории содержимого | Нет. |
---|---|
Разрешенное содержание | Содержание потока. |
Отсутствие тега | Конечный тег может быть опущен, если за элементом списка сразу следует другой элемент или если в его родительском элементе больше нет содержимого. |
Допущенные родители | Элемент , или .Устаревший также может быть родительским, хотя и не соответствует использованию. |
Неявная роль ARIA | listitem , когда дочерний элемент ol , ul или меню |
Разрешенные роли ARIA | menuitem , menuitemcheckbox , menuitemradio , option , none , презентация , radio , separator , tab , treeitem |
Интерфейс DOM | HTMLLIElement |
Этот элемент включает глобальные атрибуты.
-
значение
- Этот целочисленный атрибут указывает текущее порядковое значение элемента списка, как определено элементом
. Единственное допустимое значение для этого атрибута — число, даже если список отображается римскими цифрами или буквами. Элементы списка, следующие за этим, продолжают нумерацию, начиная с набора значений. Значение Атрибут не имеет значения для неупорядоченных списков (
) или для меню ().
Примечание : Этот атрибут объявлен устаревшим в HTML4, но повторно введен в HTML5.
-
тип
- Этот символьный атрибут указывает тип нумерации:
-
a
: строчные буквы -
A
: прописные буквы -
i
: римские цифры в нижнем регистре -
I
: римские цифры в верхнем регистре -
1
: номера
, если таковой имеется. Примечание: Этот атрибут устарел; используйте вместо этого свойство CSSlist-style-type
. -
Более подробные примеры см. На страницах
и
.
Заказанный список
- первый элемент
- второй элемент
- третий пункт
Упорядоченный список с настраиваемым значением
- третий элемент
- четвертый пункт
- пятый пункт
Неупорядоченный список
- первый элемент
- второй элемент
- третий пункт
таблицы BCD загружаются только в браузере
- Другие элементы HTML, связанные со списками:
,
,и устаревшие
; - CSS-свойства, которые могут быть особенно полезны для стилизации элемента
:- свойство в стиле списка
, чтобы выбрать способ отображения порядкового номера,
- счетчиков CSS для обработки сложных вложенных списков,
- свойство
margin
для управления отступом элемента списка.
Литий - Информация об элементе, свойства и использование
Расшифровка:
Химия в ее элементе: литий
(Promo)
Вы слушаете Химию в ее элементе, представленную вам Chemistry World , журналом Королевского химического общества.
(Конец промо)
Крис Смит
Привет, на этой неделе элемент, который возглавляет группу один и дает нам более легкие самолеты и бронированную обшивку. Он также поддерживает смазку при арктических температурах, приводит в действие кардиостимуляторы и лежит в основе водородной бомбы.
Matt Wilkinson
Литий редко встречается во Вселенной, хотя он был одним из трех элементов, наряду с водородом и гелием, которые были созданы в результате Большого взрыва.Этот элемент был открыт на Земле в 1817 году Йоханом Августом Арфведсоном (1792-1841) в Стокгольме, когда он исследовал петалит, один из первых обнаруженных минералов лития. (Было замечено, что он дает интенсивное малиновое пламя, когда его бросают в огонь.) Он пришел к выводу, что петалит содержит неизвестный металл, который он назвал литием от греческого слова, обозначающего камень, lithos , хотя на самом деле он никогда его не производил. Он рассудил, что это новый щелочной металл, более легкий, чем натрий. Однако, в отличие от натрия, который Хамфри Дэви выделил в 1807 году электролизом гидроксида натрия, Арфведсон не смог получить литий тем же методом.Образец металлического лития был наконец извлечен в 1855 году, а затем путем электролиза расплавленного хлорида лития.
После того, как было объявлено об открытии лития, другие вскоре обнаружили, что он присутствует во всех видах вещей, таких как виноград, водоросли, табак, овощи, молоко и кровь.
Другой литиевой рудой является сподумен, который, как и петалит, является силикатом лития и алюминия, и в Южной Дакоте есть большое месторождение этой руды. Мировое производство соединений лития составляет около 40 000 тонн в год, а запасы оцениваются примерно в 7 миллионов тонн.Сообщается, что промышленное производство самого металла составляет около 7500 тонн в год, и оно производится путем электролиза расплавленного хлорида лития и хлорида калия в стальных элементах при температурах 450 o C.
Литий, как обнаружено, является умеренно токсичным. в 1940-х годах, когда пациентам давали хлорид лития в качестве заменителя соли. Однако в малых дозах его назначают для лечения маниакальной депрессии (теперь называемого биполярным расстройством). Его успокаивающее действие на мозг было впервые замечено в 1949 году австралийским врачом Джоном Кейдом из Департамента психической гигиены штата Виктория.Он вводил морским свинкам 0,5% раствор карбоната лития, и, к его удивлению, эти обычно очень нервные животные стали послушными и действительно были настолько спокойны, что сидели в одном и том же положении в течение нескольких часов. Затем Кейд сделал инъекцию того же раствора своему наиболее психически неуравновешенному пациенту. Мужчина так хорошо отреагировал, что через несколько дней его перевели в обычную больничную палату, и вскоре он вернулся на работу. Другие пациенты отреагировали аналогичным образом, и сейчас во всем мире для лечения этого психического состояния используют литиевую терапию.Как это работает, до сих пор доподлинно неизвестно, но похоже, что он предотвращает перепроизводство химического посредника в мозгу.
Литий используется в коммерческих целях по-разному. Оксид лития идет в стекло и стеклокерамику. Металлический литий переходит в сплавы с магнием и алюминием, что улучшает их прочность, делая их легче. Магниево-литиевый сплав используется в защитной броне, а алюминий-литий снижает вес самолета, тем самым экономя топливо. Стеарат лития, получаемый в результате реакции стеариновой кислоты с гидроксидом лития, представляет собой универсальную высокотемпературную смазку, и большинство пластичных смазок содержат ее.Он будет хорошо работать даже при температурах до -60 o ° C и использовался для транспортных средств в Антарктике.
Литиевые батареи, рассчитанные на напряжение 3 В и более, используются в устройствах, где компактность и легкость имеют решающее значение. Они имплантируются для обеспечения электрической энергией кардиостимуляторов. Они работают с литием в качестве анода, йодом в качестве твердого электролита и оксидом марганца в качестве катода - и их срок службы составляет десять лет. Эта долговечность была распространена на литиевые батареи более распространенного типа 1.5-вольтовая разновидность (в которой катодом является дисульфид железа), которые используются в повседневных гаджетах, таких как часы, и литий теперь начинают использоваться для аккумуляторов.
Литий - это мягкий серебристо-белый металл, который возглавляет группу 1, группа щелочных металлов периодической таблицы элементов. Активно реагирует с водой. Хранить это проблема. Его нельзя держать под маслом, как натрий, потому что он менее плотный и плавает. Таким образом, он хранится, будучи покрытым вазелином. Несколько удивительно, что он не реагирует с кислородом, если его не нагреть до 100 90 253 o 90 254 ° C, но он будет реагировать с азотом из атмосферы с образованием красно-коричневого соединения нитрида лития, Li 3 N.
Водород водородных бомб на самом деле представляет собой составной гидрид лития, в котором литий является изотопом лития-6, а водород - изотопом водорода-2 (дейтерий). Это соединение способно выделять огромное количество энергии из нейтронов, выпущенных атомной бомбой в ее ядре. Они поглощаются ядрами лития-6, который немедленно распадается с образованием гелия и водорода-3, которые затем переходят в другие элементы, и при этом бомба взрывается с силой в миллионы тонн тротила.
Крис Смит
Мэтт Уилкинсон о необычайных достоинствах элемента номер 3, лития. В следующий раз к одному из более редких химических веществ во Вселенной, каким бы ужасно токсичным оно ни было, без него мы были бы пресловутой частицей, а не ядром.
Ричард Ван Норден
Джеймс Чедвик в 1932 году открыл нейтрон, бомбардируя образец бериллия альфа-лучами, исходящими из радия. Он заметил, что бериллий испускает субатомную частицу нового типа, которая имеет массу, но не имеет заряда, нейтрон и комбинация радия и бериллия по-прежнему используются для получения нейтронов в исследовательских целях, хотя миллион альфа-частиц может произвести только 30 нейтронов.
Крис Смит
Итак, это говорит о том, что иногда многое может пройти лишь незначительно. Ричард Ван Норден будет здесь с историей о бериллии на следующей неделе в «Химии в его элементе». Надеюсь, вы присоединитесь к нам. Я Крис Смит, спасибо за внимание и до свидания.
(промо)
(конец промо)
HTML тег li
Пример
Один упорядоченный (
- ) и один неупорядоченный (
- Кофе
- Чай
- Молоко
- ) список HTML:
Кофе
Чай
Молоко
Дополнительные примеры "Попробуйте сами" ниже.
Определение и использование
Тег
определяет элемент списка.
Тег
используется внутри упорядоченных списков (
- ), неупорядоченных списков (
- ) и в
списки меню (
- и