Содержание

— HTML — Дока

  1. Кратко
  2. Пример
  3. Как это понять
  4. Атрибуты
    1. value
    2. type
  5. Подсказки
  6. На практике
    1. Ольга Рунова советует

Кратко

Секция статьи «Кратко»

<li> – отдельный элемент списка <ol>, <ul> или <menu>.

Пример

Секция статьи «Пример»
<ul>  <li>Пушкин</li>  <li>Есенин</li>  <li>Бунин</li></ul>
          <ul>
  <li>Пушкин</li>
  <li>Есенин</li>
  <li>Бунин</li>
</ul>

Как это понять

Секция статьи «Как это понять»

<li> – сокращение от list item.

<li> нельзя использовать отдельно. Его родителем обязательно должен быть упорядоченный список <ol>, неупорядоченный список <ul> или <menu>.

Атрибуты

Секция статьи «Атрибуты»

value Секция статьи «value»

Можно установить номер пункта <li>, с которого начнётся нумерация списка (только для <ol>).

Значением value может быть любое целое положительное число:

<ol>  <li value="3">Белка</li>  <li>Лиса</li>  <li>Ёж</li></ol>
          <ol>
  <li value="3">Белка</li>
  <li>Лиса</li>
  <li>Ёж</li>
</ol>

type Секция статьи «type»

С помощью атрибута type можно установить вид маркера. Значение будет зависеть от внешнего контейнера <ol> или <ul>

.

<ul>  <li type="disc">Белка</li>  <li type="circle">Лиса</li>  <li type="square">Ёж</li></ul><ol>  <li type="A">Правила</li>  <li>Тесты</li>  <li>Ответы</li></ol>
          <ul>
  <li type="disc">Белка</li>
  <li type="circle">Лиса</li>
  <li type="square">Ёж</li>
</ul>
<ol>
  <li type="A">Правила</li>
  <li>Тесты</li>
  <li>Ответы</li>
</ol>

Для нумерованного списка <ol> атрибут type может иметь значения: «a», «i», «I».

👆 Для изменения стиля отображения маркера лучше все-таки использовать CSS, а именно list-style-type

Подсказки

Секция статьи «Подсказки»

💡 Внутрь тега <li> можно вкладывать разные элементы, например, изображения, другие списки, ссылки и т. д.

<ul>  <li>      <a href="#">Главная страница</a>  </li>  <li>      <a href="#">Корзина</a>  </li>  <li>      <a href="#">Отзывы</a>  </li></ul>
          <ul>
  <li>
      <a href="#">Главная страница</a>
  </li>
  <li>
      <a href="#">Корзина</a>
  </li>
  <li>
      <a href="#">Отзывы</a>
  </li>
</ul>

💡 <li> по умолчанию имеет блочные стили, поэтому пункты будут располагаться друг под другом. Это поведение легко меняется с помощью CSS.

На практике

Секция статьи «На практике»

Ольга Рунова советует

Секция статьи «Ольга Рунова советует»

🛠️ Для тега <li> браузеры добавляют псевдоэлемент ::marker, который выводит маркер или цифру, в зависимости от типа списка. По умолчанию, в неупорядоченном списке <ul> это маркер в виде точки (disc), в упорядоченном списке <ol> — арабская цифра с точкой (decimal).

Чтобы стилизовать маркер, можно применить стили к ::marker, а CSS-свойство list-style-type поможет поменять тип маркера или убрать его вовсе (none).

Свойство list-style-position позволяет задать положение маркера относительно контента.

А для придания списку большей изюминки маркер можно заменить на картинку с помощью list-style-image.

👆 Чтобы свойства применились ко всем элементам <li> в списке, достаточно задать их внешнему контейнеру (<ul> или <ol>).

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

<ul>

alt +

<dl>, <dd>, <dt>

alt +

Что такое li в html

HTML тег <li> (li сокращение от англ. list item — элемент списка) определяет пункты списка и может включать в себя любые другие HTML-элементы (списки, абзацы, изображения и др.). По умолчанию браузеры отображают пункты списка с небольшим отступом с левой стороны.

Тег <li> может быть расположен в трех элементах: в нумерованных (<ol>) и маркированных (<ul>) списках, а также в меню ( <menu> ). В каждом из этих элементов он будет отображаться по разному, например, в нумерованном списке, каждому элементу списка будет предшествовать порядковое значение в виде цифры или алфавитного символа.

Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения.

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

Примечание: по стандарту HTML5 элемент <li> не обязательно должен завершаться закрывающим тегом.

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

Следующий раздел довольно небольшой и состоит буквально из пары видео уроков. Но раздел важен и посвящен спискам в HTML. Что такое списки? Как ими пользоваться и т.д.

Как сделать HTML-меню для сайта?

Что касается этого видео, то сегодня мы познакомимся с тремя HTML-тегами. Это тег ul, тег ol и тег li. Мало того, что мы изучим еще три тега и пополним копилку наших знаний в области HTML, еще сегодня мы узнаем, как в HTML сделать меню? Вопрос довольно популярный и актуальный. В этом видео Вы сможете увидеть, насколько все просто.

Видео урок хоть и непродолжительный, но довольно подробный. Кроме создания HTML-меню для сайта, мы узнаем, как сделать подразделы в меню. Как известно меню это некий список, состоящий из определенных разделов сайта. Но кроме разделов мы можем указывать и подразделы это не что иное, как вложенное меню или более правильно вложенные списки.

HTML-тег li.

Тег <li> как раз существует для создания пунктов или разделов меню. <Li> является отдельным элементом списка, в котором и будет содержаться вся информация, которая должна быть выведена на странице. Также эти элементы могут быть активными. Я имею в виду, что любой такой элемент можно сделать ссылкой ведущей куда-либо. Неважно на страницу раздела или еще куда-то. Тем более что как сделать ссылку в HTML мы уже заем.

HTML-тег ul.

Тег <ul> не предназначен для вывода какой-либо информации на странице, для этого существует тег <li> . Однако этот элемент не менее важен в создании меню или попросту списка. Элемент <ul> создает некий контейнер, который определяет, с чем веб-браузер имеет дело. Кроме этого <ul> определяет, с каким списком мы столкнулись. Так как списки можно разделить на два вида: нумерованный список и маркированный.

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

HTML-тег ol.

Тег <ol> также не предназначен для вывода какой-либо информации на странице. Этот элемент создает блочный элемент, как и <ul> . То есть некий контейнер, в который будут помещены отдельные пункты списка. Но отвечает он не только за это.

Указав тег <ol> , мы сообщаем веб-браузеру о том, что он имеет дело с нумерованным списком или по-другому упорядоченным. Эти списки полная противоположность неупорядоченных списков. Так как подобные списки имеют отметки порядка. Проще говоря, порядковые номера возле каждого отдельного элемента списка. Отсюда и такие определения.

Видео урок: Как в HTML сделать меню? Тег li, ul и ol — списки в HTML.

HTML-справочник и другие материалы можно и нужно скачать здесь!

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

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

  • маркированный список — <ul> — каждый элемент списка <li> отмечается маркером,
  • нумерованный список — <ol> — каждый элемент списка <li> отмечается цифрой,
  • список определений — <dl> — состоит из пар термин <dt> — <dd> определение.

Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение.

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

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

  • Содержание:

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

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью элемента <ul> . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

Каждый элемент списка создаётся с помощью элемента <li> (от англ. List Item).

  • Microsoft
  • Google
  • Apple
  • IBM

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

Нумерованный список создаётся с помощью элемента <ol> . Каждый пункт списка также создаётся с помощью элемента <li> . Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

Блок списка также имеет стили браузера по умолчанию:

Для элемента <li> доступен атрибут value , который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value=»10″> , то остальная нумерация будет пересчитана относительно нового значения.

Для элемента <ol> доступны следующие атрибуты:

  1. Microsoft
  2. Google
  3. Apple
  4. IBM

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

Списки определений создаются с помощью элемента <dl> . Для добавления термина применяется элемент <dt> , а для вставки определения — элемент <dd> .

Блок списка определений имеет следующие стили браузера по умолчанию:

