HTML - 列表

HTML - 列表 首页 / HTML入门教程 / 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属性来指定所需的项目符号类型,默认情况下,它是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>

这将产生以下输出-

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

高并发系统设计40问 -〔唐扬〕

RPC实战与核心原理 -〔何小锋〕

Linux内核技术实战课 -〔邵亚方〕

Spark性能调优实战 -〔吴磊〕

容量保障核心技术与实战 -〔吴骏龙〕

零基础实战机器学习 -〔黄佳〕

Web 3.0入局攻略 -〔郭大治〕

高并发系统实战课 -〔徐长龙〕

结构思考力 · 透过结构看表达 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)