Списки
Списки используются для структурирования информации. Существуют три вида списка: маркированный, нумерованный и для определений.
Маркированный список - это неупорядоченный список, в котором элементы расположены в любом произвольном порядке. Маркированный список делается при помощи тега <ul>. Между тегами <ul> и </ul> помещают элементы списка <li></li>. Рассмотрим на примере, как сделать такой список:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Маркированный список</title>
</head>
<body>
<h2>Категории</h2>
<ul>
<li>Фото</li>
<li>Музыка</li>
<li>Видео</li>
</ul>
</body>
</html>Пример кода
Маркированному списку, тегу <ul> можно задать атрибут type со значением: disc, circle или square. Атрибут type меняет вид маркера. Если атрибут не задан, то умолчанию будет маркер с закрашенным кружочком.
Значения для атрибута type
- disc - закрашенный кружочек
- circle - пустой кружочек
- square - закрашенный квадрат
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут type для маркированного списка</title>
</head>
<body>
<h2>Животные</h2>
<ul type="square">
<li>Кот</li>
<li>Собака</li>
<li>Рыбка</li>
</ul>
</body>
</html>Пример кода
Нумерованный список создаётся при помощи тегов <ol> и </ol>. Также как и в маркированном списке используются элементы списка <li></li>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нумерованный список</title>
</head>
<body>
<h2>Фрукты</h2>
<ol>
<li>Яблоки</li>
<li>Апельсины</li>
<li>Бананы</li>
</ol>
</body>
</html>Пример кода
В нумерованном списке по умолчанию нумерация происходит арабскими цифрами (1, 2, 3...). Мы можем изменить тип нумерации через атрибут type. Ниже приведено какие значения можно использовать:
Значения для атрибута type
- A - заглавные латинские буквы (A, B, C...)
- a - строчные латинские буквы (a, b, c...)
- I - большие римские буквы (I, II, III...)
- i - маленькие римские буквы (i, ii, iii...)
В примере я приведу нумерованный список, у которого нумерация будет заглавными латинскими буквами.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут type для нумерованного списка</title>
</head>
<body>
<h2>Музыкальные жанры</h2>
<ol type="A">
<li>Поп</li>
<li>Джаз</li>
<li>Рок-н-ролл</li>
</ol>
</body>
</html>Пример кода
Мы можем задать нумерацию не с единицы, а с другого числа. Реализовать это можно при помощи атрибута start с нужным нам значением числа. Можно применять вместе с атрибутом type, тогда будет начинаться нумерация с нужным нам типом маркера.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут start для нумерации</title>
</head>
<body>
<h2>Улицы</h2>
<ol start="3" type="I">
<li>ул. Тургенева</li>
<li>ул. Пушкина</li>
<li>ул. Ломоносова</li>
</ol>
</body>
</html>Пример кода
Список определений нужен для того чтобы написать термин и его определение. Список заключают в теги <dl></dl>. Внутри <dl> и </dl> помещают термин (<dt></dt>) и за ним определение <dd></dd>). В примере мы можем увидеть как делается такой список:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список определений</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language (язык гипертекстовой разметки)</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets (каскадные таблицы стилей)</dd>
</dl>
</body>
</html>Пример кода
Чтобы сделать вложенный список для маркированного списка нужно между элементами <li> и </li> поместить сам список:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вложенный маркированный список</title>
</head>
<body>
<h2>Меню</h2>
<ul>
<li>Веб-разработка
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Веб-программирование
<ul>
<li>JavaScript</li>
<li>PHP</li>
<li>MySQL</li>
</ul>
</li>
</ul>
</body>
</html>Пример кода
Для нумерованного списка делается таким же способом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вложенный нумерованный список</title>
</head>
<body>
<h2>Страны мира</h2>
<ol>
<li>Европа
<ol>
<li>Германия</li>
<li>Великобритания</li>
<li>Бельгия</li>
</ol>
</li>
<li>Азия
<ol>
<li>Израиль</li>
<li>Монголия</li>
<li>Россия</li>
</ol>
</li>
</ol>
</body>
</html>Пример кода
Обновлён: 19.10.2024 16:41:46
0 Комментарии