数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 HTML 中添加列表项？
在 HTML 中定义列表项，我们使用 <li> 标签，它可以用于有序列表 (<ol>)、无序列表 (<ul>) 和菜单列表 (<menu>) 中。在有序列表 <ol> 中，列表项以数字或字母显示。在无序列表 <ul> 和菜单列表 <menu> 中，列表项以项目符号显示。
以下是有序和无序列表的一些示例：
无序列表：
学生 1
学生 2
学生 3
示例 1
示例 2
示例 3
有序列表：
学生 1
学生 2
学生 3
示例 1
示例 2
示例 3
语法
以下是 HTML 中列表项的语法：
<li>……… </li>
列表标签还支持以下附加属性：
属性 |
值 & 描述 |
|---|---|
type |
AaIi1disc square circle 指定列表的类型 |
value |
数字 指定列表项的值 |
示例
以下示例演示如何在 HTML 中添加列表项：
<!DOCTYPE html>
<html>
<head>
<title>HTML li Tag</title>
</head>
<body>
<p>Rank</p>
<ul>
<li>India</li>
<li>Australia</li>
<li>South Africa</li>
</ul>
</body>
</html>
示例
在这个例子中，我们通过为 <li> 标签的属性赋值来在 HTML 中添加列表：
<!DOCTYPE html>
<html>
<body>
<h1>The li value attribute</h1>
<ol>
<li value="200">Juice</li>
<li>Watermelon Juice</li>
<li>Canbarey Juice</li>
<li>Lime Juice</li>
<li>Wine</li>
<li>Beer</li>
</ol>
</body>
</html>
示例
在这里，我们尝试创建不同类型的列表：
<!DOCTYPE html>
<html>
<body>
<h1>List type with CSS</h1>
<ol>
<li>lemon Juice</li>
<li style="list-style-type:lower-alpha">Watermelon Juice</li>
<li>Mango Juice</li>
</ol>
<ul>
<li>Coffee</li>
<li style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
示例
在这个例子中，我们尝试在 HTML 中创建一个嵌套列表：
<!DOCTYPE html>
<html>
<body>
<h1>List inside another list</h1>
<ul>
<li>Juices</li>
<li>Vegetables <ul>
<li>Onion</li>
<li>Tomatos</li>
<li>Curry Leaves</li>
</ul>
</li>
<li>Deserts</li>
</ul>
</body>
</html>
示例
现在，我们正在 HTML 中创建一个复杂的嵌套列表：
<!DOCTYPE html>
<html>
<body>
<h1>List inside another list</h1>
<ul>
<li>Juices</li>
<li>Vegetables <ul>
<li>Onion</li>
<li>Tomatos</li>
<li>Curry Leaves</li>
<ul>
<li> Methi leaves</li>
<li> Coriander Leaves</li>
<li> Curry Leaves </li>
<li> Palal Leaves </li>
</ul>
</ul>
</li>
<li>Deserts</li>
</ul>
</body>
</html>
更新于：2023年10月10日
1K+ 次浏览
广告