Главная / Верстка / Html / Списки в HTML-документах +

Списки в HTML-документах +


30.06.2015 15:041428

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

Списки в HTML бывают двух типов: нумерованные и ненумерованные. И, как вы понимаете, перед элементами нумерованных списков ставятся цифры (номера), а перед элементами ненумерованных списков — буллеты (точки, кружочки, квадратики).

Тег <ol> задает нумерованный список. Ненумерованный список задает тег <ul>. Для обозначения элемента списка внутри этих тегов служит тег <li>.

Тег OL

Тег <ol> создает упорядоченный (т.е. нумерованный) список. Закрывающий тег обязателен. Между открывающим и закрывающим тегами должен присутствовать как минимум один элемент <li>.

Атрибуты:

start —задает число, с которого будет начинаться список. По умолчанию — с еденицы.

type —задает стиль маркеров пунктов списка.
Атрибут может иметь значения:
A — заглавные латинские буквы;
a — строчные латинские буквы;
I — большие римские цифры;
i — маленькие римские цифры;
1 — арабские цифры. По умолчанию арабские цифры.

Пример кода:

<!--Пример списка с заглавными латинскими буквами-->
<p>
Чтобы сделать сайт вам необходимо:</p>
<ol type="A">
<li>Выучить HTML.</li>
<li>Выучить CSS.</li>
<li>Познакомиться с PHP.</li>
</ol>

<!--Пример списка с большими римскими цифрами-->
<p>Научиться пользоваться программами:</p>
<ol type="I">
<li>Adobe Dreamweaver.</li>
<li>Adobe Photoshop.</li>
<li>Total Commander.</li>
</ol>

<!--Пример списка не с начала-->
<p>Чтобы сайт приносил доход:</p>
<ol start="2">
<li>Публикуйте полезную для людей информацию.</li>
<li>Пишите уникальный текст.</li>
<li>Почаще пополняйте сайт новым содержимым.</li>
<li>Первый пункт придумайте сами.</li>
</ol>

В браузере увидим:

Чтобы сделать сайт вам необходимо:

  1. Выучить HTML.
  2. Выучить CSS.
  3. Познакомиться с PHP.

Научиться пользоваться программами:

  1. Adobe Dreamweaver.
  2. Adobe Photoshop.
  3. Total Commander.

Чтобы сайт приносил доход:

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

Тег UL

Тег <ul> служит для создания ненумерованного списка. Закрывающий тег обязателен. Между тегами должен присутствовать элемент <li>.

Атрибут:

type —задает вид маркеров пунктов списка.
Значения:
disc — точка;
circle — кружочек;
square — квадрат. По умолчанию — disc.

Пример кода:

<ul type="circle">
<li>Кружок. Пункт 1.</li>
<li>Кружок. Пункт 2.</li>
</ul>

<ul type="disc">
<li>Точка. Пункт 1.</li>
<li>Точка. Пункт 2.</li>
</ul>

<ul type="square">
<li>Квадрат. Пункт 1.</li>
<li>Квадрат. Пункт 2.</li>
</ul>

<ul>
<li>
По умолчанию. Точка.</li>
</ul>

Вид в браузере:

  • Кружок. Пункт 1.
  • Кружок. Пункт 2.
  • Точка. Пункт 1.
  • Точка. Пункт 2.
  • Квадрат. Пункт 1.
  • Квадрат. Пункт 2.
  • По умолчанию. Точка.

Тег LI

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

Атрибут:

value — меняет порядок нумерации элементов списка. Атрибут value применяется только для нумерованных списков, когда тег <li> находится внутри тега <ol>.

Пример:

Чтобы сайт приносил доход:
<ol>
<li>
Первый пункт придумайте сами.</li>
<li value="4">
Публикуйте полезную для людей информацию.</li>
<li>
Пишите уникальный текст.</li>
</ol>

В браузере:

Чтобы сайт приносил доход:
  1. Первый пункт придумайте сами.
  2. Публикуйте полезную для людей информацию.
  3. Пишите уникальный текст.

 

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

 

Пример вложенного списка
  1. Пункт 1.
    • Первый вложенный.
    • Второй вложенный.
  2. Пункт 2.

А код будет выглядеть так:

Пример вложенного списка
<ol>
<li>
Пункт 1.</li>
<ul>

<li>Первый вложенный.</li>
<li>
Второй вложенный.</li>
</ul>
<li>
Пункт 2.</li>
</ol>

На этом со списками все. Переходим к работе с изображениями >>


Html , Списки Html



Верстка / Html PRoHtml


«Списки в HTML-документах +» - Похожие страницы

Ссылки в HTML-документах + После того, как мы научились помещать в HTML-страницу изображения, пора изучить основу гипертекстового пространства — ссылки.   Ссылки бывают разные: ссылка с одной страницы сайта на другую, ссылка на стра...
Html 1211

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям