li в HTML


Содержание
Глобальные атрибуты Атрибуты события Тег также поддерживает Атрибуты событий в HTML. Списки в Html коде — теги UL, OL, LI и DL Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня в рамках этой рубрики я хочу поговорить о разнообразных Html списках, которые можно создать на основе специально предназначенных для этого тегов UL, OL, LI и DL. С помощью пары UL и LI создаются маркированные списки, с помощью OL и LI — нумерованные, а с помощью элементов DL, DT и DD создаются так называемые листинги определений. Так же мы рассмотрим вкратце принципы создания вложенных конструкций. Хочу напомнить вам, что мы уже успели рассмотреть язык Html и валидатор W3C, как задаются цвета в коде вебстраниц, успели поговорить про основы современной верстки, а так же верстки табличной (тут). Кроме этого мы затронули основы формирования директивы Doctype и оформление комментариев в коде, ну и узнали как вставить в Html картинку через тег Img. Маркированные списки на основе тэгов UL и LI Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI. Между открывающим и закрывающим тегом располагаются отдельные пункты списка, которые в свою очередь заключаются в открывающий и закрывающий элемент LI. Сверху и снизу Html списков браузер добавляет отступы в одну строку, подобные отступам, создаваемым тэгом абзаца. Давайте посмотрим, например, маркированный вариант, который может выглядеть так: Первая строка Вторая Последний элемент Внутри открывающего и закрывающего тегов UL могут стоять только элементы LI, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки). Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI. Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок): — закрашенный кружок (по умолчанию); — не закрашенный кружок; – квадрат В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера. Пример маркированного списка с различными типами маркера для каждого пункта: Маркер в виде закрашенного диска Маркер в виде не закрашенного диска Квадрат Нумерованные списки в Html на основе тэга OL Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI. Получается, что OL и UL — это служебные тэги, которые нужны только для того, чтобы указать браузеру, какой именно вид списка мы формируем (маркированный или же нумерованный). В случае нумерованного — слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку: Первая строка Второй пункт Третья строка Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения: — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»); — заглавные буквы в качестве нумерации; — строчные буквы; — заглавные римские цифры; — строчные римские цифры; Пример нумерованного списка с различными типами нумерации для каждого пункта: с нумерацией большими римскими цифрами Нумерация маленькими латинскими буквами Нумерация малыми римскими цифрами При создании нумерованных списков имеется так же возможность начать нумерацию не с единицы, а с заданного в атрибуте START числа. Например: Первый элемент, номер которого задан в теге OL атрибутом start=»23″ Следующий пункт, с номером на единицу большим Еще на единицу больше Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например: Первый пункт с номером один Этот элемент получит номер, указанный в атрибуте value=»32″ Пункт с большим номером Оформление внешнего вида списков в CSS (таблицах стилей) Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а при помощи селекторов класса или Id, для которых прописываются соответствующие свойства. В правилах CSS, прописанных для этого класса или Id, указывается, какая картинка будет использоваться в качестве маркера, на каком расстоянии маркер будет отстоять от текста и еще многое. Подробности смотрите в статье про свойства таблиц стилей List style ( type, image, position). Здесь я просто приведу пример различных маркеров для ненумерованных списков, внешний вид которых задается через отдельный файл с таблицами каскадных стилей. Но а о тонкостях работы с CSS мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для UL на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка — , для вложенных пунктов ненумерованного — . Специальные и вложенные списки в Html коде Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений. Обычно такой вид используется (ну, или предполагалось, что он будет использоваться) для написания словарных статей, состоящих из терминов (заключенных в теги DT) и их описаний (заключенных в теги DD). Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина). Вообще, DL, DT и DD являются блочными тегами, причем, внутри элемента DT можно вставлять только контент со строчными тегами (получается, что внутри DT нельзя будет использовать блочные элементы заголовков и абзацев). А внутри тегов DD можно вставлять любые элементы и строчные и блочные. Вложенный список в Html создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий тег UL или OL. Обратите внимание, что закрывающий LI того пункта, в котором будет создан вложенный пункт, ставится лишь после всего кода вложенного списка (это очень важно для его правильного отображения на web странице). Вложенный список может выглядеть примерно, так: Первый пункт основного нумерованного Второй пункт Первый элемент вложенного маркированного Второй Третий и последний пункт маркированного Третий элемент нумерованного HTML Tag Sharing is caring! Code Example First we do this, and then we do this, and then we do this. Display is based on list type An element must be a child element to either an (ordered list) element or a (unordered list) element. The defines a list with some kind of numbering system, so the list items within it will normally be prepended with a number, a Roman numeral, or a letter. The list is almost always bulleted. List items are block-level elements and contain flow content — which means (among other things) that ehy can have other lists as their content. This is how you build a nested, or multi-level list (such as outline). Атрибут type Значения Значением атрибута является одно из ключевых слов, букв или цифра 1, которые используются в зависимости от того, в создании какого списка участвует тег . Для маркированного списка, Пример circle — Маркер в виде окружности. Бим Бом Бум disc — Маркер в виде круга. Бим Бом Бум square — Маркер в виде закрашенного квадратика. Бим Бом Бум Для нумерованного списка, Пример 1 — Обычная числовая нумерация (1,2,3. ). Бим Бом Бум A — Нумерация по заглавным буквам латинского алфавита (A,B,C. ). Бим Бом Бум a — Строчные буквы латинского алфавита (a,b,c. ). Бим Бом Бум I — Римские цифры, но написанные заглавными буквами латиницы (I,II. VI. IX. ) Бим Бом Бум i — Римские цифры написанные строчной латиницей (i,ii. vi. ix. ) Бим Бом Бум Значение по умолчанию: Для маркированных списков — disc. Для нумерованных — 1. Синтаксис Обязательный атрибут: нет. Пример HTML: применение атрибута type Результат. Применение атрибута type. Поддержка версиями HTML Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1 Поддержка: Частично Нет Частично Нет В HTML 4.01 и XHTML 1.0 использовать атрибут type допускается только с Transitional и Frameset, в противном случае будет невалидный код. А вообще, рекомендуется применять стили (CSS). Поддержка браузерами Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше Поддержка: Да Частично Да Да Да Да Internet Explorer, начиная с 8-й версии, не поддерживает значения для упорядоченных списков, отображает списки как неупорядоченные. Тег li Описание тега LI Тег предназначен для создания пункта в списке. Тег располагается внутри тега или , которые создают маркированный и нумерованный списки соответственно. Используется, но не обязателен Атрибуты тега LI Type – устанавливает тип маркировки пунктов списка, если располагается внутри тега или вид нумерации пунктов, если располагается внутри тега . — disk — закрашенный круг — circle – не закрашенный круг — square — квадрат — A — заглавные буквы: A, B, C… — a – строчные буквы: a, b, c… — I — большие римские числа: I, II, III… — i — маленькие римские числа: i, ii, iii… — 1 — арабские цифры: 1, 2, 3… Значение по умолчанию — disk — для маркированного списка — 1 — для нумерованного списка «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd» > «Content-Type» content= «text/html; charset=windows-1251» > Тег Используются разные маркеры «circle» > Привет Пока Здравствуйте «square» > До свидания Пункты нумерованного списка обозначены заглавными буквами «A» > «2» > 2-я буква алфавита 3-я 4-я «20» > 2 0-я буква алфавита Пункты списка пронумерованы арабскими цифрами Один Два «I» > Три ( Вид нумерации — большие римские числа ) Четыре HTML :: Cписки Нумерованные html-списки В HTML 5 используется три вида списков: нумерованный, маркированный и список определения. По умолчанию пункты списка нумеруются браузером по порядку, начиная с единицы. Если нумерацию нужно начать не с единицы, то используется атрибут start , который задает число, с которого будет начинаться нумерованный список. В качестве значения атрибут принимает целые числа. Можно также изменить порядок нумерации на обратный. Для этого служит атрибут reversed , который используется без значений. Атрибут введен в HTML 5 и работает во всех браузерах, кроме IE . Имеется также возможность устанавливать вид маркера нумерованного списка. Для этого используется атрибут type , который может принимать значения «A | a | I | i | 1» , которые, соответственно, означают: заглавные латинские буквы, строчные латинские буквы, заглавные римские цифры, строчные римские цифры, арабские цифры. Поскольку все перечисленные значения, и не только, могут быть с легкостью установлены через стили CSS , использование атрибута type , по мнению автора, не целесообразно, хотя и допускается в HTML 5 . Использование нумерованного списка показано в примере №1. Пример №1. Использование элемента ‘ol’ Кстати, браузеры отображают все списки как блочные элементы, поэтому при отображении примера отчетливо видны вертикальные отступы. Попробуйте набрать код самостоятельно, задайте спискам желтый фон и посмотрите результат. Маркированные html-списки Маркированный список вместо цифр и букв использует маркеры в виде кружков. Изменить внешний вид маркеров можно при помощи стилей CSS . Что касается атрибута type , то его в HTML 5 убрали. Так что, остались только универсальные атрибуты и атрибуты-события. Код, содержащий элемент ‘ul’ , показан в примере №2. Пример №2. Использование элемента ‘ul’ Списки определений в HTML формируется парным тегом (от англ. definition list – ). Сам элемент ‘dl’ используется, как контейнер для пунктов списка. Каждый такой пункт, в свою очередь, состоит из элементов ‘dt’ (от англ. definition term – определяемый термин) и ‘dd’ (от англ. definition description – подробное описание), сформированных, соответственно, парными тегами и . Первый из них содержит определяемый термин, а второй – определение термина. Давайте для наглядности посмотрим пример №3. Пример №3. Использование элемента ‘dl’ Вложенные списки Иногда возникает необходимость создания , которые представляют собою списки, расположенные в пунктах внешнего списка. Рассмотрим создание вложенных списков на примере №4. Пример №4. Использование вложенных списков Как видим, создавать вложенные списки совсем не трудно. Для этого нужно внимательно между открывающим тегом и закрывающим тегом для нумерованных и маркированных списков расположить вложенный список требуемого вида. Что касается списков определений, то вложенный список следует располагать между открывающим тегом и закрывающим тегом . Это может понадобиться, например, если нужно дать термину несколько определений. в HTML Помимо типов маркеров – для пунктов расположенных между тегами можно задать цвет заднего фона, отступы, длину, а так же цвет и толлщину рамки. С помощью подобных свойств можно сделать полноценное меню. Для начала сделаем простой пример – тип маркеров будет отключен, пунктам будет задан цвет заднего фона, цвет и толщина рамки и длина, так как иначе длина пункта растянулась бы на всё поле. А теперь сделаем вертикальное меню. Для этого нужно прописать две стилевых группы – для пунктов в обычном состоянии и для пунктов на которые навели курсор мышки – то есть описать событие :hover Списки html: теги ul, ol, li, dl, dd, dt Здравствуйте, уважаемые читатели! Сегодня в качестве продолжения цикла статей рубрики «Основы html» я хочу познакомить вас с алгоритмом создания списков html при помощи тегов ul и li (маркированный список), ol и li (нумерованный список), dl, dt, dd (список определений). Теперь продолжу знакомить вас с наиболее часто используемыми тегами html, которые применяются для создания списков на страницах сайта. Если кто-то не знает, что это такое, наверняка после полученной ниже информации сразу поймет, о чем речь, поскольку такая форма подачи материала очень распространена. Маркированные HTML списки — теги ul и li Маркированный список определят тег ul. Между открывающим и закрывающим тегами ul располагаются элементы списка, содержание каждого из которых должно быть в свою очередь располагаться между открывающим и закрывающим тегами li. Сразу отмечу, что тег ul является парным (наличие открывающего и закрывающего тега), а также блочным, то есть образует контейнер, в который входят элементы (строки), образуемые каждый раз тегом li. Соответственно тег li является парным и строчным. 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square. Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок. Если дополнить данными атрибутами тег ul, то получим следующие варианты: 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка Естественно, каждому маркеру отдельного элемента маркированного списка можно придать свой внешний вид, прописав соответствующие значения атрибута type. 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка Нумерованные HTML списки — теги ol и li Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (блочный и парный тег по аналогии с ul). В качестве тега, определяющего элементы нумерованного списка html, здесь тоже выступает тег li. Нумерованный список — совокупность пронумерованных элементов. Тип нумерации определяется атрибутом type, который может принимать следующие значения: A — заглавные латинские буквы; a — строчные латинские буквы; I — заглавные римские цифры; i — строчные римские цифры; 1 — арабские цифры 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 3, 2, 1. Это осуществляется с помощью атрибута reserve тега ol. 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I): 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка HTML списки определений — теги dl, dd, dt Еще один вид списков html — список определений. Он формируется следующим образом. Содержание этого списка заключается между открывающим и закрывающим тегами dl, которые образуют контейнер. Тег dt определяет какой-либо термин, а dd — описание этого термина. CMS Система управления контентом, которая применяется для создания сайтов. HTML Язык гипертекстовой разметки, являющийся основой создания вебресурсов. Как видите, содержание тега dt, которое является каким либо термином, смещено влево, а содержание тега dd, являющееся определением данного термина, написано курсивом. Все это достигается с помощью применения различных стилей css, о которых непременно поговорим в ближайших публикациях. Кстати, современные реалии таковы, что язык html нельзя рассматривать в отрыве от css, поэтому, чтобы не пропустить эти важнейшие материалы, подпишитесь на обновление блога через RSS-ленту либо по e-mail. На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей.
  • Синтаксис
  • Пример
  • Результат
  • в HTML
  • Определение и использование
  • Поддержка браузера
  • Различия между HTML 4,01 и HTML5
  • Советы и примечания
  • Атрибуты
  • Глобальные атрибуты
  • Атрибуты события
  • Списки в Html коде — теги UL, OL, LI и DL
  • Маркированные списки на основе тэгов UL и LI
  • Нумерованные списки в Html на основе тэга OL
  • Оформление внешнего вида списков в CSS (таблицах стилей)
  • Специальные и вложенные списки в Html коде
  • HTML Tag
  • Code Example
  • Display is based on list type
  • Атрибут type
  • Значения
  • Синтаксис
  • Поддержка версиями HTML
  • Поддержка браузерами
  • Тег li
  • Описание тега LI
  • Атрибуты тега LI
  • HTML :: Cписки
  • Нумерованные html-списки
  • Маркированные html-списки
  • Списки определений в HTML
  • Вложенные списки
  • в HTML
  • Списки html: теги ul, ol, li, dl, dd, dt
  • Маркированные HTML списки — теги ul и li
  • Нумерованные HTML списки — теги ol и li
  • HTML списки определений — теги dl, dd, dt
  • Илон Маск рекомендует:  Перенос прикладных программ в linux

    HTML тег li

    Тег создает элемент списка.

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

    Для определения типа списка используйте CSS.

    Разница между HTML 4.01 и HTML5

    Атрибуты value был запрещен в HTML 4.01, но поддерживается в HTML5.

    Атрибуты type не поддерживаются в HTML5.

    Атрибут Описание
    type Определяет вид маркера для элемента списка
    value Определяет стартовое значение для числового маркера элементов списка

    Общие атрибуты

    HTML пример

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

    CSS стили по умолчанию

    Большинство браузеров будут отображать тег
    со следующими стилями

    HTML тег

    Тег
    определяет отдельные пункты HTML списка. Тип списка определяется соответствующими тегами: — маркированный список, — нумерованный список, — контекстное меню.

    В браузере пункты списка имеют небольшой отступ с левой стороны.

    Синтаксис

    Тег
    парный. В спецификации HTML5 закрывающий тег можно не использовать.

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

    Пример

    Результат

    Для стилизации тега
    используйте CSS свойство list-style-type.

    в HTML

    Подробнее примеры ниже.

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

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

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

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

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

    Различия между HTML 4,01 и HTML5

    Атрибут является навестить поддерживается в HTML5.

    Атрибут был Устаревшие в HTML 4,01, но поддерживается в HTML5.

    Советы и примечания

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

    Атрибуты

    Атрибут Значение Описание
    type 1
    A
    a
    I
    i
    disc
    square
    circle
    Не поддерживается в HTML5.
    Указывает, какой тип точки маркирования будет использоваться
    value number Задает значение элемента списка. Следующие элементы списка будут увеличиваться с этого числа (только для списков
      )


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

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

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

    Списки в Html коде — теги UL, OL, LI и DL

    Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня в рамках этой рубрики я хочу поговорить о разнообразных Html списках, которые можно создать на основе специально предназначенных для этого тегов UL, OL, LI и DL. С помощью пары UL и LI создаются маркированные списки, с помощью OL и LI — нумерованные, а с помощью элементов DL, DT и DD создаются так называемые листинги определений. Так же мы рассмотрим вкратце принципы создания вложенных конструкций.

    Хочу напомнить вам, что мы уже успели рассмотреть язык Html и валидатор W3C, как задаются цвета в коде вебстраниц, успели поговорить про основы современной верстки, а так же верстки табличной (тут). Кроме этого мы затронули основы формирования директивы Doctype и оформление комментариев в коде, ну и узнали как вставить в Html картинку через тег Img.

    Маркированные списки на основе тэгов UL и LI

    Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI.

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

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

    • Первая строка
    • Вторая
    • Последний элемент

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

    Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI.

    Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):

        — закрашенный кружок (по умолчанию);
          — не закрашенный кружок;
            – квадрат

    В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.

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

    1. Маркер в виде закрашенного диска
    2. Маркер в виде не закрашенного диска
    3. Квадрат

    Нумерованные списки в Html на основе тэга OL

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

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

    1. Первая строка
    2. Второй пункт
    3. Третья строка

    Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения:

        — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
          — заглавные буквы в качестве нумерации;
            — строчные буквы;
              — заглавные римские цифры;
                — строчные римские цифры;

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

              1. с нумерацией большими римскими цифрами
              2. Нумерация маленькими латинскими буквами
              3. Нумерация малыми римскими цифрами

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

              1. Первый элемент, номер которого задан в теге OL атрибутом start=»23″
              2. Следующий пункт, с номером на единицу большим
              3. Еще на единицу больше

              Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например:

              1. Первый пункт с номером один
              2. Этот элемент получит номер, указанный в атрибуте value=»32″
              3. Пункт с большим номером

              Оформление внешнего вида списков в CSS (таблицах стилей)

              Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а при помощи селекторов класса или Id, для которых прописываются соответствующие свойства.

              В правилах CSS, прописанных для этого класса или Id, указывается, какая картинка будет использоваться в качестве маркера, на каком расстоянии маркер будет отстоять от текста и еще многое. Подробности смотрите в статье про свойства таблиц стилей List style ( type, image, position).


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

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

              Специальные и вложенные списки в Html коде

              Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений.

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

              Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина).

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

              Вложенный список в Html создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий тег UL или OL.

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

              1. Первый пункт основного нумерованного
              2. Второй пункт
                • Первый элемент вложенного маркированного
                • Второй
                • Третий и последний пункт маркированного
              3. Третий элемент нумерованного

              HTML Tag

              Sharing is caring!

              Code Example

              1. First we do this,
              2. and then we do this,
              3. and then we do this.

              Display is based on list type

              An
              element must be a child element to either an

                (ordered list) element or a
                  (unordered list) element. The
                    defines a list with some kind of numbering system, so the list items within it will normally be prepended with a number, a Roman numeral, or a letter. The
                      list is almost always bulleted. List items are block-level elements and contain flow content — which means (among other things) that ehy can have other lists as their content. This is how you build a nested, or multi-level list (such as outline).

                  Атрибут type

                  Значения

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

                  Для маркированного списка, Пример
                  circle — Маркер в виде окружности.
                  • Бим
                  • Бом
                  • Бум
                  disc — Маркер в виде круга.
                  • Бим
                  • Бом
                  • Бум
                  square — Маркер в виде закрашенного квадратика.
                  • Бим
                  • Бом
                  • Бум
                  Для нумерованного списка, Пример
                  1 — Обычная числовая нумерация (1,2,3. ).
                  1. Бим
                  2. Бом
                  3. Бум
                  A — Нумерация по заглавным буквам латинского алфавита (A,B,C. ).
                  1. Бим
                  2. Бом
                  3. Бум
                  a — Строчные буквы латинского алфавита (a,b,c. ).
                  1. Бим
                  2. Бом
                  3. Бум
                  I — Римские цифры, но написанные заглавными буквами латиницы (I,II. VI. IX. )
                  1. Бим
                  2. Бом
                  3. Бум
                  i — Римские цифры написанные строчной латиницей (i,ii. vi. ix. )
                  1. Бим
                  2. Бом
                  3. Бум

                  Значение по умолчанию: Для маркированных списков — disc. Для нумерованных — 1.

                  Синтаксис

                  Обязательный атрибут: нет.

                  Пример HTML: применение атрибута type

                  Результат. Применение атрибута type.

                  Поддержка версиями HTML

                  Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
                  Поддержка: Частично Нет Частично Нет


                  В HTML 4.01 и XHTML 1.0 использовать атрибут type допускается только с Transitional и Frameset, в противном случае будет невалидный код. А вообще, рекомендуется применять стили (CSS).

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

                  Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
                  Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
                  Поддержка: Да Частично Да Да Да Да

                  Internet Explorer, начиная с 8-й версии, не поддерживает значения для упорядоченных списков, отображает списки как неупорядоченные.

                  Тег li

                  Описание тега LI

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

                  Тег
                  располагается внутри тега

                    или
                      , которые создают маркированный и нумерованный списки соответственно.

                  Используется, но не обязателен

                  Атрибуты тега LI

                  Type – устанавливает тип маркировки пунктов списка, если располагается внутри тега

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

                  — disk — закрашенный круг
                  — circle – не закрашенный круг
                  — square — квадрат

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

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

                  — disk — для маркированного списка
                  — 1 — для нумерованного списка

                  «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd» >

                  «Content-Type» content= «text/html; charset=windows-1251» >
                  Тег

                  Используются разные маркеры

                  • «circle» > Привет
                  • Пока
                  • Здравствуйте
                  • «square» > До свидания

                  Пункты нумерованного списка обозначены заглавными буквами

                    «A» >
                  1. «2» > 2-я буква алфавита
                  2. 3-я
                  3. 4-я
                  4. «20» > 2 0-я буква алфавита

                  Пункты списка пронумерованы арабскими цифрами

                  1. Один
                  2. Два
                  3. «I» > Три ( Вид нумерации — большие римские числа )
                  4. Четыре

                  HTML :: Cписки

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

                  В HTML 5 используется три вида списков: нумерованный, маркированный и список определения.

                  По умолчанию пункты списка нумеруются браузером по порядку, начиная с единицы. Если нумерацию нужно начать не с единицы, то используется атрибут start , который задает число, с которого будет начинаться нумерованный список. В качестве значения атрибут принимает целые числа. Можно также изменить порядок нумерации на обратный. Для этого служит атрибут reversed , который используется без значений. Атрибут введен в HTML 5 и работает во всех браузерах, кроме IE .

                  Имеется также возможность устанавливать вид маркера нумерованного списка. Для этого используется атрибут type , который может принимать значения «A | a | I | i | 1» , которые, соответственно, означают:

                  • заглавные латинские буквы,
                  • строчные латинские буквы,
                  • заглавные римские цифры,
                  • строчные римские цифры,
                  • арабские цифры.

                  Поскольку все перечисленные значения, и не только, могут быть с легкостью установлены через стили CSS , использование атрибута type , по мнению автора, не целесообразно, хотя и допускается в HTML 5 .

                  Использование нумерованного списка показано в примере №1.

                  Пример №1. Использование элемента ‘ol’

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

                  Маркированные html-списки

                  Маркированный список вместо цифр и букв использует маркеры в виде кружков. Изменить внешний вид маркеров можно при помощи стилей CSS . Что касается атрибута type , то его в HTML 5 убрали. Так что, остались только универсальные атрибуты и атрибуты-события.

                  Код, содержащий элемент ‘ul’ , показан в примере №2.

                  Пример №2. Использование элемента ‘ul’

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

                  формируется парным тегом (от англ. definition list – ). Сам элемент ‘dl’ используется, как контейнер для пунктов списка. Каждый такой пункт, в свою очередь, состоит из элементов ‘dt’ (от англ. definition term – определяемый термин) и ‘dd’ (от англ. definition description – подробное описание), сформированных, соответственно, парными тегами и . Первый из них содержит определяемый термин, а второй – определение термина.


                  Давайте для наглядности посмотрим пример №3.

                  Пример №3. Использование элемента ‘dl’

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

                  Иногда возникает необходимость создания , которые представляют собою списки, расположенные в пунктах внешнего списка. Рассмотрим создание вложенных списков на примере №4.

                  Пример №4. Использование вложенных списков

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

                  в HTML

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

                  Для начала сделаем простой пример – тип маркеров будет отключен, пунктам будет задан цвет заднего фона, цвет и толщина рамки и длина, так как иначе длина пункта растянулась бы на всё поле.

                  А теперь сделаем вертикальное меню. Для этого нужно прописать две стилевых группы – для пунктов в обычном состоянии и для пунктов на которые навели курсор мышки – то есть описать событие :hover

                  Списки html: теги ul, ol, li, dl, dd, dt

                  Здравствуйте, уважаемые читатели! Сегодня в качестве продолжения цикла статей рубрики «Основы html» я хочу познакомить вас с алгоритмом создания списков html при помощи тегов ul и li (маркированный список), ol и li (нумерованный список), dl, dt, dd (список определений).

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

                  Маркированные HTML списки — теги ul и li

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

                  • 1 элемент маркированного списка
                  • 2 элемент маркированного списка
                  • 3 элемент маркированного списка

                  По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square. Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок. Если дополнить данными атрибутами тег ul, то получим следующие варианты:

                  • 1 элемент маркированного списка
                  • 2 элемент маркированного списка
                  • 3 элемент маркированного списка
                  • 1 элемент маркированного списка
                  • 2 элемент маркированного списка
                  • 3 элемент маркированного списка
                  • 1 элемент маркированного списка
                  • 2 элемент маркированного списка
                  • 3 элемент маркированного списка

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

                  • 1 элемент маркированного списка
                  • 2 элемент маркированного списка
                  • 3 элемент маркированного списка

                  Нумерованные HTML списки — теги ol и li

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

                  • A — заглавные латинские буквы;
                  • a — строчные латинские буквы;
                  • I — заглавные римские цифры;
                  • i — строчные римские цифры;
                  • 1 — арабские цифры
                  1. 1 элемент нумерованного списка
                  2. 2 элемент нумерованного списка
                  3. 3 элемент нумерованного списка
                  1. 1 элемент нумерованного списка
                  2. 2 элемент нумерованного списка
                  3. 3 элемент нумерованного списка
                  1. 1 элемент нумерованного списка
                  2. 2 элемент нумерованного списка
                  3. 3 элемент нумерованного списка
                  1. 1 элемент нумерованного списка
                  2. 2 элемент нумерованного списка
                  3. 3 элемент нумерованного списка
                  1. 1 элемент нумерованного списка
                  2. 2 элемент нумерованного списка
                  3. 3 элемент нумерованного списка

                  Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 3, 2, 1. Это осуществляется с помощью атрибута reserve тега ol.

                  1. 1 элемент нумерованного списка
                  2. 2 элемент нумерованного списка
                  3. 3 элемент нумерованного списка

                  Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I):

                  1. 1 элемент нумерованного списка
                  2. 2 элемент нумерованного списка
                  3. 3 элемент нумерованного списка
                  1. 1 элемент нумерованного списка
                  2. 2 элемент нумерованного списка
                  3. 3 элемент нумерованного списка

                  HTML списки определений — теги dl, dd, dt

                  Еще один вид списков html — список определений. Он формируется следующим образом. Содержание этого списка заключается между открывающим и закрывающим тегами dl, которые образуют контейнер. Тег dt определяет какой-либо термин, а dd — описание этого термина.

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

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

                  Кстати, современные реалии таковы, что язык html нельзя рассматривать в отрыве от css, поэтому, чтобы не пропустить эти важнейшие материалы, подпишитесь на обновление блога через RSS-ленту либо по e-mail. На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL