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コンテナデータベースへの変更が有効にならない問題を解決する

推薦する

CSS テキスト配置実装コード

フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...

Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装

導入通常、バックグラウンド サーバー プログラムには 1 つのプロセスのみが必要ですが、単一のプロセ...

Keras を使って SQL インジェクション攻撃を判断する (例の説明)

この記事では、ディープラーニングフレームワーク keras を使用して、SQL インジェクションの特...

MySQLの保存時間の不一致の問題を解決する

Java を使用してシステム時間を取得し、それを MySQL データベースに保存した後、時間タイプが...

HTMLフロートの使用法の簡単な分析

float の使用例左サスペンション: float:left;右サスペンション: float:rig...

Viteの新しい体験の詳細な説明

Vite とは何ですか? (フロントエンドの新しいおもちゃです) Vite は、ネイティブ ES モ...

仮想マシンのLinux初心者がIPを設定し、ネットワークを再起動する

仮想マシンを初めて使用する方や、仮想マシンに Linux をインストールしたばかりの方は、システムが...

Vue で変数式セレクターを実装する方法

目次HTML構造の定義入力タグのバインディング属性入力タグはキーダウンイベントをリッスンしますli ...

MySQL の group by に関する簡単な説明

目次1. はじめに2. ユーザーテーブルを準備する2.1 グループ化ルール2.2 グループの使用2....

Linux 環境に MySQL 8.0 をインストールするプロセスの紹介

目次序文1. Linux は yum ソースを変更します (MYSQL のインストールが遅い場合は試...

JavaScript サンドボックスの探索

目次1. シナリオ2. サンドボックスの基本機能3. iframeの実装4. Webワーカーの実装5...

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント。ウェブサイトのアクセス速度...

MySQLの実行原理、論理階層化、データベース処理エンジンの変更について詳しく説明します

長い間 MySQL を使ってきたので、SQL 文はすでに覚えていると思います。そこで、その実行原理を...

CSS3 マウスホバー遷移ズーム効果

以下は、純粋な CSS で記述された画像マウスホバーズーム効果です。実際、基本原理は非常に単純です。...