Тег ol


Список UL

Список UL используется для меню, для маркерованных списков, причем через HTML можно задать вид маркера.

Давайте изменим наш HTML-код:

<html>  <head>  <title>Мой первый HTML-документ</title>  </head>  <body>   <h1>Мой первый HTML-документ</h1> 	<ul> 	</ul>  </body> </html>

В документе будет отображать только заголовок, потому что наш список пустой, давайте добавим в него пункты. Для пунктов мы будем использовать теги <LI></LI> (list item — пункт списка).

<html>  <head>  <title>Мой первый HTML-документ</title>  </head>  <body>   <h1>Мой первый HTML-документ</h1> 	<ul> 	 <li>Первый пункт</li> 	 <li>Второй пункт</li> 	 <li>Третий пункт</li> 	</ul>  </body> </html>

Теперь у нас будет отображаться маркированный список. Вид маркера можно изменить через атрибуты тега <UL>.

Атрибуты HTML тегов


У тега UL, как я писал выше, есть атрибуты. Атрибуты есть у всех HTML тегов, позже мы рассмотрим все атрибуты, а пока давайте определимся что такое атрибут. Атрибут позволяет управлять отображением HTML тега: цветов, размером, формой и т.д. Для тега UL мы можем задать вид маркера: круг, окружность, квадрат.

Атрибуты имеют следующий вид:

<тег атрибут="значение атрибута">

Таким образом мы прямо в теге пишем как отображать этот тег. Для тега UL атрибут будет называться type:

<html>  <head>  <title>Мой первый HTML-документ</title>  </head>  <body>   <h1>Мой первый HTML-документ</h1> 	<ul type="square"> 	 <li>Первый пункт</li> 	 <li>Второй пункт</li> 	 <li>Третий пункт</li> 	</ul>  </body> </html>

Если вы обновите страницу в браузере, то увидите, что список маркерован квадратами (square — квадрат). Также мы можем маркировать окружностями:

<html>  <head>  <title>Мой первый HTML-документ</title>  </head>  <body>   <h1>Мой первый HTML-документ</h1> 	<ul type="circle"> 	 <li>Первый пункт</li> 	 <li>Второй пункт</li> 	 <li>Третий пункт</li> 	</ul>  </body> </html>

Вы можете использовать различные маркеры в списке, но тогда нужно еще прописать атрибут type и для тега li:


<html>  <head>  <title>Мой первый HTML-документ</title>  </head>  <body>   <h1>Мой первый HTML-документ</h1> 	<ul type="circle"> 	 <li>Первый пункт</li> 	 <li type="square">Второй пункт</li> 	 <li>Третий пункт</li> 	</ul>  </body> </html>

По умолчанию в тегах UL, LI используется type круга disc:

<html>  <head>  <title>Мой первый HTML-документ</title>  </head>  <body>   <h1>Мой первый HTML-документ</h1>  <ul type="disc">  <li>Первый пункт</li>  <li type="square">Второй пункт</li>  <li>Третий пункт</li>  </ul>  </body> </html>

А теперь уберем атрибут type у тега UL и посмотрим что случится.

<html>  <head>  <title>Мой первый HTML-документ</title>  </head>  <body>   <h1>Мой первый HTML-документ</h1> 	<ul> 	 <li>Первый пункт</li> 	 <li type="square">Второй пункт</li> 	 <li>Третий пункт</li> 	</ul>  </body> </html>

Теперь давайте сделаем все три пункта разными маркерами:


<html>  <head>  <title>Мой первый HTML-документ</title>  </head>  <body>   <h1>Мой первый HTML-документ</h1> 	<ul> 	 <li type="disc">Первый пункт</li> 	 <li type="square">Второй пункт</li> 	 <li type="circle">Третий пункт</li> 	</ul>  </body> </html>

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

Списки OL

Тег OL (ordered list — нумерованный список) не такой распространенный как UL, но используется тоже очень часто, когда нужно вывести последовательность действий, хронологию событий, нумерацию объектов и т.д. Везде где нужно нумеровать строки, можно использовать тег OL.

