В этом видео я расскажу вам,
как при помощи HTML-документов можно создавать разные виды списков.
При помощи элемента ol (ordered list) можно создавать упорядоченный список.
Элемент каждого списка оборачивается в элемент li (list item).
Итак, создаем родительский элемент ol и внутрь добавляем элемент li с содержимым.
И в браузере это будет выглядеть как-то вот так.
Нумерация выставляется автоматически для элементов, находящихся внутри элемента ol.
Этот порядок можно поменять при помощи атрибута reversed.
Этот атрибут может быть одиночным, указывается у родительского элемента ol,
и в браузере выглядит вот так, то есть нумерация поменялась: 4, 3, 2, 1.
При помощи атрибута type можно указывать тип нумерации.
По умолчанию установлены арабские цифры.
Можно, например, указать римские цифры.
Мы указываем атрибут type у элемента ol и указываем заглавную
букву I латинского алфавита.
И в браузере это выглядит вот так.
Списки можно вкладывать друг в друга.
Для того чтобы вложить список в список, нужно внутрь элемента
li положить элемент ol с внутренними элементами li.
В браузере это будет выглядеть вот так,
то есть внутри третьего элемента списка у нас вложенный список.
Но тут важно заметить, что атрибут type действует только на тот уровень,
в котором он указан, в данном случае самому верхнему уровню списка задан
атрибут type с римскими цифрами, а на внутренние это никак не подействовало.
При помощи элемента ul (unordered list) можно задавать маркированный список,
то есть вместо цифр будут стоять маркеры.
И вот так это выглядит в браузере.
При помощи элемента figure и figcaption можно создавать подпись к элементам.
Например, у нас есть кусок кода, и мы хотим добавить к нему подпись.
Для этого мы оборачиваем элемент pre в элемент figure,
и при помощи элемента figcaption создаем подпись.
И вот так это выглядит в браузере, то есть визуально это никак не отображается,
но логически текст принадлежит элементу pre.
Еще один пример: мы добавляем подпись к картинке.
В этом случае мы оборачиваем картинку в элемент figure, и можем указать —
например, после картинки добавить подпись при помощи элемента figcaption.
Ну и вот так это будет выглядеть.
Элемент div — это такой универсальный группирующий элемент.
Если не нашлось никакого другого элемента, подходящего по смыслу,
то можно использовать элемент div.
Например, мы хотим окрасить текст в красный цвет.
Для этого мы оборачиваем его в элемент div, то есть он не несет никакой
смысловой нагрузки, и добавляем в него атрибут style, и указываем красный цвет.
Ну и вот так это выглядит в браузере,
то есть визуально этот элемент тоже никак не влияет на отображение.
В этом видео вы узнали, как можно создавать нумерованные и
ненумерованные списки и как можно добавить подписи к элементам.
В следующем видео я расскажу, как создавать таблицы в HTML.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
