DD DT DLタグの使用例

DD DT DLタグの使用例
通常は <ul><li> タグを使用しますが、dd タグと dt タグも便利です。特にプログラムを公開する場合は、これらのタグを使用して機能モジュールのリストをレイアウトできます。

<dl>< /dl>< dt>< /dt>< dd>< /dd>
<dl>< /dl> は通常のリストを作成するために使用され、<dt>< /dt> はリストの上位項目を作成するために使用され、<dd>< /dd> はリストの下位項目を作成するために使用されます。<dt>< /dt> と <dd>< /dd> は両方とも <dl>< /dl> タグ ペアの間に配置する必要があります。次の例を見れば理解できるでしょう。

dl ——リストを定義——リストを定義
dt ——リスト タイトルの定義——は、定義リスト内の各リスト項目のタイトルを生成するために使用されます。これを繰り返し使用して、複数のリスト項目のタイトルを定義することができます。
dd (定義リスト定義) は、定義リスト内の各リスト項目の説明テキスト フィールドを生成するために使用されます。これを繰り返し使用して、複数の説明テキスト フィールドを定義することができます。 ddは対応するdtの簡単な説明です

例:

コードをコピー
コードは次のとおりです。

<ダウンロード>
<dt>今日
<dd>今日は昨日です。
<dt>明日
<dd>明日は今日です。
</dl>

例2:

コードをコピー
コードは次のとおりです。

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<title>無題のドキュメント</title>
<スタイル タイプ="text/css">
<!--
dt {
フロート: 左;
幅: 60ピクセル;
マージン: 0px;
パディング: 0px;
}
dd {
フロート: 左;
クリア: なし;
幅: 290ピクセル;
マージン: 0px;
パディング: 0px;
}
ダウンロード{
幅: 350ピクセル;
フォントサイズ: 9pt;
行の高さ: 1.5em;
位置:相対;
マージン: 0px;
パディング: 0px;
左:15px;
}
。赤 {
色: #FF3300;
}
#箱 {
幅: 500ピクセル;
背景色: #F1F1F7;
}
#ボックス #コンテンツ {
パディング上部: 10px;
右パディング: 10px;
パディング下部: 10px;
左パディング: 20px;
}
-->
</スタイル>
</head>
<本文>
<div id="ボックス">
<div id="コンテンツ">
<img src=/Article/UploadFiles/200704/20070412091408274.gif align="left"/ >
<ダウンロード>
<dt>製品名:</dt>
<dd><strong>[すごいですね] </strong>Youhui: <span class="red"><em>15% オフ</em></span></dd>
<dt>製品紹介:</dt>
<dd>製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名製品名…[<span class="red";>詳しい紹介</span>]</dd>
<dt>店舗住所:</dt>
<dd>製品名</dd>
<dt>連絡先電話番号:</dt>
<dd>0000-12345678 87654321 </dd>
</dl>
</div>
</div>
</本文>
</html>

<<:  MySql で、存在しない場合は挿入し、存在する場合は更新する方法

>>:  CSS スティッキーフッタークラシックレイアウトの実装

推薦する

docker compose サービスの起動順序を制御する方法

まとめDocker-compose は複数の Docker コンテナ サービスを簡単に組み合わせるこ...

React リストバーとショッピングカートコンポーネントの使用の詳細な説明

この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介...

知っておくべきHTML最適化テクニック

Web ページのパフォーマンスを向上させるために、多くの開発者は、JavaScript、画像の最適化...

div が iframe に覆われるいくつかの状況とその解決策

類似の構造:コードをコピーコードは次のとおりです。 <div></div>&...

Vueはログインジャンプを実装する

この記事では、ログインジャンプを実装するためのVueの具体的なコードを例として紹介します。具体的な内...

MySQL遅延スレーブを導入するメリットのまとめ

序文MySQL のマスター/スレーブ レプリケーション関係は、厳密には「同期」または「マスター/スレ...

MySQL でデータをクエリし、条件に基づいて別のテーブルに更新する方法の例

この記事では、MySQL が条件に基づいてデータをクエリし、別のテーブルに更新する方法を例を使用して...

コードを通じてHTMLエスケープ文字を識別する方法について説明します

データ内に次のような特徴を持つ「 ' 」などの文字が含まれることがあります。 &# ...

MySQLにおけるACIDトランザクションの実装原理の詳細な説明

導入いつものように、シーンから始めましょう〜インタビュアー:「トランザクションの4つの特性をご存知で...

Node.js でのブレークポイント再開の実装

序文通常のビジネスニーズ: 写真、Excel などをアップロードします。結局のところ、数 MB のサ...

dockerにmysqlをインストールした後にNavicatが接続できない問題に対する完璧な解決策

1. Dockerがイメージをプルするdocker pull mysql (デフォルトで最新バージョ...

MySQL が InnoDB テーブルが独立したテーブルスペースか共有テーブルスペースかを判断する方法の詳細な説明

序文InnoDB はデータをテーブルスペースに保存します。デフォルト設定では、初期サイズが 10 M...

Linuxでのソフトウェア(ライブラリ)の更新コマンドの詳しい説明

Ubuntu サーバーにパッケージをインストールする場合、sudo apt-get install ...

axios リクエストのカプセル化に基づく Vue アプリケーションのサンプルコード

目次axiosとは何ですか? Axios リクエストタイプ? Axiosはデフォルトのカスタム構成を...

Promiseの紹介と基本的な使い方の簡単な分析

Promise は、ES6 で導入された非同期プログラミングのための新しいソリューションです。 Pr...