Как сделать ненумерованный список в html
Перейти к содержимому

Как сделать ненумерованный список в html

  • автор:

HTML Списки

HTML Списки позволяют веб-разработчикам группировать набор связанных элементов в списках.

HTML Пример списка

Неупорядоченный список:

  • Пункт
  • Пункт
  • Пункт
  • Пункт

Упорядоченный список:

  1. Первый пункт
  2. Второй пункт
  3. Третий пункт
  4. Четвёртый пункт

Неупорядоченный HTML Список

Неупорядоченный (ненумерованный) список начинается с тега <ul> . Каждый элемент списка начинается с тега <li> .

Элементы списка будут помечены маркерами (маленькие черные кружки) по умолчанию:

Пример

Неупорядоченный HTML Список — выберите маркер элемента списка

CSS свойство list-style-type используется для определения стиля маркера элемента списка:

Значение Описание
disc Устанавливает маркер элемента списка как маленький чёрный кружок (по умолчанию)
circle Устанавливает маркер элемента списка в виде маленького пустого кружка
square Устанавливает маркер элемента списка в виде квадрата
none Элементы списка не будут отмечены (маркеры отсутствуют)

Пример — Disc

Пример — Circle

Пример — Square

Пример — None

Упорядоченный HTML Список

Упорядоченный (нумерованный) список начинается с тега <ol> . Каждый элемент списка начинается с тега <li> .

Элементы списка будут помечены номерами по умолчанию:

Пример

Упорядоченный HTML Список — Атрибут Type

Атрибут type тега <ol> определяет тип маркера элемента списка:

Тип Описание
type="1" Элементы списка будут пронумерованы цифрами (по умолчанию)
type="A" Элементы списка будут пронумерованы заглавными буквами
type="a" Элементы списка будут пронумерованы строчными буквами
type="I" Элементы списка будут пронумерованы большими римскими цифрами
type="i" Элементы списка будут пронумерованы маленькими римскими цифрами

Цифры:

Заглавные буквы:

Строчные буквы:

Большие римские цифры:

Маленькие римские цифры:

HTML Списки описания

HTML также поддерживает списки описания.

Список описания — это список терминов с описанием каждого термина.

Тег <dl> определяет список описания, тег <dt> определяет термин (имя), а тег <dd> описывает каждый термин:

Пример

Вложенные HTML-списки

Список может быть вложенным (списки внутри списков):

Пример

Примечание: Элементы списка могут содержать новый список и другие элементы HTML, такие как изображения и ссылки и т.д.

Подсчет контрольного списка

По умолчанию упорядоченный список начинает отсчет с 1. Если вы хотите начать подсчет с указанного числа, вы можете использовать атрибут start :

Пример

Горизонтальный список с помощью CSS

HTML-списки можно стилизовать различными способами с помощью CSS.

Один из популярных способов — это стилизовать список по горизонтали для создания меню навигации:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
ul <
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
>

li a <
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
>

Совет: Вы можете узнать больше о CSS в нашем CSS Учебнике.

Резюме раздела

  • Используйте HTML елемент <ul> для определения неупорядоченного списка
  • Используйте CSS свойство list-style-type для определения маркера элемента списка
  • Используйте HTML элемент <ol> для определения упорядоченного списка
  • Используйте HTML атрибут type для определения типа нумерации
  • Используйте HTML элемент <li> для определения элемента списка
  • Используйте HTML элемент <dl> для определения списка описания
  • Используйте HTML элемент <dt> для определения термина описания
  • Используйте HTML элемент <dd> для описания термина в списке описания
  • Списки могут быть вложены в списки
  • Элементы списка могут содержать другие элементы HTML
  • Используйте CSS свойство float:left или display:inline для горизонтального отображения списка

HTML Упражнения

HTML Теги списка

Тег Описание
<ul> Определяет неупорядоченный (ненумерованный) список
<ol> Определяет упорядоченный (нумерованный) список
<li> Определяет пункты списка
<dl> Определяет список описания
<dt> Определяет термин в списке описания
<dd> Описывает термин в списке описания

Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

  • Для чего нужны HTML-списки?
  • Какие бывают HTML-списки?
  • Каким тегом определяется неупорядоченный HTML-список?
  • Каким тегом определяется упорядоченный HTML-список?
  • Каким тегом определяется каждый элемент в HTML-списке?
  • Как по умолчанию обозначаются элементы неупорядоченного HTML-списка?
  • Как по умолчанию обозначаются элементы упорядоченного HTML-списке?
  • Что такое список описаний?
  • Какой тег определяет список описаний?
  • Какой тег определяет термин (имя) в списке описаний?
  • Какой тег определяет описание каждого термина в списке описаний?
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Списки в HTML

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

В повседневной жизни мы часто записываем информацию в виде списков :

  • список дел на завтра
  • список достопримечательностей, которые хотим посмотреть в очередной поездке
  • список покупок и т.д. и т.п.

Списки покупок

На сайтах тоже часто часть информации оформляется в виде списков. Итак, учимся делать списки в HTML!

Всего выделяют 4 вида списков:

  1. Ненумерованные (неупорядоченные)
  2. Нумерованные (упорядоченные)
  3. Списки определений
  4. Вложенные списки

Названия звучат может быть немного угрожающе. На самом деле создавать списки — легко! И Вы сейчас в этом убедитесь.

Ненумерованные списки

Ненумерованный список — список, в котором элементы выделяются специальными маркерами – буллетами (визуально похоже на след от пули). А вот и пример ненумерованного списка:

UL

Как сделать ненумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег <ul>. </ul>

<ul> — это аббревиатура от английского «Unordered List» , что в переводе означает «неупорядоченный список».

Шаг 2: Каждый элемент списка поместить в теге <li> . </li>

<li> — это аббревиатура от английского «List Item» , что в переводе означает «элемент списка».

Давайте посмотрим, как это работает на примере:

По умолчанию маркер отображается жирной черной точкой, но можно их «нарисовать» и по другому, с помощью специальных атрибутов.

list-style-type:circle — маркер будет отображаться кружочком

list-style-type:square — будет выглядеть как квадратик

list-style-type:none — список будет без маркеров.

Посмотрим, как например будет выглядеть список с квадратиками

Нумерованные списки

Нумерованный список — список, в котором каждый элемент имеет свой порядковый номер. Нумерованный список используют, если важен порядок элементов. Например:

OL

Так как же сделать нумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег <ol>. </ol>

<ol> — это аббревиатура от английского «Ordered List» , что в переводе означает «упорядоченный список».

Шаг 2: Каждый элемент списка поместить в теге <li> . </li>

<li> — это аббревиатура от английского «List Item» , что в переводе означает «элемент списка».

Пример упорядоченного (нумерованного) списка ниже:

По умолчанию элементы нумерованного списка помечаются арабскими цифрами (1, 2, 3, 4, 5 и т.д.). С помощью атрибута type можно это поменять:

type=»A» — строки будут нумероваться заглавными буквами

type=»a» — строчными буквами

type=»I» — заглавными римскими цифрами

type=»i» — строчными римскими цифрами

Давайте к примеру пронумеруем наш список дел римскими цифрами

Списки определений

Также в HTML существуют списки определений, где каждый элемент состоит из понятия и его определения. Это напоминает статьи в словаре или энциклопедии.

Список определений, (англ Description List, тег <dl> ) включает в себя элементы, которые

  • обозначают какое-то понятие, термин (description term) — тег <dt>
  • описывают каждое из этих понятий (description data) — тег <dd>

Например:

Иногда в элемент списка нужно включить еще один список. HTML позволяет «вкладывать» один список в другой, при этом вложенные списки отображаются с большим отступом по сравнению с родительским списком. К тому же, для неупорядоченных (ненумерованных) списков, браузер обычно изменяет вид маркеров вложенного списка.

Lists Vertex Academy

Вот как это выглядит:

Списки можно комбинировать между собой, например:

Lists2 Vertex Academy

Смотрим как это выглядит в HTML:

В качестве элементов списков можно использовать картинки или ссылки. Также, с помощью CSS список можно расположить горизонтально, а если заменить в нем каждый элемент ссылкой — получится полноценное меню сайта. Но это тема для отдельного урока.
До встречи!

WEBTEORETIK

alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt

  • Главная
  • О сайте
  • Карта сайта
  • Обратная связь
  • Главная
  • >>
  • Раздел >> Уроки HTML
  • >>
  • Материал >>
  • Ненумерованные списки. Тег <ul>

Ненумерованные списки. Тег <ul>

Категория: Уроки HTML Просмотров: 4319 Коментариев: 0 Дата: 2017-04-02 Добавил: admin

Нумерованные списки тег <ul>

И так, продолжаем работу со списками, в прошлом уроке мы рассмотрели Упорядочнные списки и применение атрибутов для них. В этом уроке мы продолжим изучать списки и поговорим о неупорядоченных списках (ненумерованные списки). Этот вид списка используется так же достаточно часто, как и упорядочные списки. Разница между этими списками в том, что вместо цифр указываются черные маркеры для каждого элемента списка. Существует три вида маркеров это круг, диск и квадрат.