Режиссер: Петр Точилин В ролях: Андрей Гайдулян Алексей Гаврилов Виталий Гогунский Мария Кожевникова Фигура. 3. Список определений

4. Как создать вложенный список

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

  • Пункт 1.
  • Пункт 2.
    • Подпункт 2.1.
    • Подпункт 2.2.
      • Подпункт 2.2.1.
      • Подпункт 2.2.2.

      5. Многоуровневый нумерованный список

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

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

      Тег <li> предназначен для создания пункта в списке.

      Тег <li> располагается внутри тега <ul> или <ol> , которые создают маркированный и нумерованный списки соответственно.

      Атрибут Type

      Атрибут type тега li — устанавливает тип маркировки пунктов списка, если располагается внутри тега <ul> или вид нумерации пунктов, если располагается внутри тега <ol> .

      — A — заглавные буквы: A, B, C…
      — a – строчные буквы: a, b, c…
      — I — большие римские числа: I, II, III…
      — i — маленькие римские числа: i, ii, iii…
      — 1 — арабские цифры: 1, 2, 3…

      <p> Используются разные маркеры
      <ul> <li type= «circle» > Привет
      <li> Пока
      <li> Здравствуйте
      <li type= «square» > До свидания
      </ul> </p>
      <p> Пункты нумерованного списка обозначены заглавными буквами
      <ol type= «A» >
      <li value= «2» > 2-я буква алфавита
      <li> 3-я
      <li> 4-я
      <li value= «20» > 2 0-я буква алфавита
      </ol> </p>
      <p> Пункты списка пронумерованы арабскими цифрами
      <ol> <li> Один
      <li> Два
      <li type= «I» > Три ( <em> Вид нумерации — большие римские числа </em> )
      <li> Четыре
      </ol> </p>

Свойство list-style-type — стили для маркеров списка

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

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

Синтаксис

селектор { list-style-type: значение; }

Значения для ul

Значение Описание
circle Создает маркеры в виде кружков.
disc Создает маркеры в виде закрашенных кружков.
square Создает маркеры в виде квадратиков.
none Убирает маркеры.

Значение по умолчанию: disc.

Значения для ol

Значение Описание
armenian Традиционная армянская нумерация.
decimal Арабские числа (1, 2, 3, 4,. ..).
decimal-leading-zero Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,…).
georgian Традиционная грузинская нумерация.
lower-alpha Строчные латинские буквы (a, b, c, d,…).
lower-greek Строчные греческие буквы (α, β, γ, δ,…).
lower-latin Это значение аналогично lower-alpha.
lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v,…).
upper-alpha Заглавные латинские буквы (A, B, C, D,…).
upper-latin Это значение аналогично upper-alpha.
upper-roman Римские числа в верхнем регистре (I, II, III, IV, V,…).
none Убирает маркеры.

Значение по умолчанию: decimal.

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>ul { list-style-type: disc; }

:

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>

ul { list-style-type: circle; }

:

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>ul { list-style-type: square; }