<html>  <head>  <title>Мой первый HTML-документ</title>  </head>  <body>   <h1>Мой первый HTML-документ</h1> 	<ol> 	 <li>Первый пункт</li> 	 <li>Второй пункт</li> 	 <li>Третий пункт</li> 	</ol>  </body> </html>

Как и у тега UL у OL есть атрибут type, только значения у этого атрибута для ul другие:

  1. type=»A» — заглавные латинские буквы (большая английская A «эй»);
  2. type=»a» — строчные латинские буквы (маленькая английская a «эй»);
  3. type=»I» — заглавные римские цифры (большая английская I «ай»);
  4. type=»i» — строчные римские цифры (маленькая английская i «ай»);
  5. type=»1″ — арабские цифры, используются по умолчанию.

Можете попробовать различные варианты атрибута type для тега UL. Приведу лишь один пример:

<html>  <head>  <title>Мой первый HTML-документ</title>  </head>  <body>   <h1>Мой первый HTML-документ</h1> 	<ol type="i"> 	 <li>Первый пункт</li> 	 <li>Второй пункт</li> 	 <li>Третий пункт</li> 	 <li>Четвертый пункт</li>	  	</ol>  </body> </html>

drupalbook.ru

Слово HTML представляет собой сокращение от HyperText Markup Language — язык разметки гипертекста. В основном, HTML-документ является простым текстовым файлом, который содержит текст и ничего больше. Так что создавать веб-страницы можно в любом текстовом редакторе.

Когда веб-страница открывается в браузере, он просматривает код HTML, находит специальные символы, называемые тегами, и использует их для вставки изображений, изменения вида текста, создание ссылок на другие веб-страницы и др.

Для обозначения тегов используется символ <тег>. Теги бывают двух видов: парные, которые выделяют блок текста, также называются еще контейнером (пример 1) и одиночные. Контейнер требует закрывающего тега, обозначаемого </тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.


  • A
  • EM
  • STRONG
  • CITE
  • UL
  • OL
  • LI
  • DL
  • DT
  • DD

<a> Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег <A> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения параметра href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Синтаксис <a href="URL">…</a> <a name="идентификатор">…</a>
Параметры


href
Задает адрес документа, на который следует перейти.
name
Устанавливает имя якоря внутри документа.
target
Имя окна или фрейма, куда браузер будет загружать документ.
title
Добавляет всплывающую подсказку к тексту ссылки.

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

 


<em> Тег <EM> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Синтаксис <em>Текст</em>
Параметры НЕТ
Закрывающий тег обязателен.


<strong> Тег <STRONG> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Синтаксис <strong>текст</strong>
Параметры НЕТ
Закрывающий тег обязателен.


<cite> Тег <CITE> помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера <CITE> курсивом.
Синтаксис <cite>…</cite>
Параметры НЕ ВИДЕЛ
Закрывающий тег обязателен.



<code> Тег <CODE> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера <CODE> как моноширинный текст уменьшенного размера. В отличие от тега <PRE> дополнительные пробелы внутри контейнера не учитываются, так же, как и переносы текста. Поэтому используйте тег <BR> или <P> для создания переносов.
Синтаксис <code>...</code>
Параметры НЕТ
Закрывающий тег обязателен.


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

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


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

 


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

type
Устанавливает вид маркера списка.
start
Число, с которого будет начинаться нумерованный список. Значением может быть любое целое положительное число.

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


<li> Тег <LI> определяет отдельный элемент списка. Внешний тег <UL> или <OL> устанавливает тип списка — маркированный или нумерованный.
Синтаксис <ul> <li>элемент маркированного списка>/li> </ul> <ol> <li>элемент маркированного списка</li> </ol>
Параметры

type
Устанавливает вид маркера нумерованного или маркированного списка.
value
Число, с которого будет начинаться нумерованный список.

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

 


<dl> Тег <DL> входит в тройку элементов <DL>, <DT>, <DD>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <DL>, куда входит тег <DT> создающий термин и тег <DD> задающий определение этого термина.
Синтаксис <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> </dl>
Параметры НЕТ
Закрывающий тег не обязателен.


<dt> Тег <DT> входит в тройку элементов <DL>, <DT>, <DD>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <DL>, куда входит тег <DT> создающий термин и тег <DD> задающий определение этого термина. Закрывающий тег </DT> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.
Синтаксис <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> </dl>
Параметры НЕТ
Закрывающий тег не обязателен.


<dd> Тег <DD> входит в тройку элементов <DL>, <DT>, <DD>, предназначенных для создания списка определений.


ждый такой список начинается с контейнера <DL>, куда входит тег <DT> создающий термин и тег <DD> задающий определение этого термина. Закрывающий тег </DD> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.
Синтаксис <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> </dl>
Параметры НЕТ
Закрывающий тег не обязателен.

Информация взята с сайта htmlbook

www.crestbook.com

Списки в HTML (XHTML)

 Списки в HTML (XHTML) используются для оформления и форматирования видимой текстовой части html-документа. Дополнительно, на основании кодов списков, в HTML-разметке веб-страницы создаются и группируются элементы управления и навигации – кнопочки и менюшки (простые и выпадающие). Коды списков языка гипертекстовой разметки HTML ничем не отличаются от кодов списков XHTML…

  1. Код и видимая часть списков HTML
  2. Виды списков в HTML
    • Маркированный список
    • Нумерованный список
    • Список определений
    • Многоуровневые (вложенные) списки
    • Ненумерованные и немаркированные списки
    • Выпадающие списки
  3. Теги списков в HTML
    <ul>,<ol>,<li>,<dl>, dt>,<dd>
  4. Как создать список в html
  5. Примеры списков html
    • Маркированный | Теги <ul> и <li>
    • Нумерованный | Теги <ol> и <li>
    • Многоуровневые (вложенные) списки
    • Список определений | Теги <dl>, <dt> и <dd>
    • Ненумерованные и немаркированные списки

Код и видимая часть списков HTML

Равно как и все объекты веб-страницы, списки в HTML имеют две составляющие – код списка и его видимую часть (интерпретацию кода). Код списка HTML невидим пользователю. Код записывается в HTML-разметку веб-документа и интерпретируется браузером непосредственно на экран монитора пользователя – это будет видимая часть списка.

Виды списков в HTML

В HTML существует три вида списков – маркированный, нумерованный и список определений. Все виды списков могут быть многоуровневыми и содержать вложенные списки. Степень и вложенность списков определяется их кодом – порядком записи тегов.

Теги списков в HTML

Для создания кода списков в HTML используются теги:
<ul>, <ol> и <li>, а также <dl>, <dt> и <dd>
Все теги парные – закрывающий тег обязателен.
Теги списков в HTML создают и обозначают:

  • <ul> – маркированный список
  • <ol> – нумерованный список
  • <li> – элементы (строки) маркированного и нумерованного списков
  • <dl> – список определений
  • <dt> – элемент-термин в списке определений
  • <dd> – элемент-описание в списке определений

Как создать список в html

Чтобы создать список в веб-документе, нужно в его HTML-разметке написать html-код списка. Код любого html-списка начинается и заканчивается обрамляющими (оборачивающими) тегами (ol, ul, dl) которые указывают браузеру на вид списка. Между оборачивающими (обрамляющими) тегами располагаются элементы списка, обёрнутые, в свою очередь – тегами элементов списка (li, dd, dt).

Существует множество визуальных html-редакторов, облегчающих работу по созданию разнообразных списков. В этой статье, речь – непосредственно про коды списка на веб-странице. Выбор способа создания кода, в Notepad-е (блокноте) или в хитрющем html-редакторе – личное дело юзера. Практически все текстовые html-редакторы слишком упрощённо подходят к созданию html-списков.

Маркированный html-список | Теги <ul> и <li>

Код маркированного списка начинается с открывающего тега <ul>. Потом идут элементы, обрамлённые парными тегами <li></li>. Код маркированного списка заканчивается закрывающим тегом </ul>. Пример кода маркированного списка:

Маркированный (неупорядоченный) список по-англицки звучит, как Unordered List. Становится понятной аббревиатура его обрамляющего тега – <ul> (Unordered List). Написание тега <ul> заглавными литерами – <UL>. В спецификации HTML нет верхнего регистра. Правильно писать – <ul>

Нумерованный html-список | Теги <ol> и <li>

