HTML 列表

htmlweb developmentfront end technology更新于 2024/5/22 5:00:17

HTML 文档中存在三种类型的列表，即无序列表、有序列表和描述列表。

无序列表

它使用 <ul> 标签定义，每个列表项都包含在 <li> 标签中。

语法

以下是语法 −

<ul>
<li> 列表项</li>
<li> 列表项</li>
<li> 列表项</li>
<ul>

有序 HTML 列表

使用 <ol> 标签定义，每个列表项都包含在 <li> 标签中。

语法

以下是语法 −

<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<ol>

描述 HTML 列表

使用 <dl> 标签定义，每个定义项都包含在 <dt> 标签中，每个描述都包含在 <dd> 标签中。标签。

语法

以下是语法 −

<dl>
<dt>define term</dt>
<dd>describe term</dd>
<dt>define term</dt>
<dd>describe term</dd>
<dl>

让我们看一个 HTML 列表的示例:

示例

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
   }
</style>
<body>
<h1>HTML Lists Demo</h1>
<h3>Unordered List</h3>
<ul>
<li>Physics Subject</li>
<li>Chemistry Subject</li>
<li>Economics Subject</li>
</ul>
<h3>Ordered List</h3>
<ul>
<li>Physics Book Part 1</li>
<li>Physics Book Part 2</li>
<li>Physics Book Part 3</li>
</ul>
<h3>Description List</h3>
<dl>
<dt>Physics Book</dt>
<dd>- It covers modern physics and quantum physics</dd>
<dt>Chemistry Book</dt>
<dd>- It covers organic, inorganic and physical chemistry</dd>
</dl>
</body>
</html>