Содержание

Списки (ul, ol, li) в HTML

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

Нумерованный список

Нумерованный список — это список, в котором каждый пункт стоит по порядковым номером, цифрой. Пример HTML кода для создания нумерованного списка:
<ol>
<li>Мышь</li>
<li>Кот</li>
<li>Сыр</li>
</ol>
На странице браузера результат будет показан так:
  1. Мышь
  2. Кот
  3. Сыр
— цифры нумерации подставляются автоматически. Стилистику нумерации можно поменять с помощью атрибута <ol type=»…»> . Атрибут type может принимать следующие значения:
  • «A» — латинские заглавные буквы
  • «a» — латинские строчные буквы
  • «I» — римские цифры (заглавные)
  • «i» — римские цифры (строчные)
  • «1» — арабские цифры. Используется по умолчанию
Чтобы начать список не с единицы, а с другого числа, необходимо использовать атрибут «start». К примеру, если нужно начать список с «5», то открывающий список тег будет выглядеть так: <ol start=»5″> .

Чтобы инвертировать последовательность чисел (сделать числа по убыванию), напишите внутри тега слово «reversed», чтобы получилось так: <ol reversed>

Маркированный список

Маркированный список — это список, в котором каждый пункт отмечен не цифрой, а маркером. К примеру, точкой или стрелкой.
<ul>
<li>Мышь</li>
<li>Кот</li>
 
<li>Сыр</li>
</ul>
В браузере маркированный список выглядит так: Стиль маркеров перед элементами списка можно поменять с помощью атрибута <ul type=»…»> . Где атрибут type может принимать следующие значения:
  • «disc» — чёрная точка
  • «circle» — кружок с пустотой внутри
  • «square» — чёрный квадрат

Полное руководство по спискам в HTML и CSS

Перевод статьи «A complete guide about lists in HTML and CSS».

Что такое списки

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

Списки в HTML

Если вы хотите представлять на своих веб-страницах какие-то данные, являющиеся наборами чего-либо, список является прекрасным вариантом оформления. Благодаря спискам пользователи легче воспринимают информацию.

Виды списков

В HTML списки бывают трех видов:

  1. Упорядоченные списки.
  2. Неупорядоченные списки.
  3. Списки определений.

Что такое упорядоченный список?

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

Примерами могут послужить кулинарные рецепты, где действия следует выполнять в определенном порядке, или списки инструкций простой программы.

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

Для создания упорядоченных списков используется тег <ol> (ordered list – «упорядоченный список»), а для каждого из его элементов – тег <li> (list – «список»).

HTML-код:

[html]<ol>
<li>Налейте воду в кастрюлю.</li>
<li>Добавьте сахар, чайные листья и специи.</li>
<li>Доведите до кипения и подержите на медленном огне около минуты.</li>
<li>Добавьте молоко.</li>
<li>Доведите до кипения и подержите на медленном огне 3-5 минут.</li>
<li>Процедите чай и перелейте его в чайник.</li>
</ol>
[/html]

Результат:

  1. Налейте воду в кастрюлю.
  2. Добавьте сахар, чайные листья и специи.
  3. Доведите до кипения и подержите на медленном огне около минуты.
  4. Добавьте молоко.
  5. Доведите до кипения и подержите на медленном огне 3-5 минут.
  6. Процедите чай и перелейте его в чайник.
Значения по умолчанию:

По умолчанию пункты списка обозначаются арабскими цифрами.

Это можно изменить, используя разные значения CSS-свойства list-style-type.

list-style-type: upper-alpha

See the Pen ordered-list-upper-alpha by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: upper-roman

See the Pen ordered-list-upper-roman by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: lower-alpha

See the Pen ordered-list-lower-alpha by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: lower-roman

See the Pen ordered-list-lower-roman by Amrish Kushwaha (@isamrish) on CodePen.

Это самые часто используемые значения свойства list-style-type. Но есть множество других значений, которые мы рассмотрим дальше.

Что такое неупорядоченный список?

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

Примеры таких списков – списки покупок, списки запланированных дел.

Для создания упорядоченных списков используется тег <ul> (unordered list), а для каждого из его элементов – тег <li> (как и в упорядоченном списке).

HTML-код:

[html]<ul>
<li>одежда</li>
<li>книги</li>
<li>ручки</li>
<li>ноутбук</li>
<li>сумка</li>
</ul>
[/html]

Результат:

  • одежда
  • книги
  • ручки
  • ноутбук
  • сумка
Значения по умолчанию:

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

list-style-type: circle

See the Pen unordered-list-circle by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: square

See the Pen unordered-list-square by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: disc

See the Pen unordered-list-disc by Amrish Kushwaha (@isamrish) on CodePen.

Дальше мы разберем и другие варианты стилей.

Что такое список определений?

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

Вы можете создать список определений при помощи тега <dl> (definition list – «список определений»). В пунктах списка термины (term) создаются при помощи тега <dt>, а описание (description) – при помощи тега <dd>.

Например:

See the Pen definition-list by Amrish Kushwaha (@isamrish) on CodePen.

Что такое вложенные списки?

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

Например:

See the Pen nested-list by Amrish Kushwaha (@isamrish) on CodePen.

Стиль списка

Для придания стилей списку используются три CSS-свойства.

list-style-type

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

Это свойство может принимать несколько значений:

  • disc (круг)
  • square (квадрат)
  • circle (окружность)
  • decimal (арабские цифры)
  • lower-alpha (строчные латинские буквы, =lower-latin)
  • lower-roman (римские цифры в нижнем регистре)
  • lower-latin (строчные латинские буквы, =lower-alpha)
  • lower-greek (строчные греческие буквы)
  • upper-alpha (заглавные латинские буквы, =upper-latin)
  • upper-roman (римские цифры в верхнем регистре)
  • upper-latin (заглавные латинские буквы, =upper-alpha)

С полным списком возможных значений свойства list-style-type можно ознакомиться здесь.

list-style-image

Это свойство используется, чтобы в качестве маркера списка установить изображение. Свойство может принимать два значения: url изображения или none.

Например:

See the Pen list-style-image by Amrish Kushwaha (@isamrish) on CodePen.

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

list-style-position

Это свойство служит для определения положения маркера относительно элементов списка. Свойство list-style-position может принимать два значения: inside (внутри) и outside (снаружи).

Пример применения значения inside

See the Pen list-style-position-inside by Amrish Kushwaha (@isamrish) on CodePen.

Пример применения значения outside

See the Pen list-style-position-outside by Amrish Kushwaha (@isamrish) on CodePen.

А теперь давайте поиграем с цветами списка

Расцвеченный маркированный список

Вариант 1: элементы списка и маркеры имеют один цвет.

See the Pen same-color-unordered-list by Amrish Kushwaha (@isamrish) on CodePen.

Вариант 2: элементы списка и маркеры имеют разные цвета.

See the Pen different-color-unordered-list by Amrish Kushwaha (@isamrish) on CodePen.

Расцвеченный нумерованный список

Вариант 1: элементы списка и их номера имеют один цвет.

See the Pen colored-numbered-list by Amrish Kushwaha (@isamrish) on CodePen.

Вариант 2: элементы списка и их номера имеют разные цвета.

See the Pen different-color-numbered-list by Amrish Kushwaha (@isamrish) on CodePen.

Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!

Раскрывающийся список на HTML — тег SELECT — Формы — codebra

Первый раз на codebra.ru? Посмотри другие уроки по HTML и CSS!

Что такое раскрывающийся список?

Благодаря тегу <select> появилась возможность создания раскрывающего списка и списка с множественным выбором. Если вы собираетесь отправлять данные на сервер, то тег <select> должен быть помещен в форму (тег <form> ). Далее пример:

Код HTML

<form method = "POST">
<select size = "3" multiple name = "name[]">
<option disabled>Какие имена вам нравятся?</option>
<option selected value = "Никакие">Никакие</option>
<option value = "Иван">Иван</option>
<option value = "Петр">Петр</option>
<option value = "Николай">Николай</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Какие есть атрибуты у тега select?

Тег <select> имеет три полезных атрибута (остальные рассматривать не будем, про них уже я говорил). Первый атрибут multiple, благодаря нему можно сделать возможность выбора нескольких элементов списка. Чтобы выбирать несколько элементов, нужно зажать shift или ctr и наживать мышкой на нужные элементы. Далее пример применения атрибута multiple:

Код HTML

<form method = "POST">
<select size = "3" multiple name = "name[]">
<option disabled>Какие имена вам нравятся?</option>
<option selected value = "Никакие">Никакие</option>
<option value = "Иван">Иван</option>
<option value = "Петр">Петр</option>
<option value = "Николай">Николай</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Второй атрибут required, с помощью его можно «сказать» браузеру, что список должен быть выбран перед отправкой формы, иначе браузер запретит отправлять форму, и выведет вам соответствующее сообщение. Вид этого сообщения зависит полностью от браузера и пользователь не может его изменять. Далее пример применения атрибута required:

Код HTML

<form method = "POST">
<select required size = "1" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Третий атрибут size, с помощью его можно указать количество отображаемых элементов списка. Атрибут size может содержать только целое число. Атрибут size трансформирует список, например, если он равен 1, то тег <select> отображается как «выпадающий список», а если атрибут size больше 1, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута size:

Код HTML

<form method = "POST">
<select required size = "1" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Код HTML

<form method = "POST">
<select required size = "3" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Теги HTML / ProgLang

Представленные ниже списком html-теги были введены в более старых версиях HTML, но все теги, помеченные

