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

1 month ago | 3.3K
 
Всем привет, с вами Сергей Никонов и в этой статье я расскажу про маркированные 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 и в этой...
11.4K

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

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

Что такое Modern Javascript?

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

Классы в JAVASCRIPT

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

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

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

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

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

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

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























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

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

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

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

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

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 633
Сергей Никонов
  • 28 заданий
  • 26 видео
  • 6 часов

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

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 1357
Сергей Никонов
  • 69 заданий
  • 37 видео
  • 6 часов

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

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