На багатьох HTML-сторінках в тексті можна побачити списки. З їх допомогою створюють меню, інструкції, покрокові алгоритми, систематизують інформацію та виконують багато іншого. Список HTML створюється за допомогою мови текстової розмітки. Для цього застосовується трохи тегів. Це одна з найпоширеніших форм представлення інформації в стислому вигляді і в той же час наочно.
Списки переважно використовуються в наступних випадках:
- надання інформації в єдиній структурі зі зручним сприйняттям;
- спрощення складних послідовних процесів;
- створення структур з змісту, пунктами і поясненнями.
Списки існують в трьох різновидах:
- нумеровані;
- марковані;
- списки визначень.
нумерований список
Нумерація зручна при перерахуванні елементів, розташованих по порядку. Список HTML відкривається і закривається тегами lt; ol> і lt; / Ol>.
Код списку буде такою:
lt; ol>
lt; li> 1елементlt; / Li>
lt; li> 2елементlt;
lt; li> 3елементlt; / Li >>
lt; / Ol>
Кожна позиція розміщується всередині тега lt; li>.
маркований список
Позиції не мають нумерації і розташовуються в довільній послідовності. Код списку схожий на попередній. Відмінність полягає лише в тому, що він розташовується всередині тега lt; ul>:
lt; ul>
lt; li> первийlt; / Li>
lt; li> второйlt; / Li>
lt; li> третійlt; / Li>
- lt; / Ul>
Маркер за замовчуванням позначається чорним кружком, але його зображення змінюється за допомогою атрибута type, наприклад, так:
lt; ul type = "square">
Аналогічним чином змінюють позначення нумерованого списку, наприклад, присвоївши атрибуту буквене значення:
lt; ol type = "A">
список визначень
Часто потрібно виділяти слова з основного тексту і давати їм пояснення. Для цього робиться список елементів з їх визначеннями. Код відкривається і закривається тегами lt; dl> і lt; / Dl>. Усередині розташовані по порядку елементи, укладені в пару lt; dt> і lt; / Dt>. Часто їх додатково виділяють тегами lt; strong> ... lt; / Strong>. Після кожного елемента розташовані пояснення, обрамлені парними lt; dd> ... lt; / Dd>. В цілому код виглядає так:
lt; h2> DefinitionListlt; / H2>
lt; dl>
lt; dt> WWW lt; / Dt>
lt; dd> WWW являє всесвітню павутину lt; / Dd>
lt; dt> CSS lt; / Dt>
lt; dd> CSS представляє таблиці стилів lt; / Dd>
lt; / Dl>
На сторінці результат виконання подібного коду буде виглядати так:
Випадаючий список
Іноді списки зручно робити розкриваються. У початковому стані вони закриті, і за замовчуванням видимої залишається тільки перша позиція. Схема коду у них схожа на попередні. Елементи списку створюються тегом option, вкладеним в контейнер lt; select>:
lt; select>
lt; option> el1
lt; option> el2
lt; option selected> el3
За замовчуванням завжди показується 1-й елемент. Його можна замінити, застосувавши атрибут selected тега lt; option>, як представлено в коді списку. У ньому стає видимим 3-й елемент, коли список закритий.
У деяких списках потрібно вибирати відразу кілька позицій. Для цього застосовується атрибут multiple тега lt; select>.
Як зробити список в HTML і CSS випадає
Незважаючи на те що розмітка широко використовується, вона досить обмежена. Список, що випадає HTML покращують засобами CSS. Його тип може бути будь-яким.
lt; div class = "rolls">
lt; button> products
lt; ul>
lt; a> lt; li> 1елемент lt; / Li> lt; / A>
lt; a> lt; li> 2елемент lt; / Li> lt; / A>
lt; a> lt; li> 3елемент lt; / Li> lt; / A>
lt; / Ul>
Тепер до коду потрібно застосувати властивості CSS. Їх часто використовують для ефектного оформлення, але краще спочатку приділити основну увагу забезпеченню працездатності списку. Він повинен з`являтися на екрані при наведенні курсору на заголовок.
У стилях встановлюються умови, чи потрібно відображати списку:
.rolls a {
list-style: none;
display: none}
.rolls: hover a {
display: block}
Таким чином, коли миша наводиться на кнопку, на сторінці з`явиться список, представлений на зображенні нижче.
Багаторівневі списки, що випадають
При верстці сторінок простих списків може не вистачати, а кількість інформації має бути більшим. Тут на допомогу приходять багаторівневі списки, що розкриваються. Їх структура іноді виходить складною. Щоб виключити помилки, слід уважно стежити за початковими і кінцевими тегами. Наведений раніше список визначень також є багаторівневим. Його зручно застосовувати для створення словників або пояснень термінів.
Список, що випадає HTML застосовується для того, щоб не захаращувати сторінку і розширити його можливості. В якості основного засобу досить застосовувати мову розмітки. При цьому для будь-якого рівня вкладеності код залишається однаковим.
Функціонально список HTML буде працювати, але із застосуванням таблиць стилів можна оформити його, щоб він був красивим і зручним.
висновок
Існують списки HTML різних типів. Вони створюються приблизно за однією схемою, в тому числі і вкладені. Можливості списків розширюються за рахунок стилів CSS. За допомогою стилів можна створювати унікальні засоби. При цьому важливо, щоб списки були правильно семантично оформлені, щоб полегшити собі згодом обслуговування сайтів.