Код нумерованного списка ничем не отличается от кода маркированного списка, с той разницей, что обрамляющие список теги <ul> заменяются на <ol> (анг. Ordered List – нумерованный, упорядоченный список). Код нумерованного списка открывает тег <ol>. Внутри находятся элементы, обрамлённые парными тегами, вида <li>элемент</li>. Закрывается код нумерованного списка тегом </ol>. Пример кода нумерованного списка:

Многоуровневые (вложенные списки)

Вложенные (многоуровневые, ступенчатые) списки в HTML представляют наибольший интерес. Чтобы создать многоуровневый вложенный список в HTML, нужно в код одного списка вставить код другого списка. Код вложенного списка вставляется в виде отдельного элемента, между тегами <li></li>. Порядок и степень вложения не имеет значения. Допускается вкладывать маркированный список в нумерованный и наоборот, на любую глубину и пока не надоест. Браузер всё вытерпит. Пример кода многоуровневого списка со вложенными списками (код основного списка обозначен синим цветом, первого вложенного – жёлтым, второго вложенного – зелёным):

Список определений | Теги <dl>, <dt> и <dd>

Список определений (описаний, объяснений) – перечень терминов и пояснений к ним. Этот вид текстовой записи списка специально придуман для объяснения и описания терминов и определений, например – описания списка товаров. Список определений отличается от обычных списков. Элементы списка определений разделены на две части – слово (термин) и его описание (определение, пояснение для этого слова или термина).

Код списка определений начинается открывающим тегом <dl> (анг. Definition Lists – список определений). После него идёт элемент-термин списка, который требуется объяснить – этот элемент обрамлён парным тегом <dt></dt>. Дальше идёт текстовый объясняющий элемент списка, он обрамлён парным тегом <dd></dd>. Код списка определений заканчивается закрывающим тегом </dl>. Пример кода списка определений:

Для усиления визуального эффекта использован CSS,
который к данному коду не имеет никакого отношения.

Элементы списка определений не имеют бу́ллетов – специальных типографских знаков. В HTML, списки определений существует исключительно для создания описаний и оформления текстовой видимой части веб-документа. Маркированный и нумерованный списки значительно универсальней и разнообразней. Управление их внешним видом производится при помощи атрибутов тегов списка и атрибутов тегов элементов (строк) списка. Дополнительно, маркированный и нумерованный списки используются в html-разметке веб-страниц для создания и группирования элементов управления и навигации.

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

Список без ничего – без нумерации, маркировки и прочих списочных причиндалов (бу́ллетов), получится из маркированного или нумерованного списка, после присвоения последнему свойства list-style:none;

Более сложный способ скрыть/убрать бу́ллеты (маркеры) у списка – это добавить ему свойство overflow: hidden;, которое обрезает выступающую за пределы списка маркировку (нумерацию, или что там у него есть). Прим. Обрезание маркеров (overflow: hidden;) работает только за пределами списка – свойство list-style-position: outside; Это свойство устанавливается дефолтными настройками по-умолчанию для всех видов браузеров и, если специально нигде не указано другое (list-style-position:inside;) то тогда добавляем просто overflow: hidden;. Пример кода немаркированного и ненумерованного списка (<ul> или <ol>, не важно):

tehnopost.info

Продолжим наши разговоры о началах html. В этой статье я хочу поговорить о том, как создавать абзацы, списки и заголовки в тексте. А так же, об одиночных тегах <br /> и <hr />.

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

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

Как всегда, план работы:

  1. Абзацы <p></p>
  2. Разрывы строк <br />
  3. Списки <ul></ul>, <ol></ol> и элементы списков <li></li>
  4. Заголовки
  5. Горизонтальные линейки <hr />

Абзацы <p></p>

Текст почти всегда состоит из абзацев. Абзац — это элемент текста, несущий законченную мысль.

В html абзац, как можно судить из заголовка, обозначается <p></p>. Буква «p» взята из слова «paragraph», что как-раз обозначает «абзац».

Рассмотрим пример:

<p>
Текст первого абзаца. Он содержит мысль. Но вот мысль закончилась.
</p>
<p>
Вот уже началась другая мысль и мы пишем ее в другом абзаце.
</p>

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

