以下是各種 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>
輸出：
現在將看到一種情況，我們希望根據學生在課堂上的排名以有序的方式排列學生，這將透過使用
對於這種情況，我們也看一個範例，您需要像上面一樣保存它。
代碼：
<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 屬性來自訂或很好地格式化這些列表，這將使頁面的外觀看起來更好。
範例 –
代碼：
<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 頁面 –
所以，圓形子彈不再存在；您可以使用上面提供的選項自訂它們。
同樣，可以選擇訂單清單值是否在訂單清單中顯示為數字、羅馬字元或字母。
可以在
類型：「1」、「A」、「a」、「I」、「i」
讓我們看看相同的範例程式碼 –
代碼：
<html> <head> HTML Lists </head> <body> <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> </body> </html>
輸出/ HTML 頁面 –
類似地，我們也有描述列表，我們可以在其中定義需要放置描述的項目；假設您正在製作一個頁面，需要對某些關鍵字進行一些定義，然後您可以選擇描述列表。
我們有以下標籤來處理相同的問題。
– 此標籤定義描述清單
– 此標籤將給出描述術語
– this tag carries the description of each term
Example –
Code:
<html> <head> HTML Lists </head> <body> <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> </body> </html>
Output/HTML page –
You can also define the start property in the ordered lists in
Code:
<html> <head> HTML Lists </head> <body> <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> </> </body> </html>
Output:
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中文網其他相關文章！
