Списки. Учебник html
Глава 9
В этой главе пойдёт речь о списках, которые могут быть:
- неупорядоченные(маркированные)
- упорядоченные (нумерованные)
- и являться списком определений
Такое вот нестандартное начало главы.. зато теперь Вам понятно, что есть список в html.
Ну что ж давайте пройдёмся по нашему списку.
Неупорядоченный список задаётся тегом <ul>. Любой список состоит из элементов, «пунктов», каждый элемент в свою очередь задаётся тегом <li> после которого собственно и идёт текст нужного нам «пункта». Для тега <li> закрывающий тег </li> необязателен.
Вместе данные теги приобретают следующий вид:
<ul><li> Пункт первый..
<li> Пункт второй..
<li> Пункт третий..
</ul>
Пример неупорядоченного списка:
<head>
<title>неупорядоченный список</title>
</head>
<body>
Купить и доставить домой:
<ul>
<li> 2 кг.
клубней картофеля<li> 1 булку ржаного чёрного хлеба
<li> пачку макарон «спагетти» (длинные не менее 200мм. тонкие)
<li> 1 кг. шлифованного риса (сложно объяснить.. спросишь..)
<li> 1 дес. куриных яиц.
<li> 1 пачку 500г. Натрия двууглекислого (Сода)
</ul>
Смотри ничего не перепутай.. целую..
</body>
</html>
Теги <li> и <ul> имеют атрибут type который присуждает элементу списка или же всему списку целиком определённый стиль.
Может иметь одно и трёх значений:
- disk — кружок, диск (по умолчанию)
- circle — полый круг
- square — квадрат
<head>
<title>стили неупорядоченного списка</title>
</head>
<body>
В этом списке каждый элемент имеет свой стиль:
<ul>
<li type=»disk»> кружок, диск (по умолчанию)
<li type=»circle»> полый круг
<li type=»square»> квадрат
</ul>
А здесь стиль задан всему списку
<ul type=»circle»>
<li> Пункт 1
<li> Пункт 2
</ul>
</body>
</html>
Упорядоченный или нумерованный список задаётся тегом <ol>, так же как и в неупорядоченном списке элемент списка присуждается тегом <li>.
Построение кода полностью схоже с неупорядоченным списком поэтому сразу пример:
<html><head>
<title>упорядоченный список</title>
</head>
<body>
Купить товары в следующем порядке:
<ol>
<li> Водка
<li> Пиво
<li> Сырок (необязательно)
</ol>
Жду!!!
</body>
</html>
А вот атрибут type в сочетании с упорядоченным списком может иметь следующие значения:
- А — Заглавные буквы
- а — Строчные буквы
- I — Заглавные римские цифры
- i — Строчные римские цифры
- 1 — Арабские цифры (по умолчанию)
Вот пример их применения:
<html><head>
<title>Стили упорядоченного список</title>
</head>
<body>
Арабские цифры
<ol type=»1″>
<li>Во-первых
<li>Во-вторых
</ol>
Строчные буквы
<ol type=»a»>
<li>Во-первых
<li>Во-вторых
</ol>
Заглавные буквы
<ol type=»A»>
<li>Во-первых
<li>Во-вторых
<li>В-третьих
</ol>
Строчные римские цифры
<ol type=»i»>
<li>Во-первых
<li>Во-вторых
<li>В-третьих
<li>В-четвёртых
</ol>
Заглавные римские цифры
<ol type=»I»>
<li>Во-первых
<li>Во-вторых
<li>В-третьих
<li>В-четвёртых
</ol>
</body>
</html>
В упорядоченном списке есть ещё один атрибут start его числовое значение говорит о том с какого номера следует строить упорядоченный список.
Пример:
<html><head>
<title>Начало упорядоченного списка</title>
</head>
<body>
<ol type=»1″ start=»24″>
<li>Сразу переходим к двадцать четвёртому пункту!!
<li>Идём дальше
<li>И дальше
</ol>
Аналогично можно «стартовать» при любом стиле упорядоченного списка
<ol type=»I» start=»8″>
<li>Сразу переходим к восьмому пункту..
<li>Идём дальше
<li>И дальше
</ol>
</body>
</html>
Со списком определений дело обстоит немного иначе нежели чем с уже знакомыми списками. Задаётся данный вид списка тегом <dl>. Пункты списка определений размечаются тегом <dt>, а определения этих пунктов тегом <dd>.
Всё вместе пишется по следующей схеме:
<dl><dt>
</dl>
Пример:
<html><head>
<title>Список определений</title>
</head>
<body>
<dl>
<dt> Слово коса может иметь следующие определения:
<dd> сельскохозяйственный инструмент
<dd> хитрая девичья причёска
<dd> отмель реки
<dt> Слово ключ тоже имеет несколько значений:
<dd> гаечный
<dd> источник, родник
</dl>
</body>
</html>
Собственно вот и вся премудрость..
Психология посетителя страницы.
Не могу, не согласится с тем утверждением, что посетители страницы чаще просматривают документы, нежели чем вдумчиво читают их.. По-крайней мере так происходит практически всегда при первом визите посетителя на страничку. Первое на что обращает внимание пользователь просматривая какой либо документ это: заголовки в тексте, выделенные фрагменты текста, и списки. Умелое и ненавязчивое размещение таковых элементов залог того что посетитель окунётся в чтение Вашего документа более глубоко.
Что касается списков.. следует понимать что: Маркированные перечни <ul> используются тогда, когда порядок следования пунктов не важен.. и делаются они для того чтобы изложенная информация воспринималась легче. А нумерованные списки <ol> наоборот, применяются тогда, когда важен именно порядок следования пунктов, например — когда список является изложением последовательности каких либо действий.
Упорядоченные и неупорядоченные списки
Существует три типа списков: упорядоченные, неупорядоченные и списки определений.
Здесь мы рассмотрим первые два вида списков, а о списках определений вы узнаете позже.
Упорядоченные и неупорядоченные списки работают одинаково, за исключением того, что последние используются для представления непоследовательных списков, элементы которых обычно маркируются крупной черной точкой (буллитом), а первые используются для представления последовательных списков, которые обычно имеют вид элементов пронумерованных в возрастающем порядке.
Для определения неупорядоченных списков используется тег <ul>, а для определения упорядоченных списков – тег <ol>. Внутри списков для определения каждого отдельного элемента списка используется тег <li>.
Измените свою веб-страницу следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Моя первая веб-страница</title>
</head>
<body>
<h2>Моя первая веб-страница</h2>
<h3>Что это такое</h3>
<p>Простая страница, созданная при помощи HTML</p>
<h3>Для чего это нужно</h3>
<ul>
<li>Чтобы изучить HTML</li>
<li>Чтобы похвастать</li>
<li>Потому что я обожаю свой компьютер и хочу привить ему любовь к HTML</li>
</ul>
</body>
</html>
Если посмотреть эту веб-страницу в браузере, то увидите список, маркированный буллитами.
Замените тег <ul> на тег <ol>, и вы увидите, что список стал нумерованным.
Кроме всего прочего можно включать одни списки в другие, формируя тем самым структурированную иерархию элементов.
Замените код списка из предыдущего примера следующим:
<ul>
<li>Чтобы изучить HTML</li>
<li>Чтобы похвастать
<ol>
<li>перед начальником</li>
<li>перед друзьями</li>
<li>перед моей кошкой</li>
<li>перед маленькой говорящей уткой в моей голове</li>
</ol>
</li>
<li>Потому что я обожаю свой компьютер и хочу привить ему любовь к HTML</li>
</ul>
И вот у нас список внутри списка. А ведь можно поместить еще один список внутри этого вложенного списка. И еще один. И так далее до бесконечности.
Определение HTML cсылок Вверх Шесть уровней текстовых заголовковСписки HTML уроки для начинающих академия
Пример списка 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.
Одним из популярных способов является стиль списка по горизонтали, чтобы создать навигационное меню:
Пример
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 используется тег <ul> (unordered list), который сообщает браузеру, что всё, следующее за ним, вплоть до закрывающего тега </ul>, представляет собой маркированный список. Каждый элемент маркированного списка определяется тегом <li>. Кроме этого, в элементы списка можно вставить практически любое содержимое, включая другие списки, изображения, текст и т.д.
HTML тег <ul> является блочным элементом, при отображении он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого. По умолчанию браузер предваряет каждый элемент списка специальным маркером и располагает каждый элемент с новой строки, применяя к нему небольшой отступ от левого края.
Примечание: для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения.
Для создания нумерованных (упорядоченных) списков используйте тег <ol>.
Атрибуты
Тег <ul> поддерживает Глобальные атрибуты и События
Стиль по умолчанию
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Пример
<ul> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ul>
Результат данного примера в окне браузера:
НОУ ИНТУИТ | Лекция | Списки HTML
Аннотация: Этот урок посвящен созданию списков, их оформлению и упорядочению.
HTML поддерживает упорядоченные списки, неупорядоченные списки, и списки определений. Отличаются эти разновидности списков лишь способом оформления.
Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.
Неупорядоченные списки
Неупорядоченный список является списком элементов. Элементы списка маркируются с помощью специальных знаков (обычно небольшой черный круг).
Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.
<html> <body> <h5>Неупорядоченный список:</h5> <ul> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ul> </body> </html>
Пример выполнения данного HTML-кода
Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.
д.
Упорядоченные списки
Упорядоченный список также является списком элементов. Элементы списка маркируются с помощью чисел или букв.
Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>. У тега <ol> может быть два атрибута: start (определяет первое число, с которого начинается нумерация пунктов) и type (определяет стиль нумерации пунктов). Может иметь значения:
- «A» — заглавные буквы A, B, C …
- «a» — строчные буквы a, b, c …
- «I» — большие римские числа I, II, III …
- «i» — маленькие римские числа i, ii, iii …
- «1» — арабские числа 1, 2, 3 …
<html> <body> <h5>Упорядоченный список:</h5> <ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol> </body> </html>
intuit.ru/2010/edi»>Пример выполнения данного HTML-кодаВнутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.
Списки определений
Список определений не является списком элементов. Это список терминов и определений терминов.
Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>.
<html> <body> <dl> <dt>элемент 1</dt> <dd>описание элемента 1</dd> <dt>элемент 2</dt> <dd>описание элемента 2</dd> </dl> </body> </html>
Пример выполнения данного HTML-кода
Внутри определения списка определений (тег <dd> ) можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.
д.
Неупорядоченный список. Упорядоченный список, пользовательский список
1. Неупорядоченный список
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h4> Фрукты, которые вам нравятся </ h4>
<ul>
<li> Apple </ li>
<li> банан </ li>
<li> Виноград </ li>
<li> Арбуз </ li>
<li> Апельсины </ li>
<! - ul может ставить только теги p->
<li>
<h5> Овощи </ h5>
<p> Помидор </ p>
</li>
</ul>
</body>
</html>
Как показано
2. Упорядоченный список
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li> США </ li>
<li> Китай </ li>
<li> Великобритания </ li>
<li> Россия </ li>
Тег <! - ol может содержать только тег li, но другие теги могут быть помещены в тег li->
</ol>
</body>
</html>
Как показано
3.
Пользовательский список
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl>
<dt> Пекин </ dt>
<dd> Чанпин </ dd>
<dd> Shunyi </ dd>
<dd> Хайдян </ dd>
<dd> Чаоян </ dd>
</dl>
<dl>
<dt> Юнчжэн </ dt>
<dd> Чжэнь Хуан </ dd>
<dd> Queen </ dd>
<dd> Shen Meizhuang </ dd>
<dd> Няньфей </ dd>
<! - Пояснение внизу сайта->
</dl>
</body>
</html>
Результат
docs/markdown-and-extensions.md at master · yandex-cloud/docs · GitHub
Документация Яндекс.Облака разработана с использованием GitHub Flavored Markdown(GFM) с некоторыми расширениями.
Содержание
Базовые возможности Markdown
Заголовки
Для обозначения заголовка используется символ #.
Пример синтаксиса:
# Заголовок 1 уровня ## Заголовок 2 уровня ### Заголовок 3 уровня #### Заголовок 4 уровня
Базовые возможности GFM
Заголовки
Для обозначения заголовка используется символ #.
Пример синтаксиса:
# Заголовок 1 уровня ## Заголовок 2 уровня ### Заголовок 3 уровня #### Заголовок 4 уровня
В документации Яндекс.Облака используется 4 уровня заголовков. Первый заголовок на странице — 1 уровня. Для заголовков подразделов можно использовать 2, 3 и 4 уровни.
Полужирный шрифт и курсив
Для выделения текста полужирным шрифтом используется удвоенный символ *:
Этот текст выделен **полужирным шрифтом**.
Для выделения текста курсивом используется символ _:
Этот текст выделен _курсивом_.
Для выделения текста полужирным шрифтом и курсивом используются одновременно удвоенный символ * и символ _:
Этот текст выделен _**полужирным шрифтом и курсивом**_.Этот текст выделен **_полужирным шрифтом и курсивом_**.
Этот текст выделен **_полужирным шрифтом и курсивом_**.Списки
Простой неупорядоченный список
Чтобы оформить неупорядоченный маркированный список, можно использовать символы *, - или +.
Например, следующая разметка:
* Элемент 1 * Элемент 2 * Элемент 3
будет отображаться так:
- Элемент 1
- Элемент 2
- Элемент 3
Вложенный неупорядоченный список
Чтобы оформить вложенный неупорядоченный список, нужно добавить отступ в начале строк с элементами вложенного списка. Допустимый размер отступа — от двух до пяти пробелов. Рекомендуемый размер отступа — три пробела.
Например, следующая разметка:
- Элемент 1 - Элемент A - Элемент B - Элемент 2
будет отображаться так:
- Элемент 1
- Элемент A
- Элемент B
- Элемент 2
Простой упорядоченный список
Чтобы оформить упорядоченный список, нужно использовать цифры с символом . или 
). В документации Яндекс.Облака для всех элементов списка используется цифра 1 и символ ..
Например, следующая разметка:
1. Первый пункт 1. Второй пункт 1. Третий пункт
будет отображаться так:
- Первый пункт
- Второй пункт
- Третий пункт
Вложенный упорядоченный список
Чтобы оформить вложенный упорядоченный список, нужно добавить отступ в начале строк с элементами вложенного списка. Допустимый размер отступа — от трех до шести пробелов. Рекомендуемый размер отступа — три пробела.
Например, следующая разметка:
1. Первый пункт 1. Вложенный пункт 1. Вложенный пункт 1. Второй пункт
будет отображаться так:
Первый пункт
1.1. Вложенный пункт
1.2. Вложенный пунктВторой пункт
Таблицы
Таблица состоит из одной строки с заголовками, разделительной строки и некоторого количества строк с данными.
Каждая строка таблицы состоит из ячеек, отделенных друг от друга символами |.
В ячейках разделительной строки используются только символ - и, возможно, символ :. Символ : ставится в начале, в конце или с обеих сторон содержимого ячейки разделительной строки, чтобы обозначить выравнивания текста в соответствующем столбце по левой стороне, по правкой стороне или по центру соответственно.
Таблицу нужно отделять от предшествующего и последующего текста пустыми строками.
Например, следующая разметка:
По левому краю | По правому краю | По центру :--- | ---: | :---: Текст | Текст | Текст
будет отображаться так:
| По левому краю | По правому краю | По центру |
|---|---|---|
| Текст | Текст | Текст |
Ссылки
Ссылка состоит из двух частей:
[текст]— текст ссылки.(ссылка)— URL или путь до файла, на который делается ссылка.
Например, следующая разметка:
[ссылка на README.md](README.md)
будет отображаться так:
ссылка на README.md
В документации Яндекс.Облака вместо текста ссылки можно использовать расширение #T — указатель на заголовок файла, на который делается ссылка. Указатель на заголовок обрабатывается при сборке документации для отображения на сайте и текст соответствующего заголовка подставляется на место текста ссылки.
Например, следующая разметка
после сборки будет отображаться так:
Документация Яндекс.Облака
Оформление кода
Фрагмент кода можно оформить как часть предложения или как отдельный блок.
Фрагмент кода как часть предложения
Чтобы оформить фрагмент кода как часть предложения, нужно использовать символ `.
Например, следующая разметка:
Предложение с `фрагментом кода`.
будет отображаться так:
Предложение с фрагментом кода.
Фрагмент кода отдельным блоком
Чтобы оформить фрагмент кода как отдельный блок, нужно использовать утроенный символ ` и имя соответствующего языка программирования.
Например, следующая разметка:
будет отобраться как фрагмент кода с подсветкой:
Изображения
Чтобы вставить в текст изображение, нужно использовать следующую разметку:
В документации Яндекс.Облака все изображения хранятся в папках с именем _assets:
- Изображениями, которые используются во многих документах, помещаются в папки
ru/_assetsиen/_assets. - Изображения, которые используются только в одном документе, помещаются в
_assetsв папке соответствующего документа.
Расширения для Markdown
Примечания
В документации Яндекс.Облака используются следующие типы примечаний:
- Примечание:
{% note info %} Это примечание.
{% endnote %} - Предупреждение
{% note alert %} Это предупреждение. {% endnote %} - Совет
{% note tip %} Это совет. {% endnote %} - Важная информация
{% note important %} Это важная информация. {% endnote %}
{% endnote %}Перед текстом примечания и после него обязательно оставлять пустую строку.
Использование одинакового текста в разных файлах
Чтобы использовать один и тот же текст в нескольких местах одного файла или в разных файлах, нужно:
- Сохранить такой текст в отдельном файле в папке
ru/_includesилиen/_includes. - Добавить ссылку на файл с текстом в нужном месте документа с помощью расширения
include:- Если нужно использовать все содержимое файла:
{% include [Описание](_includes/file.md) %} - Если нужно использовать содержимое файла без первого заголовка:
{% include notitle [Описание](_includes/file.md) %}В описании нужно вставить короткий комментарий про содержимое файла, на который указывает ссылка.
- Если нужно использовать все содержимое файла:
Ссылка на файл обрабатывается при сборке документации для отображения на сайте и вместо ссылки подставляется содержимое файла.
Вкладки
Чтобы оформить текст в виде вкладок, нужно использовать следующую разметку:
{% list tabs %}
- Заголовок вкладки 1
Первая строка текста во вкладке 1.
Вторая строка текста во вкладке 1.
- Заголовок вкладки 2
Текст во вкладке 2.
{% endlist %}
При использовании вкладок обязательно оставлять пустые строки:
- Перед и после строк
{% list tabs %}и{% endlist %}. - Между текстом одной вкладки и заголовком следующей вкладки.
Оглавление документа
Для каждого документа необходимо создать файл toc.yaml:
- Только файлы, указанные в
toc.yaml, обрабатываются при сборке документации и отображаются на сайте Яндекс.Облака. - Навигация по документу на сайте Яндекс.Облака генерируется на базе
toc.yaml.
Файл toc.yaml имеет следующую структуру:
- title: Имя сервиса или документа
href: index.yaml
items:
- name: Имя блока
items:
- name: Имя раздела
href: path/to/file.md
- name: Имя вложенного блока
items:
- name: Имя раздела во вложенном блоке
href: path/to/some/file.md
- name: Имя другого раздела
href: path/to/another/file.mdВ документации Яндекс.Облака можно использовать до 3 уровней вложенности в toc.yaml.
Переменные
Ссылки на переменные в тексте выглядят следующим образом:
{{ compute-full-name }} — это сервис для управления виртуальными машинами.
После сборки текст будет выглядеть так:
Yandex Compute Cloud — это сервис для управления виртуальными машинами.
HTML-неупорядоченных списков
Тег HTML
Неупорядоченный список HTML
Неупорядоченный список начинается с тега
По умолчанию элементы списка будут отмечены маркерами (маленькими черными кружками):
Неупорядоченный список HTML — выберите маркер элемента списка
Свойство CSS list-style-type используется для определения стиля
маркер элемента списка.Может иметь одно из следующих значений:
| Значение | Описание |
|---|---|
| диск | Устанавливает маркер элемента списка в виде маркера (по умолчанию) |
| круг | Устанавливает маркер элемента списка в круг |
| квадрат | Устанавливает маркер элемента списка в квадрат |
| нет | Пункты списка не будут помечены |
Пример — Диск
- Кофе
- Чай
- Молоко
Пример — Окружность
- Кофе
- Чай
- Молоко
Пример — квадрат
- Кофе
- Чай
- Молоко
Пример — Нет
- Кофе
- Чай
- Молоко
Вложенные списки HTML
Списки могут быть вложенными (список внутри списка):
Пример
- Кофе
- Чай
- Черный чай
- Зеленый чай
- Молоко
Примечание: Элемент списка (
Горизонтальный список с CSS
СпискиHTML можно стилизовать по-разному с помощью CSS.
Один из популярных способов — задать стиль для списка по горизонтали, чтобы создать меню навигации:
Пример
ul {
тип списка: нет;
маржа: 0;
отступ: 0;
переполнение: скрыто;
цвет фона: # 333333;
}
li {
поплавок: левый;
}
li a {
дисплей: блок;
цвет: белый;
выравнивание текста: по центру;
отступ: 16 пикселей;
оформление текста: нет;
}
li a: hover {
background-color: # 111111;
}