搜尋

首頁 >web前端 >html教學 >HTML 有序列表

HTML 有序列表

WBOY
WBOY原創
2024-09-04 16:43:281165瀏覽

在本節中，我們將學習如何在 HTML 中實現有序列表。如何描述或顯示有序列表？非常簡單易行；它們用於描述內容中的信息清單。另一種技術是單一清單上可以有多個清單元素。

HTML中的列表可以分為三種類型，它們是：

  1. 有序列表
  2. 無序列表
  3. 定義列表

在本文中，我們將透過範例來了解有序列表規格。有序列表定義了建立清單時具體的有序資訊；例如，它顯示縱座標資訊或對資訊進行編號。

有序列表的語法

有序列表是使用名為

    的標籤建立的元素並以
結尾標籤。

HTML 有序列表

有序列表範例

讓我們來看看下面提到的一些例子：

範例#1

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List</title>
</head>
<body>
<p><strong>There are 6 different airlines:</strong></p>
<ol type="1">
<li>Jet Blue Airlines</li>
<li>Frontier Airlines</li>
<li>South West Airlines</li>
<li> Spirit Airlines</li>
<li> United Airlines</li>
<li>America Airlines</li> </ol>
</body>
</html>

輸出：

這會給你這樣的結果

HTML 有序列表

範例 #2

帶顏色的有序列表。在下面的範例中，我們使用了某個計數器屬性，定義了

  • 中的自動計數清單項目。它只是CSS的一個內部變量，用於啟用計數功能。 
    <!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List with colors</title>
</head>
<body>
<style>
ol li {
counter-increment: list;
list-style-type: none;
position: relative;
}
ol li:before {
color: #ff0000;
content: counter(list) ".";
left: -22px;
position: absolute;
text-align: center;
width: 24px;
}</style>
<ol>
<li><span> Norway is a Scandinavian Country</span></li>
<li><span>Oslo is the capital city</span></li>
<li><span>norway is known for its beauty , hiking, fishing</span></li>
<li><span>Ranked among the toppest country in europe</span></li>
</ol><br/>
</body></html>

    輸出：
    HTML 有序列表

    HTML 有序列表的屬性類型

    為了表示有序列表，該標籤有五種重要的屬性類型。作為 HTML

      標籤表示有序列表中的項目列表，它們可以是字母數字、數字或簡單的字母順序，前提是順序是首要的。以下是有序列表的可能屬性：

      1.型態屬性

      此屬性給出要在清單中使用的編號類型。

    • type =’a’ – 依字母順序排列
    • type =’A’- 依大寫字母順序
    • type =’i’ – 羅馬數字小寫
    • type =’ I’- 給出大寫羅馬數字

    這些類型的編號如下：

    我。  屬性類型='a.'

    要以字母小寫形式建立列表，請使用此類型。以下範例以小寫形式顯示有序列表，並將其設為斜體。

    範例：

    <!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List types</title>
</head>
<body>
<style>
ol li span {
font-weight: normal;
}
</style>
<p>Did you know that:</p>
<p>Skills required to become a data Scientist</p>
<ol type="a" >
<li><span><i> steps</span></i></li>
<li><span><b>There should be a prior knowledge in SAS and R programming.</b></span></li>
<li><span><b>They should have a strong calibre in creativity and analysis</span><b></li>
</ol>
</body>
</html>

    輸出：

    HTML 有序列表

    二。屬性型別='A.'

    有序列表可以具有小寫字母的屬性類型。下面的範例示範如何在清單結構中使用此屬性以及如何將字母設為粗體。要將有序列表顯示為粗體，需要使用

    範例：

    <!DOCTYPE html>
<html>
<head>
<title> Example for Nested list</title>
</head>
<body>
<p> State capitals of the united States</p>
<style>
ol {
font-weight:bolder;
}
ol li span {
font-weight: normal;
}
</style>
<ol type="A">
<li> <span>Alabama
<ul>
<li>Montgomery</li>
</ul>
</span>
</li>
<li><span>Arizona
<ul>
<li>Phoenix</li>
</ul>
</span>
</li>
<li> <span>California
<ul>
<li>Sacramento</li>
</ul>
</span>
</li>
<li> <span>New jersey
<ul>
<li>Trenton</li>
</ul>
</span>
</li>
<li><span>Washington
<ul>
<li>Olympia</li>
</ul></span>
</li>
<li> <span>Pennsylvannia
<ul>
</span> <li>Harisburg</li></ul>
</li>
</ol>
</body>
</html>

    輸出：

    HTML 有序列表

    三。屬性型別='i.'

    此功能指示小寫羅馬字母。

    範例：

    <!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List types</title>
</head>
<body>
<p> EDUCBA HTML List Tutorial:</p>
<ol>
<li value="4" >Ordered list</li>
<li>unordered list</li>
<li>Definition list
<ol type="i" >
<li> <i>Introduction to list </i></li>
<li><i>Syntax a List</i></li>
<li><i> Types with an example</i>
</ol>
</li>
<li>Snapshots</li>
</ol>
</body>

    輸出：

    HTML 有序列表

    四。屬性型別=’I.’

    此功能提供大寫羅馬數字的輸出。

    範例：

    <!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List Demo</title>
</head>
<body>
<h2> List of Vegetables</li>
<ol type="I">
<li>Carrot</li>
<li> Radish</li>
<li> Sweet Corn</li>
</ol>
<ol>
<li>Fruits List
<ol type="a">
<li>Pomegrante</li>
<li>Bananas</li>
<li>Pears</li>
</ol>
</li>
</body>
</html>

    輸出：

    HTML 有序列表

    2.開始屬性

    start 屬性定義有序清單編號的起始值。您可以從頭開始使用任何數字，而不僅僅是從預設數字「1」開始。範例：開始=6。現在已經在 HTML5 中使用了。

    範例：

    在下面的範例中，我使用了 upper_alpha 的樣式類型以及從 =3 開始；因此，輸出顯示為「C」。 

    <!DOCTYPE html>
<html>
<head>
<title> Example for Nested list</title>
</head>
<body>
<p> RICHEST COUNTRIES IN THE WORLD</p>
<style>
ol { list-style-type: upper-alpha;
font-weight:bolder;
}
ol li span {
font-weight: normal;}
</style>
<ol start="3">
<li>Quatar known for his oil and petrochemical reserves</li>
<li>Norway known for the beauty of nature with petroleum producer</li>
<li>Singapore with global trade center</li>
</ol>
</body>
</html>

    輸出：

    HTML 有序列表

    3.反向屬性

    這是 HTML5 中引入的新屬性，表示項目在 Web 瀏覽器中以相反的順序顯示。使用時，

      它是一個布林屬性，可以使用任何值來反轉計數器。聲明
        在
          中標籤。

          範例：

          <!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>How to do Balle Technique</h2>
<ol>
<li>Turn out</li>
<li>Alignment</li>
<li>Pointed Toes</li>
</ol>
<hr>
<h2> Balle Steps</h2>
<ol reversed="True">
<li>Seven Movements</li>
<li>Plier</li>
<li>Etendre </li>
<li>Glisser</li>
<li>Eliever</li>
</ol>
</body>
</html>

          輸出：

          HTML 有序列表

          結論

          因此，我把有序列表做了什麼總結到最後，幾乎所有瀏覽器都支援它。當然，您可以在 HTML 標籤元素中建立任意數量的清單；在本文中，我們僅關注選定的範例以了解基本實作。因此，學習這個主題可能不是最困難的工作，因為

          1. 這裡使用的標籤非常容易記住。

    • 以上是HTML 有序列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！

    html5 css html Boolean for using internal Attribute Property number default this display li
    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：網頁模板 HTML下一篇：網頁模板 HTML

    相關文章

    看更多