Главная
Дизайн блога
Как сделать Маркированный список в HTML?

Как сделать Маркированный список в HTML?

Хорошего настроения всем читателям – Sozdaiblog.ru!

Сегодня мы познакомимся с маркированными списками в HTML.

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

Но больше всего мне нравится пользоваться маркированным списком.

Как правило, в виде списка оформляют перечень чего-либо (перечисляют события, предметы, вещи, составные части целого). Использование списков позволяет сделать информацию более наглядной и запоминающейся.

Поэтому в этой статье мы поговорим о том, какими по виду могут быть списки.

Итак.

Виды маркированных списков.

1. Стандартный маркированный список.

Подобные списки также называют «неупорядоченными».

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

Выбор того или иного значка зависит только от Вашего вкуса.

Стандартный маркированный список создается при помощи тега <ul>.

Список с маркерами в форме окружности создается при помощи тега <ul type=”circle”>.

Ну, а список с квадратными маркерами создается при помощи тега <ul type=”square”>.

<ul>
<li>Маркированный список</li>
<li>Маркированный список</li>
<li>Маркированный список</li>
</ul>

<ul type="circle">
<li>Маркированный список</li>
<li>Маркированный список</li>
<li>Маркированный список</li>
</ul>

<ul type="square">
<li>Маркированный список</li>
<li>Маркированный список</li>
<li>Маркированный список</li>
</ul>

Однако многое зависит от браузера пользователя. В некоторых из них будут отображаться лишь маркеры определенного вида (независимо от того, что вы указали в коде).

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

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

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

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

или

Такие конструкции не всегда являются HTML-списками, потому что они формируются не только при помощи специальных маркировочных тегов.

<style>
  ul {
    list-style-image: url(Путь к картинке/1.png);
   }
</style>
<ul>
   <li>Настраиваемый маркированный список</li>
   <li>Настраиваемый маркированный список</li>
   <li>Настраиваемый маркированный список</li>
  </ul>

или

<table class="browser">
<thead>
<tr>
<th>Browser</th>
<th>.mp3</th>
<th>.wav</th>
<th>.ogg</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mozzila Firefox 3.6</td>
<td></td>
<td>✓</td>
<td>✓</td>
</tr>
<tr>
<td>Opera 10.63</td>
<td></td>
<td>✓</td>
<td>✓</td>
</tr>
<tr>
<td>Google Chrome 8.0</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
<tr>
<td>Apple Safari 5.0.3 (with QuickTime)</td>
<td>✓</td>
<td>✓</td>
<td></td>
</tr>
<tr>
<td>Microsoft IE 9 Beta</td>
<td>✓</td>
<td>✓</td>
<td></td>
</tr>
</tbody>
</table>
<style type="text/css">
.browser, table.browser thead, table.browser tbody, table.browser th, table.browser td, table.browser tr, table.attribute thead, table.attribute tbody, table.attribute th, table.attribute td, table.attribute tr{
margin:5px auto 5px auto;
padding:10px;
border:2px solid #000000;
table-layout:auto;
border-collapse:collapse;
vertical-align:middle;
background: #e0e7ef;
}
article th{
background-color:#CCFF33;
font-weight:bold; }
</style>

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

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

Другими словами, это упорядоченный список.

Каждый элемент такого списка будет иметь свое собственное число (порядковый номер).

По умолчанию используются арабские цифры 1,2,3 и т.д., но также здесь могут использоваться римские числа и буквы латинского алфавита.

Для создания стандартного нумерованного списка (с арабскими цифрами) используется тег <ol>.

Создать список, в котором вместо цифр будут использоваться заглавные латинские буквы, можно так <ol type=”A”>.

Для создания нумерованного списка со строчными буквами используется тег <ol type=”a”>.

Список с римскими цифрами можно создать при помощи тега <ol type=”I”>.


<ol>
    <li>Нумерованный список</li>
    <li>Нумерованный список</li>
    <li>Нумерованный список</li>
</ol>

<ol type="A">
    <li>Нумерованный список</li>
    <li>Нумерованный список</li>
    <li>Нумерованный список</li>
</ol>

<ol type="a">
    <li>Нумерованный список</li>
    <li>Нумерованный список</li>
    <li>Нумерованный список</li>
</ol>
<ol type="I">
    <li>Нумерованный список</li>
    <li>Нумерованный список</li>
    <li>Нумерованный список</li>
</ol>

Вы также можете начать нумерованный список не с первой позиции, а с той, с которой вам нужно.

Для этого используется специальный атрибут start, к примеру, <ol type=”I” start=”3″> (перечисление начнется с третьей позиции).

<ol type="I" start="3">
    <li>Нумерованный список</li>
    <li>Нумерованный список</li>
    <li>Нумерованный список</li>
</ol>

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

4. Многоуровневый список.

Такой список обычно состоит из нескольких вложенных списков.

Создание многоуровневого списка может потребоваться при описании сложной структуры чего-либо, или при написании оглавления (если есть разделы и подразделы).

Формируется многоуровневый список так же, как и обычный.

То есть сначала создается основной список (каркас). Затем внутрь него начинают вставляться дополнительные списки. Причем в многоуровневом списке могут присутствовать сразу маркированные и нумерованные списки.

<ol>
<li>Многоуровневый список
<ul>
<li>Многоуровневый список</li>
<li>Многоуровневый список</li>
</ul>
</li>
<li>Многоуровневый список
<ul>
<li>Многоуровневый список</li>
<li>Многоуровневый список</li>
</ul>
</li>
<li>Многоуровневый список<br>
</li>
</ol>

На этом примере наше знакомство с маркированными списками заканчивается.

Надеюсь, что данный пост был Вам полезен.

До новых встреч!

С уважением, Денис Черников!