HTML - <ul> 標籤

HTML <ul> 標籤用於建立無序列表。無序列表項顯示為專案符號，可以有多種形式，例如點、圓圈或正方形。

無序列表 (ul) 用於對沒有數字順序的專案集合進行分組。無序列表包含多個<li> 標籤，這些標籤用於建立列表項。

語法

<ul>
  .....
</ul>

屬性

HTML ul 標籤支援 HTML 的全域性和事件屬性。還接受一些特定的屬性，如下所示。

屬性	值	描述
compact	compact	指定應以緊湊樣式呈現無序列表（已棄用）。
type	disc circle square	指定列表項的不同專案符號樣式（已棄用）。

HTML ul 標籤示例

下面的示例將說明 ul 標籤的使用。在哪裡、何時以及如何使用 ul 標籤。如何建立巢狀的無序列表。

建立無序列表

在下面的示例中，我們正在 HTML 中建立無序列表以以預設專案符號格式顯示列表的相關專案。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML ul Tag</title>
</head>
<body>
    <!-- Creating an Unordered list-->
    <h3>
       List of technologies for Basic Web Development
    </h3>
    <ul>
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
</body>
</html>

建立無序列表的不同專案符號

以下是另一個無序列表的示例。在這裡，我們使用 type 屬性以不同的專案符號格式顯示專案列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML ul Tag</title>
</head>
<body>
    <!-- Creating an Unordered list-->
    <h3>Default or Disc Unordered List</h3>
    <ul type="disc">
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
    
    <h3>Cicle Unordered List</h3>
    <ul type="circle">
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
    
    <h3>Square Unordered List</h3>
    <ul type="square">
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
</body>
</html>

巢狀無序列表

在下面的示例中，我們正在建立巢狀的無序列表以顯示列表的相關專案。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML ul Tag</title>
</head>

<body>
    <!-- Creating an Unordered Nested list-->
    <h3>List of Tools and Technologies for Web Development</h3>
    <ul type="disc">
        <li>HTML</li>
        <li>CSS
            <ul>
                <li>Bootstrap / Tailwind CSS</li>
                <li>SASS / LESS</li>
            </ul>
        </li>
        <li>JavaScript
            <ul>
                <li>ReactJS</li>
                <li>NodeJS</li>
            </ul>
        </li>
    </ul>
</body>

</html>

支援的瀏覽器

標籤
ul	是	是	是	是	是

html_tags_reference.htm

列印頁面