3 種 HTML 清單及其使用方法

Leonard Strauss included in Programming Html Web Development Web Design

2023-12-31 253 words 2 minutes

Contents

要點

有序、無序和描述性清單。

有序列表是 HTML 中的常見元素，可以使用稱為「有序列表類型」的數字或非數字值進行排列。此外，可以藉助各種屬性進一步自訂這些列表，例如「類型」屬性，它支援個人化格式選項，而「開始」和「反向」屬性則允許調整列表的初始項目放置和方向分別。

無序列表提供了一種以簡潔的方式組織和呈現資訊的方法，將鬆散連接或沒有特定重要性順序的項目分組在一起。可以透過使用級聯樣式表 (CSS) 來修改其項目符號樣式來細化這些清單的外觀，其中可能包括變更其大小、形狀、顏色和在清單項目中的位置。此功能可讓設計人員和開發人員自訂無序列表以適應各種視覺設計，同時保持使用者易於閱讀的格式。

HTML 清單可作為網頁上任何相關資訊分類的基本結構元件。無論是建立導航選單、安排特價產品，還是努力以更易於理解的格式展示複雜的數據，這些清單都被證明是完成手頭任務不可或缺的工具。

HTML 清單有三種主要類型，它們滿足網頁設計和開發中獨特的架構角色。

有序列表

HTML 有序列表是按特定順序組織一系列相互關聯的元素的有效方法。為了建構這樣的列表，利用

 <!-- Ordered list -->
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

此程式碼呈現以下視圖:

重要的是要注意，預設情況下，有序列表遵循數字序列。然而，人們可以透過使用「type」屬性來靈活地改變這種安排。此屬性允許使用者控制決定清單組織的因素。有多種選項可用於選擇排序方法，包括字母字元（大寫和小寫）、數值，甚至大寫或小寫形式的羅馬數字。

 <!-- Ordered list -->
<ol type="a">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

將“type”屬性合併到有序列表元素（“”）中會產生修改後的視覺呈現，如下所示:

“start”，決定在清單開頭顯示的項目數；和“reversed”，反轉清單的順序，以便首先從最後一項顯示。

「start」屬性使人們能夠利用整數值從任何給定位置開始排列元素。例如，將 start="3" 合併到元素中時，無需指定特定的 type ，它將從數字 3 開始組織清單。如果指定 type="a" 或 type="I" ，它將分別從「c」或「I」開始排序。

 <!-- Ordered list -->
<ol type="I" start="3">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

上面的程式碼呈現以下視圖:

「reversed」屬性使人們能夠透過切換其布林值來重新排序清單中的元素，預設為 false。

 <!-- Ordered list -->
<ol reversed="true">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

所提供的程式碼在執行時會在 Web 瀏覽器上顯示一個具有特定功能和內容的表格，如下所述:html 表標題

無序列表

無序列表是組織和呈現概念上相關的多個項目的有效方法，但不需要特定的順序或排名。通常，Web 瀏覽器會使用項目符號點來表示此類集合中的每個元素。

要產生包含一系列項目的非結構化公告板，需要分別使用 HTML 元素「（表示容器）和「（表示每個清單）。

 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

此程式碼呈現以下視圖:

無序列表的常規外觀由稱為“圓盤”的圓形表示。從歷史上看，人們可以利用「類型」屬性來確定無序列表的視覺表示。不幸的是，這個特定的屬性已被認為已過時並且不再受支援。相反，強烈鼓勵使用廣泛適用的“CSS list-style-type 屬性”，以實現有關無序列表的所需自訂。

 <style>
ul { list-style-type: square; }
 </style>

上述程式碼透過產生包含多個 div 元素的 HTML 結構來修改所提供資訊的視覺表示，其中每個元素被分配了各種屬性並包含特定內容。

CSS list-style-type 屬性允許使用各種項目符號樣式，例如圓形、自訂圖像、圖示和符號。透過使用改變清單項目排列的CSS，人們可以利用無序列表來產生導覽選單。

嵌套列表

本質上，嵌套列表由包含在其中的更廣泛列表中的元素組成。這種結構的形成可以透過有序列表項和無序列表項的和諧混合來實現。此類配置能夠以更複雜的方式描繪複雜的層次結構系統。

 <H3>Chicken Pasta Insturctions</H3>
<ol>
   <li>Boil pasta.</li>
   <li>
   Season chicken breast.
    <ul>
       <li>salt and pepper</li>
       <li>paprika</li>
       <li>garlic powder</li>
       <li>Italian seasoning</li>
     </ul>
  </li>
  <li>Heat olive oil in pot over medium-high heat.</li>
   <li>Add chicken breast to pan and cook for 5 minutes.</li>
   <li>Add heavy cream and parmesan cheese to empty pot.</li>
   <li>Add pasta and slice chicken to cream sauce.</li>
</ol>

此程式碼呈現以下視圖:

描述列表

HTML 標籤用於定義描述列表，由描述性術語 ( ) 和相應的詳細資訊 ( ) 組成。這種結構化格式為以分層方式呈現資訊提供了清晰的組織，從而增強了可讀性和理解性。

 <h3>Popular Laptops</h3>
<dl>
  <dt>MacBook Pro</dt>
   <dd>
     Provides up to 22 hours of battery life,
     has an advanced camera, and a magic keyboard with touch ID.
   </dd>

  <dt>MSI GS76 Stealth</dt>
   <dd>
    A powerful gaming laptop with supercharged graphics and customized keys.
   </dd>
</dl>

上面的程式碼呈現以下視圖:

使用正確的 HTML 清單來組織您的內容

Web 開發工作中使用的 HTML 清單的選擇應基於要傳達給使用者的訊息。舉例來說，當尋求生成串行演示（例如準備菜餚或完成雜務所涉及的階段）時，有序列表將是最合適的。

當考慮不需要逐步流程或順序的內容組織（例如事實資料或定義）時，使用非結構化清單可能被證明是更實用的替代方案。此外，在試圖呈現術語及其相應解釋的概要或查詢和回應的彙編的情況下，採用定義清單格式將產生最佳結果。