Теги списков в html: Списки | htmlbook.ru

Leave a Comment / Html / By /

Содержание

теги для создания списков в HTML

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

Виды HTML-списков

Списки бывают следующих видов:

  • Маркированный. Перед элементом списка идет маркер.
  • Нумерованный. Перед элементом списка идет номер.
  • Список определений. Перед определением идет термин.
  • Вложенный список.
  • Многоуровневый. Список состоит из нескольких уровней. может быть маркированным. нумерованным и комбинированным.

Так же в этом материале я расскажу, как сделать выпадающий список.

Рассмотрим каждый вид подробнее.

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

Маркированный список создается с помощью тега <ul> — unordered list (неупорядоченный список). Стандартный маркер — точка.

Стиль по умолчанию:

display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Элемент любого списка создает тег <li> — list item (элемент списка).

Пример.

<ul>
    <li> Лев </li>
    <li> Тигр </li>
    <li> Леопард </li>
    <li> Снежный барс </li>
</ul>

Результат.

  • Лев
  • Тигр
  • Леопард
  • Снежный барс

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

  • Disc — точка.
  • Crcle — круг.
  • Square — квадрат.
  • None — убирает маркер.

В статье основы HTML я рассказывал о теге <style>. Давайте с его помощью изменим маркер в примере на квадрат.

<style>
ul {list-style-type: square;}
</style>
<ul>
    <li> Лев </li>
    <li> Тигр </li>
    <li> Леопард </li>
    <li> Снежный барс </li>
</ul>

Получим следующий результат:

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

Нумерованный список создается при помощи тега <ol> — order list (упорядоченный список). Стандартно список нумеруется арабскими (традиционными) числами.

Стиль по умолчанию:

display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Пример.

<ol>
    <li> Лев </li>
    <li> Тигр </li>
    <li> Леопард </li>
    <li> Снежный барс </li>
</ol>

Результат.

  1. Лев
  2. Тигр
  3. Леопард
  4. Снежный барс

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

  • Armenian — армянская нумерация.
  • Decimal — арабская нумерация.
  • Decimal-leading-zero — арабская нумерация с нулем впереди чисел меньше десяти, то есть 01, 02, 03 и так далее.
  • Georgian — грузинская нумерация.
  • Lower-alpha (lower-latin) — строчные латинские буквы.
  • Lower-greek — строчные греческие буквы.
  • Lower-roman — римские числа в нижнем регистре, например i, ii.
  • Upper-alpha (upper-latin) — заглавные латинские буквы.
  • Upper-roman — римские числа в верхнем регистре, например I, II.
  • None — без нумерации.

Тег <ol> в отличии элемента <ul> имеет атрибуты.

Атрибуты тега <ol>
АтрибутОписаниеВозможные значения
reversedУказывает, что элементы списка расположены в обратном порядке. Нет.
startЗадает первый порядковый номер списка.Число.
typeЗадает тип номера для использования в списке.1: Десятичный: 1, 2, 3 и так далее. (По умолчанию)
a: строчные буквы латинского алфавита: a, b, c и так далее.
A: прописные буквы латинского алфавита: A, B, C и так далее.
i: римские цифры в нижнем регистре: i, ii, iii и так далее.
I: римские цифры в верхнем регистре: I, II, III и так далее.

Примеры.

<p>Пример 1</p>
<ol>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>
<p>Пример 2</p>
<ol reversed>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>
<p>Пример 3</p>
<ol start="2">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>
<p>Пример 4</p>
<ol type="a">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>

Результаты.

Пример 1

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

Пример 2

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

Пример 3

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

Пример 4

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

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

Список определений создается с помощью тега <dl> — description list (список определений). Список определений состоит из пары термин — определение. Термин создается с помощью тега <dt>, а описание с помощью тега <dd>.

Стиль по умолчанию (тега <dl>):

display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;

Пример.

<dl>
    <dt>Собака</dt>
    <dd>Домашнее животное, одно из наиболее популярных (наряду с кошкой) животных-компаньонов.</dd>

    <dt>HTML</dt>
    <dd>Язык гипертекстовой разметки.</dd>
    <dd>Язык, используемый для форматирования веб-документов.</dd>
</dl>

Результат.

Собака
Домашнее животное, одно из наиболее популярных (наряду с кошкой) животных-компаньонов.
HTML
Язык гипертекстовой разметки.
Язык, используемый для форматирования веб-документов.

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

Чтобы создать вложенный список в HTML нужно использовать все те же элементы. Суть проста, в элемент <li> ... </li> вкладывается новый маркированный или нумерованный список, начиная с элемента <ul> или <ol>.

Пример.

<ol>
    <li>Языки веб-программирования
    <ul>
    <li>HTML</li>
    <li>PHP</li>
    <li>JavaScript</li>
    </ul>
    </li>
    <li>Языки программирования .NET
    <ul>
    <li>С++</li>
    <li>С#</li>
    </ul>
    </li>
    <li>Остальные языки программирования</li>
</ol>

Результат.

  1. Языки веб-программирования
    • HTML
    • PHP
    • JavaScript
  2. Языки программирования .NET
    • С++
    • С#
  3. Остальные языки программирования

Аналогично можно вкладывать списки уже во вложенные элементы.

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

Многоуровневым считают нумерованный список. Его отличие от вложенного списка в том, что бы нумерация шла по порядку.

Для этого придется использовать элемент <style>.

Пример.

<style>
ol {counter-reset: li; list-style: none;}
li::before { counter-increment:li; content: counters(li,".") " ";}

</style>
<ol>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка
    <ol>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
    </ol>
  </li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
</ol>

Результат.

Выпадающий список

Как сделать выпадающий список в HTML? Довольно просто, с помощью тега <select>, который позволяет оформить элементы в виде выпадающего списка. Элементы выпадающего списка берутся в тег

<option>.

Пример.

<select>
<option selected>Выбрать породу</option>
<option>Лабрадор-ретривер</option>
<option>Золотистый ретривер</option>
<option>Померанский шпиц</option>
<option>Бигль</option>
<option>Боксер</option>
</select>

Результат.

Выбрать породуЛабрадор-ретриверЗолотистый ретриверПомеранский шпицБигльБоксер

Элемент с атрибутом selected будет выбранным, то есть стоять в начале выпадающего списка. Его можно оставить пустым.

Расшифровка и перевод используемых тегов

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

ТегЗначениеПеревод
<ul>Unordered listНеупорядоченный список
<li>List itemЭлемент списка
<ol>Order listУпорядоченный список
<dl>Description listСписок описаний (определений)
<dt>Description list termТермин (списка описаний)
<dd>Description list descriptionОписание термина (списка описаний)
<select>SelectВыбор
<option>OptionВариант.

На этом изучение списков HTML заканчивается.

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

X-Phantom


— Компьютерные науки
— Видеоигры, стримы, анонсы
— Заработок в интернете
— Самосовершенствование

Логин:

Пароль:

Вы вошли на сайт, как гость

карта сайта

Главная О проекте Партнеры Карта сайта

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

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

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

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

  • <ol> … </ol> — этот парный тег задаёт старт и окончание нумерованного списка в html. Данный тег имеет параметр type, в значении которого нужно указать, с помощью чего будут отмечаться пункты списка:
  • A — английские большие буквы;
  • a — английские маленькие буквы;
  • I — римские большие цифры;
  • i — римские маленькие цифры.

Если значение type не задавать, то в качестве нумерации пунктов, по умолчанию будут задействованы обычные цифры (1,2,3).

  • <li> … </li> — данный тег служит для отделения пунктов списка друг от друга.

Освоить создание нумерованного списка в html намного проще будет на примере:

Если использовать параметр type со значение А – type=»А», то в результате нумерация будет выполнена английскими буквами – A,B,C,D и т.д

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

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

  • <ul> … </ul> — тег, задающий начало маркированного списка html. Как и в случае с нумерованными маркерами, каждый пункт отделяется тегами <li>. Также есть возможность воспользоваться параметром type, значения которого и задают внешний вид используемых маркеров в каждом пункте списка. Рассмотрим эти значения поподробнее:
  • square – маленький квадратик, левее расположен пример данного маркера
  • disc – большая точка, левее расположен пример данного маркера
  • circle – кружок, левее расположен пример данного маркера

Частенько возникает нужда создавать списки, которые вложены в другие списки. Для примера сверстаем один из таких маркированных списков html:

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

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

  • <dl> — парный тег, который объявляет список определений;
  • <dt> — данный тег используется для терминов;
  • <dd> — этот тег служит для определений или описаний терминов;

Пример списка определений:

Вид кода в браузере:

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

Теперь вы умеете создавать списки в html, более того, знаете html теги списков. Владеете информацией, как создать маркированный и нумерованный списки html.

Дата первой публикации: 02.08.2016
Дата последнего обновления: 02.08.2016

Рекомендовать друзьям:

Навигация
  • HTML уроки4
  • HTML справочники2
  • Заработок без вложений13
  • Самосовершенствование1
  • Услуги2
Сообщество
facebook.com/x.phant0m.project/»> X-Phantom

© 2017 X-Phantom, все права защищены

Тег HTML li

❮ Назад Полный справочник HTML Далее ❯


Пример

