В html ul: Тег HTML маркированный список

Содержание

Тег HTML маркированный список

Тег <ul> в HTML определяет маркированный список (неупорядоченный список).

Маркированный список широко используется к коде HTML страниц. Помимо прямого применения тега <ul> для структурирования данных в виде маркированных списков, связку <ul> — <li> часто используют для верстки меню сайта, как одноуровневого, так и многоуровневого.

Вид маркера, отображаемого возле пунктов списка <ul> можно задать с помощью CSS свойств.

Элемент списка определяется тегом <li> и должен находиться внутри тега <ul>.

Чтобы создать многоуровневый список, необходимо поместить код вложенного списка в элемент <li>, для которого нужно создать подуровень.

Помимо маркированного списка в HTML можно создать нумерованный список. Для этого следует использовать тег <ol>.

Тип маркера, его положение можно изменить при помощи CSS свойств. Подробнее на странице: Создание списков. Все о HTML списках.

Синтаксис

<ul>элементы_списка_li</ul>

Отображение в браузере

Меркурий

Венера

Земля

Марс

Юпитер

Сатурн

Уран

Нептун

Пример использования <ul> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Маркированный список ul в HTML</title>
</head>
<body>
<ul>
<li>Меркурий</li>
<li>Венера</li>
<li>Земля</li>
<li>Марс</li>
<li>Юпитер</li>
<li>Сатурн</li>
<li>Уран</li>
<li>Нептун</li>
</ul>
</body>
</html>

Поддержка браузерами

Атрибуты тега <ul>

В HTML5 тег <ul> не имеет атрибутов. При необходимости используйте CSS. Тег <ul> также поддерживает глобальные HTML атрибуты.

Устаревшие атрибуты

Атрибут	Значение	Описание
compact	compact пусто	Логический атрибут. Указывает, что список должен быть выведен меньшим размером шрифта.
type	disc square circle	Определяет тип маркера пунктов списка.

Атрибут

Значение

Описание

compact

compact
пусто

Логический атрибут. Указывает, что список должен быть выведен меньшим размером шрифта.

type

disc
square
circle

Определяет тип маркера пунктов списка.

HTML тег

Тег <ul> используется для создания маркированного (неупорядоченного) списка, где изменение порядка следования пунктов существенно не меняет его смысл.

Каждый элемент в маркированном списке должен быть вложен в тег <li>. В случае, если к списку применены CSS стили, содержимое тега <li> также принимает их.

Тег <ul> является блочным элементом и занимает всю доступную ему ширину, а его высота зависит от количества содержимого.

По умолчанию, маркированные списки отображаются на веб-странице в виде списка и начинаются с маленького чёрного круга и небольшим отступом от левого края.

Для создания нумерованных списков используется тег <ol>.

Синтаксис¶

Содержимое элемента заключается между открывающим (<ul>) и закрывающим (</ul>) тегами.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <ul>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Результат¶

Установленный по умолчанию маркер элементов (черный кружок) можно изменить при помощи атрибута type.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <ul type="circle">
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
    </ul>
    <ul type="square">
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Результат¶

Для изменения типа маркера можно использовать CSS свойства list-style-type или list-style-image .

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа.</title>
  </head>
  <body>
    <h3>Примеры маркированных списков.</h3>
    <ul>
      <li>Прохладительные напитки</li>
      <li>Горячие напитки</li>
      <li>Мороженое</li>
    </ul>
    <ul>
      <li>Кока-кола</li>
      <li>Фанта</li>
      <li>Чай со льдом</li>
    </ul>
    <ul>
      <li>Кока-кола</li>
      <li>Фанта</li>
      <li>Чай со льдом</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Результат¶

Атрибуты¶

Тег <ul> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <ul> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <ul>:

Цвет текста внутри тега <ul>:

Стили форматирования текста для тега <ul>:

Другие свойства для тега <ul>:

HTML и CSS с примерами кода

Тег <ul> (от англ. unordered list — неупорядоченный список) устанавливает маркированный (неупорядоченный) список.

Каждый пункт списка должен начинаться с элемента <li>.

Текстовые блоки

Синтаксис

<ul>
  <li>пункт маркированного списка</li>
</ul>

