Основные виды списков
Абзацы которые начинаются с помеченных значками (маркированный список), цифрами (нумерованный список) или список определений — <dl> — состоит из пар термин <dt> — <dd>, называются списками.
Списки играют важную роль для создания html – страниц , с помощью списков можно построить вертикальное и горизонтальное меню , создать красивое меню навигации поиска по сайту и т.д.
- Маркированный список .
- Нумерованные списки .
- Списки определений .
Маркированный список
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Маркированный список</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ul {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Маркированный список</h1>
<ul>
<li>Первый список</li>
<li>Второй список</li>
<li>Третий список</li>
</ul>
</body>
</html>Маркированный список
Тег <ul> имеет атрибут type , позволяющий задать значок , которым помечаются строки списка .
Значения атрибута type
| Значения | Описание | |
|---|---|---|
| disc | Маркер в форме кружков с заливкой | |
| circle | Маркер в форме кружков без заливки | |
| square | Маркер в форме квадрата с заливкой | |
| none | Убирает все маркеры | |
Маркер в форме кружков без заливки
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Маркер без заливки</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ul {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Маркер без заливки</h1>
<ul style="list-style-type: circle">
<li>Первый список</li>
<li>Второй список</li>
<li>Третий список</li>
</ul>
</body>
</html>Маркер без заливки
Маркер в форме квадрата с заливкой
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Маркер в форме квадрата</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ul {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Маркер в форме квадрата</h1>
<ul style="list-style-type: square">
<li>Первый список</li>
<li>Второй список</li>
<li>Третий список</li>
</ul>
</body>
</html>Маркер в форме квадрата
Список без маркера
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Список без маркера</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ul {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Список без маркера</h1>
<ul style="list-style-type: none">
<li>Первый список</li>
<li>Второй список</li>
<li>Третий список</li>
</ul>
</body>
</html>Список без маркера
Нумерованные списки
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Нумерованные списки</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ol {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Нумерованные списки</h1>
<ol>
<li>Первый список</li>
<li>Второй список</li>
<li>Третий список</li>
</ol>
</body>
</html>Нумерованные списки
Тег <ol> имеет атрибут type , позволяющий выделить пункты списка латинскими буквами , арабскими и римскими цифрами .
Значения атрибута type
| Значения | Описание | |
|---|---|---|
| A | Пункты нумеруются прописными латинскими буквами | |
| a | Пункты нумеруются строчными латинскими буквами | |
| I | Пункты нумеруются прописными римскими цифрами | |
| i | Пункты нумеруются строчными римскими цифрами | |
| 1 | Пункты нумеруются строчными арабскими цифрами | |
Прописные латинские буквы
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Прописные латинские буквы</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ol {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Прописные латинские буквы</h1>
<ol type="A">
<li>Первый список</li>
<li>Второй список</li>
<li>Третий список</li>
</ol>
</body>
</html>Прописные латинские буквы
Строчные латинские буквы
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Строчные латинские буквы</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ol {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Строчные латинские буквы</h1>
<ol type="a">
<li>Первый список</li>
<li>Второй список</li>
<li>Третий список</li>
</ol>
</body>
</html>Строчные латинские буквы
Нумерация прописными римскими цифрами
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Прописные римские цифры</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ol {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Прописные римские цифры</h1>
<ol type="I">
<li>Первый список</li>
<li>Второй список</li>
<li>Третий список</li>
</ol>
</body>
</html>Прописные римские цифры
Нумерация строчными римскими цифрами
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Строчные римские цифры</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ol {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Строчные римские цифры</h1>
<ol type="i">
<li>Первый список</li>
<li>Второй список</li>
<li>Третий список</li>
</ol>
</body>
</html>Строчные римские цифры
Нумеруются арабскими цифрами
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Нумеруются арабскими цифрами</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ol {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Нумеруются арабскими цифрами</h1>
<ol type="1">
<li>Первый список</li>
<li>Второй список</li>
<li>Третий список</li>
</ol>
</body>
</html>Нумеруются арабскими цифрами
Атрибут start – тега <ol>
Атрибут start – тега <ol> задает номер , с которого будет начинаться нумерация строк списка .
Атрибут start
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Атрибут start</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ol {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Атрибут start</h1>
<ol type="1" start="5">
<li>Пятая страница</li>
<li>Шестая страница</li>
<li>Седьмая страница</li>
</ol>
</body>
</html>Атрибут start
Атрибут value – тега <ol>
Атрибут value устанавливает номер, с которого будет начинаться список . Атрибут value применяется только для нумерованных списков, когда тег <li> находится внутри контейнера <ol>. При этом не имеет значения, какой тип списка установлен с помощью type , атрибут value одинаково работает и с римскими и с арабскими числами .
Атрибут value
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Атрибут value</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ol {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Атрибут value</h1>
<ol>
<li>Первая страница</li>
<li value="5">Пятая страница</li>
<li>Шестая страница</li>
</ol>
</body>
</html>Атрибут value
Атрибут reversed – тега <ol>
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Атрибут reversed</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
ol {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Атрибут reversed</h1>
<ol reversed>
<li>Третья страница</li>
<li>Вторая страница</li>
<li>Первая страница</li>
</ol>
</body>
</html>Атрибут reversed
Списки определений
Списки определений состоит из пар термин – определение . Начинается с помощью тега <dl> , термин – с помощью тега <dt> , что то вроде заголовка , определение – с помощью тега <dd> .
Списки определений
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Списки определений</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
dt,dd {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Списки определений</h1>
<dl>
<dt>HTML (HyperText Markup Language)</dt>
<dd>
Язык разметки документов во Всемирной паутине .
Большинство Web – страниц содержат описание разметки на языке HTML .
</dd>
<dt>CSS (Cascading Style Sheets)</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>
</body>
</html>Списки определений