Для создания ненумерованного списка используется тег <ul> и его пара — закрывающийся тег </ul>, а элементы внутри так же заключаются в теги <li>. Тег <ul> является сокращением с английского языка Unsorted List и в переводе означает неупорядоченный список.

Ниже создадим пример обычного ненумерованного списка без использования атрибута type.

  • Я 1-й элемент у списка
  • Я 2-й элемент у списка
  • Я 3-й элемент у списка
  • Я 4-й элемент у списка

Если не указывать ни каких атрибутов, то по умолчанию маркеры примут вид в виде круга заполненного черным цветом.

Не нумерованный список

Для изменения вида маркера используется атрибут type для тега <ul>. Ниже показаны варианты изменения вида маркеров.

  • Элементы списка с маркером в виде круга type=»disc»
  • Элементы списка с маркером в виде окружности type=» circle»
  • Элементы списка с маркером в виде квадратов type=» square»

Нужно помнить, что вид маркеров может, манятся при смене шрифта или текста, а также может, отображается по-разному в разных браузерах. Ниже создадим пример всех вариантов ненумерованных списков, а результат и Вы сможете просмотреть, нажав на ссылочку демо.

Ненумерованный список по умолчанию без указания атрибута «Type»

  • Я 1-й элемент у списка
  • Я 2-й элемент у списка
  • Я 3-й элемент у списка
  • Я 4-й элемент у списка

Указвываем атрибут type=»disc».

  1. Я 1-й элемент у списка
  2. Я 2-й элемент у списка
  3. Я 3-й элемент у списка
  4. Я 4-й элемент у списка

Указвываем атрибут type=»circle».

  1. Я 1-й элемент у списка
  2. Я 2-й элемент у списка
  3. Я 3-й элемент у списка
  4. Я 4-й элемент у списка

Указвываем атрибут type=»square».

  1. Я 1-й элемент у списка
  2. Я 2-й элемент у списка
  3. Я 3-й элемент у списка
  4. Я 4-й элемент у списка

Мы и рассмотрели еще один вид списков, который очень часто используется при верстке шаблонов сайта. На этот вид списка рекомендую уделить немного больше внимания, чем на остальные. Возможно, дочитав до конца этот урок, у Вас возник вопрос, а если мне нужен совсем другой маркер, например: какая-то «птичка». Это так же возможно реализовать. Для этого берется заранее подготовленная картинка в виде нужного маркера и уже с помощь CSS таблицы стилей вставляется наш новый маркёр в список. Ну, об этом немного позже. В следующем уроке мы будем завершать со списками и рассмотрим самый редкий вид списка определения.

Как сделать ненумерованный список в html

Для создания списков в HTML5 применяются элементы <ol> (нумерованный список) и <ul> (ненумерованный список):

Списки в HTML5

В нумерованном списке для нумерации элементов по умолчанию используется стандартные цифры от 1. В ненумерованном списке каждый элемент предваряется черной точкой.

При необходимости мы можем настроить нумерацию или отражаемый рядом с элементом символ с помощью стиля list-style-type . Данный стиль может принимать множество различных значений. Отметим только основные и часто используемые. Для нумерованных списков стиль list-style-type может принимать следующие значения:

decimal : десятичные числа, отсчет идет от 1

decimal-leading-zero : десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99

lower-roman : строчные римские цифры, например, i, ii, iii, iv, v

upper-roman : заглавные римские цифры, например, I, II, III, IV, V…

lower-alpha : строчные римские буквы, например, a, b, c. z

upper-alpha : заглавные римские буквы, например, A, B, C, … Z

Для нумерованных список с помощью атрибута start можно дополнительно задать символ, с которого будет начинаться нумерация. Например:

Нумерованный список в HTML5

Для ненумерованного списка атрибут list-style-type может принимать следующие значения:

disc : черный диск

circle : пустой кружочек

square : черный квадратик

Неупорядоченный список в HTML5

Еще одну интересную возможность по настройке списков предоставляет стиль list-style-image . Он задает изображение, которое будет отображаться рядом с элементом списка:

Картинки в списке в HTML5

Стиль list-style-image в качестве значения принимает url(phone_touch.png) , где «phone_touch.png» — это название файла изображения. То есть в данном случае предполагается, что в одной папке с веб-страницей index.html у меня находится файл изображения phone_touch.png.

Горизонтальный список

Одним из распространенных способов стилизации списков представляет создание горизонтального списка. Для этого для всех элементов списка надо установить стиль display:inline :

Похожие публикации:
  1. Html tabindex для чего нужен
  2. Html код страницы как открыть
  3. Stylesheet в html что это
  4. Где найти html код сайта

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *