Главные новости

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

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

HTML список отмеченный как бы маркером.

Пример:

<title>HTML список отмеченный как бы маркером.</title>
</head>
<body>
<ul>
<li>CMSCODE</li>
<li>SHABLONI</li>
<li>HTML УРОКИ</li>
</ul>
</body>
</html>

Результат:

  • CMSCODE
  • SHABLONI
  • HTML УРОКИ

Теги:

  • <ul> </ul> – определяют HTML список отмеченный как бы маркером.
  • <li> </li> – определяют элементы HTML списока отмеченного как бы маркером.

Определяем тип маркера для элементов маркированного HTML списка: в данном случае он будет квадратным и закрашенным.

<title>HTML маркированный список</title>
</head>
<body>
<ul type="square">
<li>CMSCODE</li>
<li>SHABLONI</li>
<li>HTML УРОКИ</li>
</ul>
</body>
</html>

Результат:

  • CMSCODE
  • SHABLONI
  • HTML УРОКИ

Атрибуты и значения

  • type="" – сообщает браузеру что будет задан тип маркера HTML списка.
  • Значение square – определяет тип маркера HTML списка: закрашенный квадратик.

Аналогичый пример но уже тип маркера будет круг и он не закрашен:

<title>HTML списки, теги</title>
</head>
<body>
<ul type="circle">
<li>CMSCODE</li>
<li>SHABLONI</li>
<li>HTML УРОКИ</li>
</ul>
</body>
</html>

Результат:

  • CMSCODE
  • SHABLONI
  • HTML УРОКИ

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

Пример:

<title>HTML нумерованный список от первого до последнего элемента в списке.</title>
</head>
<body>
<ol>
<li>CMSCODE</li>
<li>SHABLONI</li>
<li>HTML УРОКИ</li>
</ol>
</body>
</html>

Теги <ol> </ol> определяют нумерацию HTML списка.

Результат:

  1. CMSCODE
  2. SHABLONI
  3. HTML УРОКИ

 

Пример 2:

<title>HTML нумерованный список от первого до последнего элемента в списке.</title>
</head>
<body>
<ol type="A">
<li>CMSCODE</li>
<li>SHABLONI</li>
<li>HTML УРОКИ</li>
</ol>
</body>
</html>

type="A" определяет в качестве маркера нумерующего списка большие буквы.

Результат:

  1. CMSCODE
  2. SHABLONI
  3. HTML УРОКИ

Пример 3:

<title>Нумерованные HTML списки</title>
</head>
<body>
<ol type="a">
<li>CMSCODE</li>
<li>SHABLONI</li>
<li>HTML УРОКИ</li>
</ol>
</body>
</html>

type="а" определяет в качестве маркера нумерующего HTML списка маленькие буквы.

Результат:

  1. CMSCODE
  2. SHABLONI
  3. HTML УРОКИ

Пример с атрибутом start:

<title>HTML теги, определяющие нумерованные списки</title>
</head>
<body>
<ol start="3">
<li>CMSCODE</li>
<li>SHABLONI</li>
<li>HTML УРОКИ</li>
</ol>
</body>
</html>

Результат:

  1. CMSCODE
  2. SHABLONI
  3. HTML УРОКИ

Атрибут start="" определяет первый символ первого пункта с которого будет начинаться нумерация.

HTML многоуровневые или вложенные списки

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

<title>HTML вложенные списки (многоуровневый)</title>
</head>
<body>
<ul>
<li>Америка</li>
<li>Европа
  <ul>
  <li>Швеция</li>
  <li>Норвегия</li>
  <li>Финляндия</li>
  </ul>
</li>
<li>Азия</li>
<li>Австралия</li>
</ul>

Результат:

  • Америка
  • Европа
    • Швеция
    • Норвегия
    • Финляндия
  • Азия
  • Австралия

Отсюда и название списка → вложенный или многоуровневый список.

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

Пример:

<title>HTML списки определений</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Гипертекстовый язык разметки</dd>
<dt>CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>

Результат:

HTML
Гипертекстовый язык разметки
CSS
Каскадные таблицы стилей

Рассмотрим теги

  • <dl> </dl> – определяют HTML списки определений.
  • <dt> </dt> – определяют определяемые термины.
  • <dd> </dd> – определяют опрeделения.

Некоторые отличия в разных версиях хостинга данные теги представленные ниже немного отличаются

<ol type="a">
<li>CMSCODE</li>
<li>SHABLONI</li>
<li>HTML УРОКИ</li></ol>

и должен быть вид

a. CMSCODE
b. SHABLONI
c. HTML УРОКИ

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