Как в html сделать список: Создание списков | WebReference

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


❮ Назад Далее ❯


HTML тег <ul> определяет неупорядоченный (маркированный) список.

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

Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

По умолчанию элементы списка будут помечены маркерами (маленькими черными кружочками):

Пример

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Попробуйте сами »


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

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

Значение Описание
disc Устанавливает маркер элемента списка в маркер (по умолчанию)
circle Устанавливает маркер элемента списка в виде круга
square Устанавливает маркер элемента списка в квадрат
none Элементы списка не будут помечены

Пример — Disc

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Попробуйте сами »

Пример — Circle

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Попробуйте сами »

Пример — Square

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Попробуйте сами »

Пример — None

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Попробуйте сами »



HTML Вложенные списки

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

Пример

<ul>
  <li>Кофе</li>
  <li>Чай
    <ul>
      <li>Черный чай</li>
      <li>Зеленый чай</li>
    </ul>
  </li>
  <li>Молоко</li>
</ul>

Попробуйте сами »

Примечание: Элемент списка (<li>) может содержать новый список, и другие HTML элементы, такие как изображения, ссылки и т. д.


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

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

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

Пример

<!DOCTYPE html>

<html>
 <head>
  <style>
  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»>Главная</a></li>
   <li><a href=»#news»>Новости</a></li>
   <li><a href=»#contact»>Контакты</a></li>
   <li><a href=»#about»>О Нас</a></li>
  </ul>

 </body>
</html>

Попробуйте сами »

Совет:

Вы можете узнать гораздо больше о CSS в разделе CSS Учебник.


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

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

HTML Теги списка

Теги Описание
<ul> Определяет неупорядоченный список
<ol> Определяет упорядоченный список
<li>
Определяет элемент списка
<dl> Определяет описание списка
<dt> Определяет термин в описание списка
<dd> Описывает термин в описание списка

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


❮ Назад Далее ❯


НОВОЕ

Мы только что запустили
SchoolsW3 видео

Узнать сейчас

ВЫБОР ЦВЕТА

Получите сертификат,
пройдите
курс сегодня!

Приступить

КОДОВАЯ ИГРА

Играть




ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3. CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры


Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от W3.CSS.

Учебник HTML. Урок 6. Типы списков, создание и форматирование списков | DesigNonstop

Полезности / Учебники

18107

14-05-2013

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

 
 

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

 
 

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

нумерованный (с помощью цифр или букв) список
список из определений

 
 

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

 
 

Маркированные списки
Напротив каждого пункта маркированного списка отображается маркер (представленный, как правило, в виде большой цветной точки). В HTML маркированный список создается автоматически, когда вместе с тегом маркированного списка (<ul>) применяется тег обозначения пунктов списка (<li>). Хотя в приведенном далее коде HTML каждый пункт списка представлен небольшой текстовой строкой, ограничений на размер этих пунктов не существует.

 
 

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

 
 

Ниже показаны примеры отображения маркированных и нумерованных списков в окне веб-браузера. Если какой-то пункт списка оказывается больше одной текстовой строки, все последующие строки данного пункта выравниваются по первой.

 
 

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

 
 

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Простой маркированный список</title>
<style type="text/css">
ul.square {list-style-type:square}
ul.circle {list-style-type:circle}
ul.image {list-style-image:url(images/globe.gif)}
</style>
</head>

<body>
<h3>Простой маркированный список</h3>
<ul>
<li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li>
</ul>

<h3>Квадратные маркеры</h3>
<ul>
<li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li>
</ul>

<h3>Круглые маркеры</h3>
<ul>
<li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li>
</ul>

<h3>Рисунок в качестве маркера</h3>
<ul>
<li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li>
</ul>
</body>
</html>

 
 

Нумерованные списки
Если пункты списка должны следовать друг за другом в точно заданном порядке (например, если список представляет собой пошаговую инструкцию), воспользуйтесь тегом, предназначенным для построения нумерованных списков (<ol>). В случае его применения HTML автоматически нумерует пункты создаваемого списка цифрами или буквами.

 
 

<ol><li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li></ol>

 
 

Обратите внимание на схожесть кодов, создающих нумерованные и маркированные списки. При использовании обоих тегов, <ul> и <ol>, отдельные пункты списка добавляются с помощью тега <li>. Как и в случае с маркированными списками, в HTML предусмотрено автоматическое форматирование пунктов нумерованных списков. По умолчанию в HTML пункты нумерованного списка отмечаются обычными арабскими цифрами (1, 2, 3 и т.д.). Более того, при добавлении новых пунктов или удалении уже имеющихся нумерация всего списка выполняется автоматически.

 
 

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

 
 

На примере представленного ниже HTML кода показано, как использовать стили для получения различных нумерованных списков. Используется стилевое свойство list-style-type и его значения lower-alpha — строчные буквы, lower-roman — римские строчные цифры, upper-alpha — заглавные буквы, upper-roman — римские заглавные цифры.

 
 

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Нумерованные списки</title>
<style type="text/css">
ol.lower-alpha {list-style-type:lower-alpha}
ol.lower-roman {list-style-type:lower-roman}
ol.upper-alpha {list-style-type:upper-alpha}
ol.upper-roman {list-style-type:upper-roman}
</style>
</head>

