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>

The type Attribute

您可以使用<ul>标记的type属性来指定所需的项目符号类型。 默认情况下,它是光盘。 以下是可能的选择:

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

Example

以下是我们使用<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>

Example

以下是我们使用<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>

Example

以下是我们使用<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 Ordered Lists

如果需要将项目放在编号列表中而不是项目符号中,则将使用HTML排序列表。 该列表是通过使用<ol>标记创建的。 编号从1开始,对于标记有<li>的每个连续的有序列表元素,其编号递增1。

Example

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

The type Attribute

您可以使用<ol>标记的type属性来指定所需的编号类型。 默认情况下,它是一个数字。 以下是可能的选择:

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

Example

以下是我们使用<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>

Example

以下是我们使用<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>

Example

以下是我们使用<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>

Example

以下是我们使用<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>

Example

以下是我们使用<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>

The start Attribute

您可以使用<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.

Example

以下是我们使用<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 Definition Lists

HTML和XHTML支持一种称为定义列表的列表样式,其中的条目像在字典或百科全书中一样列出。 定义列表是呈现词汇表,术语列表或其他名称/值列表的理想方法。

定义列表使用以下三个标签。

  • <dl> :定义列表的开始

  • <dt> : A term

  • <dd> : Term definition

  • </dl> : Defines the end of the list

Example

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