В этом видео я расскажу вам, как при помощи 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.