<body>
<h3>Простой нумерованный список</h3>
<ol>
<li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li>
</ol>

<h3>Строчные буквы в качестве маркера</h3>
<ol>
<li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li>
</ol>

<h3>Строчные римские числа в качестве маркера</h3>
<ol>
<li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li>
</ol>

<h3>Заглавные буквы в качестве маркера</h3>
<ol>
<li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li>
</ol>

<h3>Заглавные римские числа в качестве маркера</h3>
<ol>
<li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li>
</ol>
</body>
</html>

 
 

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

 
 

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

 
 

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Нумерованные списки</title>
<style type="text/css">
</style>
</head>

<body>
<p>Пример разрыва в нумерованном списке</p>
<ol>
<li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li>
</ol>
<p>Текст между пунктами списка</p>
<ol>
<li value="4">четвертый пункт списка</li>
</ol>
</body>
</html>

 
 

Список из определений
В HTML предусмотрена возможность создания списков еще одного типа, добавляемых тегом <dl>. Каждый пункт такого списка состоит из термина (задаваемого тегом <dt>) и его определения (тег <dd>).

 
 

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Список из определений</title>
<style type="text/css">
</style>
</head>

<body>
<dl>
<dt>Термин 1</dt>
<dd>Определение Термина 1</dd>
<dl>
<dl>
<dt>Термин 2</dt>
<dd>Определение Термина 2</dd>
<dl>
<dl>
<dt>Термин 3</dt>
<dd>Определение Термина 3</dd>
<dl>
</body>
</html>

 
 

По материалам книги Дидре Хейз «Освой самостоятельно HTML«.

Как составить список в HTML [Числовые и маркированные списки] · Dev Практический

Вы можете создавать списки из одного или нескольких связанных элементов в HTML.

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

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

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

Вы можете создать маркированный список, используя HTML-теги неупорядоченного списка ( ul ). Каждый отдельный элемент списка заключен в элемент списка ( li ) Теги HTML.

Пример

 

Страны Африки

