HTML поддерживает три способа хранения и отображения списков . Любой список состоит из одного или нескольких элементов списков . Списки подразделяются на:
- списки определений.
Только что приведенный список является маркированным и выглядит на языке HTML так:
- маркированные (неупорядоченные) списки;
- нумерованные (упорядоченные) списки;
- списки определений.
Нумерованный список выглядит аналогично, но его элементы нумеруются:
- первый элемент списка;
- второй элемент списка;
- третий элемент списка.
- первый элемент списка;
- второй элемент списка;
- третий элемент списка.
Наконец, списки определений состоят из пар термин/определение, хотя их применение гораздо шире. Пример использования списка определений для составления театрального репертуара: 1 июля А. К. Толстой. Царь Федор Иоаннович 4 июля У. Теккерей. Ярмарка тщеславия 9 июля А. Островский. Волки и овцы
На языке HTML это записывается так:
- 1 июля
- А. К. Толстой. Царь Федор Иоаннович
- 4 июля
- У. Теккерей. Ярмарка тщеславия
- 9 июля
- А. Островский. Волки и овцы
Списки могут вкладываться друг в друга, причем допускается вложение списков одного типа в списки другого типа. Следующий рецепт приготовления яичницы с ветчиной демонстрирует список определений, в который вложены маркированный список (ингредиенты) и нумерованный список (способ приготовления):
Ингредиенты:- яйцо 6 шт.
- ветчина 200 г
- масло сливочное 2 ст. ложки
- соль по вкусу
- зелень
- Ветчину нарезать мелкими кубиками и обжарить с маслом.
- Разбить на обжаренную ветчину яйца.
- Посолить и жарить на слабом огне.
- Перед подачей посыпать зеленью.
Способ отображения списков зависит от обозревателя и может быть уточнен с помощью задания стиля списка .
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
Синтаксис :Стандарт не исключает возможности давать несколько определений одного термина или одно определение нескольким терминам, как показано в следующем примере:
- Uniform Resource Identifier
- Унифицированный идентификатор ресурса
- Стандартизованная строка, указывающая на ресурс Интернета, такой как HTML-документ или дисковый файл.
Этот пример будет отображаться так:
Uniform Resource Identifier Унифицированный идентификатор ресурса Стандартизованная строка, указывающая на ресурс Интернета, такой как HTML-документ или дисковый файл.Как отмечалось выше, списки определений имеют довольно широкий круг применений. Одним из них является представление диалогов, в которых элемент DT содержит имя говорящего, а DD - его или ее слова. Пример такого диалога из "Вишневого сада" А. П. Чехова:
- Фирс
- Перед несчастьем тоже было: и сова кричала, и самовар гудел бесперечь.
- Гаев
- Перед каким несчастьем?
- Фирс
- Перед волей.
Этот диалог будет отображаться так:
Фирс Перед несчастьем тоже было: и сова кричала, и самовар гудел бесперечь. Гаев Перед каким несчастьем? Фирс Перед волей.В языке разметки гипертекста HTML имеется тег
-
, используемый для создания маркированных списков. Он поддерживается всеми современными браузерами и позволяет выводить элементы в порядке, не нуждающемся в нумерации. Например, очень часть с помощью него выводятся пункты меню и все что касается списков на странице: блюд, продуктов, оборудования, инструментов и многое другое, что нужно перечислить без указания на приоритетность того или иного пункта.
- Элемент #1
- Элемент #2
- Элемент #3
- ...
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
-
- Элемент #2-1
- Элемент #2-2
- Элемент #2-3
- Элемент #3
- ...
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- ...
- 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 - маркер в виде списка греческим алфавитом большими буквами
-
. При задании атрибута тегу
-
все элементы списка будут отображаться так, как на это указывает атрибут. Но мы можем задать тому или иному элементу своё отображение. Пример на рисунке:
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Первая строка
- Вторая
- Последний элемент
- — закрашенный кружок (по умолчанию);
- — не закрашенный кружок;
- – квадрат
- Маркер в виде закрашенного диска
- Маркер в виде не закрашенного диска
- Квадрат
- Первая строка
- Второй пункт
- Третья строка
- — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
- — заглавные буквы в качестве нумерации;
- — заглавные римские цифры;
- — строчные римские цифры;
- с нумерацией большими римскими цифрами
- Нумерация маленькими латинскими буквами
- Нумерация малыми римскими цифрами
- Первый элемент, номер которого задан в теге OL атрибутом start="23"
- Следующий пункт, с номером на единицу большим
- Еще на единицу больше
- Первый пункт с номером один
- Этот элемент получит номер, указанный в атрибуте value="32"
- Пункт с большим номером
- Первый пункт
- Второй
- Последний
- Первый термин
- Описание
- Второй термин
- Его описание
- Первый пункт основного нумерованного
- Второй пункт
- Первый элемент вложенного маркированного
- Второй
- Третий и последний пункт маркированного
- Третий элемент нумерованного
Код при этом выглядит так:
Изменение маркеров тега
- с помощью CSS
Элементы маркированного списка, создаваемые тегом
-
, могут маркироваться произвольными изображениями. Для изменения типа маркера используется CSS. Например
А так это выглядит на странице:
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 — закрашенный в цвет текста кружок):
В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.
Пример маркированного списка с различными типами маркера для каждого пункта:
Нумерованные списки в Html на основе тэга OL
Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI.
Получается, что OL и UL — это служебные тэги, которые нужны только для того, чтобы указать браузеру, какой именно вид списка мы формируем (маркированный или же нумерованный). В случае нумерованного — слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку:
Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения:
Пример нумерованного списка с различными типами нумерации для каждого пункта:
При создании нумерованных списков имеется так же возможность начать нумерацию не с единицы, а с заданного в атрибуте START числа. Например:
Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например:
Оформление внешнего вида списков в CSS (таблицах стилей)
Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а , для которых прописываются соответствующие свойства.
Здесь я просто приведу пример различных маркеров для ненумерованных списков, внешний вид которых задается через отдельный файл с таблицами каскадных стилей.
Но а о мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для UL на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка — , для вложенных пунктов ненумерованного — .
Специальные и вложенные списки в Html коде
Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений.
Обычно такой вид используется (ну, или предполагалось, что он будет использоваться) для написания словарных статей, состоящих из терминов (заключенных в теги DT) и их описаний (заключенных в теги DD).
Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина).
Вообще, DL, DT и DD являются блочными тегами, причем, внутри элемента DT можно вставлять только контент со строчными тегами (получается, что внутри DT нельзя будет использовать блочные элементы заголовков и абзацев). А внутри тегов DD можно вставлять любые элементы и строчные и блочные.
Вложенный список в Html создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий тег UL или OL.
Обратите внимание, что закрывающий LI того пункта, в котором будет создан вложенный пункт, ставится лишь после всего кода вложенного списка (это очень важно для его правильного отображения на web странице). Вложенный список может выглядеть примерно, так:
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на
");">Вам может быть интересно
Как вставить в 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 для их создания
Синтаксис тега
Этот код преобразуется в маркированный список на сайте:
Тег
-
требует обязательного использования закрывающего тега
Для формирования элементов списка используется парный тег . Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.
Что может являться содержимым маркированного списка?Это могут быть различные тексты, включая одиночные слова, фразы и абзацы, изображения, вложенные списки, куски php-кода и многое другое, нуждающееся в простой маркировке.
Каждый элемент маркированного списка отступает по умолчанию на 40 пикселей вправо. Используя стили CSS, мы можем изменить отображение данного списка по своему усмотрению. Тег
-
является блочным, поэтому он занимает всю доступную для него область, ограниченную краем экрана, рамкой таблицы или другими элементами страницы.
Допускается вложения "список в списке"
Например
Атрибуты и свойства тега
Широко распространённым атрибутом тега
-
является атрибут type
, указывающий на то, как будет выглядеть маркер списка. Может принимать следующие значения
1. type="disc" - маркер в виде закрашенного кружка (это значение стоит по умолчанию). Пример с диском был чуть выше.
2. type="circle" - маркер в виде прозрачного кружка
Например:
3. type="square" - маркер в виде квадратика
Например:
А вот как это выглядит на странице:
В CSS тип маркера задается с помощью атрибута list-style-type :
Рассмотрим какие значения может принимать list-style-type :
Примечание 2
Атрибут можно назначить как самому тегу
-
, так и тегам