Учебник HTML 5. Статья «Списки»
Списки представляют собой упорядоченный набор значений, который помогает нам систематизировать важную информацию, делая ее более доступной для понимания. Язык гипертекстовой разметки HTML позволяет составлять списки по следующим правилам:
- Нумерованный (упорядоченный) список.
- Маркированный (неупорядоченный) список.
- Список описаний.
- Список контекстных меню.
Нумерованный список
Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега <ol> (сокращенное от английского ordered list — упорядоченный список). Каждый элемент списка начинается с тега <li> (элемент списка).
Давайте рассмотрим примеры использования:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <ol></title> </head> <body> <ol> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Второй пункт.
- Третий пункт.
Если вы хотите, чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега <ol>.
Например:<ol start = "101"> <!--список начнётся с номера 101-->
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Второй пункт.
- Третий пункт.
Ещё один интересный атрибут — type, который позволит Вам задать буквенную нумерацию («A» – большие, «a» – строчные), либо нумерацию из римских цифр («I» – в верхнем регистре, «i» – в нижнем регистре).
Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута type HTML тега <оl></title> </head> <body> <ol type = "A"> <!--указываем, что список формируется в алфавитном порядке заглавными буквами --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>
Результат нашего примера:
Еще один нюанс: при использовании атрибута start с буквами (type = «A» и type = «a»), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = «4», будет соответствовать букве «D» и список начнётся именно с неё. При использовании значения start = «27» счетчик обнуляется, при этом список становится двухзначным («27» = «AA», «28» = «AB», «29» = «AC»…). Значения должны быть целочисленными, допускается использование отрицательных значений.
Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка <li>):
<!DOCTYPE html> <html> <head> <title>Пример нумерованного списка, вложенного в другой нумерованный список</title> </head> <body> <ol> <li>Первый пункт <ol> <!--открываем новый нумерованный список внутри элемента списка--> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Второй пункт.
- Третий пункт.
Но и это еще не все, атрибут reversed элемента позволяет задать, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Второй пункт.
- Третий пункт.
Маркированный список.
Маркированный (неупорядоченный) список в HTML определяется тегом <ul> (Unordered List Element). Каждый элемент списка должен начинаться с тега <li> (сокращенное от английского list item — элемент списка).
По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга.
Давайте рассмотрим примеры использования:
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <ul></title> </head> <body> <ul> <li>Светлое</li> <li>Тёмное</li> <li>Пятница</li> </ul> </body> </html>
Выглядеть на странице это будет соответственно так:
- Светлое
- Тёмное
- Пятница
Забегая вперед, скажу, что каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть сделано с использованием глобального атрибута style. Более подробно этот атрибут будет рассмотрен в следующей статье «HTML стили».
Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера. Возможные значения свойства:
| Атрибут | Значение |
|---|---|
| list-style-type:none | Убирает маркер. |
| list-style-type:disc | Маленький черный круг. Это значение по умолчанию. |
| list-style-type:circle | Круг пустой внутри. |
| list-style-type:square | Маркер в виде квадрата. |
Ниже приведен пример использования стилей CSS внутри маркированного списка:
<!DOCTYPE html> <html> <head> <title>Пример изменения типа маркера маркированного списка</title> </head> <body> <ul style = "list-style-type:none"> <!-- маркер отсутствует --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <ul style = "list-style-type:disc"> <!-- маленький черный круг --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <ul style = "list-style-type:circle"> <!-- круг пустой внутри --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <ul style = "list-style-type:square"> <!-- маркер в форме квадрата --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> </body> </html>
Результат нашего примера:
Рис. 15 Маркированные списки.Обращаю Ваше внимание, что допускается формировать маркированные (неупорядоченные) списки, вложенные в другие маркированные списки (внутри элемента списка <li>) при этом элементы вложенного списка по умолчанию будут с пустым кругом внутри, a последующие будут с квадратом:
- Первый пункт
- Первый пункт
- Первый пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
Список описаний
Списки описаний используются для формирования пар типа «имя/значение» / «вопрос/ответ» и т.п.
Тэг <dl> (HTML Description List Element) определяет список, тэг <dt> (HTML Definition Term Element) определяет его имя, а тег <dd> (HTML Description Element) описывает его значение.
Рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования списка описаний</title> </head> <body> <dl> <dt>Жамевю</dt> <dd>состояние, противоположное дежавю, внезапно наступающее ощущение того, что хорошо знакомое место или человек кажутся совершенно неизвестными или необычным.</dd> <dt>Фасцинация</dt> <dd>повышение эффективности воспринимаемого материала через использование сопутствующих (фоновых) воздействий.</dd> </dl> </body> </html>
Как вы можете заметить значение списка описаний (элемент <dd>) имеет по умолчанию внешний отступ с левой стороны равный
Обращаю Ваше внимание, что допускается формировать списки описаний, вложенные в другие списки описаний (внутри элемента значения списка <dd>).
Маркированные (неупорядоченные), нумерованные (упорядоченные) и списки описаний внутри себя могут содержать элементы нового списка (внутри элементов списка / значений списка), другие элементы HTML, такие как, изображения, ссылки и т.д. Списки можно размещать горизонтально, формировать из них меню навигации и так далее. Более подробно о возможностях CSS (каскадных таблицах стилей) и некоторых особенностях HTML 5 вы узнаете позднее.
Список контекстных меню
Тег <menu> используется для контекстных меню, панелей инструментов и для включения элементов управления формы.
Тег <menuitem> определяет элемент команды / меню, который пользователь может вызвать из контекстного меню.
В настоящее время теги <menu> и <menuitem> имеют очень ограниченную поддержку браузерами и практически не используется по этой причине:
Рассмотрим пример для расширения кругозора:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <menu></title> </head> <body> <div contextmenu = "testmenu"> <!-- определяем, для блока контекстное меню --> Кликни по мне правой кнопкой мыши. <menu type = "context" id = "testmenu"> <!-- создаем контекстное меню --> <menuitem label = "like"></menuitem> <!-- определяем первый элемент меню --> <menuitem label = "dislike"></menuitem> <!-- определяем второй элемент меню --> </menu> </div> </body> </html>
Кликни по мне правой кнопкой мыши.
Для тех у кого браузер не отображает результат:
Использование глобального атрибута contextmenu, тегов <menu> и <menuitem>.
Элемент <div>, который был использован в этом примере будет подробно рассмотрен в статье учебника «Теги разметки страницы».
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы выполните практические задания.
- Используя полученные знания составьте следующие HTML списки:
Практическое задание № 6.
Практическое задание № 7.
Практическое задание № 8.
Практическое задание № 9.
Если у Вас есть затруднения в составлении какого-то списка, то внимательно перечитайте статью еще раз, если вы не найдете ответа на ваш вопрос, то проинспектируйте код страницы, открыв пример в отдельном окне кликнув по изображению.
: The Ordered List element — HTML
HTML-элемент <ol> используется для упорядоченного списка — в частности для пронумерованного списка.
Источник для интерактивного примера расположен в 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-интерфейс | HTMLOListElement (en-US) |
Этот элемент включает глобальные атрибуты.
reversed- Атрибут логического значения (bool) показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.
start- Нумерация начнётся с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация
typeв буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы «г» или Римской «iv», используйтеstart="4". type- Задаёт тип нумерации:
aдля строчных буквAдля заглавных буквiдля строчной Римской нумерацииIдля заглавной Римской нумерации1для цифр (по умолчанию)
указанный тип используется для всего списка, если только не указан любой другой атрибут
typeв элементе<li>.Note: Если тип цифр в списке не имеет значения (к примеру, юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство CSS
list-style-type(en-US).
Обычно, элементы списка отображены с маркером, предшествующим цифрам или буквам.
Элементы <ol> и <ul> могут быть вложены (nested) на любом уровне, чередуясь между элементами <ol> и <ul>.
Оба элемента <ol> и <ul> используются для списков. Различие лишь в том, что в элементе <ol> порядок имеет значение, как в данных примерах:
- Инструкции рецепта
- Направление по заданному маршруту
- Список ингредиентов на информации о питании, в убывающих пропорциях.
Чтобы определить, каким списком пользоваться, можно поменять порядок элементов с списке.Если значение меняется, используйте элемент <ol> — в противном случае <ul>.
Обычный список
<ol>
<li>Fee</li>
<li>Fi</li>
<li>Fo</li>
<li>Fum</li>
</ol>
Результат HTML кода выше:
Список с Римскими числами
<ol type="i">
<li>Introduction</li>
<li>List of Greivances</li>
<li>Conclusion</li>
</ol> Результат HTML кода выше:
Используя свойство
start<p>Finishing places of contestants not in the winners’ circle:</p>
<ol start="4">
<li>Speedwalk Stu</li>
<li>Saunterin’ Sam</li>
<li>Slowpoke Rodriguez</li>
</ol>
Результат HTML кода выше:
Вложенный список
<ol>
<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>
</ol>
Результат HTML кода выше:
Неупорядоченный список внутри упорядоченного списка
<ol>
<li>first item</li>
<li>second item
<ul>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ul>
</li>
<li>third item</li>
</ol>
Результат HTML кода выше:
BCD tables only load in the browser
- Другие элементы HTML списка:
<ul>,<li>,<menu> - CSS-свойства, которые могут быть полезны для стилизации
<ol>элемента:- свойство
list-style(en-US), для порядковых показов - CSS счётчики, для более сложных вложенных списков
- свойство line-height, для замены убранного свойства compact
- Свойство margin, для контроля отступа в списке
- свойство
HTML Списки. Уроки для начинающих. W3Schools на русском
HTML Списки позволяют веб-разработчикам группировать набор связанных элементов в списках.
HTML Пример списка
Неупорядоченный список:
- Пункт
- Пункт
- Пункт
- Пункт
Упорядоченный список:
- Первый пункт
- Второй пункт
- Третий пункт
- Четвёртый пункт
Неупорядоченный HTML Список
Неупорядоченный (ненумерованный) список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.
Элементы списка будут помечены маркерами (маленькие черные кружки) по умолчанию:
Неупорядоченный HTML Список — выберите маркер элемента списка
CSS свойство list-style-type используется для определения стиля маркера элемента списка:
| Значение | Описание |
|---|---|
| disc | Устанавливает маркер элемента списка как маленький чёрный кружок (по умолчанию) |
| circle | Устанавливает маркер элемента списка в виде маленького пустого кружка |
| square | Устанавливает маркер элемента списка в виде квадрата |
| none | Элементы списка не будут отмечены (маркеры отсутствуют) |
Упорядоченный HTML Список
Упорядоченный (нумерованный) список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>.
Элементы списка будут помечены номерами по умолчанию:
Упорядоченный HTML Список — Атрибут Type
Атрибут type тега <ol> определяет тип маркера элемента списка:
| Тип | Описание |
|---|---|
| type=»1″ | Элементы списка будут пронумерованы цифрами (по умолчанию) |
| type=»A» | Элементы списка будут пронумерованы заглавными буквами |
| type=»a» | Элементы списка будут пронумерованы строчными буквами |
| type=»I» | Элементы списка будут пронумерованы большими римскими цифрами |
| type=»i» | Элементы списка будут пронумерованы маленькими римскими цифрами |
HTML Списки описания
HTML также поддерживает списки описания.
Список описания — это список терминов с описанием каждого термина.
Тег <dl> определяет список описания, тег <dt> определяет термин (имя), а тег <dd> описывает каждый термин:
Вложенные HTML-списки
Список может быть вложенным (списки внутри списков):
Пример
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Примечание: Элементы списка могут содержать новый список и другие элементы HTML, такие как изображения и ссылки и т.д.
Подсчет контрольного списка
По умолчанию упорядоченный список начинает отсчет с 1. Если вы хотите начать подсчет с указанного числа, вы можете использовать атрибут start:
Горизонтальный список с помощью CSS
HTML-списки можно стилизовать различными способами с помощью CSS.
Один из популярных способов — это стилизовать список по горизонтали для создания меню навигации:
Пример
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href=»#home»>Home</a></li>
<li><a href=»#news»>News</a></li>
<li><a href=»#contact»>Contact</a></li>
<li><a href=»#about»>About</a></li>
</ul>
</body>
</html>
Резюме раздела
- Используйте HTML елемент
<ul>для определения неупорядоченного списка - Используйте CSS свойство
list-style-typeдля определения маркера элемента списка - Используйте HTML элемент
<ol>для определения упорядоченного списка - Используйте HTML атрибут
typeдля определения типа нумерации - Используйте HTML элемент
<li>для определения элемента списка - Используйте HTML элемент
<dl>для определения списка описания - Используйте HTML элемент
<dt>для определения термина описания - Используйте HTML элемент
<dd>для описания термина в списке описания - Списки могут быть вложены в списки
- Элементы списка могут содержать другие элементы HTML
- Используйте CSS свойство
float:leftилиdisplay:inlineдля горизонтального отображения списка
HTML Упражнения
HTML Теги списка
| Тег | Описание |
|---|---|
| <ul> | Определяет неупорядоченный (ненумерованный) список |
| <ol> | Определяет упорядоченный (нумерованный) список |
| <li> | Определяет пункты списка |
| <dl> | Определяет список описания |
| <dt> | Определяет термин в списке описания |
| <dd> | Описывает термин в списке описания |
Вопросы для самоконтроля
- Для чего нужны HTML-списки?
- Какие бывают HTML-списки?
- Каким тегом определяется неупорядоченный HTML-список?
- Каким тегом определяется упорядоченный HTML-список?
- Каким тегом определяется каждый элемент в HTML-списке?
- Как по умолчанию обозначаются элементы неупорядоченного HTML-списка?
- Как по умолчанию обозначаются элементы упорядоченного HTML-списке?
- Что такое список описаний?
- Какой тег определяет список описаний?
- Какой тег определяет термин (имя) в списке описаний?
- Какой тег определяет описание каждого термина в списке описаний?
Маркированный и нумерованный список HTML. Маркированный список
Браузеры по-разному интерпретируют указание вида маркера для отдельного элемента списка. Браузер Netscape изменяет вид маркера для данного и всех последующих, пока не встретится очередное переопределение вида маркера. Браузер Internet Explorer изменяет вид маркера только для данного элемента.
В качестве маркеров списка можно использовать графические изображения, что широко применяется для создания привлекательных, красиво оформленных HTML-документов. На самом деле такая возможность не предоставляется непосредственно языком HTML, а реализуется несколько искусственно. Это вовсе не означает, что так делать не рекомендуется или предосудительно, а лишь означает, что здесь не будут применяться никакие специальные языковые конструкции HTML.
Чтобы понять идею, необходимо разобраться в механизме реализации списков на HTML-страницах. Оказывается, что тег списка
(как, впрочем, и теги списков других типов, рассматриваемых ниже) выполняет единственную задачу — указывает браузеру, что вся информация, располагаемая после данного тега должна отображаться со сдвигом вправо (отступом) на некоторую величину. ТегиЕсли же нам требуется построить список с графическими маркерами, то можно вообще обойтись без тегов
Или принудительного перевода строки
. Пример реализации списка с графическими маркерами, отображение которого представлено на рис. 2.2, показан ниже:
который будет передан только один раз. Размеры файла, содержащего маленькое изображение, также крайне незначительны.
Примечание
Методы создания списков с графическими маркерами обсуждаются в свою очередь в главе 8.
В языке HTML существует два вида списков: нумерованные и ненумерованные. Их создание практически одинаковое. Даже теги отличаются на один символ. Также можно создавать которые могут включать в себя как нумерованные, так и маркерные.
Эти списки можно преобразовывать как угодно. Всё зависит от вашей фантазии. Сначала мы рассмотрим стандартные списки, такие же как в редакторе Word, а затем будем их улучшать и оформлять до неузнаваемости.
Нумерованный список HTML
Обычный нумерованный можно создать при помощи следующих тегов:
Простые списки выглядят вот так
Согласно стандартам, каждый пункт списка должен быть внутри открывающего и закрывающего тега li. Но если вы не поставите закрывающий тег, то результат будет точно таким же. Обработчик весьма умный. Во время преобразования списка он анализирует открывающие теги. Если он видит новый
Таким образом, списки можно делать так, как показано ниже.
Но с точки зрения профессионалов это некорректно.
Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега ol, пишется ul.
В нет цифр или букв — только различные символы, которые называются маркерами.
Многоуровневый нумерованный список HTML
Многих пользователей интересует такая возможность. Поэтому следует отметить, что любой нумерованный список HTML можно сделать многоуровневым. Дополнительные уровни могут быть такими же или маркированными.
Для того чтобы создать список, указанный в примере выше, нужно написать следующее.
Обратите внимание, что в этом коде, в отличие от первых примеров, добавлен атрибут type. Благодаря ему можно указать вид сортировки как для нумерованных, так и для маркерных списков.
Для нумерованных указываем алфавит или тип цифр, а для остальных случаев — тип маркера.
Если использовать специальный HTML-тег, нумерованный список может стать любым, каким вы хотите.
Можно указать атрибут type с любым значением из таблицы. Или в классе стиля css указать list-style-type с желаемым типом сортировки.
Перевод значений довольно простой. Хватит базовых знаний английского языка. Но даже если вы не можете перевести слова «круг», «квадрат» и т. п., то можно визуально понять, каков будет результат при указании этих значений в атрибуте type.
Для нумерованных списков нужно использовать следующие варианты:
- 1 — арабские цифры;
- A — заглавные ;
- a — строчные латинские буквы;
- I — заглавные римские цифры;
- i — строчные римские цифры.
По умолчанию всегда используется список с То есть, если вы ничего не указали, это равносильно type=»1″.
Помимо этого, нумерованные списки можно начинать с любой желаемой позиции. По умолчанию — вывод от 1. Но при желании можно начать хоть со ста. Для этого нужно указать атрибут start с любым значением.
Кроме этого, можно сделать вывод в обратном порядке. Для этого нужно написать reversed.
Оформление списков
Нумерованный список HTML можно оформить настолько красиво, что не сразу можно догадаться, что это обычный список, а не картинка, сделанная в Photoshop.
Вот примеры красивых списков.
Как видно из примера, можно изменять внешний вид нумерации и самих элементов.
Создать обычный список можно вот так.
В стилях css нужно указать оформление для тегов ol. Обратите внимание, что в этом случае настройки будут применены ко всем спискам всего сайта, где используется этот файл стилей.
Рассмотрим сначала вариант с круглым оформлением списка. Вернитесь к коду списка. Там указан класс rounded-list. Вот именно с этим классом нужно повозиться, чтобы сделать такую красоту. Назвать класс вы можете как хотите.
Теперь рассмотрим квадратное оформление.
Стили весьма похожи. Разница в том, что в первом случае происходит округление элемента посредством возможностей css.
Профессиональный верстальщик должен предвидеть и понимать, что не все пользователи используют современные компьютеры. Не у всех установлены Windows 7, 8, 10. Существует процент пользователей, кто до сих пор сидит на Windows XP и использует старые версии браузера Internet Explorer.
Как правило, почти все современные дизайнерские улучшения элементов ими не поддерживаются. Пользователю будет казаться, что над дизайном сайта вообще не работали. Что всё съехало. Элементы наезжают друг на друга. Чтобы этого избежать, нужно просчитывать все варианты.
Некоторые веб-мастера закрывают глаза на них, поскольку их доля на современном рынке становится всё меньше и меньше. Но для профессионала важен каждый посетитель, особенно если это коммерческий сайт.
Делайте что-то подходящее для всех или учитывайте все варианты браузеров.
Списки встречаются везде. Они используются для:
- разбивки больших сегментов текста на части;
- выделения важных моментов;
- изложения «плана действий » и перечня мероприятий (нумерованный список в HTML ).
Использование маркированных списков помогает людям проще переварить все то, что вы им говорите. Но как они задаются на веб-странице?
Маркированные списки (или ненумерованные списки)
Первый вид списка, который мы рассмотрим, это маркированный.
Ненумерованные списки — тег
Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов . Ниже приводится простой его пример:
- Пункт 1
- Пункт 2
- Пункт 3
Сначала весь список берется в теги . При открытии тега списка, убедитесь, что вы закрыли его, а затем переходите к заполнению пунктов списка.
Атрибут type
Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов (в том числе и в нумерованном списке HTML ):
Элементы списка — тег
Каждый элемент в списке обворачивают в отдельную пару тегов
Приведенный выше список помещен в отдельный тег
- , но каждый
- также поддерживает собственный атрибут type
, и таким образом можно создать следующий список:
Отступ маркированного списка
Перед тем, как к списку будет применен любой стиль CSS , HTML (а точнее браузер ) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом
Упорядоченный / нумерованный список — тег
Если вы хотите упорядочить элементы списка, тогда тег
- поможет в этом. По умолчанию он задает нумерованный список HTML
:
- Элемент 1
- Элемент 2
- Элемент 3
- Шаг четыре
- Шаг пять
- Шаг шесть
- Первый пункт
- Второй пункт
- Третий пункт
- Четвертый пункт
- Пятый пункт
что на выходе дает нам:
A. Элемент 1
B. Элемент 2
C. Элемент 3Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.
Начало нумерованного списка с определенного номера
Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков.
Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А ). Это бы внесло неразбериху в ваше руководство!
К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера:
Что дает нам следующее:
4. Шаг четыре
5. Шаг пять
6. Шаг шестьОбратный порядок
Если вы хотите вывести номера (или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed :
В результате список будет выглядеть следующим образом:
5. Пятый пункт.
4. Четвертый пункт.
3. Третий пункт.
2. Второй пункт.
1. Первый пункт.Многоуровневый маркированный список в HTML
С помощью установленных в браузерах патчей поддержки (и иногда с помощью отмены CSS для некоторых сайтов ) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой:
- Элемент верхнего уровня
- Подчиненный элемент 1
- Подчиненный элемент 2
- Элемент верхнего уровня
Что дает нам:
Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
Элемент верхнего уровняВы можете использовать комбинацию тегов
- . Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка.
- Бадминтон
- Бейсбол
- Джомолунгма
- Чогори
- Канченджанга
- Summit Plummet
- Tantrum Alley
- Insano
- Филиппинское море
- Аравийское море
- Коралловое море
- Красный
- Зеленый
- Синий
1. Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
2. Элемент верхнего уровняИспользуйте нумерованные списки HTML на своих страницах.
Заключение
Это всего лишь краткое введение по использованию списков в веб-дизайне, но с этого вы можете начать. Если у вас есть какие-либо вопросы, пожалуйста, задайте их в комментариях!
Перевод статьи «Numbered and Bullet Point Lists in HTML » был подготовлен дружной командой проекта .
Доброго времени суток!
В этой статье вы узнаете о всех возможностях списков, поймете как сделать нумерованный список, освоите теги, которые помогут сделать из простого маркированного списка более интересный и заметный с произвольными маркерами. После прохождения урока у вас придет понимание того, где применяются списки и при каких обстоятельствах их можно использовать.
Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:
Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер.
В каждой части статьи создание тех или иных списков будет сопровождаться подробными пояснениями по вставке того или иного списка.
1. Маркированные списки в HTML
Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:
А вот так выглядит в браузере:
Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере1.1 Стандартные маркеры для маркированного списка
На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:
1.2 Маркер списка в виде пустого круга
Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:
html > head > title > Пример маркированного списка с маркером в виде пустого круга/ title > / head > body > p > Звезды:/ p > ul type = «circle» > li > Сириус/ li > li > Арктур/ li > li > Поллукс/ li > li > Бетельгейзе/ li > li > Солнце/ li > / ul > / body > / html > Сразу смотрим как этот код будет выглядеть в браузере:
Рис. 1.2. Вид маркера для списка в виде окружности в браузере1.3 Маркер списка в виде квадрата
Посмотрим также и последний пример с квадратным маркером для HTML списка:
Обратите внимание на маркер, он стал квадратным:
Рис. 1.3. Вид маркера для списка в виде квадрата в браузереВажное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида.
Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 («»), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .
Ошибка будет следующая:
Рис. 1.4. Ошибка на валидаторе при использовании атрибута «type» у спискаС маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах.
2. Нумерованные списки в HTML
В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега . Как это выглядит на практике:
Пример нумерованного списка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Пример стандартного нумерованного списка/ title > / head > body > p > От одного до пяти:/ p > ol > li > Первый/ li > li > Второй/ li > li > Третий/ li > li > Четвертый/ li > li > Пятый/ li > / ol > / body > / html > Таким образом выглядит нумерованный список со стандартными настройками в браузере:
Рис. 2.1. Нумерованный список в браузере со стандартными настройкамиКак и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.
2.1 Стандартные маркеры для нумерованного списка
Здесь у нас есть выбор не из трех видов маркеров, а из пяти:
Название маркера Значение атрибута «type» Пример списка Маркеры в виде арабских чисел 1 Маркеры в виде строчных латинских букв a Маркеры в виде заглавных латинских букв A Маркеры в виде римских цифр в нижнем регистре i Маркеры в виде римских цифр в верхнем регистре I 2.2 Своя нумерация в списке HTML
Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start» . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Произвольная нумерация для нумерованного списка/ title > / head > body > p > Начинаем нумерацию с двенадцати:/ p > ol type = «a» start = «12» > li > Двенадцать/ li > li > Тринадцать/ li > li > Четырнадцать/ li > li > Пятнадцать/ li > li > Шестнадцать/ li > / ol > / body > / html > Вот как это будет отображаться на реальном сайте:
Рис. 2.2. Нумерация с произвольного числа в нумерованном спискеНа изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах.
Ну а сейчас перейдем к вложенным спискам HTML.
3. Как сделать многоуровневый (вложенный) список в HTML
Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по ), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.
На примере моделей автомобилей мы построим многоуровневый список в HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 html > head > title > Вложенный маркированный список HTML/ title > / head > body > ul > li > Citroen ul > li > Berlingo/ li > li > C1/ li > li > C2/ li > li > C3 Picasso/ li > li > C4 Grand Picasso/ li > / ul > / li > li > KIA/ li > li > Toyota/ li > li > Audi/ li > li > Lexus/ li > / ul > / body > / html > Обратите внимание, как выглядит многоуровневый список в браузере:
Рис. 3.1. Пример многоуровневого списка в HTMLМы делали многоуровневый список с помощью маркированного (тег
- ). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать ).
Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 html > head > title > Нумерованные, маркированные и многоуровневые списки в HTML/ title > / head > body > ul > li > Первая группа тюльпанов ol > li > Первый класс ul > li > Простые ранние тюльпаны/ li > / ul > / li > li > Второй класс ul > li > Махровые тюльпаны/ li > / ul > / li > / ol > / li > / ul > / body > / html > В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.
Смотрим его вид в браузере:
Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере4. Полезные материалы по спискам HTML
Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).
4.1 Как сделать список HTML в строку
Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто:
4.2 Как сделать список HTML без значка
За это отвечает свойство list-style-type в CSS (подробнее ):
4.3 Как сделать список в HTML по центру
Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало:
4.4 Как сделать список в HTML с картинками
Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:
4.5 Маркированный список HTML свой маркер
В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome ). Тогда можно сделать любую иконку вместо стандартного маркера:
4.6 Как сделать список в HTML в несколько столбцов
Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:
5. Практика работы со списками
На видео ниже вы можете увидеть всю работу со списками HTML на практике:
Рекомендуем также
HTML списки
Язык гипертекстовой разметки поддерживает три типа списков, для каждого из которых используются свои теги.
Маркированный список ¶
Маркированный список содержит ненумерованные списки элементов без определенной последовательности. Для создания маркированного списка используется блочный элемент <ul>.
Каждый элемент списка начинается с тега открывающего тега <li> и заканчивается закрывающим тегом </li>. Маркером для всех пунктов по умолчанию является маленький черный кружок.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h2>Маркированный список</h2>
<ul>
<li>Первый пункт списка</li>
<li>Другой пункт списка</li>
<li>Еще один пункт списка</li>
</ul>
</body>
</html>Результат¶
Элементы в маркированных списках по умолчанию отмечены марками (маленькие черные круги). Тем не менее, вы можете изменить стиль маркера по умолчанию для элементов списка, используя атрибут type attribute.
Вы можете использовать атрибут type, чтобы изменить стиль маркера по умолчанию для элементов списка.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<ul type="circle">
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
<ul type="square">
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</body>
</html>Результат¶
Вы также можете использовать свойство CSS list-style-type или list-style-image для определения типа элемента в списке.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h3>Маркированный список:</h3>
<ul>
<li>Прохладительные напитки</li>
<li>Горячие напитки</li>
<li>Мороженое</li>
</ul>
<ul>
<li>Кока-кола</li>
<li>Fanta</li>
<li>Чай со льдом</li>
</ul>
<ul>
<li>Кока-кола</li>
<li>Fanta</li>
<li>Чай со льдом</li>
</ul>
</body>
</html>Результат¶
Нумерованный список¶
Нумерованный список содержит элементы в определенной последовательности. Список помещается в блочный элемент <ol>.
Каждый элемент нумерованного списка начинается с тега открывающего тега <li> и заканчивается закрывающим тегом </li>. Пункты списка автоматически нумеруются.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h2>Нумерованный список</h2>
<ol>
<li>Первый пункт нумерованного списка</li>
<li>Второй пункт нумерованного списка</li>
<li>Третий пункт нумерованного списка</li>
</ol>
</body>
</html>Результат¶
Если вы хотите создать нумерованный список с римскими цифрами или же список, где последовательность указана буквами, то просто добавьте к элементу <ol> type=»a» или type=»I» соответственно.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h4>Нумерованный список:</h4>
<ol>
<li>Персик</li>
<li>Абрикос</li>
<li>Банан</li>
<li>Клубника</li>
</ol>
<h4>Список с буквенной нумерацией</h4>
<ol type="A">
<li>Персик</li>
<li>Абрикос</li>
<li>Банан</li>
<li>Клубника</li>
</ol>
<h4>Список со строчными буквами</h4>
<ol type="a">
<li>Персик</li>
<li>Абрикос</li>
<li>Банан</li>
<li>Клубника</li>
</ol>
<h4>Нумерованный римскими цифрами список:</h4>
<ol type="I">
<li>Персик</li>
<li>Абрикос</li>
<li>Банан</li>
<li>Клубника</li>
</ol>
<h4>Нумерованный строчными римскими цифрами список</h4>
<ol type="i">
<li>Персик</li>
<li>Абрикос</li>
<li>Банан</li>
<li>Клубника</li>
</ol>
</body>
</html>Результат¶
Список определений (описаний) ¶
В списке определений указываются термины/названия и их определения. Такого рода списки используются для создания словарей, справочников и т.д.
Для создания списка определений используется парный элемент <dl>, в котором термины/названия мы записываем в теге <dt>, а их определения в теге <dd>.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h2>Список определений:</h2>
<dl>
<dt>Чай</dt>
<dd>- горячий напиток</dd>
<dt>Сок</dt>
<dd>- прохладительный напиток</dd>
</dl>
</body>
</html>Результат¶
Создание списка в HTML | HTML теги списков
Для приятного оформления текста на страницах сайта рекомендуется по чаще использовать списки. Многие новички пытаются создавать списки с помощью пробелов, переносов и спецсимволы, при этом, категорически избегая html теги списка. Это грубейшая ошибка, т.к. в некоторых браузерах, а также при изменении разрешения экрана, такие списки будут отображаться несколько иначе.
На данном уроке мы научимся создавать списки в html, а также рассмотрим основные html теги списков. Познакомимся с нумерованным списком в html, со списком определений и с маркированным списком в html.
Нумерованный список в HTML
В нумерованным списке каждый перечисляемый пункт помечается арабской или римской цифрой, реже букой латинского алфавита.
- <ol> … </ol> — этот парный тег задаёт старт и окончание нумерованного списка в html. Данный тег имеет параметр type, в значении которого нужно указать, с помощью чего будут отмечаться пункты списка:
- A — английские большие буквы;
- a — английские маленькие буквы;
- I — римские большие цифры;
- i — римские маленькие цифры.
Если значение type не задавать, то в качестве нумерации пунктов, по умолчанию будут задействованы обычные цифры (1,2,3).
- <li> … </li> — данный тег служит для отделения пунктов списка друг от друга.
Освоить создание нумерованного списка в html намного проще будет на примере:
Если использовать параметр type со значение А – type=»А», то в результате нумерация будет выполнена английскими буквами – A,B,C,D и т.д
Маркированный список HTML
В маркированных списках, каждый отдельный пункт имеет маркер. С помощью CSS можно установить в качестве маркера любое изображение. Если использовать исключительно HTML, то ваши возможности ограничены только тремя видами маркеров.
- <ul> … </ul> — тег, задающий начало маркированного списка html. Как и в случае с нумерованными маркерами, каждый пункт отделяется тегами <li>. Также есть возможность воспользоваться параметром type, значения которого и задают внешний вид используемых маркеров в каждом пункте списка. Рассмотрим эти значения поподробнее:
- square – маленький квадратик, левее расположен пример данного маркера
- disc – большая точка, левее расположен пример данного маркера
- circle – кружок, левее расположен пример данного маркера
Частенько возникает нужда создавать списки, которые вложены в другие списки. Для примера сверстаем один из таких маркированных списков html:
Список определений HTML
Сразу нужно заметить, что списки определений используются довольно редко, но лучше всё же с ними познакомиться. HTML теги списков определений значительно отличаются от вышеперечисленных списков.
- <dl> — парный тег, который объявляет список определений;
- <dt> — данный тег используется для терминов;
- <dd> — этот тег служит для определений или описаний терминов;
Пример списка определений:
Вид кода в браузере:
В браузере видно, что термин выносятся выше и левее от текста, который его описывает.
Теперь вы умеете создавать списки в html, более того, знаете html теги списков. Владеете информацией, как создать маркированный и нумерованный списки html.
Дата первой публикации: 02.08.2016
Дата последнего обновления: 02.08.2016
упорядоченных списков в HTML — Урок
Упорядоченные списки в HTML: Обзор
Вы можете вставлять упорядоченные списки в HTML-документы, чтобы отображать организованные списки элементов, которые начинаются с цифры или буквы и продолжаются по порядку. Упорядоченные списки в HTML обычно используются для перечисления элементов по их приоритету или их последовательности в процессе. Например, вы можете использовать упорядоченные списки в HTML, чтобы показать инструкции по выполнению определенной задачи.
При создании упорядоченных списков в HTML необходимо использовать два разных тега.Сначала поместите теги
- …
У вас есть пять вариантов создания упорядоченных списков в HTML: буквы верхнего регистра (A, B, C), буквы нижнего регистра (a, b, c), римские цифры верхнего регистра (I, II, III), нижние -различные римские цифры (i, ii, iii) и арабские цифры (1,2,3), которые используются по умолчанию. Вы определяете желаемый тип упорядоченного списка, используя атрибут TYPE и помещая его в начальный тег
- .
- … (позиция)
- Первая позиция
- Второй элемент
- Третий пункт
- , отображаться в виде упорядоченного списка.
- Первый элемент
- Второй элемент
- Третий элемент
- Чтобы создать упорядоченный список в HTML , введите первую часть начального тега
- в том месте, куда вы хотите добавить упорядоченный список.
- Введите значение нужного типа упорядоченного списка в кавычках. Например, «1», «A», «a», «I», «I» .
- Закройте тег, набрав символ > .
- Нажмите клавишу «Enter» на клавиатуре.
- Тип
- Введите текст для первого элемента в списке.
- Тип .
- Повторите шаги с 4 по 7 для каждой добавляемой дополнительной позиции.
- Когда закончите, нажмите клавишу «Enter» на клавиатуре.
- Тип
- Элемент 1
- Подэлемент 1
- Подэлемент 2
- Подэлемент 3
- Элемент 2
- Элемент 3
- Подэлемент 1
- Подэлемент 2
- Подэлемент 3
- Элемент 1
- Вспомогательный элемент 1
- Вспомогательный элемент 2
- Вспомогательный элемент 3
- Элемент 2
- Элемент 3
- Вспомогательный элемент 1 901 Подэлемент 2
- Подэлемент 3
- .Мы применили псевдоэлемент: before, а затем добавили свойства content и counter-increment. Для элемента
- мы указали для свойства counter-reset значение «item».
- Элемент 1
- Подэлемент 1
- Подэлемент 2
- Подэлемент 3
- Элемент 2
- Элемент 3
- Подэлемент 1
- Подэлемент 2
- Подэлемент 3
- на« table »и использовали значение« table-cell »для псевдоэлемента: before, примененного к элементу
- .
HTML-списков — без неупорядоченных ul, порядкового номера и определения dl
Представьте, что у вас есть документ, в котором вы обрабатываете значительный объем информации. Обычно, когда существует такая ситуация, вы хотите сократить время для любого человека, чтобы быстрее и эффективнее найти определенную точку интереса среди всего объема доступной информации, для достижения этого необходимо разработать какой-то список (например, index, например).
На этом этапе мы исследуем возможности HTML в отношении использования списков, таких как: нумерованные списки, также известные как упорядоченные списки, ненумерованные списки, также называемые неупорядоченными списками и списками определений.Вы также узнаете, как вкладывать списки в другие.
Нумерованные списки и ненумерованные списки
Закрывающая метка для ненумерованных списков —
Давайте посмотрим на другой пример.
Пример отображения упорядоченного списка с вложенными счетчиками со значением «table» свойства display: ¶
Попробуйте сами »Название документа <стиль> ol { тип-стиль-список: нет; сброс счетчика: пункт; маржа: 0; отступ: 0; } li { дисплей: таблица; счетчик-инкремент: элемент; нижнее поле: 0.6em; } li: before { content: counters (item, ".") "."; дисплей: таблица-ячейка; отступ справа: 0,6em; } li li { маржа: 0; } li li: before { содержание: счетчики (item, ".") ""; }Здесь мы установили отображение элемента
Тег UL
Тег
Чтобы указать элемент в списке, используйте тег
Список может содержать как элемент списка, другой список, то есть могут быть созданы вложенные списки.
Синтаксис метки следующий:
- Элемент списка
- Элемент списка
- …
В следующем примере показано использование метки в веб-документе.
Практические упражнения по HTML5 Список с неупорядоченными элементами
- Один
- Два
- Три
Список с вложенными подсписками
- Первый
- Второй
- Второй
- Вторые два
- Терсеро
Предыдущее упражнение должно показать результат, аналогичный показанному на следующем изображении.
Список результатов заказаTag OL
Тег
Чтобы указать элемент в списке, используйте тег
Список может содержать как элемент списка, другой список, то есть могут быть созданы вложенные списки.
Синтаксис тега следующий:
- Список элементов
- Список элементов
- …
Атрибуты, которые может использовать метка, помимо глобальных, следующие.
тип
Атрибут type позволяет указать тип порядка, применяемого к списку, таким образом устанавливая, что список представлен различными типами нумерации.
Этот атрибут может принимать следующие значения:
Значение Описание 1 Это значение по умолчанию, если атрибут не указан.
Выполните нумерацию списка, используя числовые значения.
(1,2,3…)а Устанавливает, что нумерация списка выполняется с использованием
символов в алфавитном порядке строчными буквами.(а, б, в…)А Устанавливает, что нумерация списка производится заглавными буквами в алфавитном порядке. (A, B, C…) и
Устанавливает, что нумерация списка производится с использованием нумерации римскими цифрами строчными буквами. (i, ii, iii, iv…)I Устанавливает, что нумерация списка производится с использованием нумерации прописными латинскими буквами.(I, II, III, IV…) начало
Атрибут start позволяет указать начальное значение, с которого должен начинаться упорядоченный список, это числовое значение, в случае, если список упорядочен в алфавитном порядке, начальное значение, которое выражается, соответствующий алфавит ASCII соответствует порядку.
Синтаксис тега с атрибутом следующий:
- Элемент списка
- Элемент списка
- …
обратное
Обратный атрибут позволяет указать, что нумерация или порядок, который был установлен, представлены обратно, если бы у нас был список с начальным значением 1, 2, 3, последовательно, его представление, когда этот атрибут будет найдено, было бы 3, 2, 1 .
Это атрибут с логическим значением, в случае появления атрибута в метке применяется значение.
Синтаксис атрибута, примененного к тегу, следующий:
<ол обратный>- Список элементов
- Список элементов
- …
- Элемент 1
Вы также можете запустить заказанную последовательность в любой точке последовательности, используя атрибут START. Например, если вы хотите начать свой список с элемента D, вы должны использовать атрибут start = «D», поместив его в начальный тег
- .
| Стартовый тег: | ||
| Конечный тег: | ||
| Атрибуты: | type = «1» (по умолчанию) | Последовательность списка использует 1,2,3 и т. Д. |
| type = «A» (алфавит в верхнем регистре) | Последовательность списка использует A, B, C и т. Д. | |
| type = «a» (строчный алфавит) | Последовательность списка использует a, b, c и т. Д. | |
| type = «I» (римские цифры в верхнем регистре) | Последовательность списка использует I, II, III и т. Д. | |
| type = «i» (римские цифры в нижнем регистре) | Последовательность списка использует i, ii, iii и т. Д. | |
| start = «?» (начальное значение) | Где «?» — начальное значение. | |
| Связанные теги: | ||
| Пример: | Мой список: | Этот тег заставит элементы, окруженные тегами позиций |
| Результат: | Мой список: |
Упорядоченные списки в HTML — Учебное пособие: Изображение упорядоченного списка в HTML, отображаемое в окне веб-браузера.
Упорядоченные списки в HTML: инструкции
Упорядоченные списки в HTML: видеоурок
В следующем видеоуроке под названием «Нумерованные (упорядоченные) списки» показано, как создавать упорядоченные списки в HTML. Этот видеоурок взят из нашего вводного курса HTML5 и CSS3 под названием «Освоение HTML5 и CSS3 Made Easy v.1.0».
Как отобразить упорядоченный список с вложенными счетчиками
Решения с CSS¶
Вы можете отобразить упорядоченный список с вложенными счетчиками, например 1.1, 1.2 вместо 1, 2 с помощью CSS. В этом фрагменте вы найдете некоторые методы отображения таких чисел.
Пример отображения упорядоченного списка с вложенными счетчиками со значением «block» свойства display: ¶
Название документа
<стиль>
ol {
сброс счетчика: пункт;
}
li {
дисплей: блок;
цвет: # 666666;
}
li: before {
содержание: счетчики (элемент, ".")" ";
счетчик-инкремент: элемент;
}
Попробуйте сами »Результат¶
В приведенном выше примере мы устанавливаем свойство display на «block» для элемента
В следующем примере показано использование упорядоченных списков с различными вариантами.
/ title>
<meta charset = "utf-8">
</head>
<body>
<p> Lista ordenada numéricamente por defecto> / p>
<ol>
<li> Элементо </li>
<li> Элементо </li>
<li> Элементо </li>
</ol>
<p> Lista ordenada alfabéticamente </p>
<ol type = "a">
<li> Примеро </li>
<li> Второе место </li>
<li> Терсеро </li>
</ol>
<p> Список задач с атрибутами </p>
<ol type = "I" start = "10" перевернуто>
<li> Элементо </li>
<li> Элементо </li>
<li> Элементо </li>
</ol>
</body>
</html>
</code>
</pre><p> Предыдущий пример должен показать результат, аналогичный показанному на следующем изображении.</p> Примеры упорядоченных списков<h4><span class="ez-toc-section" id="_DL"> Тег DL </span></h4><p> Тег <code><dl> </code>, позволяет определять то, что вызывается, списки определений, которые, в свою очередь, состоят из термина и определения.</p><p> Для составления списка используются еще две метки, первая — <code><dt></dt> </code>, которая позволяет указать термин в списке. И еще один тег <code><dd></dd> </code>, который позволяет указать определение.</p><p> Синтаксис списка с соответствующими метками следующий:</p><pre> <code>
<dl>
<dt> Я заканчиваю определение </dt>
<dd> Определение термина </dd>
<dt> В итоге я определяю </dt>
<dd> Определение термина </dd>
…
</dl>
</code>
</pre><p> В следующем примере показано использование метки для создания списка определений терминов.</p><pre> <code>
<! DOCTYPE HTML>
<html>
<head>
<title> Примеры использования HTML5
Определенные списки
- BIOS
- Базовая система ввода-вывода
- RAM
- Ramdon Access Memory
- HTML5
- Lenguaje de Marcado de Hipertexto 5
Результат предыдущего упражнения должен быть аналогичен показанному ниже.
Пример списка определенийТег упорядоченных списков в HTML для нумерованных данных с начальным значением
Тег упорядоченных списков в HTML для нумерованных данных с начальным значением
Упорядоченный список Список, допускается одна пара тегов. Тип = I
<тип OL = I> Тип = i
<тип OL = i> Использование стиляМы можем использовать list-style-type: для добавления различных типов нумерации в список, включая разные языки.Вот несколько примеров, можете попробовать еще. Добавление ведущего нуля к десятичным числам.
style = ‘список-стиль-тип: нижний греческий’
style = ‘list-style-type: армянский’
style = ‘list-style-type: oriya’
Эта статья написана plus2net.com team. plus2net.com | ||||||||||||
Списки в HTML
| Упорядоченные списки
| Неупорядоченные списки
| Списки определений
| ||||||||||||
✖
Мы используем файлы cookie для улучшения вашего просмотра.. Учить большеПользовательский стиль номеров списка | CSS-уловки
Как насчет классического трюка CSS! Это уже не так сложно, поскольку CSS имеет счетчик приращения и счетчик сброса , что идеально подходит для этого. Я просто хотел убедиться, что вы знаете, как это работает, и подготовили несколько простых для копирования примеров.
Допустим, все, что вам нужно, - это стилизовать чертовы числа:
См. Стиль 2 пользовательского списка пера Криса Койера (@chriscoyier) на CodePen.
Да, и эй, если вы беспокоитесь о выравнивании чисел, вы можете применить счетчик с помощью :: marker и позволить магии в стиле списка выполнять автоматическое выравнивание, или вот идея с подсеткой.
Вот пример со страниц CodePen Challenges:
См. Счетчики пользовательского списка пера Криса Койера (@chriscoyier) на CodePen.
На днях специалисты по ключевым кадрам сделали Pen, в котором использовались довольно крутые стили. Вот сокращение:
См. Custom List Style 3 от Криса Койера (@chriscoyier) на CodePen.
Сайты рецептов- отличное место для поиска пользовательских стилей списков, так как списки шагов являются такой превалирующей функцией. На сайте Мэта Маркиза у него есть несколько забавных. Я сорвал его CSS и переместил сюда:
См. Счетчики Pen Wilto Counters Криса Койера (@chriscoyier) на CodePen.
Не забудьте проверить небольшое забавное изменение медиа-запроса. Ресторан Lea Verou, конечно же, имеет счетную нумерацию.
Вот интересная демонстрация от Джонатана Снука, которая имеет вид «временной шкалы» и использует настраиваемые счетчики для обозначения каждого раздела:
См. CSS временной шкалы пера со счетчиками Джонатана Снука (@snookca) на CodePen.
Дополнительная информация
- Подсчет с помощью счетчиков CSS и сетки CSS
- Нумерация по стилю
- Веселые времена со счетчиками CSS
- Маркеры списка стилей в CSS
- счетчик-инкремент и сброс счетчика в Альманахе, а теоретический :: маркер
- Автоматическая нумерация с помощью счетчиков CSS
- Упорядоченные списки с символами Unicode
Упорядоченный список в HTML - W3spoint
Список в формате HTML
Как следует из названия, все элементы списка по умолчанию отмечены числами в нумерованном списке.Он широко известен как упорядоченный список HTML и поэтому начинается с тега
- . Элементы списка в упорядоченном списке HTML начинаются с тега
- . Упорядоченный список HTML может быть в основном пяти типов, в зависимости от различных типов цифр или букв, используемых для нумерации элементов списка.
ТИП ОПИСАНИЕ ЗНАЧЕНИЯ ИСПОЛЬЗУЕТ Тип «1» Числовой номер 1, 2, 3 Тип по умолчанию.Пункты списка пронумерованы номерами. Тип «I» Заглавная римская цифра I, II, III Элементы списка пронумерованы латинскими буквами в верхнем регистре. Тип «i» Маленькое римское число я, II, III Пункты списка пронумерованы римскими цифрами в нижнем регистре. Тип «А» Заглавный алфавит А, В, С Пункты списка пронумерованы заглавными буквами. Тип «А» Маленький алфавит а, б, в Пункты списка пронумерованы строчными буквами.
Пример: Тип «1»Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Выход:
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Объяснение:
В приведенном выше примере мы создали упорядоченный или нумерованный список типа по умолчанию в HTML, содержащий три элемента.Пример: Тип «I»
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Выход:
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Объяснение:
В приведенном выше примере мы создали упорядоченный или нумерованный список типа «I» в HTML, содержащий три элемента.Пример: Тип «i»
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Выход:
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Объяснение:
В приведенном выше примере мы создали упорядоченный или нумерованный список типа «i» в HTML, содержащий три элемента.Пример: Тип «A»
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Выход:
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Объяснение:
В приведенном выше примере мы создали упорядоченный или нумерованный список типа «A» в HTML, содержащий три элемента.Пример: Тип «а»
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Выход:
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Объяснение:
В приведенном выше примере мы создали упорядоченный или нумерованный список типа «a» в HTML, содержащий три элемента.Упорядоченный список HTML или нумерованный список с использованием атрибута START:
Пример:Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Выход:
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Объяснение:
В приведенном выше примере мы создали упорядоченный или нумерованный список типа «a» в HTML, содержащий три элемента.Здесь нумерация пунктов списка начинается с 10-й буквы в алфавитном порядке - «j».Упорядоченный список HTML или нумерованный список с использованием атрибута REVERSED:
Атрибут Reversed - это логический атрибут тега HTML ol, который недавно добавлен в версию HTML5. Как следует из названия, этот атрибут используется для отмены нумерации элементов списка.
Пример:Упорядоченный список HTML или нумерованный список
<ол обратный>- Имя
- Возраст
- Адрес
Упорядоченный список HTML или нумерованный список
<ол обратный> - Имя
- Возраст
- Адрес
Выход:
Упорядоченный список HTML или нумерованный список
- Имя
- Возраст
- Адрес
Объяснение:
В приведенном выше примере мы создали упорядоченный или нумерованный список типа по умолчанию в HTML, содержащий три элемента, но порядок нумерации элементов списка меняется на противоположный с помощью атрибута «обратный».
Упорядоченные, неупорядоченные и описательные списки в HTML: определения и примеры - видео и стенограмма урока
Упорядоченный список
Упорядоченный список имеет внутренний порядок. Этот тип списка используется, когда важна последовательность элементов, и каждый элемент должен быть пронумерован. Например, с его помощью можно перечислить этапы сборки предмета мебели своими руками или перечислить этапы создания бабушкиного пюре с горошком.
Упорядоченный список начинается с тега
- .Каждый элемент списка заключен между открывающим
- и закрывающим тегами. По умолчанию для перечисления каждого элемента используются числа (начиная с 1) в порядке возрастания. Можно использовать различные виды нумерации, реализовав атрибут type, который применяется к открывающему тегу
- HTML
- CSS
- JavaScript
- jQuery
- HTML
- CSS
- JavaScript
- jQuery
- HTML
- CSS
- JavaScript
- jQuery
- HTML
- CSS
- JavaScript
- jQuery
- и . По умолчанию для каждого элемента используются круглые маркеры. Вы можете изменить тип маркера, используя атрибут type в открывающем теге
- HTML
- CSS
- JavaScript
- jQuery
- HTML
- CSS
- JavaScript
- jQuery
- и . Затем описание термина заключено между тегами
- и . У вас может быть несколько терминов, за которыми следует одно описание, или вы можете даже иметь один термин, за которым следует несколько описаний. Это похоже на то, что вы найдете в словаре, где одно слово может иметь более одного значения.
- HTML
- Язык гипертекстовой разметки
- CSS
- Каскадные таблицы стилей
- JavaScript
- ECMAScript
- Популярные языки сценариев
- jQuery
- Клиентская библиотека JavaScript для HTML
- Упрощает обход / манипулирование HTML-документом, обработку событий, анимацию и AJAX
- Упорядоченные списки , которые имеют собственный порядок, и каждый элемент пронумерован
- Неупорядоченные списки , в которых нет внутреннего порядка, и каждый элемент помечен маркированным списком
- Списки описания , которые содержат список терминов и описания для каждого термина
- . В следующей таблице представлены различные типы, которые могут быть использованы:
| Тег типа | Описание |
|---|---|
| тип = '1' | Элементы списка будут отображаться с цифрами (по умолчанию). |
| тип = '' а '' | Элементы списка будут показаны строчными буквами. |
| тип = '' A '' | Элементы списка будут показаны заглавными буквами. |
| тип = '' я '' | Элементы списка будут показаны римскими цифрами в нижнем регистре. |
| тип = '' I '' | Элементы списка будут отображаться с римскими цифрами в верхнем регистре. |
Например, HTML-код для стандартного (по умолчанию) упорядоченного списка будет выглядеть следующим образом:
Если вы хотите изменить список для отображения строчных букв, вы должны добавить тег типа, как в коде здесь:
Атрибуты также могут использоваться в упорядоченных списках.Например, вы можете начать нумерацию в порядке убывания, используя логический атрибут , перевернутый . Вы также можете изменить начальный номер, с которого начинается список, используя атрибут start .
Неупорядоченный список
Неупорядоченный список не имеет внутреннего порядка, и последовательность элементов не важна.Мы можем использовать этот тип списка, например, чтобы показать ингредиенты для рецепта.
Неупорядоченный список начинается с тега
- . Каждый элемент, который вы добавляете в список, заключен между тегами
- . В следующем списке используются различные атрибуты типа:
| Тег типа | Описание |
|---|---|
| тип = 'диск' | Элементы списка отмечены маркерами (по умолчанию). |
| тип = `` круг '' | Пункты списка отмечены кружками. |
| тип = квадрат | Пункты списка отмечены квадратами. |
| тип = «нет» | Элементы списка ничем не отмечены. |
Например, HTML-код для стандартного (по умолчанию) неупорядоченного списка будет выглядеть так:
Если вы хотите изменить список для отображения квадратов, вы должны добавить тег типа «квадрат»:
Список описаний
Описание Список - это список терминов с описаниями для каждого термина.Он начинается с тега
. Каждый термин, который вы добавляете в список, заключен между тегами
Например, HTML-код для списка описаний будет выглядеть так:
Сводка урока
Хорошо , давайте сделаем обзор.Как мы узнали, HTML предоставляет вам три типа списков:
Теги, связанные с каждым из этих типов списков, указаны в приведенной здесь таблице вместе с их описанием:
| Тег | Описание |
|---|---|
| Определяет упорядоченный список | |
| Определяет неупорядоченный список | |
| Определяет элемент списка | |
| Определяет список описания | |
| Определяет термин в списке описания | |
| Описывает термин в списке описания |
Атрибуты также могут быть добавлены к тегам, чтобы изменить стиль или порядок списка, как показано здесь:
| Атрибут | Описание |
|---|---|
| тип | Определяет стиль нумерации для упорядоченных списков и стиль маркера для неупорядоченных списков. |