Неупорядоченный список: Списки. Учебник html

Содержание

Списки. Учебник html

Глава 9

В этой главе пойдёт речь о списках, которые могут быть:

  • неупорядоченные(маркированные)
  • упорядоченные (нумерованные)
  • и являться списком определений

Такое вот нестандартное начало главы.. зато теперь Вам понятно, что есть список в html.

Ну что ж давайте пройдёмся по нашему списку.

Неупорядоченный список задаётся тегом <ul>. Любой список состоит из элементов, «пунктов», каждый элемент в свою очередь задаётся тегом <li> после которого собственно и идёт текст нужного нам «пункта». Для тега <li> закрывающий тег </li> необязателен.

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

<ul>
<li> Пункт первый..
<li> Пункт второй..
<li> Пункт третий..
</ul>

Пример неупорядоченного списка:

<html>
<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 — квадрат

Пример:

<html>
<head>
<title>стили неупорядоченного списка</title>
</head>
<body>
В этом списке каждый элемент имеет свой стиль:
<ul>
<li type=»disk»> кружок, диск (по умолчанию)
<li type=»circle»> полый круг
<li type=»square»> квадрат
</ul>
А здесь стиль задан всему списку
<ul type=»circle»>

<li> Пункт 1
<li> Пункт 2
<li> Пункт 3
</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>
<dd>
</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

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

  • Пункт
  • Пункт
  • Пункт
  • Пункт

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

  1. Первый пункт
  2. Второй пункт
  3. Третий пункт
  4. Четвертый пункт

Неупорядоченный список 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>

Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

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

Список определений не является списком элементов. Это список терминов и определений терминов.

Список определений начинается с тега <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. Первый пункт
  2. Второй пункт
  3. Третий пункт
Вложенный упорядоченный список

Чтобы оформить вложенный упорядоченный список, нужно добавить отступ в начале строк с элементами вложенного списка. Допустимый размер отступа — от трех до шести пробелов. Рекомендуемый размер отступа — три пробела.

Например, следующая разметка:

1. Первый пункт
   1. Вложенный пункт
   1. Вложенный пункт
1. Второй пункт

будет отображаться так:

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

    1.1. Вложенный пункт
    1.2. Вложенный пункт

  2. Второй пункт

Таблицы

Таблица состоит из одной строки с заголовками, разделительной строки и некоторого количества строк с данными.

Каждая строка таблицы состоит из ячеек, отделенных друг от друга символами |.

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

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

Например, следующая разметка:

По левому краю | По правому краю | По центру
:--- | ---: | :---:
Текст | Текст | Текст

будет отображаться так:

По левому краю По правому краю По центру
Текст Текст Текст

Ссылки

Ссылка состоит из двух частей:

  • [текст] — текст ссылки.
  • (ссылка) — URL или путь до файла, на который делается ссылка.

Например, следующая разметка:

[ссылка на README.md](README.md)

будет отображаться так:

ссылка на README.md

В документации Яндекс.Облака вместо текста ссылки можно использовать расширение #T — указатель на заголовок файла, на который делается ссылка. Указатель на заголовок обрабатывается при сборке документации для отображения на сайте и текст соответствующего заголовка подставляется на место текста ссылки.

Например, следующая разметка

после сборки будет отображаться так:

Документация Яндекс.Облака

Оформление кода

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

Фрагмент кода как часть предложения

Чтобы оформить фрагмент кода как часть предложения, нужно использовать символ `.

Например, следующая разметка:

Предложение с `фрагментом кода`.

будет отображаться так:

Предложение с фрагментом кода.

Фрагмент кода отдельным блоком

Чтобы оформить фрагмент кода как отдельный блок, нужно использовать утроенный символ ` и имя соответствующего языка программирования.

Например, следующая разметка:

будет отобраться как фрагмент кода с подсветкой:

Изображения

Чтобы вставить в текст изображение, нужно использовать следующую разметку:

![alt text](_assets/image.png "Поясняющий текст при наведении указателя")

В документации Яндекс.Облака все изображения хранятся в папках с именем _assets:

  • Изображениями, которые используются во многих документах, помещаются в папки ru/_assets и en/_assets.
  • Изображения, которые используются только в одном документе, помещаются в _assets в папке соответствующего документа.

Расширения для Markdown

Примечания

