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でnginxを実行するときにdaemon offが使用される理由についての簡単な説明

とても嬉しいです。この問題に遭遇したとき、私はDockerコンテナのプロセス原理について話さなければ...

虫眼鏡効果を実現するJavaScript

この記事では、虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...

CSSプロパティに基づいたボタンホバーボーダーと背景アニメーションのコレクション

ハートの属性不透明度: .999 は要素のスタッキングコンテキストを作成し、ボタン6と8のアニメーシ...

CSS における XHTML タグの対応する属性と使用法

XHTML CSS を使って Web ページをデザインし始めた頃は、タグの使用経験も少なく、あまり気...

VMware Workstation と vSphere 間で仮想マシンを移行する (画像とテキスト)

1. Workstationで仮想マシンのハードウェアバージョンを変更するWorkstation ...

MySQL 5.7.24 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、参考までにMySQL 5.7.24圧縮パッケージのインストールチュートリアルを紹介しま...

IEウェブページのポップアップウィンドウの共通パラメータは自分で設定できます

ポップアップは、現在のウィンドウにメニューツールバーがあるかどうかとは関係ありません。ページにスクリ...

JavaScript の Set データ構造の詳細な説明

目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...

泡の小さな鋭角効果を実現するCSS

効果画像(境界線の色が薄すぎるので、{} で囲みます): { }参考リンク Pure CSS バブル...

altとtitleの違いの詳しい説明

これら 2 つの属性はよく使用されますが、その違いはまとめられていません。それでは、その使い方をまと...

iframe タグの使用方法の詳細な説明 (属性、透明度、適応高さ)

1. iframe の定義と使用法iframe 要素は、別のドキュメントを含むインライン フレーム...

CSSでイメージマッピングを実装する方法

1. はじめにイメージマップを使用すると、画像の領域をホットスポットとして指定できます。この領域にマ...

HTMLドキュメントタイプの詳細な説明

私のは: <!DOCTYPE html>ブログガーデン: <!DOCTYPE HT...

Nginxの仕組みの詳細な説明

Nginxの仕組みNginx はコアとモジュールで構成されています。 Nginx 自体は実際にはほと...

Vue ファースト スクリーン パフォーマンス最適化コンポーネントの知識ポイントの概要

Vue ファースト スクリーン パフォーマンス最適化コンポーネントVue ファースト スクリーン パ...