当前位置: 首页 > 文档资料 > HTML 入门教程 >

Lists

优质
小牛编辑
121浏览
2023-12-01

HTML为Web作者提供了三种指定信息列表的方法。 所有列表必须包含一个或多个列表元素。 列表可能包含 -

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

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

  • 《dl》 - 定义列表。 这将按照排列在字典中的方式排列您的项目。

HTML无序列表

无序列表是没有特殊顺序或顺序的相关项的集合。 此列表是使用HTML 《ul》标记创建的。 列表中的每个项目都标有子弹。

例子 (Example)

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

例子 (Example)

以下是我们使用

    的示例
<!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)

以下是我们使用

    的示例 -
<!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)

以下是我们使用

    的示例 -
<!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。

例子 (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>

类型属性

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

以下是我们使用

    的示例
<!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)

以下是我们使用

    的示例
<!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)

以下是我们使用

    的示例
<!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)

以下是我们使用

    的示例
<!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)

以下是我们使用

    的示例
<!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.

例子 (Example)

以下是我们使用

    的示例
<!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> - 定义列表的结尾

例子 (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>