Закрывающий тег обязателен.

Атрибуты

Для этого элемента доступны универсальные атрибуты.

compact

Не используйте этот атрибут, так как он устарел: вместо этого используйте CSS. Чтобы получить эффект, аналогичный атрибуту compact, можно использовать свойство line-height со значением 80%.

Этот логический атрибут означает, что список должен отображаться в компактном стиле. Интерпретация этого атрибута зависит от пользовательского агента, и он работает не во всех браузерах.

type

Не используйте этот атрибут, так как он устарел; вместо этого используйте свойство CSS list-style-type.

Этот атрибут устанавливает стиль маркера для списка. Значения, определенные в HTML 3.2 и HTML 4.0 / 4.01:

Четвертый тип маркера был определен в интерфейсе WebTV, но не все браузеры поддерживают его: triangle.

Если этот элемент отсутствует, и если к элементу не применяется свойство CSS list-style-type, пользовательский агент выбирает тип маркера в зависимости от уровня вложенности списка.

Спецификации

Примеры

Пример 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>UL</title>
  </head>
  <body>
    <ul>
      <li>Баал</li>
      <li>Агарес</li>
      <li>Марбас</li>
      <li>Пруфлас</li>
      <li>Аамон</li>
    </ul>
  </body>
</html>

Пример 2

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

<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Внимание, закрывающий тег </li> здесь не размещаем -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- Same for the second nested unordered list! -->
        <ul>
          <li>
            second item second subitem first sub-subitem
          </li>
          <li>
            second item second subitem second sub-subitem
          </li>
          <li>
            second item second subitem third sub-subitem
          </li>
        </ul>
      </li>
      <!-- Closing </li> tag for the li that
            contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
    <!-- Здесь размещается закрывающий тег </li> -->
  </li>
  <li>third item</li>
</ul>

Пример 3

Упорядоченный список внутри неупорядоченного списка

<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

См. также

Ссылки

Тег <ul> ^{MDN (рус.)}

Тег | HTML справочник

HTML теги

Значение и применение

Маркированный (неупорядоченный) список в HTML определяется тегом <ul> (Unordered List Element). Каждый элемент списка должен начинаться с тега <li> (сокращенное от английского list item — элемент списка).

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

Поддержка браузерами

Атрибуты

Атрибут	Значение	Описание
compact	compact	Не поддерживается в HTML5. Указывает, что список должен быть меньше обычного размера (line-height: 80%).
type	disc square circle	Не поддерживается в HTML5. Определяет вид маркера для использования в списке.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <ul></title>
	</head>
	<body>
		<ul>
			<li>Светлое</li>
			<li>Тёмное</li>
			<li>Пятница</li>
		</ul>
	</body>
</html>

Выглядеть на странице это будет соответственно так:

Светлое
Тёмное
Пятница

Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера.
Возможные значения свойства:

Атрибут	Значение
list-style-type:none	Убирает маркер.
list-style-type:disc	Маленький черный круг. Это значение по умолчанию.
list-style-type:circle	Круг пустой внутри.
list-style-type:square	Маркер в виде квадрата.

Ниже приведен пример использования стилей CSS внутри маркированного списка:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример изменения типа маркера маркированного списка</title>
	</head>
	<body>
		<ul style = "list-style-type:none">  <!-- маркер отсутствует -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:disc">  <!-- маленький черный круг -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:circle">  <!-- круг пустой внутри -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:square">  <!-- маркер в форме квадрата -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>		
	</body>
</html>

Результат нашего примера:

Маркированные списки.

Отличия HTML 4.01 от HTML 5

В HTML5 удалены атрибуты compact и type.

Значение CSS по умолчанию

ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
padding-left: 40px;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

| HTML | WebReference

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

Синтаксис

<ul>
  <li>пункт маркированного списка</li>
</ul>

Закрывающий тег

Пример

<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>UL</title>
</head>
<body>
<ul>
<li>Баал</li>
<li>Агарес</li>
<li>Марбас</li>
<li>Пруфлас</li>
<li>Аамон</li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид маркированного списка в браузере

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 10.10.2018

Редакторы: Влад Мержевич

Тег ul

Пример

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

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>
</ul>

Подробнее примеры ниже.

