HTMLリスト
HTML は、順序付きリスト、順序なしリスト、定義済みリストをサポートします:
HTML リスト
順序付きリスト
| 順序なしリスト
|
 | 1. 順序なしリスト インスタンス<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h4>无序列表:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> インスタンスの実行» オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックします 2. この例は、順序付きリストを示しています。 インスタンス (他の例はこのページの下部にあります。) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します HTML 順序なしリストなし 配列リストは、太字の点 (通常は小さな黒丸) でマークされた項目のリストです。 順序なしリストは<ul>タグを使用します <ul> ブラウザ表示は以下の通り: <li>コーヒー</li> <li>ミルク</li> </ul>
HTML 順序付きリスト 同様に、順序付きリストも項目のリストであり、リストの項目には番号が付けられます。 順序付きリストは <ol> タグで始まります。各リスト項目は <li> タグで始まります。 リストの項目には番号が付けられています。 <ol> ブラウザには次が表示されます: <li>コーヒー</li> <li>ミルク</li> </ol>
HTML カスタム リスト カスタム リストは、単なるアイテムのリストではなく、アイテムとそのコメントの組み合わせです。 カスタム リストは <dl> タグで始まります。各カスタム リスト項目は <dt> で始まります。各カスタム リスト項目の定義は <dd> で始まります。 <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
メモ - 役立つヒント ヒント: リスト項目内では、段落、改行、画像、リンク、その他のリストなどを使用できます。 その他の例 1. さまざまなタイプの順序付きリスト この例では、さまざまなタイプの順序付きリストを示します。 インスタンス 2. さまざまなタイプの順序なしリスト<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h4>编号列表：</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>大写字母列表：</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>小写字母列表：</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>罗马数字列表：</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>小写罗马数字列表：</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html> インスタンスの実行»オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください この例は、さまざまなタイプの順序なしリストを示しています。 インスタンス <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p> <h4>圆点列表：</h4> <ul style="list-style-type:disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>圆圈列表：</h4> <ul style="list-style-type:circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>正方形列表：</h4> <ul style="list-style-type:square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html> 3. ネストされたリスト インスタンス<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h4>嵌套列表：</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html> インスタンスの実行» オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックします 4. ネストされたリスト 2 インスタンス<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h4>嵌套列表：</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html> インスタンスの実行 » 「インスタンスの実行」ボタンをクリックして、オンラインインスタンスを表示します 5. この例は、定義リストを示しています。 インスタンス <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h4>一个自定义列表：</h4> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html> インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します HTMLリストタグ
|
