Очень часто определенную информацию на сайте необходимо представить в виде списков.
Списки позволяют упорядочить и систематизировать различную информацию и представить ее для посетителя в удобном виде.
Списки в HTML могут быть трех разновидностей: маркированные списки, нумерованные списки и списки определений. Рассмотрим, как их создавать по порядку.
Маркированный список.
Данный вид списка используется наиболее часто. Маркированный список в HTML создается при помощи тегов <ul> <li>. При этом напротив каждого элемента списка добавляется маркер, по умолчанию это маркер в виде кружка. При помощи тегов <ul></ul> создается контейнер, внутри которого располагаются элементы списка: <ul><li></li></ul>.
Код маркированного списка будет выглядеть так:
Можете попробовать создать HTML страничку, используя данный код и у вас, в результате получится следующий список:
Как вы можете заметить, каждый элемент списка располагается с новой строки, при этом слева, сверху и снизу создаются определенные отступы. Каждый пункт списка начинается с маркера, в качестве маркера может использоваться закрашенный кружок (используется по умолчанию), окружность или квадратик. У тега <UL> есть атрибут type, при помощи которого, и задается стиль маркера. Данный атрибут имеет следующие значения:
- disc — круг;
- circle — окружность;
- square — квадрат.
Значение disc используется по умолчанию.
Пример создания маркированного списка с маркерами в виде окружности:
В результате список примет, следующий вид:
Создание маркированного списка с маркерами в виде квадратиков:
Список будет иметь вид:
Атрибут type можно применять не только к тегу <UL>, но и к тегу <LI>. Таким образом можно создать список с разнообразными маркерами.
В результате получится следующее:
Нумерованные списки.
Нумерованные списки в HTML представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега <OL> и вложенных в его тегов <LI>
Выглядит такой список следующим образом:
По умолчанию нумерация производится арабскими цифрами. Но у тега <OL> есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type=»A») или строчными (type=»a») латинскими буквами, римскими цифрами в верхнем (type=»I») и нижнем (type=»i») регистре.
Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае.
Нумерация арабскими цифрами:
Вид списка:
Нумерация заглавными латинскими буквами:
Вид списка:
Нумерация строчными буквами латинского алфавита:
Вид списка:
Нумерация римскими цифрами в верхнем регистре:
Вид списка:
Нумерация римскими цифрами в нижнем регистре:
Вид списка:
Список определений в HTML.
Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов <DL><DT><DD>. Тег <DL> создает контейнер для списка, тег <DT> устанавливает термин, а тег <DD> описание или определение термина.
Записывается данный список следующим образом:
В результате получится следующий список:
Как вы можете видеть, при этом создаются соответствующие отступы для термина и текста определения.
Вложенные или многоуровневые списки в HTML.
Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков.
Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки.
Вложенный список будет иметь такой вид:
Таким образом, можно делать вложенные списки в различных вариациях и при этом применять, необходимы атрибуты и значения.
Материал подготовлен сайтом: WebMasterMix.ru
webmastermix.ru
Создание HTML-списков
- Содержание:
- 1. Маркированный список <ul>
- 2. Нумерованный список <ol>
- 3. Список определений <dl>
- 4. Вложенный список
- 5. Многоуровневый нумерованный список
1. Маркированный список
Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.
Браузеры по умолчанию добавляют следующее форматирование блоку списка:
ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}
Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).
Для тега <ul> доступны глобальные атрибуты.
<ul> <li>Microsoft</li> <li>Google</li> <li>Apple</li> <li>IBM</li> </ul>
2. Нумерованный список
Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.
Блок списка также имеет стили браузера по умолчанию:
ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}
Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.
Для тега <ol> доступны следующие атрибуты:
| Атрибут | Описание, принимаемое значение |
|---|---|
| reversed | Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…). |
| start | Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">. |
| type | Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения: 1 — значение по умолчанию, десятичная нумерация. A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D). a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d). I — нумерация римскими заглавными цифрами (I, II, III, IV). i — нумерация римскими строчными цифрами (i, ii, iii, iv). |
<ol> <li>Microsoft</li> <li>Google</li> <li>Apple</li> <li>IBM</li> </ol>
3. Список определений
Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.
Блок списка определений имеет следующие стили браузера по умолчанию:
dl {margin-top: 1em; margin-bottom: 1em;}
Для тегов <dl>, <dt> и <dd> доступны глобальные атрибуты.
<dl> <dt>Режиссер:</dt> <dd>Петр Точилин</dd> <dt>В ролях:</dt> <dd>Андрей Гайдулян</dd> <dd>Алексей Гаврилов</dd> <dd>Виталий Гогунский</dd> <dd>Мария Кожевникова</dd> </dl>
4. Вложенный список
Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:
<ul> <li>Пункт 1.</li> <li>Пункт 2. <ul> <li>Подпункт 2.1.</li> <li>Подпункт 2.2. <ul> <li>Подпункт 2.2.1.</li> <li>Подпункт 2.2.2.</li> </ul> </li> <li>Подпункт 2.3.</li> </ul> </li> <li>Пункт 3.</li> </ul>
5. Многоуровневый нумерованный список
Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:
<ol> <li>пункт</li> <!-1.-> <li>пункт <ol> <li>пункт</li> <!-2.1.-> <li>пункт</li> <!-2.2.-> <li>пункт <ol> <li>пункт</li> <!-2.3.1.-> <li>пункт</li> <!-2.3.2.-> <li>пункт</li> <!-2.3.3.-> </ol> </li> <!-2.3.-> <li>пункт</li> <!-2.4.-> </ol> </li> <!-2.-> <li>пункт</li> <!-3.-> <li>пункт</li> <!-4.-> </ol>
Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.
ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li.
евдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li,".") ". "; }
html5book.ru
Нумерованный список
Нумерованный список, его еще часто называют упорядоченным списком (Ordered List), представляет собой определенную последовательность элементов. То есть каждый последующий пункт такого списка будет на единицу больше предыдущего.
Для создания нумерованных списков в HTML используется тег <ol>, внутри которого располагаются его элементы с данными, за указание которых отвечает специальный тег <li>:
<html> <body> <h4>Нумерованный список:</h4> <ol> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ol> </body> </html>
Внутри элемента списка <li> вы можете размещать абзацы, строки, изображения, ссылки, другие списки и т.д.
Маркированный список
Другим распространенным способом структуризации данных является создание маркированного списка. Маркированные списки представляют собой ненумерованные или неупорядоченные (Unordered List) перечни элементов, для обозначения которых используются специальные маркеры.
Для создания маркированных списков в HTML применяется тег <ul>, внутри которого располагаются элементы самого списка (как и в случае с упорядоченными списками используется тег <li>):
<html> <body> <h4>Маркированный список:</h4> <ul> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ul> </body> </html>
Атрибут type
Атрибут type определяет вид маркера, который будет использоваться в упорядоченном списке перед элементами.
В отличие от упорядоченных списков маркированные (неупорядоченные) списки не поддерживают атрибут type.
Варианты маркеров для упорядоченных списков:
| Значение | Описание |
|---|---|
| 1 | Десятичные цифры (1, 2, 3..) |
| a | Список в алфавитном порядке, строчные буквы (a, b, c..) |
| A | Список в алфавитном порядке, заглавные буквы (A, B, C..) |
| i | Римские цифры, строчные (i, ii, iii, iv..) |
| I | Римские цифры, заглавные (I, II, III, IV..) |
<html> <body> <h4>Упорядоченный список c атрибутом type - значение "a":</h4> <ol type="a"> <li>Яблоки</li><li>Бананы</li><li>Лимоны</li> </ol> <h4>Упорядоченный список c атрибутом type - значение "I":</h4> <ol type="I"> <li>Яблоки</li><li>Бананы</li><li>Лимоны</li> </ol> </body> </html>
Списки определений
Списки определений — это особый тип структуризации информации, идеально подходящий для отображения толковых и терминологических словарей, а также справочников средствами html.
В отличие от нумерованных и маркированных списков, которые могут содержать по несколько элементов, расположенных друг за другом, элементы списка определений должны состоять из двух частей: самого определения (термина) и его содержательной части (описания).
Список определений создается с помощью тега <dl> (Definition List), внутри которого указывается тег <dt> (Definition Term), выделяющий термин, и тег <dd> (Definition Description), содержащий описание к данному термину:
<html> <body> <h4>Список определений:</h4> <dl> <dt>Кофе</dt><dd>Бодрящий горячий напиток</dd> <dt>Молоко</dt><dd>Полезный холодный напиток</dd> </dl> </body> </html>
Внутри элемента <dd> вы можете размещать абзацы, строки, изображения, ссылки, другие списки и т.д.
Вложенные списки
Часто информация имеет сложную разветвленную структуру, которую, с одной стороны, будет трудно отобразить в виде одного списка, с другой — невозможно разбить на несколько отдельных списков. В этом случае используются так называемые вложенные списки (список, вложенный в другой список).
Примечание: обычно вложенный список отображается с небольшим отступом вправо от родительского списка.
<html> <body> <h4>Вложенный список:</h4> <ul> <li>Кофе</li> <li>Чай <ol> <li>Черный чай</li> <li>Зеленый чай</li> </ol> </li> <li>Молоко</li> </ul> </body> </html>
Таблица тегов для списков
| Тег | Описание |
|---|---|
| <ul> | Определяет маркированный(неупорядоченный) список. |
| <ol> | Создает нумерованный(упорядоченный) список. |
| <li> | Определяет элемент списка. |
| <dl> | Создает список определений. |
| <dt> | Oпределяет термин в списке определений. |
| <dd> | Cоздает описание элемента в списке определений. |
| <menu> | Определяет список/меню команд. |
« перейти к предыдущей теме перейти к следующей теме »
web.ryusupov.com
Нумерованный список HTML
Обычный нумерованный список HTML можно создать при помощи следующих тегов:
<ol>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
</ol>
Простые списки выглядят вот так
Согласно стандартам, каждый пункт списка должен быть внутри открывающего и закрывающего тега li. Но если вы не поставите закрывающий тег, то результат будет точно таким же. Обработчик весьма умный. Во время преобразования списка он анализирует открывающие теги. Если он видит новый <li>, то автоматически перед ним ставит </li>.
Таким образом, списки можно делать так, как показано ниже.
Но с точки зрения профессионалов это некорректно.
Маркированные списки
Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега ol, пишется ul.
В маркированных списках нет цифр или букв – только различные символы, которые называются маркерами.
Многоуровневый нумерованный список HTML
Многих пользователей интересует такая возможность. Поэтому следует отметить, что любой нумерованный список HTML можно сделать многоуровневым. Дополнительные уровни могут быть такими же или маркированными.
Для того чтобы создать список, указанный в примере выше, нужно написать следующее.
Обратите внимание, что в этом коде, в отличие от первых примеров, добавлен атрибут type. Благодаря ему можно указать вид сортировки как для нумерованных, так и для маркерных списков.
Для нумерованных указываем алфавит или тип цифр, а для остальных случаев — тип маркера.
Варианты сортировки списков
Если использовать специальный HTML-тег, нумерованный список может стать любым, каким вы хотите.
Можно указать атрибут type с любым значением из таблицы. Или в классе стиля css указать list-style-type с желаемым типом сортировки.
Перевод значений довольно простой. Хватит базовых знаний английского языка. Но даже если вы не можете перевести слова «круг», «квадрат» и т. п., то можно визуально понять, каков будет результат при указании этих значений в атрибуте type.
Для нумерованных списков нужно использовать следующие варианты:
- 1 — арабские цифры;
- A — заглавные латинские буквы;
- a — строчные латинские буквы;
- I — заглавные римские цифры;
- i — строчные римские цифры.
По умолчанию всегда используется список с арабскими цифрами. То есть, если вы ничего не указали, это равносильно type=»1″.
Помимо этого, нумерованные списки можно начинать с любой желаемой позиции. По умолчанию — вывод от 1. Но при желании можно начать хоть со ста. Для этого нужно указать атрибут start с любым значением.
Кроме этого, можно сделать вывод в обратном порядке. Для этого нужно написать reversed.
Оформление списков
Нумерованный список HTML можно оформить настолько красиво, что не сразу можно догадаться, что это обычный список, а не картинка, сделанная в Photoshop.
Вот примеры красивых списков.
Как видно из примера, можно изменять внешний вид нумерации и самих элементов.
Создать обычный список можно вот так.
В стилях css нужно указать оформление для тегов ol. Обратите внимание, что в этом случае настройки будут применены ко всем спискам всего сайта, где используется этот файл стилей.
Рассмотрим сначала вариант с круглым оформлением списка. Вернитесь к коду списка. Там указан класс rounded-list. Вот именно с этим классом нужно повозиться, чтобы сделать такую красоту. Назвать класс вы можете как хотите.
Теперь рассмотрим квадратное оформление.
Стили весьма похожи. Разница в том, что в первом случае происходит округление элемента посредством возможностей css.
Поддержка браузеров
Важно понимать, что не все браузеры поддерживают все атрибуты css.
Например, вы захотели сделать нумерованный список по центру. HTML-код будет одинаковый, но вот результат в старых браузерах может быть совсем иным.
То же самое касается и оформления нумерации.
Как видите, квадратики вокруг цифр в старых версиях браузера IE не появились, поскольку обработчику не известны новые атрибуты, которые позволяют сделать подобное оформление.
Профессиональный верстальщик должен предвидеть и понимать, что не все пользователи используют современные компьютеры. Не у всех установлены Windows 7, 8, 10. Существует процент пользователей, кто до сих пор сидит на Windows XP и использует старые версии браузера Internet Explorer.
Как правило, почти все современные дизайнерские улучшения элементов ими не поддерживаются. Пользователю будет казаться, что над дизайном сайта вообще не работали. Что всё съехало. Элементы наезжают друг на друга. Чтобы этого избежать, нужно просчитывать все варианты.
Некоторые веб-мастера закрывают глаза на них, поскольку их доля на современном рынке становится всё меньше и меньше. Но для профессионала важен каждый посетитель, особенно если это коммерческий сайт.
Делайте что-то подходящее для всех или учитывайте все варианты браузеров.
fb.ru
1. Маркированные списки в HTML
Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:
А вот так выглядит в браузере:
1.1 Стандартные маркеры для маркированного списка
На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:
| Название маркера | Значение атрибута "type" | Пример списка |
|---|---|---|
| Маркеры в виде круга | disc |
|
| Маркеры в виде незакрашенного круга | circle |
|
| Маркеры в виде квадрата | square |
|
1.2 Маркер списка в виде пустого круга
Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение "circle" для атрибута type и задали его нашему маркированному списку:
Сразу смотрим как этот код будет выглядеть в браузере:
1.3 Маркер списка в виде квадрата
Посмотрим также и последний пример с квадратным маркером для HTML списка:
Обратите внимание на маркер, он стал квадратным:
С маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах.
2. Нумерованные списки в HTML
В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега <ol></ol>. Как это выглядит на практике:
Пример нумерованного списка:
Таким образом выглядит нумерованный список со стандартными настройками в браузере:
Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.
2.1 Стандартные маркеры для нумерованного списка
Здесь у нас есть выбор не из трех видов маркеров, а из пяти:
| Название маркера | Значение атрибута "type" | Пример списка |
|---|---|---|
| Маркеры в виде арабских чисел | 1 |
|
| Маркеры в виде строчных латинских букв | a |
|
| Маркеры в виде заглавных латинских букв | A |
|
| Маркеры в виде римских цифр в нижнем регистре | i |
|
| Маркеры в виде римских цифр в верхнем регистре | I |
|
2.2 Своя нумерация в списке HTML
Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут "start". Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:
Вот как это будет отображаться на реальном сайте:
На изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах.
Ну а сейчас перейдем к вложенным спискам HTML.
3. Как сделать многоуровневый (вложенный) список в HTML
Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по выпадающему меню на CSS3), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.
На примере моделей автомобилей мы построим многоуровневый список в HTML:
Обратите внимание, как выглядит многоуровневый список в браузере:
Мы делали многоуровневый список с помощью маркированного (тег <ul>). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута "type" мы можем переопределить маркеры (лучше задавать стили для маркеров с помощью CSS).
Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:
В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.
Смотрим его вид в браузере:
4. Полезные материалы по спискам HTML
Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: основы CSS. Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).
4.1 Как сделать список HTML в строку
Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто:
4.2 Как сделать список HTML без значка
За это отвечает свойство list-style-type в CSS (подробнее здесь):
4.3 Как сделать список в HTML по центру
Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало:
4.4 Как сделать список в HTML с картинками
Достаточно лишь одного свойства CSS list-style-image. Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:
4.5 Маркированный список HTML свой маркер
В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome). Тогда можно сделать любую иконку вместо стандартного маркера:
4.6 Как сделать список в HTML в несколько столбцов
Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:
5. Практика работы со списками
На видео ниже вы можете увидеть всю работу со списками HTML на практике:
Чтобы закрепить полученную информацию, я рекомендую все действия проделать вручную. Попробовать разные маркеры для списков, создать нумерованные списки, а после перейти к многоуровневым (вложенным) спискам и поэкспериментировать с ними.
На этом со списками заканчиваем и переходите к следующему уроку по изображениям.
Больше практикуйтесь!
Понравилась статья — расскажи друзьям! 🙂
www.sitehere.ru
Что такое списки в HTML, какие они бывают
Список (HTML) — текстовое перечисление однородных членов предложения, оформленное в виде списка.
Какие бывают списки?
- Нумерованный список;
- Маркированный список (не нумерованный);
- Многоуровневый список;
- Список определений;
- Выпадающий список.
Нумерация помогает в тех случаях, когда нужно расположить однородные элементы списка в определенном порядке или упростить работу, добавив возможность дать ссылку на определенный пункт списка.
Обратите внимание, список это не несогласованный набор словосочетаний-огрызков, отвечающих на разные вопросы обобщающего текста (которого как раз и нет в данном случае).
Пример:
Список это однородные ответы, отвечающие на один и тот же вопрос обобщающего текста.
Пример:
Разница очень заметна, не так ли? Правильный список такой, что легко «складывается» в предложение с простым перечислением однородных членов.
Где применяются списки?
- Нумерованные списки — применяются при необходимости перечислить элементы списка в определенном порядке, либо чтобы упростить ссылку на конкретный элемент списка (в дипломе, печатном документе, проектной работе);
- Маркированные списки — применяются при перечислении однородных элементов в произвольном порядке, т.е. если порядок не имеет значения;
- Многоуровневые списки используются для детализации информации отдельных элементов;
- Список определений в HTML используется при необходимости форматирования словаря.
HTML-практикум ч.1: как сделать упорядоченный нумерованный список
Нумерованные списки создаются при помощи тегов <ol></ol> и <li></li>, причем последний является тегом для перечисления однородных членов и помещается внутри тега <ol></ol> (ol — ordered list).
Соответственно, <li></li> — начало и конец элемента списка, а <ol></ol> — начало и конец самого нумерованного списка.
Покажу на примере. Код:
Результат:
По умолчанию форматирование нумерации элементов нумерованного списка осуществляется так: 1, 2 и т.д. Стиль нумерации задается при помощи атрибута list-style-type. Смотрите, что получится, если применить стиль ко всему списку «list-style-type: upper-roman;» и затем «list-style-type: lower-alpha;».
Вы также можете использовать не CSS, а напрямую прописать атрибут TYPE, вот так:
TYPE может принимать значения:
- «A» — для нумерации A, B..
- «a» — для нумерации a, b..
- «I» — для нумерации I, II..
- «i» — для нумерации i, ii..
- «1» — для нумерации 1. 2. и далее по порядку.
Есть дополнительные атрибуты «start» и «value». Start — для задания номера первого элемента списка (все последующие считаются относительно него), value — для присвоение определенного номера любому из элементов списка.
Внимание! Использование атрибута value сбивает нумерацию и, если нужно, его приходится использовать дважды.
Пример кода:
Результат:
HTML-практикум ч.2: маркированный список
Маркированные списки создаются при помощи тегов <ul></ul> и <li></li>, последний как вы знаете является тегом для перечисления однородных членов и помещается внутри тега <ul></ul> (ul — unordered list).
Соответственно, <li></li> — начало и конец каждого из элементов списка, а <ul></ul> — начало и конец самого маркированного списка.
По умолчанию маркированные элементы списка отображаются в виде черных кружочков.
Код:
Результат:
Вы также можете выставить для элементов <li> атрибут type: disc (закрашенные кружочки), square (квадратики) или circle (незакрашенные кружочки или окружности). Тогда список примет такой вид:
Те же самые атрибуты можно применить и ко всему списку сразу, добавив CSS-свойство к тегу <ul>. Т.к. disc используется по умолчанию, я возьму circle: «list-style-type: circle;».
Код:
Результат:
HTML-практикум ч.3: как сделать неупорядоченный ненумерованный список без маркеров
Это очень просто. Неупорядоченные списки также создаются при помощи тегов <ul></ul> и <li></li>, — как вы уже знаете в этом случае нумерации не будет. Но будут маркеры, то есть список будет маркированным. Но и маркеры несложно убрать, это делается при помощи стиля в CSS: «list-style-type: none;».
Код:
Результат:
HTML-практикум ч.4: вложенный многоуровневый древовидный список
Особенность создания многоуровнего списка с вложенными списками заключается не только в его древовидности, но и в том, что ваш список может быть комплексным. То есть сочетать в себе, как маркированные, так и нумерованные элементы вместе. Древовидные вложенные списки часто можно встретить на Википедии, в разделе где показывается содержание страницы:
Многоуровневый список получается в результате того, что мы как бы вкладываем один список в тело другого. Далее я покажу вам как это делается на примере готового HTML кода.
Проблема только одна — не запутаться в коде. Решается она либо внимательностью, либо созданием отступов для себя: чтобы в HTML было твердо и четко все разложено по полочкам — где что находится.
Я сделаю для вас один полноценный пример, чтобы наглядно показать, что и как.
Код:
Результат:
HTML-практикум ч.5: как сделать список определений
Списки определений создаются при помощи тегов <dl></dl>, <dt></dt> и <dd></dd>.
- <dl></dl> (dl — description list) — обозначает начало и конец списка определений;
- <dt></dt> (dl — description term) — обозначает начало и конец одного термина;
- <dd></dd> (dd — definition description) — обозначает начало и конец одного определения/пояснения для одного термина.
Такой список по умолчанию получается многоуровневым и древовидным.
Пример кода:
Результат:
Итог
Итак, в данной статье вы узнали, что списком можно назвать взаимосвязанные однородные контейнеры (состоящие из предложений или отдельных фраз), располагающиеся друг за другом и начинающиеся с цифр, маркеров или не имеющие обозначений.
Также вы узнали, что есть список определений, для представления в удобном виде пар типа «термин-определение» или «термин-перевод».
В этой статье я привел достаточное количество примеров кода, а также скриншотов, чтобы вы доскональном могли ориентироваться в теме создания различных списков: нумерованных и ненумерованных, упорядоченных и неупорядоченных, маркированных и немаркированных (без маркеров), одно- и многоуровневых (вложенных и древовидных), а также списков определений.
Такие списки, при правильном их использовании, позволят систематизировать и разместить информацию на странице удобным для пользователя образом. В конце концов, списки появились еще тогда, когда интернета в помине не было.
Поэтому не пренебрегайте HTML-списками, учитесь их использовать правильно и умело размещайте на страницах ваших сайтов.
blogwork.ru
Нумерованные списки
В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента <ol> (от англ. Ordered List – нумерованный список). Далее в контейнер <ol> для каждого пункта списка помещается элемент <li> (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег <ol> имеет следующий синтаксис:
<ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol>Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:
Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе <ol>, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:
<ol type="A|a|I|i|1"> Здесь: type – символы списка:
- A — прописные латинские буквы (A, B, C . . .);
- a — строчные латинские буквы (a, b, c . . .);
- I — большие римские цифры (I, II, III . . .);
- i — маленькие римские цифры (i, ii, iii . . .);
- 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).
Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега <ol>.
В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:
Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу <li> следующим образом:
<li value="7"> В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи.
Пример использования атрибута value тега <li>, который позволяет изменить номер данного элемента списка:
В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8.
Форматирование нумерованных списков с помощью CSS
Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:
<ol style="list-style-type:lower-roman"> | Пример | Значение | Описание |
|---|---|---|
| а, Ь, с | lower-alpha | Строчные буквы |
| А, В, С | upper-alpha | Прописные буквы |
| i, ii, iii | lower-roman | Римские цифры, набранные строчными буквами |
| I, II, III | upper-roman | Римские цифры, набранные прописными буквами |
На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра:
Маркированные списки
Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента <ul> (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега <li>. Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
Тег <ul> имеет следующий синтаксис:
<ul> <li>Первый пункт </li> <li>Второй пункт </li> <li>Третий пункт </li> </ul>В следующем примере видно, что, по умолчанию, перед каждым элементом списка добавляется небольшой маркер в виде закрашенного кружка:
Внутри тега <li> не обязательно размещать только текст, допустимо поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.)
Вложенные списки
Любой список может быть вложен в другой. Внутри элемента <li> допустимо создание вложенного списка, или списка второго уровня. Для вложения списка опишите новый список внутри элемента <li> уже имеющегося списка. При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. Любой список может быть вложен в другой. Следующий пример демонстрирует структуру маркированного списка, вложенного во второй пункт нумерованного.
| При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. При этом, при вложении нумерованных списков стиль нумерации не меняется по умолчанию. |
Форматирование маркированных списков
Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:
<ul style="list-style-type:square"> | Значение | Описание |
|---|---|
| disc | маркер в форме кружков с заливкой |
| circle | маркер в форме кружков без заливки |
| square | маркер в форме квадрата с заливкой |
| none | пункты списка без маркера |
В следующем примере рассмотрены различные стили оформления маркированных списков:
Графические маркеры.
В HTML есть возможность создать список с графическими маркерами. Одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда разработчик сам подбирает маркер в соответствии с дизайном страницы. Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.
Чтобы заменить обычный маркер на графический, заменим свойство list-style-type на свойство list-style-image и укажем URL–адрес картинки:
<ul style="list-style-image: url(images/Star.png);">| Обратите внимание на размер картинки — он не должен быть слишком большим, обычно 10-25 пикселей. |
Списки определений (описаний)
Списки определений очень удобны для создания, например, вашего личного словаря терминов. У каждого пункта списка определений есть две части: термин и его определение.
Вы помещаете весь список в элемент <dl> (от англ. Definition List – список определений). Он включает в себя теги <dt> (от англ. Definition Term – определяемое слово, термин) и <dd> (от англ. Definition Description – описание определяемого термина).
Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.
Общая структура списка описаний имеет следующий вид:
<dl> <dt>Первый термин</dt> <dd>Описание первого термина</dd> <dt>Второй термин</dt> <dd>Описание второго термина</dd> </dl>В следующем примере показано одно из возможных использований списка определений:
По-умолчанию, текст термина прижимается к левому краю окна браузера, а описание термина располагается ниже и сдвигается вправо.
| Элемент <dl> содержит только элементы <dt> и <dd>. Вы не мо жете поместить блочные элементы (например, абзацы) внутрь термина <dt>, но определения <dd> могут содержать любой элемент потокового контента. |
wm-school.ru
Расширенные возможности
По умолчанию последовательность элементов нумерованного списка задается с помощью арабских цифр. HTML позволяет переопределить эту настройку с помощью атрибута type.
Значения, которые может принимать атрибут type:
- A — будут выведены заглавные латинские буквы (A, B, C и т.д).
- a — используются прописные латинские буквы (a, b, c и т.д).
- I — используются большие римские цифры (Ⅰ, ⅠⅠ, ⅠⅠⅠ и т.д).
- i — используются малые римские цифры (ⅰ, ⅰⅰ, ⅰⅰⅰ и т.д).
- 1 — применяется по умолчанию, и выводит арабские цифры (1, 2, 3 и т.д).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Изменение типа нумерации</title> </head> <body> <h1>Список дел на воскресенье</h1> <ol type="A"> <li>Приготовить завтрак</li> <li>Убраться в квартире</li> <li>Проверить почту</li> <li>Погладить вещи</li> </ol> </body> </html>
Нумерованный список позволяет указать, с какого числа начинать отсчет. Для этого используется атрибут start, значением которого должно быть число. Не важно, к какому типу относится список. Если он выводит латинские буквы, то значение атрибута start укажет порядковый номер буквы в алфавите.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Изменение начала отсчета</title> </head> <body> <h1>Список второй десятки игроков</h1> <ol start="10"> <li>Сафин Руслан</li> <li>Павел Воробьев</li> <li>Антон Захаров</li> <li>Андрей Потапов</li> <li>...</li> </ol> </body> </html>
coder-booster.ru