Определение и использование

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

Используйте тег <ul> вместе с <li> тег для создания неупорядоченных списков.

Поддержка браузера

Элемент
<ul>	Да	Да	Да	Да	Да

Советы и примечания

Совет: Используйте CSS для стилей списков.

Совет: Для создания упорядоченных списков используйте тег <ol>
.

Различия между HTML 4,01 и HTML5

Атрибуты «compact» и «type» Не поддерживается в HTML5.

Атрибуты

Атрибут	Значение	Описание
compact	compact	Не поддерживается в HTML5. Указывает, что список должен отображать меньше, чем обычный
type	disc square circle	Не поддерживается в HTML5. Указывает тип маркера для использования в списке

Глобальные атрибуты

Тег <ul> также поддерживает Глобальные атрибуты в HTML.

Атрибуты события

Тег <ul> также поддерживает Атрибуты событий в HTML.

Попробуйте примеры

Вложенный список
Список внутри списка.

Другой вложенный список
Более сложный вложенный список.

Параметры CSS по умолчанию

В большинстве обозревателей элемент <ul> будет отображаться со следующими значениями по умолчанию:

Пример

ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1 em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

| Справочник HTML

Элемент <ul> (от англ. «unordered list» ‒ «неупорядоченный список») создаёт маркированный (неупорядоченный) список. Как правило, элемент <ul> применяется для создания таких списков, где изменение порядка следования пунктов этого списка существенно не меняет смысл списка.

Тег <ul> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.

Пункты для нумерованных списков определяются с помощью тега <li>, который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

Примечание: Если к <ul> применяется CSS свойство, то элементы <li> наследуют эти свойства.

Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Для создания нумерованных списков используйте тег <ol>.

Синтаксис

<ul>
  ...
  <li> ... </li>
  ...
</ul>

Закрывающий тег

Обязателен.

Атрибуты

compactУстарел в HTML5: Сокращает отступы и расстояния между строками.
typeHTML5: Устанавливает вид маркера списка.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <ul> со следующими значениями CSS по умолчанию:

ul { 
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1 em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

Различия между HTML 4.01 и HTML5

Атрибуты compact и type не поддерживаются в HTML5.

Пример использования:

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

Спецификации

Поддержка браузерами

Элемент
<ul>	1+	1+	1+	1+	1+	1+

Элемент
<ul>	1+	1+	6+	1+

Попробуйте сами — Примеры

Как сделать, чтобы список начинался с номера, отличного от 1:
Применение атрибутов type и start

Как изменить номер данного элемента списка:
Применение атрибута value

Как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами:
Применение свойства CSS list-style-type

Как создать вложенные списки:
Вложенные списки

Учебник HTML

HTML уроки: HTML Списки

HTML Элементы

HTML тег ul

Пример

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

Кофе

Чай

Молоко

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Тег

определяет неупорядоченный (маркированный) список.
Используйте тег
вместе с тегом
для
создавать неупорядоченные списки.
Совет: Используйте CSS для стилизации списков.
Совет: Для упорядоченных списков используйте
ярлык.
Поддержка браузера
Элемент
Есть Есть Есть Есть Есть
Глобальные атрибуты
Тег
также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег
также поддерживает атрибуты событий в HTML.
Другие примеры
Пример
Установите различные типы стилей списков (с помощью CSS):
Кофе
Чай
Молоко
Кофе
Чай
Молоко
Кофе
Чай
Молоко
Попробуй сам »
Пример
Увеличить и уменьшить высоту строки в списках (с помощью CSS):
Кофе
Чай
Молоко
Кофе
Чай
Молоко
Попробуй сам »
Пример
Создать список внутри списка (вложенный список):
Кофе
Чай
Черный чай
Зеленый чай
Молоко
Попробуй сам »
Пример
Создать более сложный вложенный список:
Кофе
Чай
Черный чай
Зеленый чай
Китай
Африка
Молоко
Попробуй сам »
Связанные страницы
Учебное пособие по HTML: списки HTML
Ссылка на HTML DOM: Ul Object
Учебное пособие по CSS: списки стилей
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент
со следующими значениями по умолчанию:
Пример
ul {
display: block;
list-style-type: диск;
margin-top: 1em;
нижнее поле: 1 см;
маржа слева: 0;
поле справа: 0;
padding-left: 40 пикселей;
}
Попробуй сам »
HTML-тег — GeeksforGeeks
Пример: В этом примере мы создали неупорядоченный список компонентов компьютера с помощью тега
.
Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с Web Design for Beginners | HTML курс.
HTML

< html >

< корпус > h3 > Добро пожаловать в GeekforGeeks h3 >
< ul >
< li > Мышь li >
< li > Клавиатура li >
< li > Динамик li >
< li > Монитор li >
ul > 9 0006
корпус >

html >
Выход:
Тег
80
элементов списка. Тег
требует открывающего и закрывающего тегов. Используя стиль CSS, вы можете легко создать неупорядоченный список.
Синтаксис:

список элементов

Атрибут: Этот тег содержит два атрибута, которые перечислены ниже:
Примечание: Атрибуты
не поддерживаются HTML 5.
Пример 1:
HTML

< html >

голова
< title > HTML ul tag title >
head >

< body >
< h2 > GeeksforGeeks h2 >

900 20 < h3 > HTML ul tag h3 >

< p > Список курсов GeeksforGeeks: p >

< ul >
< li > Компьютерщики li >

li > Sudo li >
< li > Gfg li >
< li > Ворота li >
< li > Размещение li >
900 20 ul >
корпус >

html >
Выход:
Пример 2: Вложенный неупорядоченный список, список внутри других списков называется вложенным списком.
HTML

< html >

< голова >
9 title > Вложенный неупорядоченный список title >
head >

< body >
< h3 > Добро пожаловать в GeeksforGeeks h3 >
< ul >
< li > Оборудование li >
< li >
Программное обеспечение 9000 6
< ul >
< li > Системное программное обеспечение li >
< li > Прикладное программное обеспечение li >
ul >
li >
< li > MacBook li >
ul >
корпус >

html >
Вывод:
Пример 3: Сложный вложенный неупорядоченный список.
HTML

< html >

< голова >
9 title > Вложенный неупорядоченный список title >
head >

< body >
< h3 > Добро пожаловать в GeeksforGeeks h3 >
< ul >
< li > Оборудование li >
< li >
Программное обеспечение 9000 6
< ul >
< li > Системное программное обеспечение li >
< li > Прикладное программное обеспечение li >
< ul >
< li > Skype li >
< li > Slack li >
ul >
< li > Пакет продуктов Microsoft li >
< ul >
< li > Офис li >
< li > Excel li >
< li > Word li >
< li > PowerPoint li >
ul >
ul >
li >
< li > MacBook li >
ul >
корпус >
90 006
html >
Вывод:
Поддерживаемые браузеры:
Google Chrome
Internet Explorer
Firefox 912
HTML-тег »
Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Подробнее
Элемент
Списки Упорядочение веб-страниц: вот HTML-код для их создания
Что делает
HTML-тег ?
Элемент
используется для определения неупорядоченного списка элементов. Используйте неупорядоченный список, чтобы содержать элементы
, которые не нужно указывать в числовом порядке и которые можно переставлять без изменения значения списка.
Дисплей
блок
Использование
семантика
Пример кода
Элементы неупорядоченного списка: В любом порядке. Все равно будет иметь смысл.
Элементы неупорядоченного списка:
Упорядочены в любом порядке
Все равно будет иметь смысл
Все о списках
Возможно, вы этого не знаете, но веб-разработчики любят списки.Они используют их постоянно. Как веб-разработчики, мы взяли на себя обязательство предоставить обширное руководство по спискам, которое охватывает все основы: неупорядоченные списки, упорядоченные списки, списки определений, списки обратного отсчета, вложенные списки - и даже затрагивает некоторые сложные темы.
Прочтите наше руководство по спискам, чтобы узнать почти все, что нужно знать о списках HTML.
Списки элементов, порядок которых не имеет значения
Веб-разработчикам доступны два основных типа списков: упорядоченные списки и неупорядоченные списки.Если порядок элементов в списке имеет значение, используйте упорядоченный список. Если порядок элементов в списке не имеет значения, используйте неупорядоченный список.
По умолчанию упорядоченные списки отображаются с числами в качестве маркера элемента списка, а неупорядоченные списки отображаются с маркерами. В результате многие веб-разработчики и авторы контента будут выбирать между неупорядоченными и упорядоченными списками в зависимости от того, хотят ли они цифр или маркеров рядом с элементами своего списка.
Это ошибка.
Маркер элемента списка можно изменить с помощью CSS, но семантическое значение, передаваемое выбором типа списка, не может быть изменено с помощью CSS.
Например:
Вы можете использовать числа в качестве маркера элемента списка для неупорядоченного списка, используя простой CSS: Это предмет Это предмет Ищете товар? Вы его нашли! <стиль> .numbered { тип-стиль-список: десятичный; }
Вот как этот список отображается в браузере:
Адам - технический писатель, специализирующийся на документации и руководствах для разработчиков.
Атрибуты тега HTML
Имя атрибута Значения Примечания
Используется для установки типов списков.
h58: Использование ol, ul и dl для списков или групп ссылок
Целью этого метода является создание списков связанных элементов с использованием элементов списка
подходящие для их целей. Элемент ol используется, когда список
заказанный, а элемент ul используется, когда список неупорядочен.Определение
списки ( дл ) используются для группировки терминов с их определениями. Хотя использование
такой разметки может сделать списки более удобочитаемыми, не все списки нуждаются в разметке. Например,
предложения, содержащие списки, разделенные запятыми, могут не нуждаться в разметке списка.
Когда используется разметка, которая визуально форматирует элементы в виде списка, но не указывает
список отношений, пользователи могут испытывать трудности с навигацией по информации. Пример
такого визуального форматирования включает в себя звездочки в содержании в начале каждого
элемент списка и использование элементов для разделения элементов списка.
Некоторые вспомогательные технологии позволяют пользователям переходить от списка к списку или от элемента к элементу.
Таблицы стилей можно использовать для изменения представления списков при сохранении их
честность.
Структура списка ( ul / ol ) также полезна для группировки гиперссылок. Когда это будет сделано, это поможет пользователям программ чтения с экрана перейти от первого элемента в списке к его концу или перейти к следующему списку. Это помогает им обойти группы ссылок, если они захотят.
В этом примере ссылки сгруппированы с использованием ul и li
элементы.
Пример кода:
Категории продуктов Кухня Bed & amp; Ванна изысканный ресторан Освещение Хранилище
CSS можно использовать для стилизации элементов списка, поэтому этот метод можно использовать с
разнообразие внешнего вида.
Вот стиль, который удаляет маркеры списка и левое заполнение, которое создает
отступ и перемещение отдельных элементов списка по горизонтали.
Пример кода:
ul.navigation { стиль списка: нет; отступ: 0; } ул.navigation li { дисплей: встроенный; }
Этот стиль удаляет маркеры списка и левое заполнение и отображает элементы в
плавающий блок.
Пример кода:
ul.navigation { стиль списка: нет; отступ: 0; } ul.navigation li { дисплей: блок; плыть налево; }
Ресурсы предназначены только для информационных целей, без какой-либо поддержки.
Процедура
Убедитесь, что содержимое, имеющее внешний вид списка (с маркерами или без них), помечено как неупорядоченный список.
Убедитесь, что содержимое, имеющее визуальный вид нумерованного списка, помечено как упорядоченный список.
Убедитесь, что содержимое помечено как список определений, если термины и их определения представлены в форме списка.
Ожидаемые результаты
Если это достаточный метод для критерия успеха, неудача этой процедуры тестирования не обязательно означает, что критерий успеха не был удовлетворен каким-либо другим способом, только то, что этот метод не был успешно реализован и не может использоваться для подтверждения соответствия.
UL - неупорядоченный список
UL - неупорядоченный список
Синтаксис
...

Характеристики атрибутов
ТИП = [диск | квадрат | круг] (стиль маркера)
COMPACT (компактный дисплей)
общие атрибуты
Содержание Один или несколько элементов LI
Содержится в APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH
Элемент UL определяет неупорядоченный список .Элемент содержит один или несколько элементов LI , которые определяют фактические элементы списка.
В отличие от упорядоченного списка ( OL ), элементы неупорядоченного списка не имеют последовательности . Теоретически пользователи могут изменять порядок элементов в неупорядоченном списке ( , например, , в алфавитном порядке).
Визуальные браузеры обычно отображают UL с маркером перед каждым элементом списка, но авторы могут предлагать различные презентации с использованием таблиц стилей.Свойство стиля списка каскадных таблиц стилей позволяет авторам подавлять маркеры, использовать изображения в качестве маркеров элементов списка и т. Д.
Устаревший атрибут TYPE из UL предлагает стиль маркера для визуальных браузеров. Возможные значения:
диск (закрашенный круг)
квадрат (квадратный контур)
круг (контур круга)
Стиль маркера для отдельного элемента списка можно предложить с помощью атрибута TYPE для LI .Свойство list-style-type CSS обеспечивает большую гибкость в предложении стилей маркеров.
Устаревший атрибут COMPACT предполагает, что визуальные браузеры визуализируют список компактно, возможно, с уменьшенным интервалом между элементами. Этот атрибут плохо поддерживается браузерами.
Дополнительная информация
Неупорядоченный список HTML | Маркированный список HTML
Неупорядоченный список HTML или маркированный список отображает элементы в маркированном формате.Мы можем использовать неупорядоченный список, где нам не нужно отображать элементы в каком-либо определенном порядке. Тег HTML ul используется для неупорядоченного списка. Маркированный список может быть 4 типов:
Для представления различных упорядоченных списков в теге
есть 4 типа атрибутов.
Тип Описание
Тип «диск» Это стиль по умолчанию. В этом стиле элементы списка отмечены маркерами.
Тип «круг» В этом стиле элементы списка отмечены кружками.
Тип «квадрат» В этом стиле элементы списка отмечены квадратами.
Тип «нет» В этом стиле элементы списка не выделяются.
Пример неупорядоченного списка HTML
HTML
Java
JavaScript
SQL
Проверить это сейчас
Выход:
ul type = "circle"
HTML
Java
JavaScript
SQL
Проверить это сейчас
Выход:
ul type = "квадрат"
HTML
Java
JavaScript
SQL
Проверить это сейчас
Выход:
ul type = "none"
HTML
Java
JavaScript
SQL
Проверить это сейчас
Выход:
Примечание. Атрибут type не поддерживается в HTML5, вместо type вы можете использовать свойство CSS типа list-style-type.Ниже приведен пример, показывающий свойство CSS для тега ul.
HTML
Java
JavaScript
SQL
Код:
.

Атрибут типа со свойством CSS
HTML
Java
JavaScript
SQL

Проверить это сейчас
Выход:
Поддерживающие браузеры
HTML: тег
В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом
, с синтаксисом и примерами.
Описание
Тег HTML
определяет неупорядоченный список в документе HTML. Этот тег также обычно называют элементом
.
Синтаксис
В HTML синтаксис тега
:
Первый элемент Второй элемент Третий пункт
Пример вывода

Атрибуты
В дополнение к глобальным атрибутам, ниже приводится список атрибутов, относящихся к тегу
:
Атрибут Описание Совместимость с HTML
компактный Логическое значение, указывающее, что список должен отображаться в компактном стиле Устарело, используйте CSS
тип Стиль маркера для списка.Это может быть любое из следующих значений: круг, диск, квадрат. Вместо этого используйте свойство CSS list-style-type. Устарело, используйте CSS
Примечание
HTML-элемент
находится внутри тега.
Тег
состоит из тегов
.
Используйте тег
, когда элементы списка не имеют числового порядка.
Вы можете вкладывать списки
,
и
.
Совместимость с браузером
Тег
совместим со следующими браузерами:
Хром
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
Edge Mobile
Opera
Opera Mobile
Safari (WebKit)
Мобильный Safari
Пример
Мы обсудим тег
ниже, исследуя примеры использования тега
в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.
HTML5 Документ
Если вы создали новую веб-страницу в HTML5, ваш тег
может выглядеть так:
Пример HTML5 от www.techonthenet.com Первый элемент Второй элемент Третий пункт Четвертый пункт
В этом примере документа HTML5 мы создали неупорядоченный список с помощью тега
, который содержит четыре элемента списка, найденных в четырех тегах
.
HTML 4.01 Переходный документ
Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег
может выглядеть так:
HTML 4.01 Transitional Example by www.techonthenet.com Первый элемент Второй элемент Третий пункт Четвертый пункт
В этом HTML 4.01 Пример переходного документа, мы создали неупорядоченный список с помощью тега
, который содержит четыре элемента списка, найденных в четырех тегах
.
Переходный документ XHTML 1.0
Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег
может выглядеть так:
Переходный пример XHMTL 1.0 от www.techonthenet.com Первый элемент Второй элемент Третий пункт Четвертый пункт
В этом примере переходного документа XHTML 1.0 мы создали неупорядоченный список с помощью тега
, который содержит четыре элемента списка, найденных в четырех тегах
.
Строгий документ XHTML 1.0
Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег
может выглядеть так:
Строгий пример XHTML 1.0 от www.techonthenet.com Первый элемент Второй элемент Третий пункт Четвертый пункт
В этом XHTML 1.0 Пример строгого документа, мы создали неупорядоченный список с помощью тега
, который содержит четыре элемента списка, найденных в четырех тегах
.
XHTML 1.1, документ
Если вы создали новую веб-страницу в XHTML 1.1, ваш тег
может выглядеть так:
XHTML 1.1 Пример с сайта www.techonthenet.com Первый элемент Второй элемент Третий пункт Четвертый пункт
В этом примере документа XHTML 1.1 мы создали неупорядоченный список с помощью тега
, который содержит четыре элемента списка, найденных в четырех тегах
.
.

Синтаксис	...
Характеристики атрибутов	ТИП = [диск \| квадрат \| круг] (стиль маркера) COMPACT (компактный дисплей) общие атрибуты
Содержание	Один или несколько элементов LI
Содержится в	APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Тип	Описание
Тип «диск»	Это стиль по умолчанию. В этом стиле элементы списка отмечены маркерами.
Тип «круг»	В этом стиле элементы списка отмечены кружками.
Тип «квадрат»	В этом стиле элементы списка отмечены квадратами.
Тип «нет»	В этом стиле элементы списка не выделяются.

Атрибут	Описание	Совместимость с HTML
компактный	Логическое значение, указывающее, что список должен отображаться в компактном стиле	Устарело, используйте CSS
тип	Стиль маркера для списка.Это может быть любое из следующих значений: круг, диск, квадрат. Вместо этого используйте свойство CSS list-style-type.	Устарело, используйте CSS

Тег HTML маркированный список

Синтаксис

Отображение в браузере

Пример использования <ul> в HTML коде

Поддержка браузерами

Атрибуты тега <ul>

Устаревшие атрибуты

HTML тег

Синтаксис¶

Пример¶

Результат¶

Пример¶

Результат¶

Пример¶

Результат¶

Атрибуты¶

Как добавить стиль к тегу <ul> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <ul>:

Цвет текста внутри тега <ul>:

Стили форматирования текста для тега <ul>:

Другие свойства для тега <ul>:

HTML и CSS с примерами кода

Синтаксис

Атрибуты

Спецификации

Примеры

Пример 1

Пример 2

Пример 3

См. также

Ссылки

Тег | HTML справочник

Значение и применение

Поддержка браузерами

Атрибуты

Пример использования

Отличия HTML 4.01 от HTML 5

Значение CSS по умолчанию

Поддержка глобальных атрибутов

Атрибуты событий

| HTML | WebReference

Синтаксис

Закрывающий тег

Пример

Спецификация

Браузеры

Автор и редакторы

Тег ul

Пример

Определение и использование

Поддержка браузера

Советы и примечания

Различия между HTML 4,01 и HTML5

Атрибуты

Глобальные атрибуты

Атрибуты события

Попробуйте примеры

Похожие страницы

Параметры CSS по умолчанию

Пример

| Справочник HTML

Синтаксис

Закрывающий тег

Атрибуты

Стилизация по умолчанию

Различия между HTML 4.01 и HTML5

Пример использования:

Спецификации

Поддержка браузерами

Учебник HTML

HTML тег ul

Пример

Определение и использование

Поддержка браузера

Глобальные атрибуты

Атрибуты событий

Другие примеры

Пример

Пример