HTML 順序付きリスト

WBOYオリジナル: 2024-09-04 16:43:281096ブラウズ

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

HTML のリストは次の 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 順序付きリストの属性の種類

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

1. Type 属性

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

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 順序付きリスト

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

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