<ул>
  • Кения
  • Нигерия
  • Южная Африка
  • Египет
  • Результаты

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

    Чтобы создать нумерованный список, используйте HTML-теги упорядоченного списка ( ol ). Затем каждый отдельный элемент списка окружается элементом списка ( li ) Теги HTML.

    Пример

     

    Четыре самых потребляемых напитка в мире

    <ол>
  • Вода
  • Чай
  • Кофе
  • Апельсиновый сок
  • Результаты

    Вложенный список HTML

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

    — Вложенный нумерованный список

    Пример

     

    Наиболее часто используемые металлы

    <ол>
  • Основные области применения стали <ол>
  • Строительство
  • Транспорт
  • Основные области применения алюминия <ол>
  • Линии электропередач
  • Строительство
  • Электроника
  • Цинк
  • Результаты

    — Вложенный маркированный список

    Пример

     

    Список хобби

    <ул>
  • Хобби в помещении <ул>
  • Йога
  • Дерево
  • Хобби на свежем воздухе <ул>
  • Охота
  • Кемпинг
  • Результаты

    — Вложенный смешанный список

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

    Пример

     

    Олимпийские игры

    <ул>
  • Лучшие игроки в теннис <ол>
  • Новак Джокович
  • Даниил Медведев
  • Лучшие бегуны марафона <ол>
  • Элиуд Кипчоге
  • Кенениса Бекеле
  • Результаты

    Маркированный список вложен в нумерованный список

    Пример

      Лучшие фрукты в мире
    1. Страны, выращивающие помидоры <ул>
    2. Китай
    3. Индия
    4. Турция
    5. Страны, где выращивают бананы <ул>
    6. Индонезия
    7. Бразилия
    8. Ангола

    Результаты

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

    Всем привет! Я Авик Ндугу .

    Я опубликовал более 100 сообщений в блогах по HTML, CSS, Javascript, React и другим связанным темам. Когда я не пишу, я люблю читать, ходить в походы и слушать подкасты.

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

    Эта статья является частью серии статей для начинающих веб-разработчиков. Серия предназначена для людей, которые хотели бы начать серьезную веб-разработку, а также для людей, которые уже являются веб-разработчиками и хотят укрепить свои знания основ, возможно, заполнив некоторые пробелы. Если вы обнаружите, что возитесь с HTML, CSS или Javascript, пока не заработаете, эта серия статей для вас. Материалы этой серии тесно связаны с моим курсом Coursera с самым высоким рейтингом.

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

    • Список дел
    • Список покупок
    • Список ингредиентов
    • давайте перечислим другие списки список 😁

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

    Хорошо, хорошо. Я закончил со списком банальных шуток. 🤣

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

    Итак, давайте узнаем, как создать список в HTML.

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

    Ниже показано начало HTML-документа, содержащего список вещей ( unordered-lists-before.html )

     
     1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
     
     
    
    <голова>
      <мета-кодировка="utf-8">
      Ненумерованные списки
    
    <тело>
       

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

    <дел> Мой типичный список покупок на ужин: Молоко Пончики Печенье Шоколад Сахар Арахисовое масло Пепто-бисмол

    Как видите, HTML-код содержит Мой типичный список покупок на ужин : молоко, пончики, разные виды печенья и, конечно же, в конце пепто-бисмол. 👍

    Если вы просмотрите unordered-lists-before.html в браузере, вы увидите следующее:

    У нас еще нет списка, не так ли? Он просто отображается как куча пробелов между элементами нашего списка.

    Я обсуждал в предыдущем посте, почему это так. Браузер игнорирует все символы пробела, такие как новая строка, табуляция, множественные пробелы, и учитывает только 1 пробел между текстом.

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

    Тег

      представляет неупорядоченный список в HTML и означает, как вы уже догадались, u nordered l ist. Содержимое каждого элемента в списке должно быть окружено тегом
    • , что означает l ist i tem.

      Вот тот же HTML-код, но со всеми тегами неупорядоченного HTML-списка, нам нужно правильно представить список покупок ( ненумерованные списки-после. html ):

       
       1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
       
       
      
      <голова>
        <мета-кодировка="utf-8">
        Ненумерованные списки
      
      <тело>
         

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

      <дел> Мой типичный список покупок на ужин: <ул>
    • Молоко
    • Пончики
    • Файлы cookie <ул>
    • Шоколад
    • Сахар
    • Арахисовое масло
    • Пепто-бисмол
    • Во-первых, мы окружаем весь наш список тегом

        (строки 12 и 23). Затем каждый отдельный элемент в списке окружается тегом
      • .

        Все хорошо, пока мы не доберемся до предмета Cookies . ( Как это верно! ) Магазины обычно продают файлы cookie в своем собственном разделе, поэтому имеет смысл составить отдельный список для всех типов файлов cookie, которые нам нужно получить.

        Для этого все, что нам нужно сделать, это встроить список как часть содержимое тега

      • , который содержит файлы cookie. Это именно то, что мы делаем в строках 16 и 20.

        Если мы посмотрим на эту страницу в браузере, мы увидим наш список (списки):

        Несмотря на то, что HTML не отвечает за то, как что-то отображается, браузер достаточно хорош, чтобы предоставить стили по умолчанию для нашего основного списка с заполненными маркерами и выделенными маркерами для нашего подсписка файлов cookie.

        Давайте проверим

        Давайте воспользуемся онлайн-валидатором HTML, рекомендованным WHATWG, для проверки нашего HTML-кода.

        1. Перейдите по следующей ссылке: https://html5.validator.nu/
        2. В раскрывающемся списке Адрес выберите Текстовое поле
        3. Стереть все в текстовой области
        4. Скопируйте и вставьте HTML-код файла unordered-lists-after.html в эту текстовую область, а затем нажмите кнопку Проверить .

        Как видно из скриншота ниже, валидатор сообщает, что наш HTML-код действителен:

        Будет ли HTML-код по-прежнему действительным, если я удалю тег

      • из элемента списка Pepto Bismol ?

        Вот что выдаст валидатор:

        Ошибка устранена. Вам просто не разрешается размещать содержимое внутри тега

          , если оно не заключено внутри тега
        • .

          Заказной список

          Существуют списки, которые абсолютно требуют определенного порядка перечисления элементов.

          В качестве примера давайте взглянем на мою секретную процедуру/рецепт поедания печенья Double Oreo (бесплатно предлагается читателям этой статьи) ( order-lists-after.html ):

           
           1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
           
           
          
          <голова>
            <мета-кодировка="utf-8">
            Упорядоченные списки
          
          <тело>
             

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

          <дел> Порядок употребления печенья Орео: <ол>
        • Открыть окно
        • Удалить файл cookie
        • Приготовьте двойное печенье Oreo <ол>
        • Отделите верхнюю часть
        • Поместите еще один файл cookie поверх половина со сливками
        • Отрежьте верхнюю часть другого файла cookie.
        • Поместите часть с кремом поверх средний файл cookie
        • Наслаждайтесь!
        • С точки зрения HTML, единственное отличие этого кода состоит в том, что теперь мы используем теги

            (которые обозначают o rdered l ist) вместо
              тегов. Обратите внимание, что я также использую упорядоченный список ( ol ) для внутреннего подсписка, в котором подробно описывается рецепт Double Oreo .

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

              Между прочим, если вы внимательно будете следовать этому секретному рецепту, у вас должно получиться печенье Double Oreo , которое выглядит примерно так:

              А вы думали, что я шучу, не так ли? Пожалуйста! Печеньки не шутки ! (Хорошо, я шучу.

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

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