:

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>ul { list-style-type: none; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>ol { list-style-type: decimal; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>ol { list-style-type: armenian; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: decimal-leading-zero; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>ol { list-style-type: georgian; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: lower-alpha; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>ol { list-style-type: lower-greek; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: lower-latin; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>ol { list-style-type: lower-roman; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>ol { list-style-type: upper-alpha; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>ol { list-style-type: upper-roman; }

:

Пример

Данный пример показывает, что свойство color влияет не только на цвет текста, но и на цвет маркеров:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>ul { list-style-type: disc; color: red; }

:

Смотрите также

  • свойство list-style-image,
    которое задает маркеры в виде заданных картинок
  • свойство list-style-position,
    которое задает позицию маркеров
  • свойство list-style-style,
    которое является сокращением для маркеров
  • свойство list-style-type,
    которое задает тип маркеров списка

Тег HTML li

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


Пример

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

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

      <ол>

    • Кофе

    • Чай

    • Молоко


  • Кофе

  • Чай

  • Молоко

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

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


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

Тег

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

    Тег

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

        В

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

          В

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

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


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

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

            Атрибуты

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

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

            Тег

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


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

            Тег

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



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

            Пример

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


            1. Кофе

            2. Чай

            3. Молоко

            4. Вода

            5. Сок

            6. Пиво

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

            Пример

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

            <ол>
             

          4. Кофе

          5.  
          6. Чай

          7.  
          8. Молоко


             
          • Кофе

          •  
          • Чай

          •  
          • Молоко

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

          Пример

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


              < li>Кофе
             
          • Чай
               

            • Черный чай

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


             

          •  
          • Молоко

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

          Пример

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


             
          • Кофе

          •  
          • Чай
               

            • Черный чай

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

            • Африка

            •        


          •    

           
           
        • Молоко

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


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

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

        HTML DOM ссылка: Li Object

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


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

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

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

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

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


        НОВИНКА

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

        Узнать

        ВЫБОР ЦВЕТА
        КОД ИГРЫ

        Играть в игру




        Лучшие учебники
        Учебное пособие по HTML
        Учебное пособие по CSS
        Учебное пособие по JavaScript
        Учебное пособие
        Учебное пособие по SQL
        Учебное пособие по Python
        Учебное пособие по W3. CSS
        Учебное пособие по Bootstrap
        Учебное пособие по PHP
        Учебное пособие по Java
        Учебное пособие по C++
        Учебное пособие по jQuery

        Основные ссылки
        HTML Reference
        CSS Reference
        JavaScript Reference
        SQL Reference
        Python Reference
        W3.CSS Reference
        Bootstrap Reference
        PHP Reference
        HTML Colors
        Java Reference
        Angular Reference
        jQuery Reference

        Top6s Примеры HTML
        Примеры CSS
        Примеры JavaScript
        Как сделать Примеры
        Примеры SQL
        Примеры Python
        Примеры W3.CSS
        Примеры Bootstrap
        Примеры PHP
        Примеры Java
        Примеры XML
        Примеры jQuery


        FORUM | О

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

        Copyright 1999-2022 Refsnes Data. Все права защищены.
        W3Schools работает на основе W3.CSS.

        Тег HTML

        Тег HTML

      • представляет элемент списка в упорядоченных и неупорядоченных списках.

        Тег

      • помещается внутри тега
          или
            для представления каждого отдельного элемента в этом списке. Его также можно использовать с тегом для документов HTML 5.1 и HTML Living Standard.

            Синтаксис

            Тег

          • записывается как
          • с элементом списка, вставленным между начальным и конечным тегами. Элемент должен быть помещен либо в тег
              , либо в тег
                , чтобы обеспечить каждый отдельный элемент списка в этих элементах.

                Тег

              • также можно использовать внутри элемента (только когда элемент находится в toolbar state), однако этот элемент не поддерживается спецификацией W3C HTML5 — в настоящее время он поддерживается только спецификацией HTML 5. 1 и стандартом HTML Living Standard WHATWG.

                Вот так:

                <ул>

              • Элемент списка…
              • Элемент списка…
              • Элемент списка…

              Примеры

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

              Вот пример использования

            1. внутри тега
                для создания ненумерованного списка.

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

                Вот пример использования

              • внутри тега
                  для создания упорядоченного списка.

                  Значение

                  Атрибут

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

                  Обратите внимание, что атрибут value можно использовать только при использовании элемента

                    .

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

                    Применение стилей

                    Вы можете использовать свойства CSS list-style , list-style-image , list-style-position и list-style-type для изменения стилей элементов

                  1. .

                    Хотя вы можете применить эти свойства непосредственно к

                  2. , они обычно применяются к родительскому элементу (который затем каскадируется до элемента
                  3. ).

                    Вот несколько примеров.

                    Римские цифры

                    В этом примере свойство list-style-type используется для указания римских цифр.

                    Квадратные пули

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

                    Изображения

                    Вы можете заменить маркеры изображением, используя свойство list-style-image.

                    Пример <стиль> ul {изображение в стиле списка: URL (/pix/printer_icon. gif)}

                    Не забудьте распечатать следующее:

                    <ул>
                  4. Кошки
                  5. Собаки
                  6. Птицы

              Позиция элемента списка

              В этом примере свойство list-style-position используется для указания положения элементов списка.

              Пример <стиль> ol.inside {позиция в стиле списка: внутри; }

              Обычный:

              <ол>
            2. Кошки
            3. Собаки
            4. Птицы

            С применением list-style-position: inside;:

            <ол>
          • Кошки
          • Собаки
          • Птицы
          • Свойство
            в стиле списка

            Свойство в стиле списка является свойством ярлыка. Он позволяет применять несколько свойств к элементам списка.

            Пример:

            Атрибуты

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

            Элемент

          • принимает следующие атрибуты.

            Атрибут Описание
            значение Указывает значение элемента списка. Значение должно быть числом. Может использоваться только в том случае, если список является упорядоченным списком (например,
              ).

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

            Следующие атрибуты являются стандартными для всех элементов HTML. Поэтому вы можете использовать эти атрибуты с тегом

          • , а также со всеми другими тегами HTML.

            • ключ доступа
            • автокапитализировать
            • класс
            • редактируемый контент
            • данные-*
            • директор
            • перетаскиваемый
            • скрытый
            • идентификатор
            • режим ввода
            • это
            • идентификатор товара
            • элементпроп
            • Артикул
            • предметная область
            • тип изделия
            • язык
            • часть
            • слот
            • проверка правописания
            • стиль
            • tabindex
            • Название
            • перевод

            Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.

            Обработчики событий

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

            • прерывание
            • onauxclick
            • размытие
            • при отмене
            • онканплей
            • oncanplaythrough
            • при смене
            • по клику
            • при закрытии
            • в контекстном меню
            • онкопия
            • при обмене
            • нарезной
            • ondblclick
            • ондраг
            • ондрагенд
            • Драгентер
            • ондрагзит
            • на накладке
            • ондраговер
            • ондрагстарт
            • ондроп
            • ondurationchange
            • пустой
            • комбинированный
            • при ошибке
            • онфокус
            • данные формы
            • на входе
            • oninvalid
            • нажатие клавиши
            • нажатие клавиши
            • onkeyup
            • onlanguagechange
            • под нагрузкой
            • загруженные данные
            • загруженные метаданные
            • запуск при загрузке
            • по нажатию мыши
            • onmouseenter
            • для мышей
            • onmousemove
            • onmouseout
            • при наведении мыши
            • для мыши вверх
            • паста
            • при паузе
            • в игре
            • в игре
            • в процессе
            • при изменении скорости
            • при сбросе
            • изменение размера
            • при прокрутке
            • нарушение политики безопасности
            • поиск
            • поиск
            • по выбору
            • на смене слота
            • установлен
            • при отправке
            • приостановить
            • своевременное обновление
            • нагрудник
            • onvolumechange
            • в ожидании
            • на колесе

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

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

            HTML: тег


            В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом

          • , с синтаксисом и примерами.

            Описание

            Тег HTML

          • определяет элемент списка в
              ,
                или в документе HTML. Этот тег также часто называют элементом
              • .

                Синтаксис

                В HTML синтаксис тега

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

                   
                  <ул>
                    
                • Первый элемент
                • Второй элемент
                • Третий элемент

                Пример вывода

                 

                В HTML синтаксис тега

              • внутри тега
                  : ( упорядоченный список )

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

                В HTML синтаксис тега

              • внутри тега :

                 
                <тип меню="панель инструментов">
                  
              • <метка меню="Файл">
              • <меню метка="Изменить">
              • Атрибуты

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

              • :

                Атрибут Описание HTML-совместимость
                значение Целочисленное значение, указывающее текущее порядковое значение элемента только в списке
                Устарело в HTML 4. 01, повторно введено в HTML5
                тип Символьное значение, указывающее стиль нумерации. Это может быть любое из следующих значений:
                a — означает нижний регистр
                A — означает верхний регистр
                i — означает строчные римские цифры
                I — означает прописные римские цифры
                1 — означает цифры
                Устарело, используйте CSS

                Примечание

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

                    Совместимость с браузерами

                    Тег

                  1. совместим со следующими браузерами:

                    • Chrome
                    • Андроид
                    • Firefox (Геккон)
                    • Firefox Mobile (Геккон)
                    • Internet Explorer (IE)
                    • Пограничный мобильный телефон
                    • Опера
                    • Опера Мобайл
                    • Сафари (веб-кит)
                    • Сафари Мобильный

                    Пример

                    Мы обсудим тег

                  2. ниже, исследуя примеры использования тега
                  3. в HTML5, HTML 4. 01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

                    • HTML5
                    • HTML4
                    • XHTML

                    Документ HTML5

                    Если вы создали новую веб-страницу в HTML5, ваш тег

                  4. может выглядеть следующим образом:

                     
                    
                    <голова>
                    <мета-кодировка="UTF-8">
                    Пример HTML5 от www.techonthenet.com
                    
                    <тело>
                    <ол>
                      
                  5. Первый элемент
                  6. Второй элемент
                  7. Третий элемент
                  8. Четвертый элемент
                  <ул>
                • Первый элемент
                • Второй элемент
                • Третий элемент
                <ул>
              • Первый элемент <ол>
              • Вложенный элемент A
              • Вложенный элемент B
              • Вложенный элемент C
              • Вложенный элемент D
          • Второй элемент
          • Третий элемент
          • Четвертый элемент

          В этом примере документа HTML5 у нас есть тег упорядоченного списка

            с четырьмя элементами списка
          1. . Затем у нас есть тег неупорядоченного списка
              с тремя элементами списка
            • . Наконец, мы вложили тег упорядоченного списка
                в тег неупорядоченного списка
                  .

                  HTML 4.01 Transitional Document

                  Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег

                • может выглядеть следующим образом:

                   
                  
                  <голова>
                  
                  Переходный пример HTML 4.01 от www.techonthenet.com
                  
                  <тело>
                  <ол>
                    
                • Первый элемент
                • Второй элемент
                • Третий элемент
                • Четвертый элемент
              <ул>
            • Первый элемент
            • Второй элемент
            • Третий элемент
            <ул>
          2. Первый элемент <ол>
          3. Вложенный элемент A
          4. Вложенный элемент B
          5. Вложенный элемент C
          6. Вложенный элемент D
        1. Второй элемент
        2. Третий элемент
        3. Четвертый элемент

      В этом примере переходного документа HTML 4. 01 у нас есть тег

        упорядоченного списка с четырьмя элементами списка
      1. . Затем у нас есть тег неупорядоченного списка
          с тремя элементами списка
        • . Наконец, мы вложили тег упорядоченного списка
            в тег неупорядоченного списка
              .

              Документ XHTML 1.0 Transitional

              Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег

            • может выглядеть следующим образом:

               
              
              <голова>
              
              Переходный пример XHMTL 1.0 от www.techonthenet.com
              
              <тело>
              <ол>
                
            • Первый элемент
            • Второй элемент
            • Третий элемент
            • Четвертый элемент
          <ул>
        • Первый элемент
        • Второй элемент
        • Третий элемент
        <ул>
      2. Первый элемент <ол>
      3. Вложенный элемент A
      4. Вложенный элемент B
      5. Вложенный элемент C
      6. Вложенный элемент D
    1. Второй элемент
    2. Третий элемент
    3. Четвертый элемент
    4. В этом примере XHTML 1. 0 Transitional Document у нас есть тег

        упорядоченного списка с четырьмя элементами списка
      1. . Затем у нас есть тег неупорядоченного списка
          с тремя элементами списка
        • . Наконец, мы вложили тег упорядоченного списка
            в тег неупорядоченного списка
              .

              XHTML 1.0 Strict Document

              Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег

            • может выглядеть следующим образом:

               
              
              <голова>
              
              Строгий пример XHTML 1.0 от www.techonthenet.com
              
              <тело>
              <ол>
                
            • Первый элемент
            • Второй элемент
            • Третий элемент
            • Четвертый элемент
          <ул>
        • Первый элемент
        • Второй элемент
        • Третий элемент
        <ул>
      2. Первый элемент <ол>
      3. Вложенный элемент A
      4. Вложенный элемент B
      5. Вложенный элемент C
      6. Вложенный элемент D
    5. Второй элемент
    6. Третий элемент
    7. Четвертый элемент
    8. В этом примере XHTML 1.