无涯教程-HTML - 列表 HTML为无涯教程提供了三种指定信息列表的方式。列表可能包含- <ul> -

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>

这将产生以下输出-

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

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

这将产生以下输出-

无涯教程-HTML - 列表

HTML无序列表

无序列表属性

HTML有序列表

有序列表属性

Start 属性

HTML定义列表

参考链接