Учебники

HTML — списки

Декабрь 15, 2018

HTML предлагает веб-авторам три способа указания списков информации. Все списки должны содержать один или несколько элементов списка. Списки могут содержать —

  • <ul> — неупорядоченный список. Это будет список элементов с использованием простых пуль.

  • <ol> — упорядоченный список. Это будет использовать разные схемы чисел для перечисления ваших предметов.

  • <dl> — список определений. Это упорядочивает ваши элементы так же, как они расположены в словаре.

<ul> — неупорядоченный список. Это будет список элементов с использованием простых пуль.

<ol> — упорядоченный список. Это будет использовать разные схемы чисел для перечисления ваших предметов.

<dl> — список определений. Это упорядочивает ваши элементы так же, как они расположены в словаре.

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

Неупорядоченный список — это набор связанных элементов, которые не имеют специального порядка или последовательности. Этот список создается с использованием тега HTML <ul> . Каждый элемент в списке отмечен маркером.

пример

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
   
</html>

Это даст следующий результат —

Атрибут типа

Вы можете использовать атрибут type для тега <ul>, чтобы указать тип маркера, который вам нравится. По умолчанию это диск. Ниже приведены возможные варианты — 

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

пример

Ниже приведен пример, в котором мы использовали <ul type = «square»>

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

Это даст следующий результат —

пример

Ниже приведен пример, в котором мы использовали <ul type = «disc»> —

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

Это даст следующий результат —

пример

Ниже приведен пример, в котором мы использовали <ul type = «circle»> —

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
	
</html>

Это даст следующий результат —

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

Если вам нужно поместить свои элементы в нумерованный список вместо маркированных, то будет использоваться упорядоченный список HTML. Этот список создается с помощью тега <ol> . Нумерация начинается с единицы и увеличивается на единицу для каждого последующего упорядоченного элемента списка, помеченного тегом <li>.

пример

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

Это даст следующий результат —

Атрибут типа

Вы можете использовать атрибут type для тега <ol>, чтобы указать тип нумерации, который вам нравится. По умолчанию это номер. Ниже приведены возможные варианты — 

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

пример

Ниже приведен пример, в котором мы использовали <ol type = «1»>

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

Это даст следующий результат —

пример

Ниже приведен пример, в котором мы использовали <ol type = «I»>

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Это даст следующий результат —

пример

Ниже приведен пример, в котором мы использовали <ol type = «i»>

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Это даст следующий результат —

пример

Ниже приведен пример, в котором мы использовали <ol type = «A»>

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Это даст следующий результат —

пример

Ниже приведен пример, в котором мы использовали <ol type = «a»>

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Это даст следующий результат —

Начальный атрибут

Вы можете использовать начальный атрибут для тега <ol>, чтобы указать начальную точку нумерации, которая вам нужна. Ниже приведены возможные варианты — 

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

пример

Ниже приведен пример, в котором мы использовали <ol type = «i» start = «4»>

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Это даст следующий результат —

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

HTML и XHTML поддерживают стиль списка, который называется списком определений, где записи перечислены, как в словаре или энциклопедии. Список определений является идеальным способом представления глоссария, списка терминов или другого списка имен / значений.

Список определений использует следующие три тега.

  • <dl> — определяет начало списка
  • <dt> — термин
  • <dd> — определение термина
  • </ dl> — определяет конец списка

пример

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>

Это даст следующий результат —

55
Share: