В языке разметки гипертекста HTML имеется тег

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

Синтаксис тега

• Элемент #1
• Элемент #2
• Элемент #3
• ...

Этот код преобразуется в маркированный список на сайте:

• Элемент #1
• Элемент #2
• Элемент #3

Тег

требует обязательного использования закрывающего тега
.

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

Что может являться содержимым маркированного списка?

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

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

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

Например

• Элемент #1
• • Элемент #2-1
  • Элемент #2-2
  • Элемент #2-3
• Элемент #3
• ...

Атрибуты и свойства тега

Широко распространённым атрибутом тега

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

1. type="disc" - маркер в виде закрашенного кружка (это значение стоит по умолчанию). Пример с диском был чуть выше.

2. type="circle" - маркер в виде прозрачного кружка

Например:

• Элемент #1
• Элемент #2

• Элемент #1
• Элемент #2

3. type="square" - маркер в виде квадратика

Например:

• Элемент #1
• Элемент #2

А вот как это выглядит на странице:

• Элемент #1
• Элемент #2
Примечание 1

В CSS тип маркера задается с помощью атрибута list-style-type :

• ...

Рассмотрим какие значения может принимать list-style-type :

• disc - маркер в виде кружка (пример был выше)
• circle - маркер в виде прозрачного кружка (пример был выше)
• square - маркер в виде квадратика (пример был выше)
• decimal - маркер в виде нумереннового списка арабскими цифрами: 1, 2, 3, ...
• decimal-leading-zero - маркер в виде нумереннового списка арабскими цифрами с нулем в начале: 01, 02, 03, ...
• lower-roman - маркер в виде нумереннового списка римским алфавитом маленькими буквами: i, ii, iii, iv, v
• upper-roman - маркер в виде нумереннового списка римским алфавитом большими буквами: I, II, III, IV, V
• lower-latin - маркер в виде списка латинским алфавитом маленькими буквами: a, b, c, d, ...
• upper-latin - маркер в виде списка латинским алфавитом большими буквами: A, B, C, D, ...
• lower-greek - маркер в виде списка греческим алфавитом маленькими буквами
• upper-greek - маркер в виде списка греческим алфавитом большими буквами

Примечание 2

Атрибут можно назначить как самому тегу

, так и тегам
• . При задании атрибута тегу
  все элементы списка будут отображаться так, как на это указывает атрибут. Но мы можем задать тому или иному элементу своё отображение. Пример на рисунке:

  Код при этом выглядит так:

  • Элемент #1
  • Элемент #2
  • Элемент #3

  • Элемент #1
  • Элемент #2
  • Элемент #3

  Изменение маркеров тега

  с помощью CSS

  Элементы маркированного списка, создаваемые тегом

  , могут маркироваться произвольными изображениями. Для изменения типа маркера используется CSS. Например

  • Элемент #1
  • Элемент #2
  • Элемент #3

  А так это выглядит на странице:

  • Элемент #1
  • Элемент #2
  • Элемент #3

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

  , он распространяется на все элементы списка.

  Химический элемент Литий получил известность благодаря открытию Иоганна Августа Арфведсона в 1817 г в составе алюмосиликата, петалита. Затем «огнепостоянную щёлочь» нашли в других минералах естественного происхождения. Это белый, с серебристым блеском металл, который можно разрезать ножом. В таблице Менделеева занимает третье место и обозначается Li (от латинского Lithium).

  Краткое описание химического элемента Литий

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

  Исторические факты

  Первый металлический образец был получен сэром Гемфри Дэви в процессе разложения электрическим током расплава гидроксида лития. Вместе с первым результатом электролиза лития, Леопольд Гмелин, экспериментируя с литий содержащими солями, отметил окрашивание пламени в тёмно-карминовый цвет.

  Химические свойства лития

  Литий проявляет «капризные» свойства при смешивании с натрием, совсем не реагирует с расплавами калия , рубидия и цезия. В условиях комнатной температуры литий не взаимодействует с сухим воздухом или водородом . В отличие от остальных щелочных металлов, его невозможно хранить в керосине. Для данной цели используют масло Шервуда, парафин, газовый бензин или минеральное масло в герметичных жестяных ёмкостях.

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

  Применение лития

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

  Жидкий литий нашёл своё применение в ядерных реакторах, радиоактивный тритий получают при помощи изотопа лития-6. Широкое применение щелочной металл нашёл в химической промышленности, как катализатор многих процессов, компонент сплавов, из которых изготавливают холодные катоды, а также аноды источников тока.

  Фторид лития в виде монокристаллов применяют для создания высокоточных лазеров с КПД 80%. Различные соединения с литием участвуют в дефектоскопии, пиротехнике, радиоэлектронике, оптоэлектронике.

  Соли лития – психотропное вещество, положительное влияние которых на психическое состояние человека было подтверждено лишь в середине XX века. Карбонат лития с успехом применяется для лечения людей с биполярным расстройством, маниакальной депрессией, склонных к суициду.

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

  Свойство лития уменьшать депрессию и риск суицида нашло свое отражение в творчестве групп Nirvana и Evanescence. В их дискографии имеются психоделические песни под названием Lithium.

  На роли лития в активизации спящих клеток костного мозга основана надежда современной медицины в деле борьбы с раком крови. Экспериментально доказано, что литий благоприятно воздействует на области поражения генитальным герпесом. Положительно отмечено применения Li в комплексе лечения гипертонии и диабета. Безусловна эффективность в рамках предупреждения склероза и заболеваний сердечно-сосудистой системы.

  Присутствуя в смазочных материалах, литий позволяет осваивать Антарктиду, в условиях критически низких температур. Без этого элемента техника попросту откажет. Его рассматривают как компонент твёрдого ракетного топлива, ведь результат сгорания 1 кг твёрдого Li более десяти тысяч килокалорий, что почти в пять раз больше, чем результат сгорания 1 кг керосина.

  

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

  Хочу напомнить вам, что мы уже успели , успели поговорить про основы современной , а так же верстки табличной (). Кроме этого мы затронули основы , ну и узнали через .

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

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

  

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

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

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

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

                 

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

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

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

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

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

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

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

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

                 • Первый пункт
                 • Второй
                 • Последний

                 Но а о мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для 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 ссылку и картинку (фото) - теги IMG и A
                 Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
                 Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
                 Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
                 Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
                 Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания

                 HTML поддерживает три способа хранения и отображения списков . Любой список состоит из одного или нескольких элементов списков . Списки подразделяются на:

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

                 Только что приведенный список является маркированным и выглядит на языке HTML так:

                 • маркированные (неупорядоченные) списки;
                 • нумерованные (упорядоченные) списки;
                 • списки определений.

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

                 1. первый элемент списка;
                 2. второй элемент списка;
                 3. третий элемент списка.
                 1. первый элемент списка;
                 2. второй элемент списка;
                 3. третий элемент списка.

                 Наконец, списки определений состоят из пар термин/определение, хотя их применение гораздо шире. Пример использования списка определений для составления театрального репертуара: 1 июля А. К. Толстой. Царь Федор Иоаннович 4 июля У. Теккерей. Ярмарка тщеславия 9 июля А. Островский. Волки и овцы

                 На языке HTML это записывается так:

                 1 июля

                 А. К. Толстой. Царь Федор Иоаннович

                 4 июля

                 У. Теккерей. Ярмарка тщеславия

                 9 июля

                 А. Островский. Волки и овцы

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

                 Ингредиенты:
                 • яйцо 6 шт.
                 • ветчина 200 г
                 • масло сливочное 2 ст. ложки
                 • соль по вкусу
                 • зелень
                 Способ приготовления:
                 1. Ветчину нарезать мелкими кубиками и обжарить с маслом.
                 2. Разбить на обжаренную ветчину яйца.
                 3. Посолить и жарить на слабом огне.
                 4. Перед подачей посыпать зеленью.

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

                 1.4.2. Маркированные списки: элемент UL

                 Синтаксис : (блочный элемент) Атрибуты : , class , style , title , lang , dir , события Поддержка dir игнорируется (4.0+)

                 Элемент UL (unordered list) определяет маркированный список . Его содержимым должны быть один или несколько элементов. Обозреватели обычно отображают элементы маркированного списка с отступом вправо и с маркером перед началом элемента (см. примеры, приведенные выше). Свойство стилей list-style позволяет авторам изменять вид маркеров, запрещать их вывод и т. п.

                 1.4.3. Нумерованные списки: элемент OL

                 Синтаксис : (блочный элемент) Атрибуты : , class , style , title , lang , dir , события Поддержка : Полное соответствие стандарту (5.0+) Атрибут dir игнорируется (4.0+)

                 Элемент OL (ordered list) определяет нумерованный список . Его содержимым должны быть один или несколько элементов. Обозреватели обычно отображают элементы нумерованного списка с отступом вправо и с номером перед началом элемента (см. примеры, приведенные выше). Свойство стилей list-style позволяет авторам изменять способ нумерации элементов списка.

                 1.4.4. Элементы списков: элемент LI

                 Синтаксис : Атрибуты : , class , style , title , lang , dir , события Поддержка : Полное соответствие стандарту (5.0+) Атрибут dir игнорируется (4.0+)

                 Элемент LI (list item) определяет элемент маркированного или нумерованного списка . Он может включать в себя другие блочные элементы, в т. ч. и элементы и , позволяя тем самым создавать многоуровневые вложенные списки. Способ его отображения зависит от типа списка и может быть изменен свойством стилей list-style .

                 1.4.5. Списки определений: элементы DL, DT и DD

                 Синтаксис :

                 …

                 (блочный элемент) Атрибуты : , class , style , title , lang , dir , события Синтаксис :
                 …
                 (блочный элемент, конечный тег необязателен) Атрибуты : , class , style , title , lang , dir , события Синтаксис :
                 …
                 (блочный элемент, конечный тег необязателен) Атрибуты : , class , style ,

                 Стандарт не исключает возможности давать несколько определений одного термина или одно определение нескольким терминам, как показано в следующем примере:

                 Uniform Resource Identifier

                 Унифицированный идентификатор ресурса

                 Стандартизованная строка, указывающая на ресурс Интернета, такой как HTML-документ или дисковый файл.

                 Этот пример будет отображаться так:

                 Uniform Resource Identifier Унифицированный идентификатор ресурса Стандартизованная строка, указывающая на ресурс Интернета, такой как HTML-документ или дисковый файл.

                 Как отмечалось выше, списки определений имеют довольно широкий круг применений. Одним из них является представление диалогов, в которых элемент DT содержит имя говорящего, а DD - его или ее слова. Пример такого диалога из "Вишневого сада" А. П. Чехова:

                 Фирс

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

                 Гаев

                 Перед каким несчастьем?

                 Фирс

                 Перед волей.

                 Этот диалог будет отображаться так:

                 Фирс Перед несчастьем тоже было: и сова кричала, и самовар гудел бесперечь. Гаев Перед каким несчастьем? Фирс Перед волей.