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>

这将产生以下结果 -

类型属性

您可以使用<ul> 标签的type属性来指定您喜欢的项目符号类型。默认情况下，它是光盘。以下是可能的选项 -

<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>标签创建的。编号从 1 开始，对于每个用 <li> 标记的连续有序列表元素，编号递增 1。

例子

现场演示 
<!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>

这将产生以下结果 -

类型属性

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

例子

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

这将产生以下结果 -

起始属性

您可以使用<ol> 标签的start属性来指定所需编号的起点。以下是可能的选项 -

<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 支持称为定义列表的列表样式，其中条目的列出方式类似于字典或百科全书。定义列表是呈现术语表、术语列表或其他名称/值列表的理想方式。

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

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

这将产生以下结果 -