Основы работы с HTML

Списки HTML

Разбить на страницы
Показывать лекцию целиком

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

Неупорядоченные списки

Неупорядоченный список является списком элементов. Элементы списка маркируются с помощью специальных знаков (обычно небольшой черный круг).

Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

<html>
<body>

<h4>Неупорядоченный список:</h4>
<ul>
  <li>элемент 1</li>
  <li>элемент 2</li>
  <li>элемент 3</li>
</ul>

</body>
</html>

Пример выполнения данного HTML-кода

Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

Упорядоченные списки

Упорядоченный список также является списком элементов. Элементы списка маркируются с помощью чисел или букв.

Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>. У тега <ol> может быть два атрибута: start (определяет первое число, с которого начинается нумерация пунктов) и type (определяет стиль нумерации пунктов). Может иметь значения:

  • "A" - заглавные буквы A, B, C ...
  • "a" - строчные буквы a, b, c ...
  • "I" - большие римские числа I, II, III ...
  • "i" - маленькие римские числа i, ii, iii ...
  • "1" - арабские числа 1, 2, 3 ...
    •  
    <html>
<body>

<h4>Упорядоченный список:</h4>
<ol>
  <li>элемент 1</li>
  <li>элемент 2</li>
  <li>элемент 3</li>
</ol>

</body>
</html>

    Пример выполнения данного HTML-кода

    Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

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

    Список определений не является списком элементов. Это список терминов и определений терминов.

    Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>.

    <html>
<body>

<dl>
<dt>элемент 1</dt>
<dd>описание элемента 1</dd>
<dt>элемент 2</dt>
<dd>описание элемента 2</dd>
</dl>

</body>
</html>

    Пример выполнения данного HTML-кода

    Внутри определения списка определений (тег <dd> ) можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

    Дополнительные примеры

    Различные типы упорядоченных списков

    <html>
<body>

<h4>Список проектов с цифрами:</h4>
<ol>
 <li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ol>  

<h4>Список с буквами:</h4>
<ol type="A">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ol>  

<h4>Список с буквами нижнего регистра:</h4>
<ol type="a">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ol>  

<h4>Список с римскими цифрами:</h4>
<ol type="I">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ol>  

<h4>Список с римскими цифрами в нижнем регистре:</h4>
<ol type="i">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ol>  

</body>
</html>

    Пример выполнения данного HTML-кода

    Различные типы неупорядоченных списков

    <html>
<body>

<h4>Список со значком кругом:</h4>
<ul type="disc">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ul>  

<h4>Список со значком окружностью:</h4>
<ul type="circle">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ul>  

<h4>Список со значком квадратом:</h4>
<ul type="square">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ul>  

</body>
</html>

    Пример выполнения данного HTML-кода

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

    <html>
<body>

<h4>Вложенный список:</h4>
<ul>
  <li>элемент 1</li>
  <li>элемент 2</li>
    <ul>
    <li>элемент 2.1</li>
    <li>элемент 2.2</li>
    </ul>
  <li>элемент 3</li>
</ul>

</body>
</html>

<html>
<body>

<h4>Вложенный список:</h4>
<ul>
  <li>элемент 1</li>
  <li>элемент 2</li>
    <ul>
    <li>элемент 2.1</li>
    <li>элемент 2.2</li>
      <ul>
      <li>элемент 2.2.1</li>
      <li>элемент 2.2.2</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>элемент 3</li>
</ul>

</body>
</html>

    Пример выполнения данного HTML-кода

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

    <html>
<body>

<h4>Список определений:</h4>
<dl>
  <dt>элемент 1</dt>
  <dd>описание элемента 1</dd>
  <dt>элемент 2</dt>
  <dd>описание элемента 2</dd>
</dl>

</body>
</html>

    Пример выполнения данного HTML-кода

    Теги списков

    ТегОписание
    <ol> Определяет упорядоченный список
    <ul> Определяет неупорядоченный список
    <li> Определяет элемент списка
    <dl> Определяет список определений
    <dt> Определяет термин определения
    <dd> Определяет описание определения
    <dir> Не рекомендуется. Используйте вместо этого <ul>
    <menu> Не рекомендуется. Используйте вместо этого <ul>
    Страницы:

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

    Неупорядоченные списки

    Неупорядоченный список является списком элементов. Элементы списка маркируются с помощью специальных знаков (обычно небольшой черный круг).

    Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

    <html>
