Маркированные списки (Unordered Lists) и нумерованные списки (Ordered Lists)

1 year ago | 10.8K
 
Всем привет, с вами Сергей Никонов и в этой статье я расскажу про маркированные html-списки(Unordered Lists) и нумерованные html-списки (Ordered Lists). Мы рассмотрим html-списки на примерах и если вы еще не знаете как создавать html-списки, вы очень быстро разберетесь.
 
О нумерованных и маркированных списках я рассказываю в своем курсе HTML/CSS Advanced и если вы хотите научиться профессионально верстать веб-сайты и освоить HTML и CSS, я рекомендую пройти курс HTML/CSS Advanced выполняя интерактивные упражнения и тесты для закрепления ваших знаний верстки сайтов.
 
Только на сайте FructCode.com вы можете найти актуальные версии моих курсов и если на каких-то других интернет сайтах вы находите мои курсы, знайте, что на всех этих сайтах устаревшие версии моих курсов и я категорически не рекомендую по ним учиться!
 

Содержание

  1. Что такое маркированные списки (Unordered Lists)
  2. Что такое нумерованные списки (Ordered Lists)
 
 

Смотрите видеоурок Что такое маркированные HTML-списки (Unordered List) и нумерованные списки (Ordered Lists)

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

Что такое маркированные HTML-списки (Unordered List)

Маркированный список или Unordered List - это HTML список пункты которого отмечены каким-либо символом, обычно символом BULLET (пуля). 
 
Самый простой и наглядный пример маркированного списка - это содержание книги или меню сайта с категориями и подкатегориями
 
 
Unordered list ul li example
 
 
В HTML для создания маркированного списка обычно используется специальных тег <ul>.
И давайте сразу рассмотрим простой пример:

 
 
В HTML-тег <ul> мы поместили HTML-тег <li>. Каждый новый пункт маркированного списка - это новый тег <li>.
 
Маркированные списки могут быть многоуровневыми. Посмотрите пример ниже:

 
 
Каждый новый уровень маркированного списка находится на уровне тега <li> и вместо тега <li> мы помещаем тег <ul>, тем самым, мы создаем вложенности. Вложенностей маркированного списка <ul> может быть сколько угодно. 
 
Очень часто маркированные списки <ul><li> используются для создании навигации (меню сайта), ведь такие списки выглядят понятно и легко читаются, а также стилизуются с помощью CSS-стилей. 

 
 
Для стилизации маркированного списка <ul><li> вы можете использовать CSS-селекторы(CSS Selectors), псевдоклассы (Pseudo Classes) и псевдоэлементы(Pseudo Elements)
 
А стилизовать маркированный список вы можете с помощью CSS-свойства list-style-type, если по каким-то причинам вам не подходит стандартный значок слева bullet (пуля).

 
Если вы еще не знаете, что такое CSS-селекторы, обязательно прочитайте об этом статью или пройдите этот урок из курса HTML/CSS Advanced, а также интерактивные упражнения для закрепления ваших знаний.
 

Что такое нумерованные HTML-списки (Ordered List)

Единственное отличие нумерованных списков или Ordered Lists от маркированного списка (Unordered Lists) заключается в том, что каждый пункт имеет номер от 1 до бесконечности. 
 
Для того, чтобы создать нумерованный список, вам необходимо в HTML-тег <ol> поместить HTML-теги <li>. как в примере ниже:

 
И конечно ваш нумерованный список может иметь бесконечную вложенность. Посмотрите пример нумерованного списка с вложенностью ниже:

 
И даже мы можем смешивать нумерованные и маркированные списки как в примере ниже:

 
 
Для нумерованного списка можно задавать различные атрибуты, такие как reversed, start и type.
 
Атрибут reversed для нумерованного списка позволяет сортировать цифры в обратном порядке.
 
Атрибут start для нумерованного списка позволяет начинать список к примеру не с 1, как это задано по умолчанию, а с любой другой цифры.
 
А с помощью атрибута type вы можете задавать типы, которые будут заданы вместо арабских цифр. Например, вместо арабских цифр вы можете задавать буквы алфавита (a, b, c и т.д.) или римские цифры и буквы в разных регистрах.
 
Посмотрите на примеры атрибутов нумерованного HTML-списка ниже:

 
И вместо атрибутов вы конечно же можете использовать специальные CSS-свойства для стилизации нумерованных списков, такие как list-style-type или короткую запись list-style:

 
 

Вывод

Маркированные списки (Unordered Lists) и нумерованные списки (Ordered Lists) могут быть очень полезными при создании верстки веб-сайтов. 
 
В своем курсе верстке сайтов HTML/CSS Advanced я рассматриваю не только теорию и простые примеры использования HTML-тегов. В практической части интерактивного курса HTML/CSS Advanced вы создадите сайт КиноМонстер (KinoMonster), в котором мы будет использовать всевозможные HTML-теги, включая маркированные списки для навигации сайта.  
 
А если вы интересуетесь веб-разработкой, версткой сайтов, frontend’ом и backend’дом, программированием, а также DevOps и все, что то с ним связано, я рекомендую подписаться на мой YouTube канал FructCode, где я переодически выкладываю материалы по этим темам.
 
С вами был Сергей Никонов
Увидимся в следующем уроке!


Поделитесь в социальных сетях





Читайте также

Что такое NodeJS и npm?

На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой...
17.5K

Большое обновление FructCode

Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм...
5.1K

Что такое Modern Javascript?

Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,...
13.6K

Классы в JAVASCRIPT

У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис...
17.6K

Что такое веб-хостинг

Хостинг - это специализированный компьютер (сервер), который предоставляет пользователям возможности...
5.5K

Как убрать index.php из URL

Для продвижения сайта в интернет, через поисковые системы, необходимы производить оптимизации. При с...
33.4K

Что такое файл index.php?

В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост...
94.7K























Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
пока нет оценок
Sergei Nikonov
  • Новинка!
  • 162 заданий
  • 60 видео
  • 17 часов

Курс Bootstrap 4. Обучение программирования, уроки программирования
Курс Bootstrap 4. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки Bootstrap 4 в разработке

Курс VueJS Фреймворк. Обучение программирования, уроки программирования
Курс VueJS Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки VueJS в разработке

Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки Yii2 в разработке

Курс Modern Javascript. Обучение программирования, уроки программирования
Курс Modern Javascript. Обучение программирования, уроки программирования
new
4.8 / 164
Sergei Nikonov
  • Новинка!
  • 30 заданий
  • 16 видео
  • 1 час

Курс Javascript/jQuery. Обучение программирования, уроки программирования
Курс Javascript/jQuery. Обучение программирования, уроки программирования
4.7 / 1668
Sergei Nikonov
  • 21 заданий
  • 10 видео
  • 1 час

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 648
Sergei Nikonov
  • 28 заданий
  • 26 видео
  • 5 часов

Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
4.9 / 1112
Sergei Nikonov
  • 29 заданий
  • 22 видео
  • 2 часа

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 1418
Sergei Nikonov
  • 69 заданий
  • 37 видео
  • 5 часов

Курс Bootstrap 3. Обучение программирования, уроки программирования
Курс Bootstrap 3. Обучение программирования, уроки программирования
4.9 / 2501
Sergei Nikonov
  • 50 заданий
  • 25 видео
  • 4 часа

Курс HTML/CSS. Обучение программирования, уроки программирования
Курс HTML/CSS. Обучение программирования, уроки программирования
4.9 / 4941
Sergei Nikonov
  • 66 заданий
  • 32 видео
  • 5 часов