Разрывы строк <br />

Иногда требуется перевести строку, не заканчивая при этом мысль, не закрывая абзац. То есть, просто перейти на новую строку. Для этого есть одиночный тег <br />. Вот пример его применения:

<p>
Ветер весело гуляет<br/>
И кораблик подгоняет<br/>
Он бежит себе в волнах<br/>На поднятых парусах.
</p>

Этот фрагмет стихотворения А.С. Пушкина помог нам проиллюстрировать действие тега <br/>. Я специально последние две строки этого четверостишия разместил в одной строке кода, чтобы показать, что строки переносятся на новую строку не из-за того, что мы расставили переносы строк, а из-за того, что мы расставили теги <br/>. Этот тег совсем простой и не нуждается в подробных пояснениях, поэтому на этом мы закончим его обсуждать.

Списки <ul></ul>, <ol></ ol>и элементы списков <li></li>

Иногда в тексте нужно перечислить что-то. Для этой цели применяются три тега: ul, ol, li. Все эти теги контейнерные, но тег <li></li> всегда содержится в одном из контейнеров <ul></ul> или <ol></ol>, и не имеет смысла вне них. Контейнер ul применяется, когда нам не важен порядок перечисляемых позиций, и мы не хотим акцентировать внимание на порядке, в котором они идут. А тег ol, наоборот, акцентирует внимание на последовательности следования элементов, автоматически нумеруя каждую строку. Рассмотрим пример:

<ul>
   <li>Булка</li>
   <li>Пирожок</li>
   <li>Буханка</li>
   <li>Пирог</li>
</ul>

На экране браузера этот код будет выглядеть так:

  • Булка
  • Пирожок
  • Буханка
  • Пирог

Если мы просто заменим тег ul на тег ol, то получим нумерованый список:

<ol>
   <li>Булка</li>
   <li>Пирожок</li>
   <li>Буханка</li>
   <li>Пирог</li>
</ol>

Теперь это выглядит так:

  1. Булка
  2. Пирожок
  3. Буханка
  4. Пирог

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

<ul>
Инструменты:
   <li>Пила</li>
   <li>Отвертки
      <ol>
         <li>Прямая</li>
         <li>Крестовая</li>
      </ol>
   </li>
   <li>Дрель</li>
</ul>

Нужно немного поэкспериментировать с этими списками, чтобы приучиться их использовать. Есть еще один вид списков, но он применяется редко, поэтому я не буду о нем сейчас рассказывать. Может быть, в другой статье.

Конечно, как и все остальное, внешний вид этих элементов может быть изменен до неузнаваемости при помощи CSS.

Заголовки

Конечно, абзацы помогают в структурировании документов. Но для того, чтобы разбить большой текст на меньшие логические части, можно озаглавить каждую из них. Каждая часть может содержать еще подчасти, со своими заголовками нижнего уровня, и так далее. Для задания заголовка, служат теги <hx></hx>, где «x» — число от 1 до 6. Заголовок тем ниже уровнем, чем больше это число. То есть, заголовок самого верхнего уровня будет называться h1, а самого нижнего — h6. По-умолчанию, текст, находящийся в этих заголовках, отображается большим шрифтом с отступами. Этот текст отображается на всю строку, то есть теги hx являются блочными. У тега h1 шрифт самый крупный, а у тега h6 — самый мелкий. Как правило, на странице один, максимум — два тега верхнего уровня h1. С понижением уровня, количество тегов возрастает. Но редко какой веб-мастер сможет разбить текст так, что ему понадобятся заголовки 5 или 6 уровня. Даже 4 уровень применяется редко.

Меньше слов, больше дела!

<h1>Все меньше</h1>
<h2>и меньше</h2>
<h3>и меньше</h3>
<h4>и меньше</h4>
<h5>и меньше</h5>
<h6>и меньше…</h6>

Надеюсь, ситуация с заголовками теперь прояснилась.

dayte2.com

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

В HTML 5 используется три вида списков: нумерованный, маркированный и список определения.

