Html упорядоченный список – HTML списки и виды списков в HTML: маркированный HTML список, нумерованный HTML список, многоуровневые списки в HTML — Вебджем.рф

Содержание

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

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

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

Для определения неупорядоченных списков используется тег <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

Глава 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> наоборот, применяются тогда, когда важен именно порядок следования пунктов, например — когда список является изложением последовательности каких либо действий.

Создание списков в html и виды списков

Цель урока: знакомство с тегами создания списков в HTML

Создание списков в HTML

В HTML поддерживается работа со всеми вилами списков, рассмотрим их

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

Неупорядоченный или ненумерованный список HTML содержит следующие теги:

Синтаксис:
<ul>
 <li>элемент 1</li>
 <li>элемент 2</li>
 <li>элемент 3</li>
 …
 <li>элемент n</li>
</ul>
<ul> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> … <li>элемент n</li> </ul>

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

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

<ul type="disk"> заполненный диск
<ul type="circle"> окружность 
<ul type="square"> квадрат

<ul type=»disk»> заполненный диск <ul type=»circle»> окружность <ul type=»square»> квадрат

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

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

Синтаксис:
1
2
3
4
5
6
7
<ol>
 <li>элемент 1</li>
 <li>элемент 2</li>
 <li>элемент 3</li>
 …
 <li>элемент n</li>
</ol>
<ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> … <li>элемент n</li> </ol>

Для нумерованного списка тоже есть различные варианты нумерации:

<ol type = "a">
<ol type = "A">
<ol type = "I">
<ol type = "1">

Можно также применять к отдельному пункту:

Для того, чтобы продолжить список с определенного номера:

Многоуровневый список HTML

Списки с определениями или многоуровневые списки в HTML создаются следующим образом:

1
2
3
4
5
6
7
8
9
<dl>
<dt>Пункт 1
 <dd>Элемент пункта 1
 <dd>Элемент пункта 1
<dt>Пункт 2
 <dd>Элемент пункта 2
<dt>Пункт 3
 <dd>Элемент пункта 3
</dl>
<dl> <dt>Пункт 1 <dd>Элемент пункта 1 <dd>Элемент пункта 1 <dt>Пункт 2 <dd>Элемент пункта 2 <dt>Пункт 3 <dd>Элемент пункта 3 </dl>
Результат:

Красивый список html или смешанный список

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

<dl><strong>Смешанный список</strong>
	<dt><i>Новость дня</i>
		<dd>
			<li>Сегодня идет дождь</li>
			<li>Дождь будет идти весь день</li>
	<dt><i>Новость ночи</i>
		<dd>
			<li>Ночью будет идти дождь</li>
			<li>Завтра начнется новый день</li>
</dl>

<dl>Смешанный список <dt>Новость дня <dd> <li>Сегодня идет дождь</li> <li>Дождь будет идти весь день</li> <dt>Новость ночи <dd> <li>Ночью будет идти дождь</li> <li>Завтра начнется новый день</li> </dl>

Результат:

Лабораторная работа: скачайте файл list.html.

Откройте файл
Создайте смешанный список
Используйте нумерованный и маркированный список html и список определений так, чтобы:

вместо знака - отображался маркер
вместо порядковых чисел и букв (1, 2, 3, a, b, c) отображались соответствующие им числа и буквы автоматически

знак -, порядковые числа и буквы из текста удалить

НОУ ИНТУИТ | Лекция | Списки HTML

Аннотация: Рассмотрены различные типы списков, доступных в HTML, когда и как их нужно использовать, и как применять некоторые базовые стили

Введение

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

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

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

Три типа списков
- Неупорядоченные списки
- Упорядоченные списки
  - Разметка упорядоченного списка
  - Начало упорядоченных списков с числа, отличного от 1
- Списки определений
Выбор типа списка
Различие между списками HTML и текстом
Вложенные списки
Пошаговый пример
- Разметка основной страницы
- Добавление некоторых стилей
- Страница рецептов
- Разметка страницы рецептов
- Оформление страницы рецептов
Заключение
Дополнительное чтение
Контрольные вопросы

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

В HTML имеется три типа списков:

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

Каждый из них имеет определенное назначение — они не являются взаимозаменяемыми!

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

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

молоко
хлеб
сливочное масло
кофейные зерна

Однако все эти объекты являются частью одного списка, можно разместить объекты в любом порядке и список будет по-прежнему иметь смысл:

хлеб
кофейные зерна
молоко
сливочное масло

Можно использовать CSS для изменения маркера на один из нескольких используемых по умолчанию стилей, использовать свое собственное изображение, или даже вывести список без маркеров — мы посмотрим, как сделать это, немного позже в этой лекции, и расширим немного дальше в будущей лекции.

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

Неупорядоченные списки используют одну пару тегов <ul></ul>, охватывающих множество пар тегов <li></li>:

<ul>
  <li>хлеб </li>
  <li>кофе в зернах </li>
  <li>молоко </li>
  <li>масло </li>
</ul>

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

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

