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>
Это даст следующий результат -