Нумерованный список формируется парным тегом <ol> (от англ. ordered list). Сам элемент ‘ol’ используется, как контейнер для пунктов списка, которые формируются парными тегами <li> и располагаются друг за другом.

По умолчанию пункты списка нумеруются браузером по порядку, начиная с единицы. Если нумерацию нужно начать не с единицы, то используется атрибут start, который задает число, с которого будет начинаться нумерованный список. В качестве значения атрибут принимает целые числа. Можно также изменить порядок нумерации на обратный. Для этого служит атрибут reversed, который используется без значений. Атрибут введен в HTML 5 и работает во всех браузерах, кроме IE.

Имеется также возможность устанавливать вид маркера нумерованного списка. Для этого используется атрибут type, который может принимать значения «A | a | I | i | 1», которые, соответственно, означают:

  • заглавные латинские буквы,
  • строчные латинские буквы,
  • заглавные римские цифры,
  • строчные римские цифры,
  • арабские цифры.

Поскольку все перечисленные значения, и не только, могут быть с легкостью установлены через стили CSS, использование атрибута type, по мнению автора, не целесообразно, хотя и допускается в HTML 5.

Использование нумерованного списка показано в примере 2.10.

 <!DOCTYPE html> <html> <head> 	<meta charset="utf-8">	 	<title>Нумерованный список</title> </head> <body> 	<em style="color: green">Весенние месяцы по порядку:</em> 	 	<ol start="3" title="Весенние месяцы"> 		<li>март</li> 		<li>апрель</li> 		<li>май</li> 	</ol> 	 	<em style="color: red">Летние месяцы в обратном порядке:</em> 	 	<!-- Перечисляем в обратном порядке. В IE не работает! --> 	<ol start="8" reversed> 		<li>август</li> 		<li>июль</li> 		<li>июнь</li> 	</ol> </body> </html> 

Пример 2.10. Использование элемента ‘ol’

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

Маркированные списки. Теги <ul> и <li>,

Маркированный список формируется парным тегом <ul> (от англ. unordered list). Сам элемент ‘ul’ используется, как контейнер для пунктов списка, которые формируются, как и в случае с нумерованными списками, парными тегами <li> и располагаются друг за другом.

Маркированный список вместо цифр и букв использует маркеры в виде кружков. Изменить внешний вид маркеров можно при помощи стилей CSS. Что касается атрибута type, то его в HTML 5 убрали. Так что, остались только универсальные атрибуты и атрибуты-события.

Код, содержащий элемент ‘ul’, показан в примере 2.11.

 <!DOCTYPE html> <html> <head> 	<meta charset="utf-8">	 	<title>Маркированный список</title> </head> <body> 	<em style="color: green">Весенние месяцы:</em> 	<!-- Задаем фон, чтобы визуально увидеть область,  	занимаемую списком, как блочным элементом --> 	<ul style="background-color: yellow"> 		<li>март</li> 		<li>апрель</li> 		<li>май</li> 	</ul> </body> </html> 

Пример 2.11. Использование элемента ‘ul’

Списки определений. Теги <dl>, <dt>, <dd>

Список определений формируется парным тегом <dl> (от англ. definition list). Сам элемент ‘dl’ используется, как контейнер для пунктов списка. Каждый такой пункт, в свою очередь, состоит из элементов ‘dt’ (от англ. definition term) и ‘dd’ (от англ. definition description), сформированных, соответственно, парными тегами <dt> и <dd>. Первый из них содержит определяемый термин, а второй – определение термина.

Давайте для наглядности посмотрим пример 2.12.

 <!DOCTYPE html> <html> <head> 	<meta charset="utf-8">	 	<title>Список определений</title> </head> <body> 		 	<dl title="Список из двух определений"> 		<dt>HTML</dt> 			<dd>Стандартный язык гипертекстовой разметки веб-документов, <br> 			который повсеместно используется во Всемирной паутине.</dd> 		 		<dt>CSS</dt> 			<dd>Формальный язык описания внешнего вида документа, <br> 			написанного с использованием языка разметки.</dd> 	</dl> </body> </html> 

Пример 2.12. Использование элемента ‘dl’

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