Собрать ингредиенты
Смешать ингредиенты
Поместить ингредиенты в форму для выпечки
Выпекать в духовке в течение часа
Вынуть из духовки
Дать постоять десять минут
Подать

Если список позиций переставить в другом порядке, то информация больше не будет иметь смысл:

Собрать ингредиенты
Выпекать в духовке в течение часа
Вынуть из духовки
Подать
Поместить ингредиенты в форму для выпечки
Дать постоять десять минут
Смешать ингредиенты

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

Буквы
- Буквы ascii нижнего регистра (a, b, c…)
- Буквы ascii верхнего регистра (A, B, C…)
- Классические греческие буквы нижнего регистра: ( , , …)
Числа
- Десятичные числа (1, 2, 3…)
- Десятичные числа с ведущим нулем (01, 02, 03…)
- Римские числа в нижнем регистре (i, ii, iii…)
- Римские числа в верхнем регистре (I, II, III…)
- Традиционная грузинская нумерация (an, ban, gan…)
- Традиционная армянская нумерация (mek, yerku, yerek…)

Здесь также можно использовать CSS для изменения стиля списков.

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

Упорядоченные списки используют одну пару тегов <ol></ol>, охватывающих множество пар тегов <li></li>:

<ol>
  <li>Собрать ингредиенты</li>
  <li>Смешать ингредиенты</li>
  <li>Поместить ингредиенты в форму для выпечки </li>
  <li>Выпекать в духовке в течение часа </li>
  <li>Вынуть из духовки</li>
  <li>Дать постоять десять минут </li>
  <li>Подать</li>
</ol>

Начало упорядоченных списков с числа, отличного от 1

Можно создать упорядоченный список, нумерация которого начинается с числа отличного от 1 (или i, или I, и т.д.). Это делается с помощью атрибута start, который получает числовое значение, даже если используется CSS для изменения нумерации списка на алфавитную или римскую с помощью свойства list-style-type. Это будет полезно, если имеется единый список объектов, но вы хотите разбить список некоторыми примечаниями, или некоторой другой подходящей информацией. Например, можно было бы сделать это с предыдущим примером:

<ol>
  <li>Собрать ингредиенты </li>
  <li>Смешать ингредиенты </li>
  <li>Поместить ингредиенты в форму для выпечки </li>
</ol>

<p>Прежде чем поместить ингредиенты в форму для выпечки, 
  нагрейте духовку до 180 градусов по Цельсию /350 градусов по Фаренгейту, 
   чтобы быть готовым к следующему шагу </p>

<ol start="4">
  <li> Выпекать в духовке в течение часа </li>
  <li> Вынуть из духовки </li>
  <li> Дать постоять десять минут </li>
  <li> Подать </li>
</ol>

Это приводит к следующему результату:

Собрать ингредиенты
Смешать ингредиенты
Поместить ингредиенты в форму для выпечки Прежде чем поместить ингредиенты в форму для выпечки, нагрейте духовку до 180 градусов по Цельсию /350 градусов по Фаренгейту, чтобы быть готовым к следующему шагу
Выпекать в духовке в течение часа
Вынуть из духовки
Дать постоять десять минут
Подать