<body>

<h4>Неупорядоченный список:</h4>
<ul>
  <li>элемент 1</li>
  <li>элемент 2</li>
  <li>элемент 3</li>
</ul>

</body>
</html>

    Пример выполнения данного HTML-кода

    Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

    Упорядоченные списки

    Упорядоченный список также является списком элементов. Элементы списка маркируются с помощью чисел или букв.

    Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>. У тега <ol> может быть два атрибута: start (определяет первое число, с которого начинается нумерация пунктов) и type (определяет стиль нумерации пунктов). Может иметь значения:

  • "A" - заглавные буквы A, B, C ...
  • "a" - строчные буквы a, b, c ...
  • "I" - большие римские числа I, II, III ...
  • "i" - маленькие римские числа i, ii, iii ...
  • "1" - арабские числа 1, 2, 3 ...
    •  
    <html>
<body>

<h4>Упорядоченный список:</h4>
<ol>
  <li>элемент 1</li>
  <li>элемент 2</li>
  <li>элемент 3</li>
</ol>

</body>
</html>

    Пример выполнения данного HTML-кода

    Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

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

    Список определений не является списком элементов. Это список терминов и определений терминов.

    Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>.

    <html>
<body>

<dl>
<dt>элемент 1</dt>
<dd>описание элемента 1</dd>
<dt>элемент 2</dt>
<dd>описание элемента 2</dd>
</dl>

</body>
</html>

    Пример выполнения данного HTML-кода

    Внутри определения списка определений (тег <dd> ) можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

    Дополнительные примеры

    Различные типы упорядоченных списков

    <html>
<body>

<h4>Список проектов с цифрами:</h4>
<ol>
 <li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ol>  

<h4>Список с буквами:</h4>
<ol type="A">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ol>  

<h4>Список с буквами нижнего регистра:</h4>
<ol type="a">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ol>  

<h4>Список с римскими цифрами:</h4>
<ol type="I">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ol>  

<h4>Список с римскими цифрами в нижнем регистре:</h4>
<ol type="i">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ol>  

</body>
</html>

    Пример выполнения данного HTML-кода

    Различные типы неупорядоченных списков

    <html>
<body>

<h4>Список со значком кругом:</h4>
<ul type="disc">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ul>  

<h4>Список со значком окружностью:</h4>
<ul type="circle">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ul>  

<h4>Список со значком квадратом:</h4>
<ul type="square">
<li>intuit.ru</li>
 <li>osp.ru</li>
 <li>file.ru</li>
</ul>  

</body>
</html>

    Пример выполнения данного HTML-кода

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

    <html>
<body>

<h4>Вложенный список:</h4>
<ul>
  <li>элемент 1</li>
  <li>элемент 2</li>
    <ul>
    <li>элемент 2.1</li>
    <li>элемент 2.2</li>
    </ul>
  <li>элемент 3</li>
</ul>

</body>
</html>

<html>
<body>

<h4>Вложенный список:</h4>
<ul>
  <li>элемент 1</li>
  <li>элемент 2</li>
    <ul>
    <li>элемент 2.1</li>
    <li>элемент 2.2</li>
      <ul>
      <li>элемент 2.2.1</li>
      <li>элемент 2.2.2</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>элемент 3</li>
</ul>

</body>
</html>

    Пример выполнения данного HTML-кода

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

    <html>
<body>

<h4>Список определений:</h4>
<dl>
  <dt>элемент 1</dt>
  <dd>описание элемента 1</dd>
  <dt>элемент 2</dt>
  <dd>описание элемента 2</dd>
</dl>

</body>
</html>

    Пример выполнения данного HTML-кода

    Теги списков

    ТегОписание
    <ol> Определяет упорядоченный список
    <ul> Определяет неупорядоченный список
    <li> Определяет элемент списка
    <dl> Определяет список определений
    <dt> Определяет термин определения
    <dd> Определяет описание определения
    <dir> Не рекомендуется. Используйте вместо этого <ul>
    <menu> Не рекомендуется. Используйте вместо этого <ul>
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^