HTML - 列表(Lists)介绍 首页HTMLHTML - 列表(Lists)

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属性来指定所需的项目符号类型,默认情况下,它是disc。 以下是可能的选项-

<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属性,以指定所需的编号类型, 默认情况下,它是一个number。 以下是可能的选项-

<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定义列表

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

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

这将产生以下输出-

这一章你学到了什么?做个笔记,好记忆不如烂笔头! 请将遇到的问题写入评论区中,大家一起进步。

祝学习愉快!(您也可以 选中需要修改的内容->右键->进行编辑)

点我分享笔记