В документации Яндекс.Облака используются следующие типы примечаний:

  • Примечание:
    {% note info %}
    
    Это примечание. 
    
    {% endnote %}
  • Предупреждение
    {% note alert %}
    
    Это предупреждение.
    
    {% endnote %}
  • Совет
    {% note tip %}
    
    Это совет.
    
    {% endnote %}
  • Важная информация
    {% note important %}
    
    Это важная информация.
    
    {% 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

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

      Пример


      • Кофе

      • Чай

        • Черный чай

        • Зеленый чай



      • Молоко

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

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

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


      Горизонтальный список с CSS

      Списки

      HTML можно стилизовать по-разному с помощью CSS.

      Один из популярных способов — задать стиль для списка по горизонтали, чтобы создать меню навигации:

      Пример





      ul {
      тип списка: нет;
      маржа: 0;
      отступ: 0;
      переполнение: скрыто;
      цвет фона: # 333333;
      }

      li {
      поплавок: левый;
      }

      li a {
      дисплей: блок;
      цвет: белый;
      выравнивание текста: по центру;
      отступ: 16 пикселей;
      оформление текста: нет;
      }

      li a: hover {
      background-color: # 111111;
      }



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

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

      • Используйте элемент HTML
          для определения неупорядоченного списка
        • Используйте свойство CSS list-style-type для определения маркера элемента списка
        • Используйте элемент HTML
        • для определения элемента списка
        • Списки могут быть вложенными
        • Элементы списка могут содержать другие элементы HTML
        • Используйте свойство CSS float: left для отображения списка по горизонтали

        Теги списка HTML

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


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

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

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

        Списки

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

            Три типа списков в HTML

            HTML предлагает три варианта использования для перечисления содержимого на странице.

            • Упорядоченные списки : Иногда их называют нумерованными списками , потому что по умолчанию элементы списка, содержащиеся в этом списке, имеют определенный числовой порядок или ранжирование.Упорядоченные списки подходят там, где точный порядок элементов важен для смысла содержания. Например, рецепт, скорее всего, будет использовать упорядоченный список, потому что шаги выполняются последовательно. Любой пошаговый процесс лучше всего представить в виде упорядоченного списка.
            • Неупорядоченные списки : Иногда их называют маркированными списками , потому что по умолчанию неупорядоченный список имеет небольшие значки маркеров перед элементами списка. Этот тип списка лучше всего использовать, когда порядок элементов не является существенным.Элементы списка будут отображаться в любом порядке, в котором вы их кодируете для HTML, но вы определяете этот порядок, и, в отличие от рецепта или пошагового процесса, порядок может быть изменен, и смысл содержимого не пострадает.
            • Списки определений : Это списки элементов, которые состоят из двух частей: термина, который необходимо определить, и определения. Они обычно используются для отображения пары определение / описание, как в словаре, но списки определений также могут использоваться для многих других типов контента.

            Общие списки

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

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

            Используйте

            Тег
            1. (окончание
            (требуется тег ), чтобы создать нумерованный список с номерами, начинающимися с 1. Элементы создаются с помощью тегов
          2. пара тегов .

            HTML выглядит так:

             
            1. Шаг первый
            2. Шаг второй
            3. Шаг третий

            И результат выглядит так:

            1. Шаг первый
            2. Шаг второй
            3. Шаг третий

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

            Используйте

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

            HTML выглядит так:

             

            И результат выглядит так:

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

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

            для создания списка и используйте для указания термина и

            HTML выглядит так:

             

            Кошка
            Симпатичное четвероногое животное.
            Интернет
            Интернет-сообщество, оптимизированное для фотографий кошек.

            И результат выглядит так:

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

            Неупорядоченный список HTML или маркированный список отображает элементы в маркированном формате.Мы можем использовать неупорядоченный список, где нам не нужно отображать элементы в каком-либо определенном порядке. Тег HTML ul используется для неупорядоченного списка. Может быть 4 типа маркированных списков:

            Для представления различных упорядоченных списков в теге

              есть 4 типа атрибутов.

              Тип Описание
              Тип «диск» Это стиль по умолчанию. В этом стиле элементы списка отмечены маркерами.
              Тип «круг» В этом стиле элементы списка отмечены кружками.
              Тип «квадрат» В этом стиле элементы списка отмечены квадратами.
              Тип «нет» В этом стиле элементы списка не выделяются.

              Пример неупорядоченного списка HTML

              • HTML
              • Java
              • JavaScript
              • SQL

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

              Выход:


              ul type = "circle"

              • HTML
              • Java
              • JavaScript
              • SQL

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

              Выход:


              ul type = "квадрат"

              • HTML
              • Java
              • JavaScript
              • SQL

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

              Выход:


              ul type = "none"

              • HTML
              • Java
              • JavaScript
              • SQL

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

              Выход:

              Примечание. Атрибут type не поддерживается в HTML5, вместо типа можно использовать свойство CSS типа list-style-type.Ниже приведен пример, показывающий свойство CSS для тега ul.

              • HTML
              • Java
              • JavaScript
              • SQL

              Код:

              .

              Атрибут типа со свойством CSS

              • HTML
              • Java
              • JavaScript
              • SQL

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

              Выход:


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

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

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

              Синтаксис
                ...
              Характеристики атрибутов
              • ТИП = [диск | квадрат | круг] (стиль маркера)
              • COMPACT (компактный дисплей)
              • общие атрибуты
              Содержание Один или несколько элементов LI
              Содержится в APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

              Элемент UL определяет неупорядоченный список .Элемент содержит один или несколько элементов LI , которые определяют фактические элементы списка.

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

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

              Устаревший атрибут TYPE из UL предлагает стиль маркера в визуальных браузерах. Возможные значения:

              • диск (закрашенный круг)
              • квадрат (квадратный контур)
              • круг (контур круга)

              Стиль маркера для отдельного элемента списка можно предложить с помощью атрибута TYPE для LI .Свойство list-style-type CSS обеспечивает большую гибкость при предложении стилей маркеров.

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

              Дополнительная информация

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

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

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

                • Биология
                • Исчисление
                • Статистика
                • История
                • Английский

                Чтобы создать этот список, мы начнем с тега

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


                  • Биология

                  • Исчисление

                  • Статистика

                  • История

                  • английский

                  Изменить стиль маркера для неупорядоченного списка

                  Так же, как вы можете изменить стиль нумерации для упорядоченного списка, вы можете изменить стиль маркера по умолчанию для неупорядоченного списка с помощью атрибута type .Три возможных значения для упорядоченного списка включают:

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

                  Ниже показаны примеры для каждого значения атрибута типа для упорядоченного списка:

                  HTML код Выход

                    type = "disc" >
                  • Упорядоченный список

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

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


                  • Заказанный список
                  • Неупорядоченный список
                  • Список определений

                    type = "square" >
                  • Упорядоченный список

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

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


                  • Заказанный список
                  • Неупорядоченный список
                  • Список определений

                    type = "circle" >
                  • Упорядоченный список

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

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


                  • Заказанный список
                  • Неупорядоченный список
                  • Список определений

                  Вы также можете изменить тип маркера для отдельных элементов списка, установив атрибут type с тегом

                • :


                  • type = "disc" > Упорядоченный список

                  • type = "square" > Неупорядоченный список

                  • type = "круг" > Список определений


                  Это даст следующее:

                  • Заказанный список
                  • Неупорядоченный список
                  • Список определений

                  WebD2: списки

                  Обзор

                  Часто, когда мы рассматриваем содержание наших веб-страниц и спрашиваем: «Что это?» ответ: это список! Новостные сайты содержат списки самых популярных новостей, иногда сгруппированные по категориям.Музыкальные сайты содержат списки исполнителей или песен. Видео сайты содержат списки видео. Спортивные достопримечательности включают списки команд, списки результатов и рейтинги.

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

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

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

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

                      Хотя списки обычно отображаются либо с числами, либо с маркерами, они не всегда. Веб-авторы могут контролировать это с помощью каскадных таблиц стилей (CSS). Вы узнаете об этом больше в Разделе 3.

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

                    • (li означает элемент списка ).Это теги контейнера, поэтому каждый элемент в списке должен иметь открывающий тег (
                    • ) и закрывающий тег (
                    • )

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

                      Результаты учащихся

                      По завершении этого упражнения:

                      • вы сможете объяснить разницу между упорядоченным и неупорядоченным списком.
                      • , вы сможете идентифицировать упорядоченные и неупорядоченные списки, когда увидите их на веб-страницах.
                      • вы сможете создать список с помощью HTML.

                      Деятельность

                      1. Просмотрите Интернет и попробуйте найти хотя бы три упорядоченных списка и три неупорядоченных списка. Вам не нужно просматривать исходный код этого действия - просто попробуйте найти контент, который соответствует каждому из этих типов списков. Помните, что некоторые списки не обязательно отображаются с числами или маркерами, поскольку их можно отключить или изменить с помощью CSS.Покажите своему инструктору, что вы нашли.
                      2. Теперь вернитесь к index.html на веб-сайте вашего портфолио. На предыдущем уроке вы добавили контент на эту страницу, который включал два элемента
                        , которые содержат блоки контента, один с информацией о вас, а другой с информацией о вашем курсе веб-дизайна. На этом уроке вы спросили: «Что это?» но это было, вероятно, до того, как вы начали думать о том, сколько списков существует в сети. Теперь, когда вы задаете этот вопрос, связанный с содержимым внутри ваших двух элементов
                        , вы, вероятно, ответите: это список! И действительно, вы были бы правы! Первый div включает в себя список информации о вас (например,g., ваше имя, адрес электронной почты и т. д.). Второй блок содержит список информации о вашей школе. Эти списки упорядочены или неупорядочены?
                      3. Если на предыдущий вопрос вы ответили «без порядка», вы снова правы!
                      4. Теперь измените содержимое каждого из двух элементов div, чтобы содержимое было помечено как неупорядоченный список. Элементы
                        вам больше не понадобятся, так как каждый элемент списка автоматически появляется в новой строке.

                      Ресурсы / Интернет-документы

                      Готово?

                      После сохранения изменений в index.html, вернитесь в свой браузер и обновите, чтобы увидеть изменения. Появляются ли теперь элементы в каждом из двух элементов div с маркерами перед ними? Покажите своему инструктору свои результаты перед началом урока 2.

                      .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *