Почти на каждой странице в интернете используются списки: от товаров на WB до менюшек. Списки бывают 3 типов: нумерованные, маркированные, списки определений
Нумерованные списки
Название говорит само за себя. Это те списки, которые пронумерованы от 1 и до бесконечности, хотя если пошаманить с CSS, то нумерацию можно и поменять. Обозначаются тегами "<ol></ol>" для открытия самих списков и тегами "<li></li>" для обозначения элементов. А теперь давайте разберем пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<ol>
<li>1 Пункт</li>
<li>2 Пункт</li>
<li>3 Пункт</li>
</ol>
</div>
</body>
</html>
Маркированные списки
Название тоже говорящее, поэтому не вижу смысла много говорить. Обозначаются тегами "<ul></ul>" для открытия самих списков и теми же тегами "<li></li>" для обозначения элементов.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<ul>
<li>1 Пункт</li>
<li>2 Пункт</li>
<li>3 Пункт</li>
</ul>
</div>
</body>
</html>
Стили нумерованных списков
Я думаю, вы согласитесь, что так списки выглядят не презентабельно и хотелось бы с ними что-то сделать. Но спойлер, красивыми они у нас все равно не получатся, потому что знаний по прежнему не хватает. И можем мы разве что слегка видоизменять их.
Для дальнейших манипуляций над списком мы прибегнем к такой адской машине как CSS.
Для начала мы откроем стиль: напишем его название и откроем фигурные скобки (названием будут теги, классы или айди, но поскольку имеем мы только теги их и будем использовать).
ol { }
С помощью стилей можно поменять нумерацию у нумерованных списков, применяя стиль list-style-type: и вариаций довольно много.
ol { list-style-type: decimal-leading-zero; } - все числа нумерации начинаются с 0 (01, 02, 03...)
ol { list-style-type: armenian; } - нумерация по Армянскому алфавиту
ol { list-style-type: georgian; } - нумерация по Грузинскому алфавиту
ol { list-style-type: lower-alpha; } - нумерация по Латинскому алфавиту в нижнем регистре
ol { list-style-type: lower-greek; } - нумерация по Греческому алфавиту в нижнем регистре
ol { list-style-type: lower-latin; } - нумерация по Латинскому алфавиту в нижнем регистре
ol { list-style-type: lower-roman; } - нумерация Римскими цифрами в нижнем регистре
ol { list-style-type: upper-alpha; } - нумерация по Латинскому алфавиту в верхнем регистре
ol { list-style-type: upper-roman; } - нумерация Римскими цифрами в верхнем регистре
Некоторые теги имеют свои атрибуты, вот например тег <ol> имеет атрибут start:
<ol>
<li> Пункт</li>
<li> Пункт</li>
<li> Пункт</li>
</ol>
<p></p>
<ol start="4">
<li> Пункт</li>
<li> Пункт</li>
</ol>
Стили маркированных списков
Здесь в не так уж и сильно отличается от нумерованных списков. Только тут мы можем поменять маркеры и вот опять примеры:
ul { list-style-type: disc; } - черный круг.
ul { list-style-type: circle; } - пустой круг.
ul { list-style-type: square; } - черный квадратик.
ul { list-style-type: none; } - отсутствуют и маркеры, и нумерация.
Также можно вместо маркера использовать картинку только стиль слегка изменится: list-style-image: url ("адрес изображения из интернета")
И если Вам понадобится сделать маркированный список с изображениями а в конкретном пункте списка оставить маркер можно убрать с него изображение с помощью стиля list-style-image: none; а маркер останется ведь у изображения приоритет всегда выше.