Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное


Тег UL

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да
HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Тег <UL> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <LI>. Если к тегу <UL> применяется таблица стилей, то элементы <LI> наследуют эти свойства.

Синтаксис

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

Параметры

type
Устанавливает вид маркера списка.

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

Обязателен.

Пример 1. Использование тега <UL>

Валидный код<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег UL</title>
</head>
<body>

<ul>
  <li>Чебурашка</li>
  <li>Крокодил Гена</li>
  <li>Шапокляк</li>
</ul>

</body>
</html>

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

Рис. 1

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

Описание параметров тега <UL>

Параметр TYPE

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Устанавливает вид маркера.

Синтаксис

<ul type="disc | circle | square">...</ul>

Аргументы

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

Табл 1. Параметры маркированного списка
Код Пример
<ul type="disc">
...
</ul>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<ul type="circle">
...
</ul>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<ul type="square">
...
</ul>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк

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

disc

Аналог CSS

list-style-type

Пример 2. Установка типа маркера

Валидный код<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег UL, параметр type</title>
</head>
<body>

<ul type="circle">
  <li>Чебурашка</li>
  <li>Крокодил Гена</li>
  <li>Шапокляк</li>
</ul>

</body>
</html>

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

Рис. 2

Рис. 2. Маркеры в виде окружности в браузере Opera





На главную









При использовании материалов сайта ссылка на comnew.ru обязательна!

x