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

推薦する

Dockerコンテナの起動失敗を解決する方法

質問: コンピュータを再起動した後、docker の mysql コンテナを再起動できません。原因が...

MySQL を暗号化および復号化するいくつかの方法 (要約)

目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...

ウィンドウ内のさまざまな距離/スクロール距離の正確な計算の概要

通常、プロジェクト開発では、マージン、位置、座標などを扱う必要があります。悲劇なのは、これらの概念が...

HTML タグのネスト規則の紹介

XHTML タグには、div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、s...

表 td 画像水平および垂直中央揃えコード

HTMLコード:コードをコピーコードは次のとおりです。 <td align="cen...

elementui での el-cascader カスケードセレクタの実践

目次1. 効果2. メインコード1. 効果機能: インターフェイスから取得したデータを使用してオプシ...

Vue で @person 関数を実装する方法

この記事ではvueを使用し、マウスクリックイベントといくつかの小さなページの最適化を追加します。 基...

MySQL 5.7.27 のダウンロード、インストール、設定に関する詳細なチュートリアル

目次1. ダウンロード手順2. 環境変数を設定する3. my.iniファイルを設定する4. MySQ...

カルーセル例の JavaScript 実装

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

Linux を使用して時間指定ファイルが占有するディスク容量を計算する方法

スケジュールされたタスク エディターを開きます。Cent は、デフォルトで vim を使用して直接開...

Linux の vsftpd サービス構成の簡単な分析 (匿名、ユーザー、仮想ユーザー)

vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...

ネイティブ JavaScript 継承方法とその長所と短所の詳細な説明

目次序文プロトタイプ継承アドバンテージ欠点コンストラクタの継承アドバンテージ欠点組み合わせ継承寄生的...

IDEA が MySQL ポート番号占有に接続できない問題の解決方法

コマンドラインでMYSQLに正常にログインでき、NavicatもMySQLに正常に接続できますが、I...

なぜ IE6 が最も多くの人に使用されているのでしょうか?

まず第一に、私はウェブデザイナーです。具体的には、私は XHTML フロントエンド デザイナーです。...

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード <テンプレート> <表示> <image v-for...