简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

HTML 清單樣式

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

HTML 中的不同清單樣式

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

1) 無序列表

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

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

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

    2) 有序列表

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

      以排序的方式顯示。 HTML 的標籤，它會包含多個
    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 清單樣式

        現在讓我們看看這些的一些變體，我們可以透過在 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 頁面 –

        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 頁面 –

          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 –

          HTML 清單樣式

          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>
<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:

            HTML 清單樣式

            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中文網其他相關文章！

相關標籤：
html html5 HTML Tutorial HTML Properties HTML tags
來源：php
上一篇：HTML 實體 下一篇：HTML 樣式表
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在 PHP 中利用 VueJS 元件 我想混合由Php和VueJS元件產生的基本HTML，而不必一直使用VueJS到最低的dom葉子。父佈局應用了Vue應用程序，所有標頭、導航、旁注等都是Vue元件，大多數頁面上的主要...
來自於 2023-11-11 00:01:44
0
2
288
如何在 next js 13 中使用開放圖元標記？ 在最近的NextJS13更新中，他們引入了一種處理元標記的新方法，該方法與傳統方法不同，即創建NextHead並編寫常用的html元標記。在新方法中，我們建立一個類似元資料物件的方...
來自於 2023-11-10 23:03:51
0
1
527
PHP郵件傳送器無法正常運作：沒有錯誤日誌，訊息顯示已傳送，但未收到 我的網站伺服器的php錯誤日誌中沒有收到任何錯誤日誌。我嘗試過多個不同的SMTP伺服器（我知道的其他電子郵件提供者也可以使用）。這是我的HTML表單：<formaction=...
來自於 2023-11-10 15:02:39
0
1
218
只選擇月份和年份的v-date-picker 請告訴我是否有其他方法可以使用v-date-picker來執行此操作。我只希望用戶能夠選擇年份和月份，然後日期選擇器選單應該關閉。這是我的html作為範例，但我不介意使用不同的程式...
來自於 2023-11-10 14:05:05
0
1
269
重寫後的標題為：SweetAlert2: "onBeforeOpen" 參數未知 我正在使用Laravel5.8和Sweetalertv2，我嘗試用它在Blade上觸發此警報：Swal.fire({title:'<h4style="color:#...
來自於 2023-11-10 09:39:01
0
1
257
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！