HTML チュートリアル: 定義リスト

HTML チュートリアル: 定義リスト
<br />原文: http://andymao.com/andy/post/104.html
前のセクション: 順序付きリスト 「順序なしリスト」と「順序付きリスト」を書き終えた後、この 2 つの記事は面白くないと言う人がいました。これら 2 つの記事は、一方的に読むだけでは意味がありませんが、読者に独自の考えを加えることを要求している点が重要です。順序付きおよび順序なしの単一ラベルは、使い方さえわかっていれば非常に簡単ですが、重要なのはラベルがどのように見えるかではなく、どのようなデータがどのようなリストに適しているかを知ることだと思います。どのようなデータが秩序があり、どのようなデータが無秩序なのでしょうか?何かを学び、その知識を自分のものにできるように、読んだ後に考える必要があります。
定義リストには特殊な形式と使用法があり、順序なしリストよりもあまり一般的には使用されません。このリストをまだ使い始めていない友人もたくさんいるので、このリストのコードを分解してみましょう。
<ダウンロード>
<dt></dt>
<dd></dd>
</dl>

上記のコードを見ると、ここには <li> タグがないことがわかります。代わりに、DL、DT、DD の 3 つのタグで構成されています。外観と以前のリストに基づいて、DL はボックスと同じように、このリストのコンテナーであることがわかります。違いは、今回はボックスに統一された標準の小さなボックスが 1 つだけ含まれているわけではないことです。代わりに、2 つの異なるコンテンツが表示されます。 DT と DD をどのように理解すればよいでしょうか?意味的に言えば、DT は名前、タイトルであり、DD は説明、コンテンツです。 DT と DD はどちらもボックスです。DD は上位の DT のみを説明し、レベルをスキップしたり下位の説明をすることはできません。 DT が存在しない場合は、DD が存在する意味がありません。DT の後に DD が続く必要があるかどうかについては、これを説明する決定的な文献は見つかりませんでした。ただし、定義リストに関する私の理解に基づくと、データに DT のみがあり DD がない場合、これは定義リストではないため、UL 順序なしリストを使用できると思います。しかし、データ内の 1 つまたは少数だけに DD がなく、大部分に DD がある場合、このフォームが存在する可能性があると思います。
<ダウンロード>
<dt>順序付きリスト</dt>
<dt>順序付きリスト</dt>
<dt>順序付きリスト</dt>
<dt>順序付きリスト</dt>
</dl>

上記は明らかに不適切です。この形式は順序なしリストです。なぜ定義リストが必要なのでしょうか? 意味的に意味がありません。
<ダウンロード>
<dt>順序付きリスト</dt>
<dd>順序付きリストは、連続したデータがリストに整理されたデータ形式です</dd>
<dt>順序付きリスト</dt>
<dd>順序付きリストは、連続したデータがリストに整理されたデータ形式です</dd>
<dt>この文には説明がありません</dt>
<dt>順序付きリスト</dt>
<dd>順序付きリストは、連続したデータがリストに整理されたデータ形式です</dd>
</dl>

個人的には上記の形式は実現可能だと考えています。それで、DT は複数の DD を運ぶことができますか?また、これが不可能であることを証明する文献も見つかっておらず、いくつかの有名な Web サイトでは、1 つの DT に複数の DD が存在するケースが依然として多くあります。これについての私の意見は、特別な状況下では DT が複数の DD を運ぶことは問題ありませんが、一般的にはこのアプローチはまだ不十分だと思います。解釈の観点から見ると、複数の DD は複数の解釈を意味しますか?あるいは、説明内容をセクションに分ける必要がある場合、DD をネズミを捕まえる犬にする必要はありません。 DD には多くの段落タグを含めることができます。さらに、スタイル適用の観点から見ると、複数の DD は全体として緩く、その設計は十分にスケーラブルではありません。たとえば、DT をクリックすると対応する DD が非表示になるという効果を作成したい場合、この複数の DD アプローチを実装するのはそれほど簡単ではありません。したがって、特別な目的がない限り、1 つの DT を複数の DD で使用しないようにしてください。代わりに、DD にコンテンツを配置し、段落タグを使用してコンテンツをセクションに分割し、順序付きリストまたは順序なしリストを使用してコンテンツをリストに分割します。
冒頭で述べたように、ラベル自体は特別なものではなく、それをどのように適用するかを考えることが重要です。カスタム リストを使用する必要があるかどうかを示す画像を以下に示します。一緒に話し合いましょう。

<<:  MySQL 8.0.22 解凍版インストールチュートリアル(初心者向け)

>>:  Docker MySQLコンテナデータベースへの変更が有効にならない問題を解決する

推薦する

Linuxの基本コマンドmktempの詳しい説明

mptemp は安全な方法で一時ファイルまたはディレクトリを作成します。このコマンドの適用範囲: R...

Apache Tika を使用してファイルが破損しているかどうかを検出する方法

Apache Tika は、さまざまな形式のファイルからファイル タイプを検出し、コンテンツを抽出す...

nginx を使用して静的リソース サーバーを構築する方法

Windows を例にとると、Linux も実際には同じです。静的リソースサーバーを構築するパソコン...

JS配列重複排除の詳細

目次1 テストケース2 JS配列重複排除4種類2.1 要素の比較2.1.1 二重層 for ループ比...

Linux mysql-5.6 でルート パスワードをリセットする方法

1. MySQL サービスが起動しているかどうかを確認します。起動している場合は、MySQL サービ...

ova ファイルを VMware にインポートする際の落とし穴の概要

問題の原因ご存知のとおり、すべてのネットワーク動作は対応するネットワークトラフィックを生成し、すべて...

MySQLの不合理なMaxIdleConnsにより接続が短くなる

1 背景最近、Shimo Document のオンライン ビジネスでパフォーマンスの問題が発生しまし...

CSS の子要素の Z インデックスと親要素の兄弟ノードの階層問題を解決する

1. 問題の出現フラット リストを作成しました。リストの一部には、マウスをホバーすると表示されるポッ...

MySQL ツリー構造データベース テーブル設計

目次序文1. 基本データ2. 継承駆動設計3. 左右の値のエンコーディングに基づく設計4. ツリー構...

クリックして展開し、全文を読む機能を実現する純粋なCSS

注記記事表示リストインターフェースを開発する場合、情報の基本的な概要を提供するために記事ヘッダーコン...

vue3 のストアを使用してスクロール位置を記録する例

目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...

子要素の margin-top によって親要素が移動する問題の解決方法

問題の説明今日、ページ スタイルを変更していたときに、子要素にmargin-top設定したのに、子要...

MySQLデータベースでの値の追加、変更、削除、クリアの例

3. MySQLデータ管理最初の方法:お勧めできません。複雑そうです -- 学生テーブルの grad...

Vueページジャンプの実装方法

1. this.$router.push() 1. ビュー <テンプレート> <d...

Window.nameはクロスドメインデータ転送の問題を解決します

<br />原文: http://research.microsoft.com/~hel...