在HTML中我们有三种标签可显示列表信息。所有列表必须包含一个或多个列表元素。这些标签分别是:

  • <ul> - 无序列表。这将使用普通项目符号列出项目。

  • <ol> - 有序列表。这将使用不同的数字方案来列出您的项目。

  • <dl> - 定义列表。这会按照与字典中排列项目相同的方式排列项目。

HTML 无序列表

无序列表是相关项目的集合，它们之前没有特殊的顺序。该列表是使用 HTML <ul> 标签创建的。列表中的每一项都用项目符号标记。

示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML 无序列表</title>
   </head>
	
   <body>
      <ul>
         <li>苹果</li>
         <li>橙子</li>
         <li>香蕉</li>
         <li>西瓜</li>
      </ul>
   </body>
   
</html>

测试一下

type属性

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

<ul type = "square">   -- 方形
<ul type = "disc">     -- 圆形 
<ul type = "circle">   -- 空心圆

示例

以下是我们使用 <ul type = "square"> 的示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML 无序列表</title>
   </head>

   <body>
      <ul type = "square">
         <li>苹果</li>
         <li>橙子</li>
         <li>香蕉</li>
         <li>西瓜</li>
      </ul>
   </body>

</html>

测试一下

示例

以下是我们使用 <ul type = "disc"> 的示例 -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML 无序列表</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>苹果</li>
         <li>橙子</li>
         <li>香蕉</li>
         <li>西瓜</li>
      </ul>
   </body>

</html>

测试一下

示例

以下是我们使用 <ul type = "circle"> 的示例 -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML 无序列表</title>
   </head>

   <body>
      <ul type = "circle">
         <li>苹果</li>
         <li>橙子</li>
         <li>香蕉</li>
         <li>西瓜</li>
      </ul>
   </body>
	
</html>

测试一下

HTML 有序列表

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML 有序列表</title>
   </head>

   <body>
      <ol>
         <li>苹果</li>
         <li>橙子</li>
         <li>香蕉</li>
         <li>西瓜</li>
      </ol>
   </body>

</html>

测试一下

type 属性

您可以使用 <ol> 标记的 type 属性来指定您喜欢的编号类型。默认情况下，它是一个数字。以下是可能的选项 -

<ol type = "1"> - 默认大小写数字。
<ol type = "I"> - 大写数字。
<ol type = "i"> - 小写数字。
<ol type = "A"> - 大写字母。
<ol type = "a"> - 小写字母。

示例

以下是我们使用 <ol type = "1">的示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML 有序列表</title>
   </head>

   <body>
      <ol type = "1">
         <li>苹果</li>
         <li>橙子</li>
         <li>香蕉</li>
         <li>西瓜</li>
      </ol>
   </body>

</html>

测试一下

示例

以下是我们使用 <ol type = "I"> 的示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML 有序列表</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>苹果</li>
         <li>橙子</li>
         <li>香蕉</li>
         <li>西瓜</li>
      </ol>
   </body>
	
</html>

测试一下

示例

以下是我们使用 <ol type = "i"> 的示例

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML 有序列表</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>苹果</li>
         <li>橙子</li>
         <li>香蕉</li>
         <li>西瓜</li>
      </ol>
   </body>
	
</html>

测试一下

示例

以下是我们使用 <ol type = "A" > 的示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML 有序列表</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>苹果</li>
         <li>橙子</li>
         <li>香蕉</li>
         <li>西瓜</li>
      </ol>
   </body>
	
</html>

测试一下

示例

以下是我们使用 <ol type = "a"> 的示例

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML 有序列表</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>苹果</li>
         <li>橙子</li>
         <li>香蕉</li>
         <li>西瓜</li>
      </ol>
   </body>
	
</html>

测试一下

start 属性

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

<ol type = "1" start = "4">    - 数字以4开头.
<ol type = "I" start = "4">    - 数字以IV开头.
<ol type = "i" start = "4">    - 数字以iv开头.
<ol type = "a" start = "4">    - 字母以d开头.
<ol type = "A" start = "4">    - 字母以D开头.

示例

以下是我们使用 <ol type = "i" start = "4" > 的示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>苹果</li>
         <li>橙子</li>
         <li>香蕉</li>
         <li>西瓜</li>
      </ol>
   </body>
	
</html>

测试一下

HTML 定义列表

HTML 和 XHTML 支持称为定义列表的列表样式，其中条目的列出方式类似于字典或百科全书。定义列表是呈现术语表、术语列表或其他名称/值列表的理想方式。

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

  • <dl> - 定义列表的开头
  • <dt> - 表头
  • <dd> - 表内容
  • </dl> - 定义列表的结尾列表

示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML 定义列表</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>这代表超文本标记语言</dd>
         <dt><b>HTTP</b></dt>
         <dd>这代表超文本传输协议</dd>
      </dl>
   </body>
	
</html>

测试一下