Список HTML тегов на одной странице. Справочник по тегам HTML5
HTML — язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги — это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTML
Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Тег | Краткое описание |
---|---|
<!—…—> | Комментарий. Подробнее |
<!DOCTYPE> | Определяет тип документа. Подробнее |
<a> | Ссылка, гиперссылка, якорь. Подробнее |
<abbr> | Определяет текст как аббревиатуру.![]() |
<address> | Контактная информация автора или владельца документа. Подробнее |
<area> | Определяет область на карте-изображении |
<article> | Статья |
<aside> | Контент в стороне (содержимое не является основным на странице по смыслу) |
<audio> | Позволяет вставить воспроизводимый аудио файл. Подробнее |
<b> | Полужирный текст. Подробнее |
<base> | |
<bdi> | Область, где написание текста может имееть другое направления. Подробнее |
<bdo> | Устанавливает направление написания текста.![]() |
<blockquote> | Цитата. Подробнее |
<body> | Указывает область body документа. Подробнее |
<br> | Перенос строки. Подробнее |
<button> | Кликабельная кнопка. Подробнее |
<canvas> | Используется для рисовании графики с помощью скриптов |
<caption> | Подпись таблицы. Подробнее |
<cite> | Сноска на название материала. Подробнее |
<code> | Используется для вставки компьютерного кода в текстовом виде. Подробнее |
<col> | ![]() |
<colgroup> | Определяет группу из одной или более колонок таблицы для форматирования. Подробнее |
<datalist> | Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле. Подробнее |
<dd> | Определяет описание термина из тега <dt> в списке терминов <dl>. Подробнее |
<del> | Текст, который удален в новой версии документа. Подробнее |
<details> | Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть. Подробнее |
<dfn> | Указывает, что содержимое является термином. Подробнее |
<dialog> | Определяет диалоговое окно или интерактивный элемент |
<div> | Блочный элемент — один из основных элементов верстки.![]() |
<dl> | |
<dt> | Название термина в списке определений <dl>. Подробнее |
<em> | выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее |
<embed> | Контейнер для внешнего приложения |
<fieldset> | Группа связанных элементов в форме. Подробнее |
<figcaption> | Заголовок для <figure> элемента |
<figure> | Определяет автономную группу из нескольких элементов (например картинка с подписью) |
<footer> | Нижний колонтитул |
<form> | Определяет форму пользовательского ввода.![]() |
<h2> — <h6> | Заголовки HTML разного уровня: <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Подробнее |
<head> | Указывает область head документа. Подробнее |
<header> | Блок заголовка |
<hr> | Горизонтальная линия — тематический разделитель. Подробнее |
<html> | Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее |
<i> | Выделяет текст курсивом. Подробнее |
<iframe> | Определяет встроенный фрейм |
<img> | Изображение, картинка. Подробнее |
<input> | Поле для ввода, элемент формы.![]() |
<ins> | Текст, который был добавлен в новой версии документа. Подробнее |
<kbd> | Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее |
<label> | Метка для поля ввода. Обычно содержит подпись поля. Подробнее |
<legend> | Заголовок элементов <fieldset>. Подробнее |
<li> | Элемент списка. Подробнее |
<link> | Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS). Подробнее |
<main> | Основной контент |
<map> | Контейнер для <area>. Определяет пользовательскую карту на изображении |
<mark> | Выделенный текст (обычно с помощью подсветки фона).![]() |
<menu> | Контейнер для списка пунктов меню |
<menuitem> | Определяет элементы, которые пользователь может вызвать из контекстного меню |
<meta> | Используется для определения мета-данных документа. Подробнее |
<meter> | Измеритель значений в заданном диапазоне |
<nav> | Контейнер для навигационных элементов |
<noscript> | Альтернативный контент для пользователей, отключивших скрипты |
<object> | Определяет встроенный объект |
<ol> | Определяет нумерованный список. Подробнее |
<optgroup> | Определяет группу связанных вариантов в выпадающем списке.![]() |
<option> | Параметр (вариант выбора) в выпадающем списке. Подробнее |
<output> | Результат вычислений. Подробнее |
<p> | Абзац. Подробнее |
<param> | Задает параметры для встроенных объектов |
<picture> | Контейнер для нескольких изображений |
<pre> | Предварительно отформатированный текст. Подробнее |
<progress> | Индикатор выполнения (прогресса) |
<q> | Цитата в тексте. Подробнее |
<rp> | Альтернативный текст, если браузер не поддерживает тег <ruby>. Подробнее |
<rt> | Аннотация к содержимому тега <ruby>.![]() |
<ruby> | Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее |
<s> | Перечеркнутый текст. Подробнее |
<samp> | Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее |
<script> | Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее |
<section> | Раздел |
<select> | Определяет выпадающий список или список с множественным выбором. Подробнее |
<small> | Текст шрифтом меньшего размера. Подробнее |
<source> | Определяет ресурс для тегов <video>, <audio> и <picture>.![]() |
<span> | Строчный элемент. Подробнее |
<strong> | Текст, выделенный по значению. Обычно отображается полужирным. Подробнее |
<style> | Определяет контейнер для определения CSS стилей документа. Подробнее |
<sub> | Отображает текст в виде нижнего индекса. Подробнее |
<summary> | Заголовок внутри тега <details>. Подробнее |
<sup> | Отображает текст в виде верхнего индекса. Подробнее |
<table> | Определяет таблицу. Подробнее |
<tbody> | Определяет область контента в таблице. Подробнее |
<td> | Ячейка в таблице <table>.![]() |
<textarea> | Многострочное поле для ввода. Подробнее |
<tfoot> | Определяет группу строк в нижней части таблицы <table> — нижний колонтитул. Подробнее |
<th> | Ячейка — заголовок в таблице <table>. Подробнее |
<thead> | Определяет группу строк в верхней части таблицы <table> — верхний колонтитул. Подробнее |
<time> | Дата и/или время. Подробнее |
<title> | Заголовок HTML документа. Подробнее |
<tr> | Определяет строку в таблице. Подробнее |
<track> | Определяет текстовую дорожку для тегов <video> и <audio> Подробнее |
<ul> | Определяет маркированный список.![]() |
<var> | Используется для обозначения содержимого тега как переменной. Подробнее |
<video> | Позволяет вставить воспроизводимое видео. Подробнее |
<wbr> | Место, где допускается перенос строки. Подробнее |
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег | Краткое описание |
---|---|
<acronym> | Акроним. Используйте тег <abbr> вместо него. Подробнее |
<applet> | Встроенный апплет. Используйте <embed> или <object> вместо него.![]() |
<basefont> | Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте каскадные таблицы стилей CSS вместо него. Подробнее |
<big> | Текст большего размера. Используйте каскадные таблицы стилей CSS вместо него. Подробнее |
<center> | Отцентрованный текст. Используйте каскадные таблицы стилей CSS вместо него. Подробнее |
<dir> | Список директорий. Используйте <ul> вместо него. Подробнее |
<font> | Определяет цвет, размер и семейство шрифта. Используйте каскадные таблицы стилей CSS вместо него. Подробнее |
<frame> | Фрейм внутри <frameset>. Используйте <iframe> вместо него |
<frameset> | Определяет набор фреймов.![]() |
<noframes> | Альтернативный текст, если фреймы <frame> не поддерживаются |
<strike> | Перечеркнутый текст. Используйте <del> или <s> вместо него |
<tt> | Моноширинный текст. Используйте каскадные таблицы стилей CSS вместо него |
<u> | Подчеркнутый текст. Используйте каскадные таблицы стилей CSS вместо него |
Списки HTML уроки для начинающих академия
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮ Назад Дальше ❯
Пример списка HTML
Неупорядоченный список:
- Пункт
- Пункт
- Пункт
- Пункт
Упорядоченный список:
- Первый пункт
- Второй пункт
- Третий пункт
- Четвертый пункт
Неупорядоченный список HTML
Неупорядоченный список начинается с тега <ul>
. Каждый элемент списка начинается с тега
<li>
.
Элементы списка будут помечены маркерами (маленькими черными кружками) по умолчанию:
Пример
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Неупорядоченный HTML-список-Выбор маркера элемента списка
Свойство CSS list-style-type
используется для определения стиля маркера элемента списка:
Значение | Описание |
---|---|
disc | Задание маркера элемента списка (по умолчанию) |
circle | Устанавливает маркер элемента списка на окружность |
square | Устанавливает маркер элемента списка в квадрат |
none | Элементы списка не будут помечены |
Пример — Disc
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Пример — Circle
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Пример — Square
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Пример — None
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Упорядоченный список HTML
Упорядоченный список начинается с тега <ol>
. Каждый элемент списка начинается с тега
<li>
.
По умолчанию элементы списка будут помечены цифрами:
Пример
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Упорядоченный HTML-список-атрибут Type
Атрибут type
тега <ol>
определяет тип маркера элемента списка:
Тип | Описание |
---|---|
type=»1″ | Элементы списка будут пронумерованы номерами (по умолчанию) |
type=»A» | Элементы списка будут пронумерованы прописными буквами |
type=»a» | Элементы списка будут пронумерованы строчными буквами |
type=»I» | Элементы списка будут пронумерованы прописными римскими номерами |
type=»i» | Элементы списка будут пронумерованы римскими номерами в нижнем регистре |
Номера:
<ol type=»1″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Прописные буквы:
<ol type=»A»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Строчные буквы:
<ol type=»a»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Римские цифры в верхнем регистре:
<ol type=»I»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Строчные Римские номера:
<ol type=»i»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Списки HTML-описания
HTML также поддерживает списки описания.
Список описания — это список терминов с описанием каждого термина.
Тег <dl>
определяет список описания, тег <dt>
определяет термин (имя), и тег <dd>
описывает каждый термин:
Пример
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Вложенные списки HTML
Список может быть вложенным (списки внутри списков):
Пример
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Note: List items can contain new list, and other HTML elements, like images and links, etc.
Подсчет списка элементов управления
По умолчанию упорядоченный список начнет отсчет с 1. Если вы хотите начать отсчет с заданного числа, вы можете использовать атрибут
start
:
Пример
<ol start=»50″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Горизонтальный список с CSS
HTML-списки могут быть стилизованы различными способами с помощью CSS.
Одним из популярных способов является стиль списка по горизонтали, чтобы создать навигационное меню:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
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>
Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.
Справка
- Используйте элемент 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
Тег | Описание |
---|---|
<ul> | Определяет неупорядоченный список |
<ol> | Определяет упорядоченный список |
<li> | Определяет элемент списка |
<dl> | Определяет список описания |
<dt> | Определяет термин в списке описания |
<dd> | Описывает термин в списке описания |
❮ Назад Дальше ❯
Популярное
html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы
Copyright 2018-2020 HTML5CSS. ru
Правила и Условия Политика конфиденциальности О нас Контакты
Списки в HTML: синтаксис и примеры использования
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Подписаться
×
Перевод статьи «HTML List – How to Use Bullet Points, Ordered, and Unordered Lists».
Photo by Suzy Hazelwood from PexelsСоздание различных элементов списков на веб-странице — рядовая задача для любого разработчика. У вас могут быть списки товаров в корзине, списки студентов с их оценками и даже списки собак, упорядоченные по громкости лая.
В общем, знать, как создаются списки, просто необходимо. Возможно, вы думаете, что это очень обыденная и заурядная тема, но она важна. Список — один из наиболее часто используемых компонентов в веб-разработке.
В этой статье мы рассмотрим элементы списков, их свойства, стили и, разумеется, — как создавать из них аккуратные списки.
Как сделать список в HTML
Списки в HTML бывают упорядоченные и неупорядоченные.
В упорядоченных списках есть нумерация или еще какой-то способ обозначения места каждого элемента в списке.
Примером упорядоченного списка может служить нумерованный список. Он может начинаться с номера 1, затем будут идти номера 2, 3, 4 и так далее.
Но для упорядочивания элементов не обязательно используются числа. Могут быть и буквы: список начнется с буквы A, затем будут идти B, C, D и так далее.
Вот пример упорядоченного списка с именами студентов и их оценками:
Кроме упорядоченных списков в HTML есть и неупорядоченные. Пример — список задач. В представленном ниже TODO-списке мы видим, что я настолько увлечен программированием, что пожертвовал ради него завтраком.
Есть еще один вид списков — список определений (description list). Его мы рассмотрим чуть позже, а сейчас давайте разберем, как создавать каждый вид списков.
Как создать упорядоченный список
В HTML упорядоченный список создается при помощи тега <ol>
(от ordered list — упорядоченный список).
Между открывающим тегом <ol>
и закрывающим <ol />
нам нужно определить элементы списка. Это делается при помощи тега <li>
.
Вот полная HTML-структура упорядоченного списка:
<ol> <li>Eat</li> <li>Code</li> <li>Sleep</li> </ol>
Вывод будет следующий:
Итак, у нас есть список пронумерованных элементов. Нумерация начинается с 1, а далее инкрементируется до 2 и 3. Откройте этот CodePen и попробуйте поиграть с использованием ol-li
.
See the Pen Ordered List by Tapas Adhikary (@atapas) on CodePen.
Виды упорядоченных списков в HTML
Что, если мы не хотим упорядочивать список по номерам? Допустим, нам хотелось бы использовать для этого буквы — A, B, C или a,b,c. Это можно сделать, указав для тега
<ol>
атрибут type
с нужным значением.
Чтобы упорядочить список при помощи заглавных букв, нужно задать type
значение A
.
<ol type="A"> <li>Eat</li> <li>Code</li> <li>Sleep</li> </ol>
Вывод будет таким:
Аналогично, можно указать в качестве значения для type
строчную букву a
: тогда для упорядочивания будут использоваться строчные буквы.
<ol type="a"> <li>Eat</li> <li>Code</li> <li>Sleep</li> </ol>
Вывод:
Можно использовать римские цифры. Для этого задайте значение
I
для атрибута type
.
<ol type="I"> <li>Eat</li> <li>Code</li> <li>Sleep</li> </ol>
Вывод:
Попробуйте назначать свои значения для type
в этом CodePen:
See the Pen Ordered List Types by Tapas Adhikary (@atapas) on CodePen.
Использование атрибута start в упорядоченных списках
Элемент <ol>
имеет интересный атрибут — start
. С его помощью можно указать значение, с которого должна начаться нумерация списка.
Допустим, мы хотим начать список не с 1, а с 30. Для этого нужно прописать значение 30 для атрибута start
:
<ol start="30"> <li>Thirty</li> <li>Thirty One</li> <li>Thirty Two</li> </ol>
Вывод:
Поиграться можно здесь:
See the Pen
Ordered List Start Attribute by Tapas Adhikary (@atapas)
on CodePen.
Как создать неупорядоченный список
Переходим к неупорядоченным спискам. Для их создания используется тег <ul>
(от unordered list — неупорядоченный список).
Элементы определяются так же, как в упорядоченных списках: при помощи тегов <li>
между <ul>
и <ul/>
.
Элементы списка при этом будут иметь маркировку по умолчанию — черные точки.
Вот список моих любимых онлайн-ресурсов для изучения веб-программирования:
My Favorite Web Development Learning Sites <div> <ul> <li>freeCodeCamp</li> <li>CSS-Tricks</li> <li>Traversy Media</li> </ul> </div>
Вывод выглядит так:
Как видите, возле каждого элемента стоит черная точка. В принципе, вид маркировки можно настроить, это мы тоже рассмотрим. Но сперва попробуйте изменить что-то в этом CodePen и запустить код.
See the Pen Unordered Bullet List by Tapas Adhikary (@atapas) on CodePen.
Как сделать элементы списка ссылками
Чтобы сделать элемент списка ссылкой на внешнюю или внутреннюю веб-страницу, нужно добавить якорный тег <a>
внутри тега <li>
.
Этот пример показывает, как добавить в наш предыдущий список ссылки на соответствующие сайты:
My Favorite Web Development Learning Sites <div> <ul> <li> <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a> </li> <li> <a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a> </li> <li> <a href="https://www.traversymedia.com/" target="_blank">Traversy Media</a> </li> </ul> </div>
Вывод:
Попробуйте сделать это самостоятельно:
See the Pen Unordered Bullet List with Links by Tapas Adhikary (@atapas) on CodePen.
Виды неупорядоченных списков
Как уже упоминалось, маркировку списков можно настраивать. Это делается при помощи CSS-свойства list-style
.
Для свойства list-style
есть четыре основных значения:
none
— перед элементами не будет вообще никаких значковcircle
— значки будут в виде незаполненных кружковdisc
— дефолтное значение, значки в виде черных точекsquare
— значки-квадратики
Попробуйте поменять виды маркировки:
See the Pen
Unordered List Styles by Tapas Adhikary (@atapas)
on CodePen.
А вы знали, что существуют еще и списки определений?
В HTML есть еще один вид списков, но он используется не так уж часто. Это список определений. Определение — это небольшой текст о чем-либо (поясняющий что-либо).
В списке определений у нас будут определяемые термины и их определения.
Сам список создается при помощи тега <dl>
.
Внутри списка указываются термины (при помощи тегов <dt>
) и определения (при помощи тегов <dd>
). Каждое определение идет сразу за термином, который оно поясняет.
Давайте рассмотрим это на примере.
Допустим, мы хотим дать некоторую информацию о кодинге, сплетнях (англ. gossip — сплетни, сплетничать) и сне.
Для начала мы ставим тег <dl>
. Затем прописываем попарно теги <dt>
и <dd>
для кодинга, сплетен и сна соответственно.
<dl> <dt>Coding</dt> <dd>An activity to keep you happy, even in sleep.</dd> <dt>Gossiping</dt> <dd>Can't live without it.</dd> <dt>Sleeping</dt> <dd>My all time favorite.</dd> </dl>
Вывод будет таким:
Попробуйте поэкспериментировать:
See the Pen Description List by Tapas Adhikary (@atapas) on CodePen.
Вероятно, вам любопытно, почему этот вид списков используется не так уж часто. Дело в том, что эту структуру можно создать и с помощью обычного неупорядоченного списка и CSS-стилей.
Но если вы учитываете семантику HTML, не стоит забывать о списках определений.
Как создать хедер страницы при помощи элементов списка
Давайте теперь рассмотрим практический пример использования списков на веб-странице. Мой любимый — применение элементов списка в хедере.
Давайте создадим очень простой хедер с лого и тремя ссылками: Home, Products и About Us. наша HTML-структура будет выглядеть так:
<header> <span>Logo</span> <ul> <li><a href="#/home">Home</a></li> <li><a href="#/products">Products</a></li> <li><a href="#/about">About Us</a></li> </ul> </header>
Здесь мы взяли неупорядоченный список с тремя элементами для ссылок на страницы Home, Products и About Us. Вы также видите span
-элемент с текстом Logo, который обозначает лого. Здесь позже можно будет использовать подходящую картинку.
На данный момент наш хедер выглядит так:
Но это не то, что нам нужно. Поэтому мы добавим несколько CSS-правил и свойств, чтобы наш список начал больше походить на хедер страницы.
header{ background-color: #273032; color: #FFF; padding: 10px; display: flex; } .logo { background-color: blue } ul { margin: 0px; } li { list-style: none; display: inline; margin-right: 0.2rem; } a { color: pink; }
Теперь все выглядит гораздо лучше и куда ближе к настоящему хедеру.
Опять же, вы можете попробовать что-то поменять в этом коде и посмотреть, что будет.
See the Pen Header Navigation Using Lists by Tapas Adhikary (@atapas) on CodePen.
Надеюсь, статья будет полезной для вас и поможет лучше разобраться в HTML-списках.
HTML-списков — GeeksforGeeks
В этой статье мы узнаем HTML-список , а также понимаем его типы и различные способы их реализации на примере.
Список представляет собой запись коротких фрагментов связанной информации или используется для отображения данных или любой информации на веб-страницах в упорядоченной или неупорядоченной форме. Например, чтобы купить товары, нам нужно подготовить список, который может быть упорядоченным или неупорядоченным, что помогает нам организовать данные и легко найти товар. Пожалуйста, обратитесь к статье об атрибутах типа HTML
Пример: Пример ниже иллюстрирует использование ненумерованного и упорядоченного списка в HTML.
HTML
|
Вывод:
Список HTML
Поддерживаемые теги: Эти теги используются в листинге HTML.
- Тег HTML
- Тег HTML
- Тег HTML
- Тег HTML
Неупорядоченный список HTML: Ненумерованный список начинается с тега «ul». Каждый элемент списка начинается с тега «li». Элементы списка по умолчанию отмечены маркерами, то есть маленькими черными кружками.
Синтаксис:
- list of items
Атрибут: Этот тег содержит два атрибута, перечисленных ниже:
- compact : Список будет меньше.
- тип : Указывает, какой тип маркера используется в списке.
Примечание: Атрибуты
- не поддерживаются HTML5.
- Элемент 1
- Элемент 2
- Элемент 3
compact : Определяет, что список должен быть сжат (атрибут compact не поддерживается в HTML5. Вместо этого используйте CSS).
обратный : Определяет, что порядок будет нисходящим.
start : Определяет, с какого числа или алфавита будет начинаться заказ.
тип : Он определяет, какой тип (1, A, a, I и i) порядка вы хотите в вашем списке числовых, буквенных или римских чисел.
в упорядоченном списке для изменения его значения в списке. Вы определяете значение элемента списка и номер любого элемента списка, появляющегося после него, который будет пересчитан соответствующим образом.
Пример: Этот пример иллюстрирует использование «атрибута значения», используемого в элементе
.
HTML
<
html
>
<
head
>
<
title
>Page Title
название
>
head
>
<
body
>
<
h3
>Welcome To GFG
h3
>
<
ol
>
<
LI
> Предмет ONE
LI
>
<
LI
Значение
<
LI
0020
=
"10"
>Item Two
li
>
<
li
>Item Three
li
>
<
LI
> Четвертый пункт
LI
>
OL
>
Корпус
0019>
HTML
>
:
” srcset=”https://media.geeksforgeeks.org/wp-content/uploads/20220522105327/GFG20220522105224.jpg, ”sized=”100vw” ширина=”237 ″>Атрибут значения
- определяет имя термина, а Тег
- описывает каждый термин. Дополнительную информацию см. в статье Как добавить список описания элемента с помощью HTML?0005
Синтаксис:
- Contents...
Пример: В этом примере описывается список описаний HTML.
HTML
<
html
>
<
body
>
<
h3
>Список описаний
H3
>
<
DL
>
<
DT
> Ков.
DD
>- 500 GMS
DD
>
<
DT
> Молоко
DT
>
<
dd
>- 1 ltr Tetra Pack
dd
>
dl
>
Body
>
HTML
>
Выход:
Описание Список
0002 Supported Browser:- Google Chrome 94.0 & above
- Microsoft Edge 93.0
- Firefox 92.0 & above
- Opera 78.
0
- Safari 14.1
- IE 11.0
HTML lists · WebPlatform Docs
Summary
В этой статье представлены три типа списков в HTML и рассматриваются их основные функции.
Введение
Списки используются для группировки взаимосвязанных фрагментов информации, чтобы они были четко связаны друг с другом и их было легко читать. В современной веб-разработке списки являются рабочими элементами, часто используемыми для навигации, а также для общего контента.
Списки хороши со структурной точки зрения, поскольку они помогают создать хорошо структурированный, более доступный и простой в обслуживании документ. Они также полезны, потому что предоставляют специализированные элементы, к которым можно прикрепить стили CSS. Наконец, семантически правильные списки помогают посетителям читать ваш веб-сайт и упрощают обслуживание, когда ваши страницы нуждаются в обновлении.
Три типа списков
В HTML есть три типа списков:
- неупорядоченный список — используется для группировки набора связанных элементов в произвольном порядке
- упорядоченный список — используется для группировки набора связанных элементов в определенном порядке
- список описаний — используется для отображения пар имя/значение, таких как термины и определения
Каждый тип списка имеет определенное назначение и значение на веб-странице.
Неупорядоченные списки
Неупорядоченные (маркированные) списки используются, когда набор элементов может быть размещен в любом порядке. Пример - список покупок:
- молоко
- хлеб
- сливочное масло
- кофейные зерна
Хотя все предметы являются частью одного списка, вы можете расположить их в любом порядке, и список все равно будет иметь смысл:
- хлеб
- кофейные зерна
- молоко
- сливочное масло
С помощью CSS можно изменить маркер на один из нескольких стилей по умолчанию, использовать собственное изображение или даже отобразить список без маркеров — мы рассмотрим, как это сделать, в статье «Стили списков и ссылок».
Разметка неупорядоченного списка
Неупорядоченные списки используют один набор из
тегов
тегов
:- хлеб
- кофейные зерна
- молоко
- сливочное масло
Упорядоченные списки
Упорядоченные (нумерованные) списки используются для отображения списка элементов, которые должны быть в определенном порядке.
Примером могут служить инструкции по приготовлению:
- Сбор ингредиентов
- Смешать ингредиенты
- Поместите ингредиенты в форму для запекания
- Запекать в духовке 1 час
- Вынуть из духовки
- Дать постоять десять минут
- Подавать
Если бы элементы списка были перемещены в другом порядке, информация потеряла бы смысл:
- Собрать ингредиенты
- Запекать в духовке 1 час
- Подавать
- Вынуть из духовки
- Поместите ингредиенты в форму для запекания
- Дать постоять десять минут
- Смешать ингредиенты
Упорядоченные списки могут отображаться с несколькими вариантами последовательности. По умолчанию в большинстве браузеров используются десятичные числа, но доступны и другие:
- Буквы
- Строчные буквы ascii (a, b, c…)
- Прописные буквы ascii (A, B, C…).
- Строчные буквы классического греческого языка: (έ, ή, ί…)
- Числа
- Десятичные числа (1, 2, 3…)
- Десятичные числа с ведущими нулями (01, 02, 03…)
- Строчные римские цифры (i, ii, iii…)
- Прописные римские цифры (I, II, III…)
- Традиционная грузинская нумерация (ан, бан, ган…)
- Традиционная армянская нумерация (мек, ерку, ерек…)
Как и в случае с неупорядоченными списками, вы можете использовать CSS для изменения стиля ваших упорядоченных списков.
Дополнительную информацию см. в разделе Оформление списков и ссылок.
Разметка упорядоченного списка
В упорядоченных списках используется один набор тегов
- Собрать ингредиенты
- Смешать ингредиенты
- Поместите ингредиенты в форму для запекания.
- Выпекать в духовке в течение часа.
- Вынуть из духовки.
- Оставить на десять минут.
- Подавать
Начало нумерованных списков с чисел, отличных от 1
Обычное требование при использовании упорядоченных списков — заставить их начинаться с числа, отличного от 1 (или i, или I и т. д.). Это делается с помощью атрибута
start
, который принимает числовое значение (даже если вы используете CSS, чтобы изменить счетчики списка на алфавитные или латинские). Это полезно, если у вас есть один список элементов, но вам нужно разбить список примечанием или другой связанной информацией.Например, мы могли бы сделать это с предыдущим примером:
<ол>
- Собрать ингредиенты
- Смешать ингредиенты
- Поместите ингредиенты в форму для запекания.
Прежде чем поместить ингредиенты в форму для запекания, предварительно разогрейте духовку до 180 градусов по Цельсию/350 градусов по Фаренгейту в готовности к следующему шагу.
<старт = "4">- Выпекать в духовке в течение часа.
- Вынуть из духовки.
- Оставить на десять минут.
- Подавать
Это дает следующий результат:
- Собрать ингредиенты
- Смешать ингредиенты
- Поместите ингредиенты в форму для запекания
Прежде чем поместить ингредиенты в форму для запекания, разогрейте духовку до 180 градусов по Цельсию/350 градусов по Фаренгейту, чтобы подготовиться к следующему шагу.
- Выпекать в духовке 1 час
- Вынуть из духовки
- Дать постоять десять минут
- Подавать
Обратите внимание, что этот атрибут устарел в HTML 4, поэтому он будет препятствовать проверке вашей страницы, если вы используете строгий тип документа HTML4.
Если вы хотите использовать такую функциональность на строгой странице HTML4, и она обязательно должна пройти проверку, вы можете сделать это с помощью счетчиков CSS. Однако, к счастью, атрибут
start
был восстановлен в HTML5.Списки описаний
Списки описаний (ранее называвшиеся списками определений , но переименованные в HTML5) связывают определенные имена и значения в списке. Примерами могут быть элементы в списке ингредиентов и их описания, авторы статей и краткие биографии, или победители конкурса и годы, в которые они выиграли. У вас может быть сколько угодно групп имя-значение, но в каждой паре должно быть хотя бы одно имя и хотя бы одно значение.
Списки описаний являются гибкими: вы можете связать более одного значения с одним именем или наоборот. Например, термин «кофе» может иметь несколько значений, и вы можете показать их одно за другим:
кофе напиток из обжаренных молотых кофейных зерен чашка кофе общественное собрание, на котором пьют кофе от среднего до темно-коричневого цвета
Или вы можете связать более одного имени с одним и тем же значением.
Это полезно, чтобы показать варианты термина, все из которых имеют одинаковое значение:
сода поп газировка кола сладкий газированный напиток
Разметка списка описаний
В списках описаний используется один набор тегов
- Имя
- Значение
- Имя
- Значение
- Имя
- Значение
- Имя1
- Значение, применимое к Name1
- Имя2
- Имя3
- Значение, применимое как к Name2, так и к Name3
- Имя4
- Одно значение, которое применяется к Name4
- Другое значение, применимое к Name4
Определяю ли я термины или связываю другие пары имя/значение?
- Если да, используйте список описания.
- Если нет, не используйте список описания.
- Если да, используйте список описания.
Важен ли порядок элементов списка?
- Если да, используйте упорядоченный список.
- Если нет, используйте неупорядоченный список.
- Гибкость: если вам нужно изменить порядок элементов списка в упорядоченном списке, вы просто перемещаете элементы списка; когда браузер отображает список, он будет правильно упорядочен.
- Стиль: Использование списка HTML позволяет правильно оформить список с помощью CSS. Теги элементов списка
- Семантика: списки HTML придают содержимому правильную семантическую структуру. Это имеет важные преимущества, например, позволяет программам чтения с экрана сообщать пользователям с нарушениями зрения, что они читают список, а не просто зачитывать запутанный набор текста и чисел.
- Глава первая <ол>
- Раздел первый
- Раздел второй.
- Раздел третий.
- Глава вторая
- Глава третья
- A List Apart: Taming Lists
- W3C CSS2: определение типа списка
- Какие существуют три типа списков HTML?
- Когда вы будете использовать каждый тип списка? Как бы вы выбрали между ними?
- Как вы вкладываете списки?
- Почему для оформления списков следует использовать CSS, а не HTML?
- Что такое неупорядоченные и упорядоченные списки HTML?
- Закрепить наше понимание неупорядоченных списков путем создания
- Ввести тег упорядоченного списка
- Улучшить наше понимание упорядоченных списков путем создания
Чтобы составить список, выписываем открывающий и закрывающий теги
- Ветчина и сыр
- Жареный сыр
- Картофель фри с сыром начо
- Сырный суп
- Сыр и крекеры
- Суши
Теперь вместо того, чтобы каждый элемент отображался на новой строке, содержимое будет также будет слегка отступ и рядом с каждым из них появится маркер.
Списки очень гибкие, и мы можем даже вкладывать списки в списков. Скажем, мы хотел разбить наши любимые продукты по категориям. У нас может быть несколько категории и один или несколько элементов в каждый :
- Сэндвичи <ул>
- Ветчина и сыр
- Жареный сыр
- Закуски <ул>
- Картофель фри с сыром начо
- Сыр и крекеры
- Супы <ул>
- Сырный суп
- Суши <ул>
- Острые роллы с лососем
- Калифорнийские роллы
- Создание ненумерованного списка
- Вложение каждого ингредиента сыра на гриле в виде элемента списка, завернутого в
- Жареный сыр
- Суши
- Сыр и крекеры
- Сырный суп
- Картофель фри с сыром начо
Если, скажем, мы хотим написать ранжированных списков любимых блюд, это может выглядеть так:
5 самых любимых блюд
<ол>Не стесняйтесь проверить это, добавив его в
index.html
, сохранив и обновив. вкладка, на которой открыт файл. ТеперьЖареный сыр
будет отображаться как1. Жареный сыр
как еда №1 (где ему и место).Вложенные упорядоченные списки работают так же, как и неупорядоченные, но вместо пустых и квадратные маркеры, каждый вложенный список по-прежнему будет отображать числа.
Примечание: Во вложенном списке вы должны указать 9Обертка 0019 ol
илиul
. В противном случаеli
внутри другогоli
будут отображаться как два элемента на одном уровне. Это связано с тем, что технически вам не нужно писать закрывающий тегli
.следующий пример будет отображаться так же, как и предыдущий:
5 самых популярных блюд
<ол>- Жареный сыр
- Суши
- Сыр и крекеры
- Сырный суп
- Картофель фри с сыром начо
- Создайте упорядоченный список
- Вложите каждый шаг создания сыра на гриле в виде элемента списка, заключенного в теги
Пример: В этом примере описывается неупорядоченный список.
HTML
<
html
>
<
body
>
<
h3
> Список продуктов
H3
>
<
UL
>
<
li
>Bread
li
>
<
li
>Eggs
li
>
<
li
> Молоко
LI
>
<
LI
> Кофе
LI
>
ul
>
body
>
html
>
Output:
Неупорядоченный список
Неупорядоченный список HTML имеет различные маркеры элементов списка:
Пример 1: Диск можно использовать для установки маркера элемента списка на маркер, т.
е. по умолчанию.
HTML
<
html
>
<
head
>
<
title
>HTML ul tag
title
>
head
>
<9 body
>
<
h2
>GeeksforGeeks
h2
>
<
h3
>Unordered List with Disc Bullets
h3
>
<
P
> Курсы Geeksforgeeks.
0005
<
UL
Стиль
=
»
>
<
LI
> SUDO
LI
>
<
LI
<
LI
<
LI
0019 >Gfg
li
>
<
li
>Gate
li
>
<
li
>Placement
LI
>
UL
>
Body
>
.
0018
HTML
>
Выход:
Неупорядоченный список с Maker Disc
Пример 2: . .
HTML
<
html
>
<
body
>
<
h2
>GeeksforGeeks
h2
>
<
h3
>Unordered List with Circle Bullets
h3
>
<
P
> Список курсов Geeksforgeeks:
P
>
.
0005
<
UL
Стиль
=
» >
<
LI
> SUDO
LI
>
<
LI
> GFG
<
LI
> GFG
<
LI
> GFG
.0020
li
>
<
li
>Gate
li
>
<
li
>Placement
li
>
UL
>
Body
>
020
HTML
>
Выход:
Неупорядоченный список с Maker Eitme
Пример 3: Квадрат можно использовать для установки маркера списка на квадрат.
HTML
<
html
>
<
body
>
<
h2
>GeeksforGeeks
h2
>
<
h3
>Unordered List with Square Bullets
h3
>
<
P
> Список курсов Geeksforgeeks:
P
>
>
<
ul
style
=
"list-style-type: square"
>
<
li
>Geeks
li
>
<
LI
> SUDO
LI
>
<
LI
> GFG
.
li
>
<
li
>Gate
li
>
<
li
>Placement
li
>
UL
>
Body
>
html
>
Вывод:
Ненумерованный список с создателем квадратных элементов
HTML
<
html
>
<
body
>
<
H2
> Geeksforgeeks
H2
>
<
H3
> UNERADERSED с номером
.
<
P
> Список курсов Geeksforgeeks:
P
>
UL
Стиль
=
».
<
LI
> SUDO
LI
>
<
LI
> GFG
LI
> GFG.>
<
li
>Gate
li
>
<
li
>Placement
li
>
UL
>
Body
>
HTML
019 >HTML
Вывод:
Неупорядоченный список без создателя элементов
Пример: Вложенный неупорядоченный список.
HTML
<
html
>
<
body
>
<
H2
> Geeksforgeeks
H2
>
<
H3
> NED ANTORD DORD DORD DORD DORD DORDORDED ANDRODED ANDRODED ANDRODED ANDRODED ANDRODED ANDRODED.
<
p
>Список курсов GeeksforGeeks:
p
>
9 0
0019 <
ul
>
<
li
>DSA
li
>
<
ul
>
<
li
>Массив
li
>
> Связанный список
0020
li
>
<
li
>stack
li
>
<
li
>Queue
li
>
UL
>
<
LI
> Веб -технологии
li
>
<
ul
>
<
li
>HTML
li
>
<
li
>CSS
li
>
<
li
>JavaScript
>
ul
>
<
li
>Aptitude
li
>
<
li
>Ворота
li
>
<
li
>Размещение0019>
UL
>
>
.
Вывод:
Вложенный неупорядоченный список
Упорядоченный список HTML: Упорядоченный список начинается с тега «ol». Каждый элемент списка начинается с тега «li». Элементы списка по умолчанию отмечены цифрами.
Синтаксис:
Атрибуты:
Пример : В этом примере показано использование атрибута reverse, подсчета контрольного списка и атрибута type.
HTML
<
HTML
>
>
>
9.0019 <
head
>
<
title
>HTML ol tag
title
>
head
>
<
Body
>
<
H2
Стиль
=
"Цвет: зеленый"
> Geeksforgeeks ".
0020
h2
>
<
h4
>HTML ol tag
h4
>
<
p
>reversed attribute
с
>
<
OL
Обратите внимание>
.0019 <
li
>HTML
li
>
<
li
>CSS
li
>
<
li
> JS
LI
>
OL
>
<
.
0019 p
>start attribute
p
>
<
ol
start
=
"5"
>
<
LI
> HTML
LI
>
<
LI
> CSS
LI
>
> CSS
LI
>
> CSS
LI
>0020
<
li
>JS
li
>
ol
>
<
p
> Тип атрибута
с
>
<
OL
Тип
=
"i"
>
<
li
>HTML
li
>
<
li
>CSS
li
>
<
LI
> JS
LI
>
OL
>
OL
>
OL
>
OL
>
.
0005
Body
>
HTML
>
9002 1000 2.3 2.32.32.2.32. имеет различные маркеры элементов списка : Атрибут type тега
- определяет тип маркера элемента списка.
Пример 1 : Элементы списка будут пронумерованы цифрами, т.е. по умолчанию.
HTML
<
html
>
<
body
>
<
h3
>Упорядоченный список с номерами
h3
>
<
ol
тип
=
0020
>
<
li
>Bread
li
>
<
li
>Eggs
li
>
<
LI
> Молоко
LI
>
<
LI
> Кофе 020
li
>
ol
>
body
>
html
>
Вывод:
Заказанный список с числовым производителем элементов
Пример 2 : Тип = «A», этот список элементов будет пронумерован заглавными буквами.
HTML
<
html
>
<
body
>
<
h3
>нумерованный список с буквами
h3
>
<
ol
тип
90"9019 =0020
>
<
li
>Bread
li
>
<
li
>Eggs
li
>
<
LI
> Молоко
LI
>
<
LI
> Кофе 020
li
>
ol
>
body
>
html
>
Вывод:
Упорядоченный список с заглавными буквами
Пример 3 : Type=”a”, этот список элементов будет пронумерован строчными буквами.
HTML
<
html
>
<
body
>
<
h3
>Упорядоченный список со строчными буквами
h3
>
<
ol
type
0 =
"a"
>
<
li
>Bread
li
>
<
li
>Eggs
li
>
<
LI
> Молоко
LI
>
<
LI
<
LI
>Coffee
li
>
ol
>
body
>
html
>
Вывод:
Упорядоченный список с малым буквенным обозначением производителя
Пример 4.
HTML
<
html
>
<
body
>
<
h3
>Упорядоченный список с римскими цифрами
h3
>
<
ol
тип
=
"I"
>
<
li
>Bread
li
>
<
li
>Eggs
li
>
<
LI
> Молоко
LI
>
<
LI
> Кофе
<
LI
> Кофе
<
LI
>
<
LI
>0020
li
>
ol
>
body
>
html
>
Вывод:
Упорядоченный список с заглавными римскими цифрами
Пример 5 : Type=”i”, этот список элементов будет пронумерован строчными римскими цифрами.
HTML
<
html
>
<
body
>
<
h3
>Упорядоченный список со строчными римскими цифрами
h3
>
<
ol
type
=
0020
"i"
>
<
li
>Bread
li
>
<
li
>Eggs
li
>
<
LI
> Молоко
LI
>
<
LI
<
LI
<
LI
<
LI
<
LI
<
LI
0019 >Coffee
li
>
ol
>
body
>
html
>
Вывод:
Нумерованный список со строчными римскими цифрами
Пример 6: Вложенный упорядоченный список, внутри которого есть еще один вложенный упорядоченный список.
HTML
<
html
>
<
body
>
<
h2
>GeeksforGeeks
h2
>
<
h3
>Вложенный упорядоченный список20 39 >
<
ol
>
<
li
>Coffee
li
>
<
li
> Чай
<
OL
>
<
LI
>Black tea
li
>
<
li
>Green tea
li
>
ol
>
LI
>
<
LI
> Молоко
LI
>
OL
>
>
.
Вывод:
Вложенный упорядоченный список
Существует еще один атрибут, специально определенный для элемента списка, который используется с тегом «li», и это значение атрибута . Ниже приведено небольшое описание атрибута value, специально используемого с тегом «li». Хотя он используется с различными другими элементами HTML.
Атрибут значения:
Атрибут значения может использоваться для отдельного элемента
Список описаний HTML: Список описаний – это список терминов с описанием каждого термина. Тег
определяет список описаний, тег
Простой список описания отдельных имен с отдельными значениями будет выглядеть следующим образом:
Это выглядит следующим образом:
Имя Ценность Имя Ценность Имя Ценность
В следующем примере мы связываем более одного значения с именем и наоборот:
<дл>
Этот код будет отображаться следующим образом:
Name1 Значение, которое применяется к Name1 Имя2 Имя3 Значение, которое применяется как к Name2, так и к Name3 Имя4 Одно значение, которое применяется к Name4 Другое значение, которое применяется к Name4
Выбор типа списка
Пытаясь решить, какой тип списка использовать, задайте себе два простых вопроса:
Преимущества списка HTML
Другими словами, не кодирует элементы списка, используя обычные текстовые теги . Использование текста вместо списка делает больше работы для вас и может создать проблемы для читателей вашего документа. Поэтому, если вашему документу нужен список, вы должны использовать правильный формат списка HTML.
Вложенные списки
Отдельный элемент списка может содержать другой полный список, называемый вложенным списком . Это полезно для таких вещей, как оглавления, которые содержат подразделы:
1. Глава первая а. Раздел первый б. Раздел второй в. Раздел третий 2. Глава вторая 3. Глава третья
Чтобы отразить это в коде, весь вложенный список содержится внутри первого элемента списка. Код выглядит так:
Обратите внимание, что мы использовали CSS-свойство
list-style-type: lower-alpha
для упорядочения вложенного списка строчными буквами вместо десятичных чисел.Вложенные списки весьма полезны и часто служат основой для навигационных меню, поскольку они являются хорошим способом определения иерархической структуры веб-сайта. Они также очень гибкие, так как упорядоченные или неупорядоченные списки могут быть вложены как в упорядоченные, так и в неупорядоченные элементы списка. Пример вложения неупорядоченных списков в упорядоченный список см. выше в разделе «Выбор типов списков».
Теоретически вы можете вкладывать списки на любом уровне, который вам нравится, хотя на практике слишком глубокое вложение списков может привести к путанице. Для очень больших списков вам может быть лучше разделить содержимое на несколько списков с заголовками или даже разделить его на отдельные страницы. Хорошее эмпирическое правило: не размещайте списки глубже, чем на три уровня.
Заключение
В этой статье вы увидели, как используются различные типы HTML-списков, как они кодируются, и изучили некоторые основные параметры списков. Дополнительные сведения об изменении внешнего вида и поведения списков HTML см.
в разделе Стилизация списков и ссылок.
См. также
Внешние ресурсы
Вопросы для упражнений
Списки HTML — Learn.co
Многие теги HTML ведут себя уникальным образом. Некоторые применяют автоматические стили, например
р
теги, которые создают поля вокруг текста. Некоторые, например теги заголовков, увеличивают размер шрифта. Использование этих тегов определяет наш контент. При чтении HTML с помощью правильные теги информируют нас о цели контента. Если мы увидим тегh2
, мы знаем, что смотрим на большой заголовок страницы. В этом уроке мы собираемся обратите внимание на несколько новых тегов, которые помогают нам организовать списков связанного контента.Цели
Что такое неупорядоченные и упорядоченные списки HTML?
Предположим, мы создавали личный веб-сайт и хотели перечислить наши любимые продукты. Мы могли бы написать так:
Ветчина и сыр
Жареный сыр
Картофель фри с сыром начо
Сырный суп
Сыр и крекеры
Суши
В приведенном выше примере для каждого продукта на странице будет создана новая строка, но на самом деле это не так. указать, что эти вещи связаны. Используя встроенный
ul
,ol
иli
Однако с помощью HTML-тегов мы можем сгруппировать связанное содержимое списка вместе. Мы называем такой составление «списка».В HTML мы создаем списки, используя тег
В этом примере вложенные списки теперь будут иметь отступ , далее и вместо сплошной маркер, они будут отображаться с полыми маркерами, указывая на подсписок.
Добавление вложенного списка на один уровень глубже приведет к появлению квадратных маркеров , что позволит нам легко отображать связанный и вложенный контент в удобочитаемом формате.
Первая часть этой задачи состоит в том, чтобы пройти первые 2 теста:
Запустите
httpsserver
или откройтеindex.html
в браузере. Допустим, мы хотели перечислить ингредиенты, необходимые для приготовления бутерброда с сыром на гриле. Ингредиенты:2 ломтика хлеба
,4 ломтика сыра
,1 столовая ложка сливочного масла
.Для первой части этой задачи в
index.html
создайте неупорядоченный список. который отображает эти ингредиенты. Выполнитьузнать
, чтобы узнать, сможете ли вы пройти первый тест. Если вы все сделали правильно, вы пройдете первый тест, но есть еще испытания, чтобы пройти! Теперь нам нужно обратить внимание на следующий тест.Хорошо, а теперь предположим, что мы хотели сделать наш жареный сыр немного более захватывающим и добавьте пару сыров,
чеддер
,моцарелла
иперец джек
.Чтобы пройти второй тест, внутрь
ли
4 ломтика сыра
добавить вложенный неупорядоченный список, в котором перечислены три типа сыра.Если первые два теста пройдены, отлично! Пришло время поговорить о другом типе списка!
Введение тега заказанного списка
Ненумерованные списки отлично подходят для организации связанного контента там, где он не имеет значения то, что идет первым, как в наших ингредиентах для жареного сыра. В ситуациях, когда мы хочет, чтобы элементов отображались в определенном, пронумерованном порядке, мы будем использовать тег упорядоченного списка , который записывается как
Чтобы выполнить задание, напишите необходимый HTML-код для прохождения тестов:
Итак, у нас есть ингредиенты для жареного сыра, но как насчет шагов? требуется сделать жареный сыр? Шаги к рецепту должны быть порядке, иначе мы можем получить подгоревший сыр, обваленный в хлебе и с квадратиком масла. Шаги для приготовления простого жареного сыра будут такими:
Намазать маслом хлеб и сковороду
,Положить хлеб на сковороду и обжарить
,Положить сыр поверх хлеба
,Накрыть вторым ломтиком хлеба
,Перевернуть и жарить в течение 2 минут
После того, как вы написали упорядоченный список, который правильно отображает эти 5 шагов, запустите
, изучите
чтобы увидеть, как тесты проходят. - Тег HTML