Опублікувати статтю

Списки в HTML

Списки в HTML
HTML підтримує впорядковані списки, невпорядковані списки, і списки визначень. Відрізняються ці різновиди списків лише способом оформлення. Перед пунктами невпорядкованих списків зазвичай ставляться символи - буллет (bullets), наприклад, точки, ромбики і т.п., в той час як пунктам впорядкованих списків передують їх номера.

невпорядковані списки

Невпорядкований список є списком елементів . Елементи списку маркуються за допомогою спеціальних знаків (зазвичай невеликий чорний круг).

Невпорядкований список починається з тега <ul>. Кожен елемент списку починається з тега <li>.

<html>
<body>

<h4> Невпорядкований список : </h4>
<ul>
<li> елемент 1 </li>
<li> елемент 2 </li>
<li> елемент 3 </li>
</ ul >

</body>
</html>

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

Впорядкований список також є списком елементів . Елементи списку маркуються за допомогою чисел або букв.

Впорядкований список починається з тега <ol> . Кожен елемент списку починається з тега <li> . У тега <ol> може бути два атрибути : start (визначає перше число, з якого починається нумерація пунктів) і type (визначає стиль нумерації пунктів). Може мати значення:

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

<html>
<body>

<h4> Впорядкований список : </h4>
<ol>
<li> елемент 1 </li>
<li> елемент 2 </li>
<li> елемент 3 </li>
</ ol >

</body>
</html>

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

списки визначень

Список визначень не є списком елементів . Це список термінів і визначень термінів.

Список визначень починається з тега <dl> . Кожен термін списку визначень починається з тега <dt> . Кожне визначення списку починається з тега <dd> .

<html>
<body>

<dl>
<dt> елемент 1 </dt>
<dd> опис елемента 1 </dd>
<dt> елемент 2 </dt>
<dd> опис елемента 2 </dd>
</ dl >

</body>
</html>

Усередині визначення списку визначень ( тег <dd> ) можна поміщати параграфи, переноси рядків, зображення, посилання, інші списки, і т.д.

Різні типи упорядкованих списків

<html>
<body>

<h4> Список проектів з цифрами: </h4>
<ol>
<li> ehow.com.ua </li>
<li> ya.ru </li>
<li> google.com </li>
</ ol >

<h4> Список з літерами : </h4>
<ol type=”A”>
<li> ehow.com.ua </li>
<li> ya.ru </li>
<li> google.com </li>
</ ol >

<h4> Список з літерами нижнього регістру : </h4>
<ol type=”a”>
<li> ehow.com.ua </li>
<li> ya.ru </li>
<li> google.com </li>
</ ol >

<h4> Список з римськими цифрами: </h4>
<ol type=”I”>
<li> ehow.com.ua </li>
<li> ya.ru </li>
<li> google.com </li>
</ ol >

<h4> Список з римськими цифрами в нижньому регістрі : </h4>
<ol type=”i”>
<li> ehow.com.ua </li>
<li> ya.ru </li>
<li> google.com </li>
</ ol >

</body>
</html>

Різні типи невпорядкованих списків

<html>
<body>

<h4> Список із позначкою колом : </h4>
<ul type=”disc”>
<li> ehow.com.ua </li>
<li> ya.ru </li>
<li> google.com </li>
</ ul >

<h4> Список із позначкою окружністю : </h4>
<ul type=”circle”>
<li> ehow.com.ua </li>
<li> ya.ru </li>
<li> google.com </li>
</ ul >

<h4> Список із позначкою квадратом : </h4>
<ul type=”square”>
<li> ehow.com.ua </li>
<li> ya.ru </li>
<li> google.com </li>
</ ul >

</body>
</html>

вкладений список

<html>
<body>

<h4> Вкладений список : </h4>
<ul>
<li> елемент 1 </li>
<li> елемент 2 </li>
<ul>
<li> елемент 2.1 </li>
<li> елемент 2.2 </li>
</ ul >
<li> елемент 3 </li>
</ ul >

</body>
</html>

<html>
<body>

<h4> Вкладений список : </h4>
<ul>
<li> елемент 1 </li>
<li> елемент 2 </li>
<ul>
<li> елемент 2.1 </li>
<li> елемент 2.2 </li>
<ul>
<li> елемент 2.2.1 </li>
<li> елемент 2.2.2 </li>
</ ul >
</li>
</ ul >
</li>
<li> елемент 3 </li>
</ ul >

</body>
</html>

список визначень

<html>
<body>

<h4> Список визначень: </h4>
<dl>
<dt> елемент 1 </dt>
<dd> опис елемента 1 </dd>
<dt> елемент 2 </dt>
<dd> опис елемента 2 </dd>
</ dl >

</body>
</html>

Теги списків тег та його Опис

<ol> Визначає впорядкований список
<ul> Визначає невпорядкований список
<li> Визначає елемент списку
<dl> Визначає список визначень
<dt> Визначає термін визначення
<dd> Визначає опис визначення
<dir> Не рекомендується. Використовуйте замість цього <ul>
<menu> Не рекомендується. Використовуйте замість цього <ul>

Коментарі

Написати коментар



Схожі записи

Кращі статті розділу: