如何在 HTML 中建立帶羅馬數字索引的列表


概述

索引是指示句子要點或位置的數字。在 HTML 中,我們可以透過兩種方式進行索引:無序列表 (ul) 和有序列表 (li)。要在 HTML 中建立帶羅馬數字的列表,我們使用 <ul> 標籤,羅馬數字是按順序編寫的數字,因此我們使用有序列表而不是無序列表。要建立帶羅馬數字的有序列表,我們應該定義有序列表的型別,即列表中的索引應為“a”、“A”、“I”或“i”。因此,要建立羅馬數字,我們將有序列表的型別定義為“I”和“i”。

語法

對於 HTML 中的羅馬數字索引,我們使用以下語法:

<ol type="">
   <li></li>
   <li></li>
</ol>
  • ol - 它是作為列表父容器的有序列表。

  • type - type 屬性用於設定列表索引的型別。

  • li - 它包含要插入列表中的資料。 列表標籤 <li> 是有序列表 <ol> 標籤的子元素。

方法

由於羅馬數字定義為 I、II、III、IV 或 i、ii、iii、iv。因此,我們將使用兩個示例來學習如何透過將有序列表的型別定義為“I”或“i”來建立列表。

演算法

步驟 1 - 在文字編輯器中建立一個 HTML 基本結構。

步驟 2 - 建立一個父容器 <ol> 並將其型別定義為“i”。

<ol type="i"></ol>

步驟 3 - 建立有序列表的子元素 li。

<li></li>

步驟 4 − 在其中插入資料。

<li>Frontend Articles</li>
<li>Backend Articles</li>
<li>UI/UX Articles</li>

步驟 5  羅馬數字索引已準備就緒。

示例

在這個示例中,我們討論了構建羅馬數字列表。我們將有序列表的型別定義為“i”(小寫 i)。

<html>
<head>
   <title>Roman number indexing as i</title>
</head>
<body>
   <h1> Points to remember ol type= “i” </h1>
   <ol type="i">
      <li>Frontend Articles</li>
      <li>Backend Articles</li>
      <li>UI/UX Articles</li>
   </ol>
</body>
</html>

下面給出的影像顯示了示例的輸出,其中我們將有序列表的型別設定為“小寫 i”,因此下面要點中的專案符號或索引為 i、ii、iii。

演算法

步驟 1 - 在文字編輯器中建立 HTML 基本結構

步驟 2 - 建立一個父容器 <ol> 並將其型別定義為“I”。

<ol type="I"></ol>

步驟 3 - 建立有序列表的子元素 li。

<li></li>

步驟 4 - 在其中插入資料。

<li>Frontend Articles</li>
<li>Backend Articles</li>
<li>UI/UX Articles</li>

步驟 5 - 羅馬數字索引已準備就緒。

示例

在這個示例中,我們討論了構建羅馬數字列表。我們將有序列表的型別定義為“I”(大寫 I)。

<html>
<head>
   <title>Roman number indexing as I</title>
</head>
<body>
   <h1>Points to remember <ol type= “I”></h1>
   <ol type="I">
      <li>Frontend Articles</li>
      <li>Backend Articles</li>
      <li>UI/UX Articles</li>
   </ol>
</body>
</html>

下圖顯示了以下示例 2 的輸出,其中有序列表的型別設定為“大寫 I”,羅馬數字編號如下 I、II、III。

結論

在有序列表中,我們可以設定多種型別的列表。列表可以按數字順序、字母順序和羅馬數字順序設定,我們在上面的示例中使用了羅馬數字。有序列表提供了資料的系統化表示,增強了使用者體驗並使資料集易於理解。

更新於:2023年11月21日

6K+ 次檢視

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.