資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中為多個標籤新增父級？
HTML 列表項使用 <li> 標籤顯示。它必須由一個父元素封裝。它用於在 HTML 中的各種列表中指定列表項。它用於選單 <menu>、目錄、有序列表 <ol> 和無序列表 <ul>。在有序列表中，列表元素通常以遞增計數器顯示。無序列表中的列表項以專案符號形式呈現。各種型別的列表如下：
有序列表
無序列表
定義列表
HTML 有序列表
元素的編號格式透過 HTML 有序列表或編號列表顯示。對於有序列表，請使用 <ol> HTML 標籤。使用有序列表，我們可以按數字順序、字母順序或任何其他突出顯示順序重要性的格式顯示專案。
語法
以下是 HTML 有序列表的語法
<ol> <li>..</li> </ol>
示例
讓我們看下面的示例，我們將使用有序列表建立列表。
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: verdana;
font-size: 15px;
}
</style>
</head>
<body style="background-color:#D5F5E3">
<h1 style="color:#DE3163; font-family:verdana">Ordered List</h1>
<p>start attribute</p>
<ol start=4>
<li>BMW</li>
<li>BUGATI</li>
<li>CHERON</li>
</ol>
<p>type attribute</p>
<ol type="I">
<li>AUDI</li>
<li>RS7</li>
<li>Q4</li>
</ol>
</body>
</html>
當我們執行上述程式碼時，它將生成一個輸出，其中包含應用於網頁上顯示的不同屬性的有序列表。
HTML 無序列表
無序列表是相關專案的集合，這些專案沒有特殊的順序或序列。此列表是透過使用 HTML <ul> 標籤建立的。列表中的每個專案都用專案符號標記。
語法
以下是 HTML 無序列表的語法
<ul> <li>…</li> </ul>
示例
在以下示例中，我們將要在網頁上建立一個無序列表。
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: verdana;
font-size: 15px;
}
</style>
</head>
<body style="background-color:#D5F5E3">
<h1 style="color:#DE3163; font-family:verdana">Unordered List</h1>
<p>Unordered list with type="square"</p>
<ul type="square">
<li>ANT</li>
<li>BAT</li>
<li>CAT</li>
<li>DOG</li>
</ul>
<p>Unordered list with type="circle"</p>
<ul type="circle">
<li>ELEPHANT</li>
<li>FISH</li>
<li>GOAT</li>
<li>HEN</li>
</ul>
</body>
</html>
執行上述程式碼後，輸出視窗將彈出，顯示網頁上顯示的不同型別的無序列表。
HTML 定義列表
使用 <dl> 標籤新增定義列表。HTML <dl> 標籤用於宣告定義列表。此標籤用於 <dd> 標籤內。定義列表類似於其他列表，但在定義列表中，每個列表項包含兩個條目：術語和描述。
語法
以下是 HTML 定義列表的語法
<dl> <dt>…</dt> <dd>…</dd> </dl>
示例
以下是如何在網頁上建立定義列表的示例。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
background-color: #D5F5E3;
}
h2 {
color: #DE3163;
}
</style>
</head>
<body>
<h2>Definition List</h2>
<dl>
<dt>CHERON</dt>
<dd>It's a Bucati product</dd>
<dt>Q4</dt>
<dd>It's a series in Audi</dd>
</dl>
</body>
</html>
當我們執行上述程式碼時，它將生成一個輸出，其中包含應用了 CSS 的定義列表，顯示在網頁上。
更新於： 2024年1月19日
59 次檢視
廣告