HTML - Списки

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

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

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

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

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

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

пример

<!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">

<!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"> -

<!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"> -

<!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>.

пример

<!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">

<!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">

<!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">

<!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">

<!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">

<!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>

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

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

Вы можете использовать startатрибут для тега <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">

<!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 поддерживают стиль списка, который называется definition listsгде статьи перечислены как в словаре или энциклопедии. Список определений - идеальный способ представить глоссарий, список терминов или другой список имен и значений.

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

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

пример

<!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>

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