HTML-リスト
HTMLは、情報のリストを指定するための3つの方法をWeb作成者に提供します。すべてのリストには、1つ以上のリスト要素が含まれている必要があります。リストには-が含まれる場合があります
<ul>−順序付けされていないリスト。これにより、プレーンな箇条書きを使用してアイテムが一覧表示されます。
<ol>−順序付きリスト。これにより、さまざまな番号スキームを使用してアイテムが一覧表示されます。
<dl>−定義リスト。これにより、辞書に配置されるのと同じ方法でアイテムが配置されます。
HTML順不同リスト
順序付けされていないリストは、特別な順序や順序がない関連アイテムのコレクションです。このリストはHTMLを使用して作成されています<ul>鬼ごっこ。リスト内の各項目には箇条書きが付いています。
例
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>これにより、次の結果が生成されます-
タイプ属性
使用できます type<ul>タグの属性を使用して、必要な弾丸のタイプを指定します。デフォルトでは、ディスクです。可能なオプションは次のとおりです-
<ul type = "square">
<ul type = "disc">
<ul type = "circle">例
以下は、<ul type = "square">を使用した例です。
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>これにより、次の結果が生成されます-
例
以下は、<ul type = "disc"> −を使用した例です。
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>これにより、次の結果が生成されます-
例
以下は、<ul type = "circle"> −を使用した例です。
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>これにより、次の結果が生成されます-
HTML順序リスト
アイテムを箇条書きではなく番号付きリストに入れる必要がある場合は、HTMLの順序付きリストが使用されます。このリストは、を使用して作成されます<ol>鬼ごっこ。番号付けは1から始まり、<li>でタグ付けされた連続する順序付きリスト要素ごとに1ずつ増加します。
例
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>これにより、次の結果が生成されます-
タイプ属性
使用できます type<ol>タグの属性を使用して、必要な番号付けのタイプを指定します。デフォルトでは、これは数値です。可能なオプションは次のとおりです-
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.例
以下は、<ol type = "1">を使用した例です。
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>これにより、次の結果が生成されます-
例
以下は、<ol type = "I">を使用した例です。
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>これにより、次の結果が生成されます-
例
以下は、<ol type = "i">を使用した例です。
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>これにより、次の結果が生成されます-
例
以下は、<ol type = "A">を使用した例です。
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>これにより、次の結果が生成されます-
例
以下は、<ol type = "a">を使用した例です。
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>これにより、次の結果が生成されます-
開始属性
使用できます start<ol>タグの属性で、必要な番号付けの開始点を指定します。可能なオプションは次のとおりです-
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.例
以下は、<ol type = "i" start = "4">を使用した例です。
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>これにより、次の結果が生成されます-
HTML定義リスト
HTMLおよびXHTMLは、次のようなリストスタイルをサポートしています。 definition lists辞書や百科事典のようにエントリがリストされている場所。定義リストは、用語集、用語のリスト、またはその他の名前/値のリストを表示するための理想的な方法です。
定義リストは、次の3つのタグを使用します。
- <dl>-リストの開始を定義します
- <dt> −用語
- <dd> −用語の定義
- </ dl>-リストの終わりを定義します
例
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>これにより、次の結果が生成されます-