極客書

HTML - Lists

HTML爲web作者提供了三種指定信息列表的方法。所有列表都必須包含一個或多個列表元素。列表可以包含−

  • <ul>減;無序列表。這將使用普通項目符號列出項目。

  • <ol>減;有序列表。這將使用不同的數字方案列出您的項目。

  • <dl>定義列表。這將按照字典中的排列方式排列項目。

HTML Unordered Lists

無序列表是沒有特殊順序或序列的相關項的集合。此列表是使用HTML<ul>標記創建的。列表中的每一項都標有一個項目符號。

Example

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
   
</html>

這將產生以下結果&負;

The type Attribute

您可以使用標記的type屬性指定您喜歡的項目符號類型。默認情況下，它是一張光碟。以下是可能的選項&負;

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

Example

下面是我們使用<ul type=「square」>

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

這將產生以下結果&負;

Example

下面是我們使用<ul type=「disc」>&減號的示例;

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

這將產生以下結果&負;

Example

下面是我們使用<ul type=「circle」>&負;

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
	
</html>

這將產生以下結果&負;

HTML Ordered Lists

如果您需要將項目放入編號列表而不是項目符號列表，則將使用HTML排序列表。此列表是使用<ol>標記創建的。編號從一開始，對於每個用<li>標記的連續有序列表元素，編號將遞增一;。

Example

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

這將產生以下結果&負;

The type Attribute

您可以使用標記的類型屬性指定您喜歡的編號類型。默認情況下，它是一個數字。以下是可能的選項&負;

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Example

下面是我們使用<ol type=「1」>

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

這將產生以下結果&負;

Example

下面是我們使用<ol type=「I」>

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

這將產生以下結果&負;

Example

下面是我們使用<ol type=「i」>

Live Demo 
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

這將產生以下結果&負;

Example

下面是我們使用<ol type=「A」>

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

這將產生以下結果&負;

Example

下面是我們使用<ol type=「a」>

Live Demo 
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

這將產生以下結果&負;

The start Attribute

您可以使用標記的start屬性來指定所需編號的起點。以下是可能的選項&負;

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

Example

下面是我們使用<ol type=「i」start=「4」>

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

這將產生以下結果&負;

HTML Definition Lists

HTML和XHTML支持一種列表樣式，稱爲定義列表（definition lists），其中的條目像在字典或百科全書中一樣列出。定義列表是表示術語表、術語列表或其他名稱/值列表的理想方式。

定義列表使用以下三個標記。

  • <dl> − Defines the start of the list
  • <dt> − A term
  • <dd> − Term definition
  • </dl> − Defines the end of the list

Example

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>

這將產生以下結果&負;