Создание списка в HTML

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

✔ Теги списков

Существует три основных вида списков в HTML-документе:

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

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

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

В пронумерованном списке бр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" ), то получим результат — маркер в виде квадратика

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

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

----------------------

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

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

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

----------------------

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

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

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

<dl>

<dt>Кофе</dt>

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

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

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

</dl>

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

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


 

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

Pубрики:

ГлавнаяМедицина Народные средства Сад Дача ОгородСтройка и ремонт Советы автолюбителямПтицеводствоВебмастерскаяИнтересные фактыПолезно знатьДомашние pецепты