Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html » Spiski-html

Списки html

В этом уроке мы поговорим с вами о списках. Они бывают трех типов: маркированные, нумерованные и списки определений. Их очень удобно использовать для навигации по сайту, да и в большинстве случаев именно их и используют. Они представляют собой набор определенных фраз или предложений.

Маркированный список html

Для создания маркированного списка используется тег ul, а каждый пункт помещается в тег li. Маркеры имеют три основных вида: круг (задается по умолчанию), окружность и квадрат. Чтобы поставить тот или иной вид маркера используется атрибут type.

Рассмотрим пример с разными видами маркера:

<!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=utf-8">
  <title>Маркированный список</title>
 </head>
 <body>
   <hr>
<p>Маркеры в виде круга</p>
   <ul>
     <li>Первый</li>
     <li>Второй</li>
     <li>Третий</li>
    </ul>
   <hr>
<p>Маркеры в виде окружности</p>
<ul type="circle">
     <li>Первый</li>
     <li>Второй</li>
     <li>Третий</li>
    </ul>
<hr>
<p>Маркеры в виде квадрата</p>
<ul type="square">
     <li>Первый</li>
     <li>Второй</li>
     <li>Третий</li>
    </ul>
<hr>
 </body>
</html>

В результате должно получиться следующее:

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

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

Для нумерованного списка вместо ul используется тег ol. По умолчанию вместо маркера используются арабские цифры. Также существует атрибут type, который задаёт стиль списка со следующими значениями:

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

<!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=utf-8">
  <title>Нумерация в списках</title>
 </head>
 <body>
<p><strong>Нумерация с римскими цифрами</strong></p>
<ol type="I" start="7">
   <li>один</li>
   <li>семь</li>
   <li>десять</li>
     </ol><br>
<p><strong>Просто нумерованный список</strong></p>
<ol>
     <li>Первый</li>
     <li>Второй</li>
     <li>Третий</li>
    </ol>
 </body>
</html>

А вот что вы должны получить в итоге:

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

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

Кто-то говорит, что такой вид списка уже изжил себя, но для создания словаря или какого-нибудь справочника он очень даже хорошо подходит. Он состоит из двух элементов входящих в контейнер тега dl. Первый элемент определяет название термина — элемент dt, а во второй элемент вмещается само определение — элемент dd. Чтобы вы лучше закрепили данный материал предлагаю вам посмотреть вот такой вот пример:

<!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=utf-8">
   <title>Список определений</title>
 </head>
 <body>
  <dl>
   <dt>Первый термин</dt>
     <dd>Определение первого термина пишется заключается 
здесь.</dd>
   <dt>Второй термин</dt>
     <dd>А этот термин имеет другое определение
 нежели первый термин, но как и первый термин он 
 заключается в тег <b>dd</b></dd>
    </dl>
 </body>
</html>

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



наверх