Списки html

Урок №12

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

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

HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:

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

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

В пронумерованном списке брaузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.

Пронумерованный список начинается стартовым тэгом <ol> и завершается тэгом </ol>. Каждый элемент списка начинается с тэга <li>

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

Пишем текст списка в html

 <ol>
 <li> Деревья. </li>
 <li> Кустарники. </li>
 <li> Цветы. </li>
 </ol>

Как это будет выглядеть на странице:

Результат на экране брaузера:

 1 Деревья.
 2 Кустарники.
 3 Цветы.

Тэг <ol> может иметь параметр:
<ol type=A>Значение А можно менять на:|a|I|i|1|
где: TYPE

Вид счетчика:

• A - большие латинские буквы (A,B,C...)
• a - маленькие латинские буквы (a,b,c...)
• I - большие римские цифры (I,II,III...)
• i - маленькие римские цифры (i,ii,iii...)
• 1 - обычные цифры (1,2,3...)

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

Для непронумерованных списков броузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь брaузера.
Пронумерованный список начинается стартовым тэгом <UL> и завершается тэгом </ul>. Каждый элемент списка начинается с тэга <li>

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

Пишем текст списка в html

 <ul>
 <li> Деревья. </li>
 <li> Кустарники. </li>
 <li> Цветы. </li>
 </ul>

Как это будет выглядеть на странице:

Результат на экране брaузера:

 
 Деревья. 
 
 Кустарники. 
 
 Цветы. 
 
 

Тэг <ul> может иметь параметр:
<ul tupe=disc>
Тип тэга <ul> определяет внешний вид маркера. Маркер в виде закрашенного кружка (это значение стоит по умолчанию). (disc), круглый (circle) или квадратный (square).

• Деревья.
• Кустарники.
• Цветы.

Если мы изменим параметр на( type="square" ), то получим результат — маркер в виде квадратика

• Деревья.
• Кустарники.
• Цветы.

Ну а если мы изменим параметр на( type="circle" )— маркер в виде прозрачного кружка

• Деревья.
• Кустарники.
• Цветы.

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

Список определений начинается с тэга <dl> и завершается тэгом </dl>. Данный список служит для создание списков типа «список» или «описание». Каждый термин начинается тэгом <dt> , а описание - тэгом <dd>.

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

Пишем текст списка в html

<dl>

<dt>Кофе</dt>

<dd>- черный горячий напиток</dd>

<dt>Молоко</dt>

<dd>- белый холодный напиток</dd>

</dl>

Как это будет выглядеть на странице:

Результат на экране брaузера:

  

  
Кофе
    
- черный горячий напиток
  
Молоко
    
- белый холодный напиток

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

  На этом уроке мы познакомились с созданием списков в HTML.

       

Создано: 05.04.2020.|Обновлено: 15.12.2022.