HTML 清單樣式-html教學-PHP中文網

HTML 中的不同清單樣式

1) 無序列表

2) 有序列表

標籤

Conclusion

首頁

web前端

html教學

HTML 清單樣式

PHPz

Sep 04, 2024 pm 04:16 PM

html html5 HTML Tutorial HTML Properties HTML tags

清單是一種以格式化方式放置資料的常見要求，例如如果你製作了一個網頁，需要顯示飯店的披薩選單的內容，那麼很可能它是一個HTML 清單樣式，以清晰且離散的方式出現。
其他情況可能是您有一組學生在班級中表現最好；在這種情況下，要求將排名第一的學生按照排名升序排列在頂部，而其他學生則在其下方，因此我們需要將其格式化為排序列表。
另一種類型可以是自訂列表，您可以使用 Javascript 和 Html 一起製作，其中也可以設定物件的動態，並且列表可以採用一些自訂的外觀。

HTML 中的不同清單樣式

以下是各種 HTML 清單樣式的解釋。

1) 無序列表

這裡內容的顯示順序不是我們需要關心的；只是我們需要將這些東西放置好，這樣 HTML 頁面就可以將它們以格式良好且清晰的方式放置在用戶面前。

HTML 語言中有兩個標籤可以處理這些列表，而且您可能只使用這些標籤即可製作導覽列和垂直側邊欄。

：這代表列表項，即要放置在無序列表中的項目集，即在
- 內標籤。標有這些標記的項目將自動在開頭帶有一些項目符號或圓圈；這些是基本的 HTML 功能。

現在讓我們看一段

和
基於無序列表以及HTML 頁面的外觀；執行該文件後，請注意，您可以在記事本等編輯器中編寫內容，並以“.html”擴展名保存文件；因此它可以用任何瀏覽器打開。
範例片段 –

代碼：
```
<html>
<head> HTML Lists </head>
<body>
<h2> list of pizzas <h2>
<ul>
<li style="color:red"> farmhouse </li>
<li style="color:green"> peppy paneer </li>
<li style="color:blue"> onion pizza </li>
</ul>
</body>
</html>
```
登入後複製
輸出：

2) 有序列表

現在將看到一種情況，我們希望根據學生在課堂上的排名以有序的方式排列學生，這將透過使用
1. 。標籤，其中將包含清單項目。
  1. 內。標籤。
  2. 標籤已在上面進行了解釋。
    對於這種情況，我們也看一個範例，您需要像上面一樣保存它。
    
    代碼：
```
<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol>
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>
```
    登入後複製
    輸出/ HTML 頁面
    
    現在讓我們看看這些的一些變體，我們可以透過在 HTML 頁面中添加一些 CSS 屬性來自訂或很好地格式化這些列表，這將使頁面的外觀看起來更好。
    1. 在無序列表中，我們可以給出以下屬性 -
    2. List-style-type – 可以是圓盤、圓形、方形或無。因此，如果我們在這裡選擇“無”，則您在無序列表項中看到的圓圈將不會出現，讓我們這樣做。
    範例 –
    
    代碼：
```
<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ul style="list-style-type:none">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ul>
</body>
</html>
```
    登入後複製
    輸出/ HTML 頁面 –
    
    所以，圓形子彈不再存在；您可以使用上面提供的選項自訂它們。
    
    同樣，可以選擇訂單清單值是否在訂單清單中顯示為數字、羅馬字元或字母。
    
    可以在