Отметим, что этот атрибут является фактически исключенным в самой последней версии спецификации HTML, что означает, что страницы не пройдут валидацию при использовании строгого doctype. Это может показаться странным, так как этот атрибут имеет смысл, и нет эквивалента в CSS. Это показывает, что валидация HTML является идеальной целью для достижения, но не всегда абсолютно конечной целью. Кроме того, есть и еще один спасительный момент — атрибут start больше не является исключенным в спецификации HTML 5 (документ об отличиях HTML 5 от HTML 4 (http://www.w3.org/TR/2008/WD-html5-diff-20080122/) подтверждает это). Если вы хотите использовать такую возможность на строгой странице HTML 4, и она должна обязательно пройти валидацию, можно сделать это с помощью CSS Counters.

Списки в HTML — Как создать сайт

В языке HTML, существует 3 типа списков:

Упорядоченный список (тег ol)
Неупорядоченный список (тег ul)
Список определений

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

Упорядоченный список (ol)

Упорядоченный список в HTML — это такой список где каждый элемент имеет свой порядковый номер (1, 2, 3, 4 и т.д.). Упорядоченный список в HTML, начинается и заканчивается тегами ol, каждый элемент списка обрамляется тегами li. Рассмотрим пример упорядоченного списка:

<ol>
  <li>Открыть программу</li>
  <li>Нажать кнопку</li>
  <li>Выбрать из списка</li>
  <li>Ввести данные</li>
  <li>Закрыть программу</li>
</ol>

Результат:

Открыть программу
Нажать кнопку
Выбрать из списка
Ввести данные
Закрыть программу

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

Для форматирования упорядоченного списка имеется CSS-свойство list-type-style, данное свойство позволяет использовать вместо обычных (арабских) чисел, римские, а также буквы и др.

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

Неупорядоченный список в HTML — это список, где перед каждым элементом ставится маркер (черный кружок). Неупорядоченный список в HTML, начинается и заканчивается тегами ul, каждый элемент списка обрамляется тегами li. Рассмотрим пример неупорядоченного списка:

<ul>
 <li>Лето</li>
 <li>Осень</li>
 <li>Зима</li>
 <li>Весна</li>
</ul>

Результат:

Лето
Осень
Зима
Весна

Тегами неупорядоченного списка, удобно обрамлять различные списки наподобие: ингредиенты, список частей целого (времена года) и т.д. То есть те списки, где нет четкой взаимосвязи от начала и до конца. Например, если мы напишем зима, весна, лето, осень то целостность не нарушится, ибо это не инструкция. Однако если мы сначала введём данные не открыв программу, то произойдет ошибка, ибо прежде чем ввести данные нужно открыть программу.

Для форматирования неупорядоченного списка используется CSS-свойство list-type-style, данное свойство может изменять стандартный маркер (черный круг), на ромб, квадрат или обруч.

Дата публикации поста: 8 февраля 2016

Дата обновления поста: 8 февраля 2016

Навигация по записям

HTML — Упорядоченный список | html Tutorial

пример

Упорядоченный список может быть создан с помощью <ol> и каждый элемент списка может быть создан с помощью <li> как в приведенном ниже примере:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

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

Вещь
Другой предмет
Еще один пункт

Ручное изменение номеров

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

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

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

Вещь
Некоторые другие предметы
Еще один пункт

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

<li value="7"></li>

Также стоит отметить, что, используя атрибут value непосредственно в элементе списка, вы можете переопределить существующую систему нумерации упорядоченного списка, перезапустив нумерацию с меньшим значением. Поэтому, если родительский список уже достиг значения 7 и столкнулся с элементом списка со значением 4, этот элемент списка все равно будет отображаться как 4 и продолжить отсчет с этой точки снова.

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Таким образом, в приведенном выше примере будет создан список, который следует шаблону нумерации 5, 6, 4, 5, 6 — начиная с номера ниже предыдущего и дублируя число 6 в списке.

Примечание. Атрибуты start и value принимают только число — даже если упорядоченный список настроен на отображение в виде римских цифр или букв.

Вы можете полностью изменить нумерацию путем добавления reversed в вашем ol элементе:

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

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

Изменение типа цифры

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

<ol type="1|a|A|i|I">

Тип	Описание	Примеры
`1`	Значение по умолчанию — десятичные числа	1,2,3,4
`a`	В алфавитном порядке (в нижнем регистре)	а, б, в, г
`A`	В алфавитном порядке (в верхнем регистре)	А, В, С, D
`i`	Римские цифры (строчные буквы)	I, II, III, IV
`I`	Римские цифры (в верхнем регистре)	I, II, III, IV

Вы должны использовать ol для отображения списка предметов, где предметы были преднамеренно заказаны, а заказ должен быть выделен. Если изменение порядка элементов НЕ делает неверным список, вы должны использовать <ul> .

Вложенный список в HTML | WebShake.RU

Список данного типа создается весьма просто. В первую очередь необходимо сделать список первого уровня. После чего внутрь элемента данного списка, под которым должен быть еще один внутренний список, добавить второй уровень, задействовав для этого парный тег <li></li>. Ничего сложного, но необходима внимательность, чтобы корректно осуществить закрытие всех тегов.

Приведем пример, указав, каким образом можно допустить ошибку в решении такой задачи.

Вот так выглядит правильный код вложенного списка:

<ul>
  <li>1
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ul>

А вот так – неправильный.

<ul>
  <li>1</li>
  <ul>
    <li>1.1</li>
    <li>1.2</li>
  </ul>
  <li>2</li>
</ul>

Видите в чем ошибка? В первом случае список второго уровня присутствует внутри элемента списка первого уровня. Но в ошибочном варианте второй уровень расположен между элементами первого.

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

Давайте добавим к одной из книг её содержание:

...
<h4>Содержание книги</h4>
<ul>
  <li>1. Как создавать чистый код
    <ul>
      <li>1.1 Правильно называем переменные</li>
      <li>1.2 Правильно называем функции</li>
    </ul>
  </li>
  <li>2. Как делать из плохого кода хороший</li>
</ul>
...

Результат в браузере:

Советую хорошенько запомнить то, в каком порядке идут теги для вложенного списка — для поисковиков это очень важно.

Html упорядоченный список – HTML списки и виды списков в HTML: маркированный HTML список, нумерованный HTML список, многоуровневые списки в HTML

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

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

Создание списков в html и виды списков

Создание списков в HTML

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

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

Многоуровневый список HTML

Красивый список html или смешанный список

НОУ ИНТУИТ | Лекция | Списки HTML

Введение

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

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

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

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

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

Начало упорядоченных списков с числа, отличного от 1

Списки в HTML — Как создать сайт

Упорядоченный список (ol)

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

Навигация по записям

HTML — Упорядоченный список | html Tutorial

пример

Ручное изменение номеров

Изменение типа цифры

Вложенный список в HTML | WebShake.RU

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

Рубрики