У мові розмітки гіпертексту 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%. Різні сполукиз літієм беруть участь у дефектоскопії, піротехніці, радіоелектроніці, оптоелектроніці.

  Солі літію – психотропна речовина, позитивний впливяких психічний стан людини було підтверджено лише у середині ХХ століття. Карбонат літію успішно застосовується для лікування людей з біполярним розладом, маніакальною депресією, схильних до суїциду.

  Цим пояснюється низький рівеньзлочинності в тих районах, де значною мірою літій міститься в питну воду. Механізм впливу елемента досі вивчений слабо, але є припущення, що позитивний ефект досягається регулятивною функцією активності частини ферментів, що беруть участь у перенесенні іонів натрію та калію в мозок. Баланс 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- Його чи її слова. Приклад такого діалогу з "Вишневого саду" А. П. Чехова:

                 Фірс

                 Перед нещастям теж було: і сова кричала, і самовар гудів безперечно.

                 Гаєв

                 Перед яким нещастям?

                 Фірс

                 Перед волею.

                 Цей діалог буде відображатися так:

                 ФірсПеред нещастям теж було: і сова кричала, і самовар гудів безперечно. ГаєвПеред яким нещастям? ФірсПеред волею.