HTML 清單樣式

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

HTML 中的不同清單樣式

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

1) 無序列表

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

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

1. ：表示無序列表；每當我們不需要對任何內容進行排名或希望將其按隨機順序放置時，都會合併此標籤。
3. ：這代表列表項，即要放置在無序列表中的項目集，即在
   下。標籤出現在
   • 內標籤。標有這些標記的項目將自動在開頭帶有一些項目符號或圓圈；這些是基本的 HTML 功能。

現在讓我們看一段

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

  範例片段 –

  代碼：

   HTML Lists 
  
  <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>
  
  </h2>
  </h2>

  輸出：

  

  2) 有序列表

  現在將看到一種情況，我們希望根據學生在課堂上的排名以有序的方式排列學生，這將透過使用

  以排序的方式顯示。 HTML 的標籤，它會包含多個
  1. 。標籤，其中將包含清單項目。
     ：這個標籤用來建立一個有序列表，所有元素都放在裡面，在
     1. 內。標籤。
     2. 標籤已在上面進行了解釋。

        對於這種情況，我們也看一個範例，您需要像上面一樣保存它。

        代碼：

         HTML Lists 
        
        <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>
        
        </h2>
        </h2>

        輸出/ HTML 頁面

        

        現在讓我們看看這些的一些變體，我們可以透過在 HTML 頁面中添加一些 CSS 屬性來自訂或很好地格式化這些列表，這將使頁面的外觀看起來更好。

        1. 在無序列表中，我們可以給出以下屬性 -
        2. List-style-type – 可以是圓盤、圓形、方形或無。因此，如果我們在這裡選擇“無”，則您在無序列表項中看到的圓圈將不會出現，讓我們這樣做。

        範例 –

        代碼：

         HTML Lists 
        
        <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>
        
        </h2>
        </h2>

        輸出/ HTML 頁面 –

        

        所以，圓形子彈不再存在；您可以使用上面提供的選項自訂它們。

        同樣，可以選擇訂單清單值是否在訂單清單中顯示為數字、羅馬字元或字母。

        可以在

        中設定屬性類型標籤相同，類型可以採用下列值。

        類型：「1」、「A」、「a」、「I」、「i」

        讓我們看看相同的範例程式碼 –

        代碼：

         HTML Lists 
        
        <h2> list of students <h2>
        <ol type="i">
        <li style="color:red"> John </li>
        <li style="color:green"> Harris </li>
        <li style="color:blue"> Plunket </li>
        </ol>
        
        </h2>
        </h2>

        輸出/ HTML 頁面 –

        

        類似地，我們也有描述列表，我們可以在其中定義需要放置描述的項目；假設您正在製作一個頁面，需要對某些關鍵字進行一些定義，然後您可以選擇描述列表。

        標籤

        我們有以下標籤來處理相同的問題。

         

        – 此標籤定義描述清單
        – 此標籤將給出描述術語
        – this tag carries the description of each term

        Example –

        Code:

         HTML Lists 
        
        <h2> list of students <h2>
        <dl>
        <dt style="color:red"> Docker </dt>
        <dd> -: this is used to make environment portable application containers </dd>
        <br>
        <dt style="color:green"> Kubernetes </dt>
        <dd> -: this is an orchestrator for those containers make by docker </dd>
        </dl>
        
        </h2>
        </h2>

        Output/HTML page –

        

        You can also define the start property in the ordered lists in

        tag, which tells from where the count starts. Let’s see an example of the same –

        Code:

         HTML Lists 
        
        <h2> list of students <h2>
        <ol type="1" start="10">
        <li style="color:red"> John </li>
        <li style="color:green"> Harris </li>
        <li style="color:blue"> Plunket </li>
        >
        
        </ol>
        </h2>
        </h2>

        Output:

        

        Conclusion

        So we saw various lists in which we can place data; this data can be rendered from the model to view using javascript frameworks; what we have shown is a static page, and it can be made dynamic with JS. These lists can be formatted with bootstrap to make them look like navbars or sidebars too.

以上是HTML 清單樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！