Иногда возникает необходимость создания вложенных списков, которые представляют собою списки, расположенные в пунктах внешнего списка. Рассмотрим создание вложенных списков на примере 2.13.

 <!DOCTYPE html> <html> <head> 	<meta charset="utf-8">	 	<title>Вложенные списки</title> </head> <body> 	<!-- Пусть будет нумерованный список -->	 	<ol> 		<!-- В каждый пункт помещаем новый список --> 		<li>Три сорта яблок: 			<ul> 				<li>Антоновка,</li> 				<li>Штрефель,</li> 				<li>Кубань.</li> 			</ul> 		</li> 		<!-- А сюда поместим нумерованный список --> 		<li>Три сорта груш: 			<ol> 				<li>Чижовская,</li> 				<li>Вильямс,</li> 				<li>Дюшес.</li> 			</ol> 		</li> 	</ol> </body> </html>	 

Пример 2.13. Использование вложенных списков

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

belarusweb.net

Создание HTML-списков

  • Содержание:
  • 1. Маркированный список <ul>
  • 2. Нумерованный список <ol>
  • 3. Список определений <dl>
  • 4. Вложенный список
  • 5. Многоуровневый нумерованный список

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

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul> доступны ‎глобальные атрибуты.

<ul>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ul>
unordered list
Рис. 1. Маркированный список

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

Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

Блок списка также имеет стили браузера по умолчанию:

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.

Для тега <ol> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <ol>
Атрибут Описание, принимаемое значение
reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">.
type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).
<ol>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ol>
ordered list
Рис. 2. Нумерованный список

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

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.

Блок списка определений имеет следующие стили браузера по умолчанию:

dl {margin-top: 1em; margin-bottom: 1em;}

Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

<dl>   <dt>Режиссер:</dt>   <dd>Петр Точилин</dd>   <dt>В ролях:</dt>   <dd>Андрей Гайдулян</dd>   <dd>Алексей Гаврилов</dd>   <dd>Виталий Гогунский</dd>   <dd>Мария Кожевникова</dd>  </dl>
dl
Рис. 3. Список определений

4. Вложенный список

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

<ul>   <li>Пункт 1.</li>   <li>Пункт 2.   <ul>   <li>Подпункт 2.1.</li>   <li>Подпункт 2.2.    <ul>   <li>Подпункт 2.2.1.</li>   <li>Подпункт 2.2.2.</li>   </ul>   </li>    <li>Подпункт 2.3.</li>   </ul>   </li>   <li>Пункт 3.</li>  </ul>
ul ul ul
Рис. 4. Вложенный список

5. Многоуровневый нумерованный список

Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:

<ol>   <li>пункт</li> <!-1.->   <li>пункт    <ol>   <li>пункт</li> <!-2.1.->   <li>пункт</li> <!-2.2.->   <li>пункт   <ol>   <li>пункт</li> <!-2.3.1.->   <li>пункт</li> <!-2.3.2.->   <li>пункт</li> <!-2.3.3.->    </ol>   </li> <!-2.3.->   <li>пункт</li> <!-2.4.->    </ol>   </li> <!-2.->   <li>пункт</li> <!-3.->    <li>пункт</li> <!-4.->   </ol>

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

ol {  /* убираем стандартную нумерацию */  list-style: none;   /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */   counter-reset: li;   }  li:before {  /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */  counter-increment: li;   /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */  content: counters(li,".") ". ";   }
numeric list
Рис. 5. Многоуровневый нумерованный список

html5book.ru

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

Описание

Нумерованный (упорядоченный) список — это HTML список, в котором порядок элементов имеет существенное значение. Примером может служить инструкция по установке веб-сервера, рецепты, оглавления книг и т.д., всё это относится к упорядоченным спискам.

Для создания нумерованного списка в HTML используется тег <ol> (ol сокращение от англ. ordered list — упорядоченный список), который информирует браузер, что все его содержимое, вплоть до закрывающего тега </ol>, представляет собой нумерованный список. Тег <ol> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.

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

Примечание: для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Маркированные (неупорядоченные) списки определяются с помощью тега <ul>.

Атрибуты

reversed:
Указывает, что элементы списка будут идти в порядке убывания (вместо порядка по возрастанию). Возможные значения логического атрибута:

  <ol reversed>  <ol reversed="reversed">  <ol reversed="">  

