Главная » Языки программирования

Как сделать подпункт html

Содержание
  1. Списки в HTML. Все о HTML списках
  2. Маркированный список
  3. Пример простого маркированного списка HTML
  4. Исходный код простого маркированного списка:
  5. Типы маркеров
  6. Положение маркера в списке
  7. Свой маркер в HTML списке
  8. Как сделать подпункт html
  9. Виды HTML-списков
  10. Маркированный список
  11. Нумерованный список
  12. Список определений
  13. Вложенный список
  14. Многоуровневый список
  15. Выпадающий список
  16. Расшифровка и перевод используемых тегов
  17. Вложенные списки

Списки в 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 .

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

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

Источник

Как сделать подпункт html

Списки HTML

Списки HTML — это набор взаимосвязанных элементов, которые начинаются с маркера. В этой статье я расскажу о HTML-списках. Статья рассчитана на новичков (школьников и студентов) но может быть полезна всем кто изучает HTML.

Виды HTML-списков

Списки бывают следующих видов:

  • Маркированный. Перед элементом списка идет маркер.
  • Нумерованный. Перед элементом списка идет номер.
  • Список определений. Перед определением идет термин.
  • Вложенный список.
  • Многоуровневый. Список состоит из нескольких уровней. может быть маркированным. нумерованным и комбинированным.

Так же в этом материале я расскажу, как сделать выпадающий список.

Рассмотрим каждый вид подробнее.

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

    — unordered list (неупорядоченный список). Стандартный маркер — точка.

display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Маркер задается с помощью свойства list-style-type , для маркированного списка это свойство может иметь следующие значения:

В статье основы HTML я рассказывал о теге . Давайте с его помощью изменим маркер в примере на квадрат.

Получим следующий результат:

Маркер списка - квадрат

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

    — order list (упорядоченный список). Стандартно список нумеруется арабскими (традиционными) числами.

display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Тип номера так же, как и в маркированном списке, задается с помощью свойства list-style-type. Возможные значения:

  • Armenian — армянская нумерация.
  • Decimal — арабская нумерация.
  • Decimal-leading-zero — арабская нумерация с нулем впереди чисел меньше десяти, то есть 01, 02, 03 и так далее.
  • Georgian — грузинская нумерация.
  • Lower-alpha (lower-latin) — строчные латинские буквы.
  • Lower-greek — строчные греческие буквы.
  • Lower-roman — римские числа в нижнем регистре, например i, ii.
  • Upper-alpha (upper-latin) — заглавные латинские буквы.
  • Upper-roman — римские числа в верхнем регистре, например I, II.
  • None — без нумерации.

    в отличии элемента
    имеет атрибуты.

Атрибуты тега

Атрибут Описание Возможные значения
reversed Указывает, что элементы списка расположены в обратном порядке. Нет.
start Задает первый порядковый номер списка. Число.
type Задает тип номера для использования в списке. 1: Десятичный: 1, 2, 3 и так далее. (По умолчанию)
a: строчные буквы латинского алфавита: a, b, c и так далее.
A: прописные буквы латинского алфавита: A, B, C и так далее.
i: римские цифры в нижнем регистре: i, ii, iii и так далее.
I: римские цифры в верхнем регистре: I, II, III и так далее.

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

Список определений создается с помощью тега — description list (список определений). Список определений состоит из пары термин — определение. Термин создается с помощью тега , а описание с помощью тега .

display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;

 
Собака
 
Домашнее животное, одно из наиболее популярных (наряду с кошкой) животных-компаньонов.
 
HTML
 
Язык гипертекстовой разметки.
 
Язык, используемый для форматирования веб-документов.

Собака Домашнее животное, одно из наиболее популярных (наряду с кошкой) животных-компаньонов. HTML Язык гипертекстовой разметки. Язык, используемый для форматирования веб-документов.

Вложенный список

  1. Языки веб-программирования
    • HTML
    • PHP
    • JavaScript
  2. Языки программирования .NET
    • С++
    • С#
  3. Остальные языки программирования
  1. Языки веб-программирования
    • HTML
    • PHP
    • JavaScript
  2. Языки программирования .NET
    • С++
    • С#
  3. Остальные языки программирования

Аналогично можно вкладывать списки уже во вложенные элементы.

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

Многоуровневым считают нумерованный список. Его отличие от вложенного списка в том, что бы нумерация шла по порядку.

Для этого придется использовать элемент .

  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
  4. Элемент списка
  5. Элемент списка
    1. Элемент списка
    2. Элемент списка
    3. Элемент списка
    4. Элемент списка
    5. Элемент списка
    6. Элемент списка

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

    Результат.

    Выпадающий список

    Как сделать выпадающий список в HTML? Довольно просто, с помощью тега , который позволяет оформить элементы в виде выпадающего списка. Элементы выпадающего списка берутся в тег .

    Элемент с атрибутом selected будет выбранным, то есть стоять в начале выпадающего списка. Его можно оставить пустым.

    Расшифровка и перевод используемых тегов

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

    Тег Значение Перевод
    Unordered list Неупорядоченный список
    List item Элемент списка
    Order list Упорядоченный список
    Description list Список описаний (определений)
    Description list term Термин (списка описаний)
    Description list description Описание термина (списка описаний)
    Select Выбор
    Option Вариант.

    На этом изучение списков HTML заканчивается.

    Анатолий Бузов

    Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

    Источник

    Вложенные списки

    Вложенные или многоуровневые списки предназначены для организации сложной иерархической структуры текста, обычно таких документов, как юридические или технические. Реально на веб-странице нельзя автоматически ввести многоуровневую нумерацию типа использования подпунктов 1.1 или 2.1.3. Поэтому приходится вводить числа отдельно или упрощать отображение списка. Так в примере 1 пункты и подпункты списка обозначаются числами.

    Пример 1. Создание многоуровневого списка

      вкладывается внутрь элемента
      сразу же после текста пункта. Обратите внимание, что у подпунктов имеется отступ слева, но нет вертикальных отступов сверху и снизу списка.

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

    Рис. 1. Вид многоуровневого списка

    Альтернативно можно использовать в качестве подпунктов латинские буквы или римские цифры (пример 2).

    Пример 2. Представление многоуровневого списка

    Применение стилей также позволяет по-разному выделять и оформлять пункты и подпункты (рис. 2).

    Выделение пунктов списка

    Рис. 2. Выделение пунктов списка

    Следует учитывать, что стиль селектора ol наследуется селектором li , поэтому для пунктов и подпунктов приходится задавать разное оформление, чтобы стиль не перекочёвывал с одного элемента списка на другой.

    Источник

    Читайте также:  Importing certificates keytool java
Оцените статью
© 2024 Программирование