Список html с цифрами, с буквами, все виды списков примеры

Как можно представить html без списков html !? Какие виды/типы списков бывает в html!? Сколько вариантов написать список в html. Попробуем вывести вообще все списки, какие только существует на нашей странице!

Всё о списках html

1. Что такое списки html!?
2. Видео о списках html
3. Маркированный список <ul> -> по умолчанию
   Маркированный список <ul> -> list-style: square;
   Маркированный список <ul> -> list-style: circle;
   Маркированный список <ul> -> любой знак
      Вложенный список html
   
4. Нумерованный список в html
5. Многоуровневый Нумерованный список в html
6. Список html маркирован буквами!
7. Список html маркирован строчными буквами
8. Список который маркирован римскими цифрами
9. Выпадающий список html

Что такое списки html все виды/типы списков!?

Список в html - это список, который имеет свои теги! В зависимости от тега выводится какие-то атрибуты данного тега автоматически! Т.е. например не нужно выводить нумерацию построчно - это очень удобно! Все типи списков, которые вспомнил:

1. Маркированный список <ul>

2. Нумерованный список <ol>

3. Список определений <dl>

4. Вложенный список

5. Многоуровневый нумерованный список

6. Выпадающий список html

Списки html нумерованный буквенный, маркированный

Маркированный список <ul>

Маркированный список, создается с помощью тегов ul + li и слева от списка будет показываться декоративный элемент


disc — маркеры в виде закрашенного кружка;

square — квадратные маркеры.

circle — маркеры в виде незакрашенного кружка;

Маркированный список по умолчанию стиль list-style: disc;

Если стиль не переназначен, то list-style: disc; - стиль для маркированного списка html по умолчанию(т.е. его устанавливать не нужно):


<ul>

<li>Пример маркированного списка</li>

<li>По умолчанию стиль:</li>

<li>list-style: disc;</li>

<li>Т.е. это будут закрашенные точки!</li>

</ul>

Результат вывода маркированного списка html по умолчанию:

• Пример маркированного списка
• По умолчанию стиль:
• list-style: disc ;
• Т.е. это будут закрашенные точки!



Маркированный список стиль list-style: square;

Для того, чтобы декоративный элемент маркированного списка был квадратом, требуется задать стили для такого ul li

<style>

ul.какой_то _класс li {


list-style: square;

}

</style>

<ul class="какой_то _класс">


<li>Маркированный список html</li>

<li>В стилях требуется указать:</li>

<li>list-style: square;</li>

<li>Перед каждой строкой будет показываться декоративный элемент в виде квадрата</li>

</ul>

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

• Маркированный список html
• В стилях требуется указать:
• list-style: square;
• Перед каждой строкой будет показываться декоративный элемент в виде квадрата



Маркированный список стиль list-style: circle ;

Llz отображение точки перед текстом в маркированном списке в виде прозрачного круга - нужно указать стили - list-style: circle ;


<style>

ul.какой_то_класс li {

list-style: square;

}

</style>

<ul class="какой_то_класс ">

<li>Маркированный список html</li>

<li>Требуется добавить стили:</li>

<li>list-style: circle ;</li>

<li>Точка перед текстом будет в виде прозрачного круга/li>

</ul>

Результат вывода Маркированного списка html стиль list-style: circle ;:

• Маркированный список html
• Требуется добавить стили:
• list-style: circle ;
• Точка перед текстом будет в виде прозрачного круга/li>



Маркированный список <ul> -> любой знак

Вместо знака маркированного текст можно установить свой значок:

<style>

ul.li_4 li {

list-style: none;

text-indent: -1em;

}

ul.li_4 li::before {

content: "\25ba";

padding-right: 5px;

color: red;

background: unset;

margin: unset;

width: unset;

height: unset;

line-height: unset;

position: unset;

}

</style>

<ul class="no_li li_4">

<li>Замена знака маркированного списка</li>

<li>На свой</li>

<li>Можно поставить любой из таблицы символов...</li>

</ul>

Результат установки своего знака, вместо знака маркированного по умолчанию:

• Замена знака маркированного списка
• На свой
• Можно поставить любой из таблицы символов...



Вложенный список html

Если вложить список html в список html? то получится вложенный список html!

Как по мне - немного скучно... многоуровневый цифровой интереснее...

<ul class="no_li li_3">

   <li>Вложенный список html </li>

   <li>Список в списке...

       <ul class="no_li li_3">

           <li>Вложенный список html </li>

           <li>Требуется добавить стили:</li>

           <li>list-style: circle ;</li>

           <li>Точка перед текстом будет в виде прозрачного круга/li>

       </ul>

   </li>

   <li>list-style: circle ;</li>

   <li>Точка перед текстом будет в виде прозрачного круга/li>

</ul>

Результат:

• Вложенный список html
• Список в списке...
  
  • Вложенный список html
  • Требуется добавить стили:
  • list-style: circle ;
  • Точка перед текстом будет в виде прозрачного круга/li>
• list-style: circle ;
• Точка перед текстом будет в виде прозрачного круга/li>

Нумерованный список в html

Создание нумерованного списка, просто заменяем тег "ul" на тег "ol", но если у вас где-то уже прописаны стили для нумерованного списка... номера вы видите слева. То нам придется добавить, как было выше сделано list-style: decimal;


<style>.decimal li{ list-style: decimal; }</style>

<ol class="decimal">

<li>Список html</li>

<li>Номерованный по порядку</li>

<li>Числа стоят рядом со строкой!</li>

</ol>

Результат вывод номерованного списка html :

1. Список html
2. Номерованный по порядку
3. Числа стоят рядом со строкой!

Многоуровневый Нумерованный список в html

Как сделать Многоуровневый Нумерованный список в html!?

<ol class="example">

   <li>пункт</li> <!-1.->

   <li>пункт

       <ol>

           <li>пункт</li> <!-2.1.->

           <li>пункт</li> <!-2.2.->

           <li>пункт

               <ol>

                   <li>пункт</li> <!-2.3.1.->

                   <li>пункт</li> <!-2.3.2.->

                   <li>пункт</li> <!-2.3.3.->

               </ol>

           </li> <!-2.3.->

           <li>пункт</li> <!-2.4.->

       </ol>

   </li> <!-2.->

   <li>пункт</li> <!-3.->

   <li>пункт</li> <!-4.->

</ol>

<style>

ol.example {

list-style: none;

counter-reset: li;

}

.example li:before {

counter-increment: li;

content: counters(li,".") ". ";

}

</style>

Результат вывода многоуровневого нумерованного html списка

1. пункт
2. пункт
   
   1. пункт
   2. пункт
   3. пункт
      
      1. пункт
      2. пункт
      3. пункт
   4. пункт
3. пункт
4. пункт

Список html маркирован латинскими прописными буквами!

Если требуется вывести маркированный список html латинскими ПРОПИСНЫМИ буквами, то для этого ставим "ol" тип...

type="A"(<ol type="A">)

Но у нас особый случай, поскольку уже було сказано, что стили прилеплены к спискам, то нам нужно вывести конкретно для этого примера, прямо здесь, поэтому выведем латинские ПРОПИСНЫЕ буквы

отдельным стилем list-style: upper-latin;:

<style> .latin li{ list-style: upper-latin; }</style>


<ol class="latin">

<li>Здесь текст</li>

<li>Который про маркирован</li>

<li>Прописными буквами латинского алфавита</li>

</ol>

Результат вывода списка html латинским ПРОПИСНЫМИ буквами:

1. Здесь текст
2. Который про маркирован
3. Прописными буквами латинского алфавита

Список html маркирован строчными буквами!

Для того, что про маркировать список строчными буквами латинского алфавита - нужно использовать

type="a"(<ol type="a">)

Но этот вариант у нас не сработает, ка ки выше уже було продемонстрировано, поэтому... добавим отельные стили:

lower-latin;

Стили:

<style> .lower_latin li{ list-style: lower-latin; }</style>

<ol class="lower_latin">

<li>Здесь список html</li>

<li>Который маркирован</li>

<li>Строчными буквами латинского алфавита</li>

</ol>

Результат вывод строчных букв в списках html

1. Здесь список html
2. Который маркирован
3. Строчными буквами латинского алфавита

Список который про маркирован римскими цифрами

Надеюсь к 10 пункту вы выучили матчасть!?

Для того, что про маркировать список римскими цифрами в тип вставляем римскую цифру 1 = I

type="I" Все тоже, только теперь нам потребуется list-style: upper-roman;
1. Здесь текст
2. Который про маркирован
3. римскими цифрами

Выпадающий список html

Выпадающий список - это список html, который выпадает по нажатию на его кнопку... используемые теги : select и option

Код выпадающего списка на html:

<select>

   <option>здесь пункт 1</option>

   <option>здесь пункт 2</option>

   <option>здесь пункт 3</option>

</select>

Результат вывод выпадающего списка на html

здесь пункт 1 здесь пункт 2 здесь пункт 3
Еще мы говорили о выпадающие списке на html, сформированным с помощью php!

Оставить комментарийCOMMENTS+

Сообщений пока нет - Вы можете стать первым

BBcode

Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть

+ =