- Списки в HTML. Все о HTML списках
- Маркированный список
- Пример простого маркированного списка HTML
- Исходный код простого маркированного списка:
- Типы маркеров
- Положение маркера в списке
- Свой маркер в HTML списке
- Маркированный список
- HTML по теме
- Статьи по теме
- Популярные рецепты
- Популярные задачи
- Маркированный список
- HTML по теме
- Статьи по теме
- Популярные рецепты
- Популярные задачи
- Тег маркер в html
- Значения атрибута type
- Список без маркера
- Список без маркера
- Значения атрибута type
- Строчные латинские буквы
- Строчные латинские буквы
- Нумеруются арабскими цифрами
- Нумеруются арабскими цифрами
- Атрибут reversed
- Списки определений
- Списки определений
- HTML Списки
- Нумерованные списки
- Пример: Нумерованный список
- Пример: Применение атрибутов type и start.
Списки в HTML. Все о HTML списках
В HTML для создания списков используются теги группы lists. К ним относятся:
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете, нажав по названию тега.
Далее будет показана практика создания HTML списков с примером исходного кода и описанием на русском языке.
В HTML есть три типа списков: маркированный, нумерованный и список определений (терминов).
Маркированный список
Пример простого маркированного списка HTML
Исходный код простого маркированного списка:
Типы маркеров
Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square и circle. Задать тип маркера можно при помощи CSS свойства list-style-type . Тип маркера может быть задан, как для списка в целом (свойство применяется к ), так и для конкретного элемента (свойство применяется к ).
Список с разными типами маркеров:
- Disc — закрашенный круг, точка.
- Circle — окружность, пустая внутри.
- Square — квадрат.
Исходный код списка с разными типами маркеров:
Положение маркера в списке
HTML поддерживает 2 типа положений маркеров списка: внутри или снаружи. Положение маркера регулируется CSS свойством list-style-position . Положение может быть задано, как для списка в целом, так и для отдельного элемента.
Пример списка с разным положением маркеров:
Исходный код списка с разным положением маркеров:
Свой маркер в HTML списке
Использовать в качестве маркера HTML списка можно и свою картинку. Для этого используйте CSS свойство list-style-image .
Пример списка со своей картинкой в роли маркера:
Исходный код списка со своим маркером — картинкой:
Маркированный список
- , а каждый пункт списка начинается с тега
, как показано ниже.
В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.
Пример 11.1. Создание маркированного списка
Результат данного примера показан на рис. 11.1.
Рис. 11.1. Вид маркированного списка
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
- . Допустимые значения приведены в табл. 11.1
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Создание списка с квадратными маркерами показано в примере 11.2.
Результат данного примера показан на рис. 11.2.
Рис. 11.2. Вид списка с квадратными маркерами
HTML по теме
Статьи по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?
Как растянуть фон на всю ширину окна?
Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
Как открыть ссылку в новом окне?
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
Маркированный список
- , а каждый пункт списка начинается с тега
, как показано ниже.
В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.
Пример 11.1. Создание маркированного списка
Результат данного примера показан на рис. 11.1.
Рис. 11.1. Вид маркированного списка
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
- . Допустимые значения приведены в табл. 11.1
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Создание списка с квадратными маркерами показано в примере 11.2.
Результат данного примера показан на рис. 11.2.
Рис. 11.2. Вид списка с квадратными маркерами
HTML по теме
Статьи по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?
Как растянуть фон на всю ширину окна?
Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
Как открыть ссылку в новом окне?
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
Тег маркер в html
- имеет атрибут type , позволяющий задать значок , которым помечаются строки списка .
Значения атрибута type
Значения | Описание | |
---|---|---|
disc | Маркер в форме кружков с заливкой | |
circle | Маркер в форме кружков без заливки | |
square | Маркер в форме квадрата с заливкой | |
none | Убирает все маркеры |
Список без маркера
Список без маркера
- имеет атрибут type , позволяющий выделить пункты списка латинскими буквами , арабскими и римскими цифрами .
Значения атрибута type
Значения | Описание | |
---|---|---|
A | Пункты нумеруются прописными латинскими буквами | |
a | Пункты нумеруются строчными латинскими буквами | |
I | Пункты нумеруются прописными римскими цифрами | |
i | Пункты нумеруются строчными римскими цифрами | |
1 | Пункты нумеруются строчными арабскими цифрами |
Строчные латинские буквы
Строчные латинские буквы
Нумеруются арабскими цифрами
Нумеруются арабскими цифрами
Атрибут reversed – тега
Атрибут reversed
Списки определений
Списки определений состоит из пар термин – определение . Начинается с помощью тега , термин – с помощью тега , что то вроде заголовка , определение – с помощью тега .
Списки определений
lang="ru"> meta charset="utf-8"> meta name="viewport" content="width=device-width, initial-scale=1"> Списки определений type="text/css"> @media screen and (max-width: 767px) < body < max-width: 767px; height: auto; > > h1 < color: blue; > dt,dd < font-size: 1.2em; /*Размер шрифта*/ > Списки определений HTML (HyperText Markup Language) Язык разметки документов во Всемирной паутине . Большинство Web – страниц содержат описание разметки на языке HTML . CSS (Cascading Style Sheets) Каскадные таблицы стилей