CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

HTMLリストの種類

HTMLには3つのタイプのリストがあります-

  • 順序付けされていないリスト

      このリストには、特定の順序のない箇条書きの項目があります。

    • 注文リスト

        このリストは、順序付きリストアイテムに使用されます

      1. 定義リスト

        このリストは、用語の定義を表示するために使用されます。

    これらのリストをネストして、必要に応じてスタイルを設定できます。 CSSプロパティlist-styleは、リストアイテムのスタイル設定に役立ちます。

    構文

    HTMLリストの構文は次のとおりです-

    <type of list>
<li></li>
</type of list>

    次の例は、HTMLリストを示しています-

    例

    <!DOCTYPE html>
<html>
<head>
<style>
ul {
   background-color: papayawhip;
   list-style-type: square;
   font-style: italic;
}
ol {
   background-color: azure;
}
</style>
</head>
<body>
<ol>
<li>demo1</li>
<li>
demo 2
<ul>
<li>demo a</li>
<li>demo b</li>
</ul>
</li>
<li>demo 3</li>
</ol>
</body>
</html>

    出力

    これにより、次の出力が得られます-

    HTMLリストの種類

    例

    <!DOCTYPE html>
<html>
<head>
<style>
dt {
   font-weight: bold;
   font-style: italic;
}
dd {
   border: thin dotted;
}
</style>
</head>
<body>
<h2>Programming Languages and Databases</h2>
<dl>
<dt>Java</dt>
<dd>A programming language developed by James Gosling.</dd>
<dt>C++</dt>
<dd>A programming language developed by Bjarne Stroustrup.</dd>
<dt>MySQL</dt>
<dd>MySQL is an open-source relational database management system.</dd>
</dl>
</body>
</html>

    出力

    これにより、次の出力が得られます-

    HTMLリストの種類


  1. HTMLリスト属性

    HTMLリスト属性は、HTMLドキュメントの要素の事前定義されたオプションを含む要素を参照します。 構文 以下は構文です- <input list=”text”> HTMLリスト属性の例を見てみましょう： 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height: 100vh;       background-colo

  2. HTMLDOMOlオブジェクト

    HTMLのHTMLDOMOlオブジェクトは、要素を表します。 要素の作成 var olObject = document.createElement(“OL”) ここで、「olObject」は次のプロパティを持つことができます- プロパティ 説明 反転 リストの順序を降順にするか昇順にするかを設定/返します（デフォルト） 開始 順序付きリストの開始属性の値を設定/返します タイプ 順序付きリストのtype属性の値を設定/返します オールスタートの例を見てみましょう プロパティ- 例 <!DOCTYPE