ТегОписаниеВерсия
<!—…—>Комментарий
<!DOCTYPE>Тип html-документа
<a>Ссылка
<abbr>Аббревиатура
<acronym>Сокращение (аббревиатура)
<address>Адрес (контактная информация)
<applet>Апплет (устаревший)
<area>Область внутри карты изображения
<article>Статья
<aside>Некоторый контент, который слабо связан с содержимым страницы или сайта
<audio>Звуковой контент
<b>Жирный текст
<base>Базовый URL для всех ссылок на странице
<basefont>Базовый шрифт (устаревший)
<bdo>Направление текстового отображения
<bdi>Текст, который должен быть изолирован от окружения для двунаправленного форматирования текста, это позволяет встраивать диапазон текста с другой или неизвестной направленностью
<bgsound>Фоновая музыка
<big>Большой текст
<blink>Текст, который мигает
<blockquote>Длинная цитата
<body>Элемент страницы body
<br>Один разрыв строки
<button>Кнопка
<canvas>Создание графики со сценарием
<caption>Заголовок таблицы
<center>Центрирование текста (устаревший)
<cite>Цитата
<code>Компьютерный код
<col>Атрибут столбцов таблицы
<colgroup>Группа столбцов таблицы
<comment>Комментарий в документе
<datalist>Список параметров входных значений
<dd>Описание определения
<del>Удаленный текст
<dfn>Термин определения
<dialog>Диалоговое окно
<dir>Список каталога (устаревший)
<div>Контейнер в документе
<dl>Список определений
<dt>Термин определения
<em>Выделенный текст, отображается курсивом
<embed>Контейнер для внешнего (не HTML) приложения, интерактивного контента или плагина
<fieldset>Набор полей
<figcaption>Подпись для тега <figure>
<figure>Автономный контент
<font>Шрифт, размер и цвет шрифта (устаревший)
<footer>Нижний колонтитул для документа или раздела
<form>Форма
<frame>Вспомогательное окно (фрейм)
<frameset>Набор кадров
<h2>-<h6>Заголовок 1-6
<head>Информация о странице
<header>Верхний колонтитул для документа или раздела
<hr>Горизонтальная линия
<html>HTML-документ
<i>Курсивный текст
<iframe>Встроенное вспомогательное окно (фрейм)
<ilayer>Встроенный слой
<img>Изображение
<input>Поле ввода
<ins>Вставленный текст
<isindex>Однострочное поле ввода (устаревший)
<kbd>Текст, который должен быть введен с клавиатуры
<keygen>Генерация ключей в форме
<label>Метка для элемента управления формой
<layer>Слой
<legend>Заголовок в наборе полей
<li>Элемент списка
<link>Ссылка на ресурс
<main>Основной или важный контент в документе, не более одного элемента на странице
<map>Карта изображения
<mark>Текст для справочных целей, выделенный желтым фоном
<marquee>Область прокрутки текста
<menu>Список меню (устаревший)
<menuitem>Элемент команды/меню, который пользователь может вызывать из всплывающего меню
<meta>Метаданные html-документа, который не отображается на странице
<meter>Скалярное измерение в пределах известного диапазона (калибр)
<multicol>Многоколоночный текстовый поток
<nav>Раздел, который содержит только ссылки для навигации
<nobr>В прилагаемом тексте не допускается никаких прерываний
<noembed>Контент, который будет отображаться браузерами, которые не поддерживают тег <embed>
<noframes>Секция noframe
<noscript>Секция, не поддерживающая сценарий (скрипт)
<object>Встроенный объект
<ol>Упорядоченный нумерованный список
<optgroup>Группа параметров
<option>Параметр в раскрывающемся списке
<output>Результат вычисления
<p>Абзац
<param>Параметр для объекта
<plaintext>Показывать оставшуюся часть документа в виде предварительно отформатированного открытого текста (устаревший)
<pre>Предварительно отформатированный текст
<progress>Ход выполнения задачи
<q>Короткая цитата
<rp>Альтернативный текст в браузерах, которые не поддерживают элемент ruby
<rt>Текстовая аннотация элемента ruby
<ruby>Контейнер для восточно-азиатских символов
<s>Зачеркнутый текст (устаревший)
<samp>Пример компьютерного кода, скрипта или системных сообщений
<script>Скрипт
<section>Раздел в документе
<select>Выбираемый список
<spacer>Пробел
<small>Маленький текст
<source>Медиа-ресурсы, определенные внутри элементов video или audio
<span>Контейнер для строчных элементов в документе
<strike>Зачеркнутый текст (устаревший)
<strong>Полужирный текст
<style>Встраиваемая таблица стиля
<sub>Подстрочный текст
<summary>Сводка, подпись или условное обозначение для <details>
<sup>Надстрочный текст
<table>Таблица
<tbody>Тело таблицы
<td>Ячейка таблицы
<textarea>Текстовая область
<tfoot>Нижний колонтитул таблицы
<th>Заголовок ячейки таблицы
<thead>Заголовок таблицы
<time>Дата и время <details>
<title>Заголовок документа
<tr>Строка таблицы
<track>Субтитры, используемые в медиаплеере
<tt>Текст телетайпа
<u>Подчеркнутый текст (устаревший)
<ul>Маркированный список
<var>Переменная
<video>Видео-файл