Один упорядоченный (

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

      <ол>

    • Кофе

    • Чай

    • Молоко


  • Кофе

  • Чай

  • Молоко

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

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Тег

  • определяет элемент списка.

    Тег

  • используется внутри упорядоченных списков (
      ), неупорядоченных списков (
        ) и в списки меню (<меню>).

        В

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

          В

            элементы списка обычно отображаются цифрами или буквами.

            Совет: Используйте CSS для оформления списков.

            Поддержка браузера

            Элемент
          		1.  Да Да Да Да Да

            Атрибуты

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

            Глобальные атрибуты

            Тег

          2. также поддерживает глобальные атрибуты в HTML.

            Атрибуты событий

            Тег

          3. также поддерживает атрибуты событий в HTML.

            Другие примеры

            Пример

            Использование атрибута value в упорядоченном списке:


            1. Кофе

            2. Чай

            3. Молоко

            4. Вода

            5. Сок

            6. Пиво

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

            Пример

            Установить различные типы стилей списка (с помощью CSS):

            <ол>
             

          4. Кофе

            5.  
          5. Чай

            6.  
          6. Молоко


             
          • Кофе

            •  
          • Чай

            •  
          • Молоко

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

          Пример

          Создать список внутри списка (вложенный список):


              < li>Кофе
             
          • Чай
               

            • Черный чай

              •      
            • Зеленый чай


             

            •  
          • Молоко

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

          Пример

          Создайте более сложный вложенный список:


             
          • Кофе

            •  
          • Чай
               

            • Черный чай

              •      
            • Зеленый чай
              <ул>
            • Китай

            • Африка

              •        


            •    

           
           
        • Молоко

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

        Связанные страницы

        Руководство по HTML: HTML-списки

        HTML DOM ссылка: Li Object

        Учебное пособие по CSS: Списки стилей

        Настройки CSS по умолчанию

        Большинство браузеров отображают элемент

      • со следующими значениями по умолчанию:

        li {
          отображение: элемент списка;
        }

        ❮ Предыдущий Полный справочник HTML Следующий ❯


        ВЫБОР ЦВЕТА

        Лучшие учебники
        Учебник HTML
        Учебник CSS
        Учебник JavaScript
        How To Tutorial
        Учебник SQL
        Учебник Python
        Учебник W3. CSS
        Учебник Bootstrap
        Учебник PHP
        Учебник Java
        Учебник C++
        Учебник jQuery

        9008 Справочник

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

        Top9 Examples Примеры HTML

        Примеры CSS
        Примеры JavaScript
        Примеры инструкций
        Примеры SQL
        Примеры Python
        Примеры W3.CSS
        Примеры Bootstrap
        Примеры PHP
        Примеры Java
        Примеры XML
        Примеры jQuery

        ФОРУМ | О

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

        Copyright 1999-2023 Refsnes Data. Все права защищены.
        W3Schools использует W3.CSS.

        Списки HTML — javatpoint

        следующий → ← предыдущая

        Списки HTML используются для указания списков информации. Все списки могут содержать один или несколько элементов списка. Существует три разных типа списков HTML:

        1. Заказной список или нумерованный список (ol)
        2. Неупорядоченный список или маркированный список (ul)
        3. Список описаний или список определений (дл)
        Примечание. Мы можем создать список внутри другого списка, который будет называться вложенным списком.

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

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

          , а элементы списка начинаются с тега
        1. .

          <ол>

        2. Овен
        3. Бинго
        4. Лев
        5. Оракул

        Протестируйте сейчас

        Выход:

        1. Овен
        2. Бинго
        3. Лев
        4. Оракул

        Щелкните здесь для получения полной информации об упорядоченном списке HTML. Упорядоченный список HTML

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

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

          , а элементы списка начинаются с тега
        • .

          <ул>

        • Овен
        • Бинго
        • Лев
        • Оракул

        Протестируйте сейчас

        Выход:

        • Овен
        • Бинго
        • Лев
        • Оракул

        Щелкните здесь для получения полной информации о неупорядоченном списке HTML. Ненумерованный список HTML

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

        Список HTML-описаний также является стилем списка, поддерживаемым HTML и XHTML. Он также известен как список определений, где записи перечислены как словарь или энциклопедия.

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

        Список определений HTML содержит следующие три тега:

        1. Тег
          определяет начало списка.
        2. Тег
          определяет термин.
        3. Тег
          определяет определение термина (описание).

        <дл>

        Овен
        -Один из 12 знаков гороскопа.
        Бинго
        -Одна из моих вечерних закусок
        Лев
        -Это также один из 12 знаков гороскопа.
        Оракул
        -Это многонациональная технологическая корпорация.

        Протестируйте сейчас

        Выход:

        Овен
        — один из 12 знаков гороскопа.
        Бинго
        -Одна из моих вечерних закусок
        Лев
        — это также один из 12 знаков гороскопа.
        Оракул
        — Это многонациональная технологическая корпорация.

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

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