Emmet больше не работает в Visual Studio Code? Так можно решить проблему!
В этой статье я расскажу как сделать так, чтобы Emmet заработал в Visual Studio Code
Маркированные списки (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 вы можете найти актуальные версии моих курсов и если на каких-то других интернет сайтах вы находите мои курсы, знайте, что на всех этих сайтах устаревшие версии моих курсов и я категорически не рекомендую по ним учиться!
Содержание
- Что такое маркированные списки (Unordered Lists)
- Простой пример маркированного списка
- Пример маркированного списка с вложенностью
- Примеры маркированных списков для горизонтальной и вертикальной навигации сайта(меню)
- Пример использования list-style-type
- Что такое нумерованные списки (Ordered Lists)
Смотрите видеоурок Что такое маркированные HTML-списки (Unordered List) и нумерованные списки (Ordered Lists)
Подпишитесь на YouTube канал FructCode, где вы можете найти полезные видео по теме разработки веб-сайтов, программирования и все, что с этим связано.
Что такое маркированные HTML-списки (Unordered List)
Маркированный список или Unordered List - это HTML список пункты которого отмечены каким-либо символом, обычно символом BULLET (пуля).
Самый простой и наглядный пример маркированного списка - это содержание книги или меню сайта с категориями и подкатегориями
В 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, где я переодически выкладываю материалы по этим темам.
С вами был Сергей Никонов
Увидимся в следующем уроке!
Поделитесь в социальных сетях
Читайте также
Почему больше нельзя купить доступ к курсам FructCode из России
24 февраля в 5 часа утра Россия вторглась в Украину. Вот уже больше месяца в этой бессмысленной войн...
Опубликован новый курс HTML/CSS Advanced
Новый курс верстки веб-сайтов HTML/CSS Advanced доступен на сайте FructCode. В этом курсе вы научите...
Что такое псевдоклассы (pseudo classes) и псевдоэлементы (pseudo elements)
В этой статье я расскажу про псевдоклассы (pseudo classes) и псевдоэлементы (pseudo elements): ::bef...
CSS-селекторы: Способы задавать CSS-стили для HTML-элементов
В этой статье я покажу способы как задавать CSS-стили для HTML-элементов с помощью CSS-селекторов
Как пользоваться видеоплеером
В этой статье вы узнаете как эффективнее с помощью горячих клавиш пользоваться видеоплеером
Стартует новый курс HTML/CSS Advanced
Курс HTML/CSS Advanced подходит как для новичков, так и для опытных верстальщиков
Новости и планы FructCode на 2021 год
В этом видео я расскажу новости о FructCode, обновлениях и о планах на 2021 год.
Обучение для трудоустройства
Как с нуля изучить программирование и успешно трудоустроиться? Как учиться быстро и эффективно?
В...
Уроки Yii2: Роутинг и Friendly URL (ЧПУ)
В этом уроке я покажу как можно из стандартных ссылок Yii2 сделать Friendly URL (человекопонятные сс...
Как подключить шрифты для сайта? Сотни бесплатных шрифтов.
В этом видео для начинающих, я покажу как за 10 секунд можно подключить шрифт для вашего сайта.
Уроки VueJS. Что такое Computed properties (Вычисляемые свойства)?
В этой статье вы узнаете о важном свойстве VueJS - Computed Properties.
Windows, Mac или Linux - Что выбрать?
В этом видео я расскажу о плюсах и минусах операционных систем Windows, MacOS и Linux.
Уроки Yii2. Как создать страницу и что такое View и Controller
В этом уроке вы узнаете:
- Что такое MVC
- Как создать страницу в фреймворке Yii2
- Что такое кон...
Уроки VueJS. Что такое V-FOR директива
Вы узнаете:
- Что такое директива V-FOR в фреймворке VueJS
- Как использовать директиву V-FOR с ма...
Альтернатива редактору кода Sublime Text 3 с блекджеком и emmet из коробки
В этом видео я расскажу про альтернативу редактору кода Sublime Text 3
Что такое Webpack? Современные инструменты frontend-разработчика
В этой статье я расскажу о том, что такое Webpack и как его используют в своих проектах frontend-раз...
Что такое NodeJS и npm?
На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой...
Уроки PHPStorm и работа с GIT уже доступны
Доступны для изучения новые уроки по профессиональному редактору кода PHPStorm в курсе Linux/GIT. Уз...
Установка XAMPP-VM для OSX (macOS Mojave, macOS Sierra)
В этой статье вы узнаете как установить и настроить XAMPP-VM (Apache, PHP, MySQL) для операционной с...
Большое обновление FructCode
Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм...
Что такое Modern Javascript?
Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,...
Первый язык программирования. Какой выбрать?
Первый язык программирования выбрать очень сложно. В этой статье вы узнаете, какой язык программиров...
Фреймворк - важный инструмент программиста. Обзор HTML/CSS, PHP, Javascript и Python-фреймворков и библиотек
Фреймворки - это один из важных инструментов программиста. Узнать обо всех особенностях фреймворков,...
JOOMLA: достоинства и недостатки бесплатного движка
Joomla является интересным решением для быстрого создания интернет-магазина или сайтов другой направ...
Массивы в Javascript: как создать, методы работы, использование циклов
Для хорошего программиста просто необходимо знание языка Javascript и умение работать с массивами. К...
Поисковая оптимизация сайта: семь важных составляющих
Мечты начинающего вебмастера направлены на попадание сайта в первую десятку выдачи поисковых систем....
Классы в JAVASCRIPT
У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис...
Особенности объектно-ориентированного программирования
Каждый кандидат, который хочет получить должность программиста в крупной компании, должен ответить н...
Создание модального окна с помощью библиотеки jQuery
Всплывающее окно на сайте - является инструментом привлечения внимания пользователя. Такие модальные...
Установка и отладка веб-сервера для сайта в UBUNTU
Настройка веб-сервера для локального веб-сайта в Ubuntu является не простой задачей, но как это дела...
Что такое веб-хостинг
Хостинг - это специализированный компьютер (сервер), который предоставляет пользователям возможности...
Как сделать HTTP-запрос или HTTPS-запрос в PHP скрипте
В программированию, очень часто встречается задача, когда нужно обратиться к другому сайту через HTT...
Как убрать index.php из URL
Для продвижения сайта в интернет, через поисковые системы, необходимы производить оптимизации. При с...
Что такое файл index.php?
В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост...
Как отправить HTML-форму без перезагрузки страницы
При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без пере...