Примечание: атрибут reversed поддерживается только браузерами Chrome и Safari.

start:
Устанавливает начальное целочисленное значение, с которого будет начинаться нумерация элементов в списке. Пример »
type:
Определяет вид маркера, который будет использоваться для элементов списка:

  • 1 — десятичные числа (1, 2, 3, 4 …).
  • A — латинские буквы в алфавитном порядке, в верхнем регистре (A, B, C, D …).
  • a — латинские буквы в алфавитном порядке, в нижнем регистре (a, b, c, d …).
  • I — римские цифры в верхнем регистре (I, II, III, IV …).
  • i — римские цифры в нижнем регистре (i, ii, iii, iv …).

Пример »

Тег <ol> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

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

Пример

  <ol>    <li>Кофе</li>    <li>Чай</li>    <li>Молоко</li>  </ol>    <ol start="50">    <li>Кофе</li>    <li>Чай</li>    <li>Молоко</li>  </ol>  

Результат данного примера в окне браузера:

Пример использования тега <ol>

puzzleweb.ru

Маркированные списки на основе тэгов UL и LI

Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI.

Между открывающим и закрывающим тегом располагаются отдельные пункты списка, которые в свою очередь заключаются в открывающий и закрывающий элемент LI. Сверху и снизу Html списков браузер добавляет отступы в одну строку, подобные отступам, создаваемым тэгом абзаца.

Давайте посмотрим, например, маркированный вариант, который может выглядеть так:

Тег ol

  • Первая строка
  • Вторая
  • Последний элемент

Внутри открывающего и закрывающего тегов UL могут стоять только элементы LI, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки).

Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI.

Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):

  1. <ul type=»disc»> — закрашенный кружок (по умолчанию);
  2. <ul type=»circle»> — не закрашенный кружок;
  3. <ul type=»square»> – квадрат

В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.

Пример маркированного списка с различными типами маркера для каждого пункта:

Тег ol

  1. Маркер в виде закрашенного диска
  2. Маркер в виде не закрашенного диска
  3. Квадрат

Нумерованные списки в Html на основе тэга OL

Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI.

Получается, что OL и UL — это служебные тэги, которые нужны только для того, чтобы указать браузеру, какой именно вид списка мы формируем (маркированный или же нумерованный). В случае нумерованного — слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку:

Тег ol

  1. Первая строка
  2. Второй пункт
  3. Третья строка

Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения:

  1. <ol type=»1″> — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
  2. <ol type=»A»> — заглавные буквы в качестве нумерации;
  3. <ol type=»a»> — строчные буквы;
  4. <ol type=»I»> — заглавные римские цифры;
  5. <ol type=»i»> — строчные римские цифры;

Пример нумерованного списка с различными типами нумерации для каждого пункта:

Тег ol

  1. с нумерацией большими римскими цифрами
  2. Нумерация маленькими латинскими буквами
  3. Нумерация малыми римскими цифрами

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

Тег ol

  1. Первый элемент, номер которого задан в теге OL атрибутом start=»23″
  2. Следующий пункт, с номером на единицу большим
  3. Еще на единицу больше

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

Тег ol

  1. Первый пункт с номером один
  2. Этот элемент получит номер, указанный в атрибуте value=»32″
  3. Пункт с большим номером

Оформление внешнего вида списков в CSS (таблицах стилей)

Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а при помощи селекторов класса или Id, для которых прописываются соответствующие свойства.

В правилах CSS, прописанных для этого класса или Id, указывается, какая картинка будет использоваться в качестве маркера, на каком расстоянии маркер будет отстоять от текста и еще многое. Подробности смотрите в статье про свойства таблиц стилей List style ( type, image, position).

Здесь я просто приведу пример различных маркеров для ненумерованных списков, внешний вид которых задается через отдельный файл с таблицами каскадных стилей.

<ul classs="vash_class"> <li>Первый пункт</li> <li>Второй</li> <li>Последний</li> </ul>

Но а о тонкостях работы с CSS мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для UL на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка — Тег ol, для вложенных пунктов ненумерованного — Тег ol.

ktonanovenkogo.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.