資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告