HTML 順序付きリスト

このセクションでは、HTML で順序付きリストを実装する方法を学びます。順序付きリストを記述または表示するにはどうすればよいですか?とてもシンプルで簡単です。これらは、コンテンツ内の情報のリストを記述するために使用されます。もう 1 つのテクニックは、単一のリストに複数のリスト要素を含めることができるというものです。

HTML のリストは次の 3 つのタイプに分類できます。

1. 順序付きリスト
2. 順序なしリスト
3. 定義リスト

この記事では、順序付きリストの仕様を例を挙げて説明します。順序付きリストは、リストの作成時に特定の順序付き情報を定義します。たとえば、座標情報や情報の番号付けが表示されます。

順序付きリストの構文

順序付きリストは、

という名前のタグを使用して作成されます。要素であり、

で終わります。タグ。

順序付きリストの例

以下に挙げる例を見てみましょう:

例 1

<title>HTML Ordered List</title>


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

出力:

これにより、次のような結果が得られます

例 2

色付きの順序付きリスト。次の例では、特定のカウンター プロパティを使用し、

内のリスト項目の自動カウントを定義しています。これは、カウント機能を有効にするための CSS の内部変数にすぎません。

<title>HTML Ordered List with colors</title>


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

出力:

HTML 順序付きリストの属性の種類

順序付きリストを表すために、このタグには 5 つの重要なタイプの属性があります。 HTML

としてタグは、順序付けされたリスト内の項目のリストを表します。順序が優先される場合、英数字、数字、または単にアルファベット順のいずれかにすることができます。順序付きリストで使用できる属性は次のとおりです:

1. Type 属性

この属性は、リストで使用される番号付けのタイプを指定します。

• type ='a' – アルファベット順に並べます
• type ='A'- 大文字のアルファベット順を指定します
• type ='i' – ローマ数字を小文字にします
• type =' I' - 大文字のローマ数字を与えます

これらの種類の番号付けについては以下で説明します。

私。  属性タイプ='a.'

アルファベットの小文字でリストを作成する場合、このタイプが使用されます。次の例では、順序付きリストを小文字で斜体で示しています。

例:

<title>HTML Ordered List types</title>


<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</i></span></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</b></span><b></b>
</li>
</ol>

出力:

II.属性タイプ='A.'

順序付きリストには、アルファベット小文字の属性タイプを含めることができます。以下の例は、リスト構造でこの属性を使用する方法と、文字を太字にする方法を示しています。順序付きリストを太字で表示するには、

例:

<title> Example for Nested list</title>


<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>
</ul></span> </li>
<li>Harisburg</li>
</ol>

出力:

III.属性タイプ='i.'

この機能は小文字のローマ字を示します。

例:

<title>HTML Ordered List types</title>


<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>
</li>
</ol>
</li>
<li>Snapshots</li>
</ol>

出力:

IV.属性タイプ='I.'

この機能は、上位ローマ数字で出力を提供します。

例:

<title>HTML Ordered List Demo</title>


<h2> List of Vegetables
<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>

</ol>
</h2>

出力:

2.開始属性

start 属性は、順序付きリスト番号の開始値を定義します。デフォルトの数値「1」だけでなく、最初から任意の数値で始めることができます。例: 開始=6。現在、HTML5 で使用されています。

例:

次の例では、=3 から開始するとともに、upper_alpha にスタイル タイプを使用しています。したがって、出力は「C」から表示されます。

<title> Example for Nested list</title>


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

出力:

3.逆属性

これは HTML5 で導入された新しい属性で、Web ブラウザーで項目が逆の順序で表示されることを示します。使用するには、

これは、カウンタを反転するために任意の値を受け取るブール属性です。宣言済み
ではタグ。

例:

<title>HTML Ordered List</title>


<h2 id="How-to-do-Balle-Technique">How to do Balle Technique</h2>
<ol>
<li>Turn out</li>
<li>Alignment</li>
<li>Pointed Toes</li>
</ol>
<hr>
<h2 id="Balle-Steps"> Balle Steps</h2>
<ol reversed="True">
<li>Seven Movements</li>
<li>Plier</li>
<li>Etendre </li>
<li>Glisser</li>
<li>Eliever</li>
</ol>

出力:



Kesimpulan

Oleh itu, saya telah meringkaskan perkara yang telah dilakukan oleh senarai tertib sehingga akhir, dan ia hampir disokong dalam semua penyemak imbas. Sudah tentu, anda boleh membuat sebarang nombor senarai dalam elemen tag HTML; dalam artikel ini, kami hanya menumpukan pada contoh terpilih untuk memahami pelaksanaan asas. Oleh itu, mempelajari topik ini mungkin bukan kerja yang paling sukar, kerana

1. tag yang digunakan di sini sangat mudah untuk diingati.

以上がHTML 順序付きリストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。