Lists
优质
小牛编辑
125浏览
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>