HTMLリストの説明
名前と値のグループから構成され、HTML5の前に定義リストとして知られていた記述リスト、。 説明リストは、「用語と定義、メタデータの話題や価値観、質問と回答、または名前と値のデータの任意の他のグループ」のグループのために意図されています。
DLは、HTMLタグに存在し、そしてHTML 2.0で標準化されました。 まだ現在。
順不同リストとHTMLでの順序付けられたリストの例：
順序なしリスト：
- 項目
- 項目
- 項目
- 項目
順序付きリスト：
- 最初のアイテム
- 2番目の項目
- 3番目の項目
- 4番目の項目
順不同のHTMLリスト
番号なしリストはで始まり<ul>タグ。 リストの各項目はで始まり<li>タグ。
リスト項目を箇条書きでマークされます(small black circles) ：
順不同のHTMLリスト- Style属性
style属性は、マーカーのスタイルを定義するには、 順不同リストに追加することができます。
| スタイル | 説明 |
|---|---|
| list-style-type:disc | リスト項目を箇条書きでマークされます(default) |
| list-style-type:circle | リスト項目は、円でマークされます |
| list-style-type:square | リスト項目は四角でマークされます |
| list-style-type:none | リストの項目は、マークされることはありません |
Disc ：
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> »それを自分で試してみてください Circle ：
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> »それを自分で試してみてください Square ：
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> »それを自分で試してみてください None ：
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> »それを自分で試してみてください 注文したHTMLリスト
順序付きリストは、で始まり<ol>タグ。 リストの各項目はで始まり<li>タグ。
リスト項目は、番号でマークされます。
注文したHTMLリスト- Type属性
type属性は、マーカーの種類を定義するために、 順序付けられたリストに追加することができます。
| タイプ | 説明 |
|---|---|
| type="1" | リスト項目は、数字で番号が付けられます(default) |
| type="A" | リスト項目は、大文字と番号が付けられます |
| type="a" | リストの項目は小文字で番号が付けられます |
| type="I" | リスト項目は、大文字のローマ数字で番号付けされます |
| type="i" | リスト項目は、小文字のローマ数字で番号付けされます |
HTMLの記述リスト
HTMLはまた、記述のリストをサポートしています。
記述リストは、各用語の説明で、用語のリストです。
<dl>タグが記述リストを定義し、 <dt>タグは、用語定義(name) 、および<dd>タグは、各用語について説明します。
例
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> »それを自分で試してみてください ネストされたHTMLリスト
リストは入れ子にすることができます(lists inside lists) ：
例
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul> »それを自分で試してみてください リストアイテム等の画像やリンクなど、新しいリスト、およびその他のHTML要素を含めることができます
水平方向のリスト
HTMLのリストは、CSSで、多くの異なる方法でスタイリングすることができます。
1つの一般的な方法は、水平に表示されるリストのスタイルを設定することです。
例
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html> »それを自分で試してみてください 少し余分なスタイルで、あなたはそれがメニューのように見せることができます。
例
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
} »それを自分で試してみてください 章のまとめ
- HTMLを使用し<ul>順序なしリストを定義する要素を
- HTMLの使用style箇条書きスタイルを定義する属性を
- HTMLを使用し<ol>順序付きリストを定義する要素を
- HTMLの使用type番号タイプを定義する属性を
- HTMLを使用し<li>リスト項目を定義する要素を
- HTMLを使用し<dl>記述リストを定義する要素を
- HTMLを使用し<dt>の記述用語を定義するための要素を
- HTMLを使用し<dd>記述データを定義するための要素を
- リストは、リスト内にネストすることができます
- リストアイテムは、他のHTML要素を含めることができます
- 水平リストを表示するには、インライン：CSSのプロパティ表示を使用します
練習で自分自身をテストします！
HTMLタグ一覧
| タグ | 説明 |
|---|---|
| <ul> | 順不同リストを定義します |
| <ol> | 順序付きリストを定義します |
| <li> | リスト項目を定義します |
| <dl> | 説明のリストを定義します |
| <dt> | 記述リスト内の用語を定義します |
| <dd> | 記述リスト内の説明を定義します |