Как сделать список с тире html

Обновлено: 06.07.2024

В HTML для создания списков используются теги группы lists. К ним относятся:

Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете, нажав по названию тега.

Далее будет показана практика создания HTML списков с примером исходного кода и описанием на русском языке.

В HTML есть три типа списков: маркированный, нумерованный и список определений (терминов).

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

Пример простого маркированного списка HTML

  • Яблоки
  • Абрикосы
  • Бананы
  • Сливы

Исходный код простого маркированного списка:

Типы маркеров

Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square и circle. Задать тип маркера можно при помощи CSS свойства list-style-type . Тип маркера может быть задан, как для списка в целом (свойство применяется к ), так и для конкретного элемента (свойство применяется к ).

Список с разными типами маркеров:

  • Disc - закрашенный круг, точка.
  • Circle - окружность, пустая внутри.
  • Square - квадрат.

Исходный код списка с разными типами маркеров:

Положение маркера в списке

HTML поддерживает 2 типа положений маркеров списка: внутри или снаружи. Положение маркера регулируется CSS свойством list-style-position . Положение может быть задано, как для списка в целом, так и для отдельного элемента.

Пример списка с разным положением маркеров:

  • Маркер внутри (inside)
  • Маркер снаружи (outside)

Исходный код списка с разным положением маркеров:

Свой маркер в HTML списке

Использовать в качестве маркера HTML списка можно и свою картинку. Для этого используйте CSS свойство list-style-image .

Пример списка со своей картинкой в роли маркера:

Исходный код списка со своим маркером - картинкой:

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

Пример нумерованного списка HTML

  1. Выучить HTML
  2. Добавить CSS
  3. Освоить JavaScript

Исходный код нумерованного списка

Типы нумерации в HTML списке

В HTML доступны 5 типов нумерации в списках. Чтобы изменить тип нумерации используйте атрибут type . Тип нумерации можно задавать как для списка в целом, так и для конкретных его элементов.

Разные типы нумерации в списках:

Другие варианты нумерации, включая греческую, еврейскую, японскую, с ведущими нулями и т.д. можно получить используя CSS свойство list-style-type .

Многоуровневый список HTML (список в списке)

HTML не имеет отдельного элемента для создания многоуровневых списков. Вместо этого в HTML используются вложенные списки - список в списке.

Ограничений по количеству уровней вложенности списков нет.

Пример многоуровневого списка

Исходный код многоуровневого списка

Список определений

Для создания списка определений используются теги , и . Тег dl - это контейнер списка определений, dt - термин, dd - описание термина.

Пример простого списка определений:

Спектр Распределение значений физической величины, например, массы, частоты или энергии. Люминесценция Эффект нетеплового свечение вещества, происходящий после поглощения им энергии.

Бывают случаи, когда на сайте нужно вывести некоторые специальные символы, которых нет на обычной клавиатуре. К таким символам относятся, например, буквы греческого алфавита, стрелки, тире и другие символы. Как правило, спец символы в HTML начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Рассмотрим наиболее популярные HTML символы.

Тире в HTML

Тире с помощью HTML-кода можно проставить следующим образом:

Стрелки в HTML

Греческие буквы в HTML

Строчные буквы греческого алфавита записываются следующим образом:

  • α - альфа строчная (α);
  • β - бета строчная (β);
  • γ - гамма строчная (γ);
  • δ - дельта строчная (δ);

Заглавные буквы греческого алфавита выводятся с помощью тех же ключевых слов, начинающихся с заглавной буквы:

  • Α - альфа заглавная (Α);
  • Β - бета заглавная (Β);
  • Γ - гамма заглавная (Γ);
  • Δ - дельта заглавная (Δ);

Другие спецсимволы в HTML

Ниже приведены некоторые другие спецсимволы, которые часто используются в тексте:

В конструкторе сайтов "Нубекс" есть стандартный визуальный редактор, который позволяет вставлять спецсимволы на сайт непосредственно из админ-панели.

Как известно дизайнеры — творческие люди, и верстальщики им не указ, как нарисуют, так и приходится делать, а это далеко не всегда выполнимая задача. Один из распространенных дизайнерских приемов — это украшение каждой позиции списка каким-нибудь замысловатым маркером.

Верстать такой список проще простого — картинка задается через css-свойсво list-style-image, и ваш список выглядит точно как в макете. Но пару раз мне попадались макеты, где в качестве маркера списка использовались различные типографские знаки, типа длинного тире, решетки и кавычки. В принципе можно и их сохранить как картинку, но не так давно я узнала другой, более изящный способ.

Все очень просто, подобно псевдо-классу :hover, имеется псевдо-элемент :before, который то и определяет что именно должно отображаться перед заданным элементом. Применительно к спискам, это можно записать следующим образом:

Здесь content, как нетрудно догадаться и есть свойство, определяющее что же именно за содержимое должно отображаться перед позицией списка. Следует заметить, типографские символы записываются в шестнадцатеричном коде.

В результате у нас получится вот такой список, с нужным символом маркера, без использования картинок.

И все бы хорошо, но имеется проблема с всеми любимым браузером. Internet Explorer, вплоть до 8 версии, не поддерживает before. Однако это проблема разрешима, спасибо статье Владимир Токмакова, на сайте студии Артемия Лебедева. Оказалось, что в IE, можно эмулировать before, через expression, следующим образом:

Вот и все, благодаря этим нехитрым действиям, у нас есть списки, корректно работающие во всех браузерах.

10 комментариев

Рад, что наконец-то на главной появилась ссылка на RSS-поток. переподписался.

1) Мнемонические коды записываются для IE, в expression, поскольку свойство content, IE игнорирует. А для остальных, нормальных браузеров, типографские знаки действительно записываются в шестнадцатеричном коде, начиная с косой черты. Например, для того чтобы вставить перед позицией списка длинное тире, нужно написать следующее:

2) Иконка для RSS из бесплатных, к сожалению я пока так рисовать не умею)


HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:

  • маркированный список —
      — каждый элемент списка
    • отмечается маркером,
    • нумерованный список — — каждый элемент списка
    • отмечается цифрой,
    • список определений — — состоит из пар термин — определение.

    Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение.

    Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.

    Создание HTML-списков

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

      . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

    Браузеры по умолчанию добавляют следующее форматирование блоку списка:

    • Microsoft
    • Google
    • Apple
    • IBM

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

      . Каждый пункт списка также создаётся с помощью элемента . Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

    Блок списка также имеет стили браузера по умолчанию:

      доступны следующие атрибуты:

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

    Списки определений создаются с помощью элемента . Для добавления термина применяется элемент , а для вставки определения — элемент .

    Блок списка определений имеет следующие стили браузера по умолчанию:

    Для элементов , и доступны ‎глобальные атрибуты.

    Режиссер: Петр Точилин В ролях: Андрей Гайдулян Алексей Гаврилов Виталий Гогунский Мария Кожевникова Фигура. 3. Список определений

    4. Как создать вложенный список

    Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей: