検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML記述リスト

HTML記述リスト

WBOY
WBOYオリジナル
2024-09-04 16:44:11586ブラウズ

この記事では、説明リストまたは定義リストと、それが HTML ドキュメントでどのように役立つかについて説明します。では、説明リストを定義するにはどうすればよいでしょうか?簡単に言うと、定義のリスト（たとえば、インターネット/Web ページ上の情報を提示するための用語集）と言えます。ただし、説明リストの使用頻度はそれほど高くありませんが、何らかの目的があります。一方、この定義リストは Web ページに付加価値を与えます。たとえば、Web ページ上にあるテキストはコンテキストを説明しており、言い換えれば、コンテキストを意味的にマークアップするのに役立ちます。こうすることで、構造化された情報を簡単に抽出することができます。定義リストは、用語、値、および別の用語集を説明するのに最適な用語です。

構文:

<dl>
<dt>
……
</dt>
<dd>
………..
</dd>
</dl

説明リストには 3 つの要素があります。

  1. 定義リスト
    – 多くの番号を説明するために使用されます。リストされた情報内の用語をまとめて外側のタグを形成します。通常の文書と同じように伝えたり、用語集としてよく使用されます。
  2. 定義用語
    – この要素は現在定義リストで使用されており、インライン データまたは dl 要素の値を持ちます。
  3. 定義の説明
    - この要素は、この要素の下のデータがブロック レベルまたはインラインで取得されることを定義します。

HTML 記述リストのタグ

説明リストはリストのタイプの 1 つです。これらは、順序付けされた箇条書きリストの一般的な形式とみなされます。唯一の違いは、箇条書きアイコンがないことです。

注: 定義リストは、
のシーケンスで構成されます。組み合わせ/1 対多の関係の組み合わせ。これらの説明タグは HTML4 でサポートされており、HTML5 ではより多くの名前と値のペアとして新しい用語で拡張されています。質問と回答の間に関連付けリンクが作成されます。

タイプ 1: 単一の定義用語と定義を一緒に使用する

例 1

<!DOCTYPE html>
<html>
<body>
<dl>
<dt><b>Web Designing company in Chennai<b></dt>
<dd>This service Enhance Website Exposure with professional User Interface </dd>
</dl>
</body>
</html>

出力:

HTML記述リスト

例 2

<html>
<head>
<title>Page Title</title>
<style>
body {
background-color: pink;
text-align: center;
color: blue;
font-family: Arial, italic;
}
</style>
</head>
<body>
<h1>HTML Demo 2</h1>
<p>This is Networking Protocol Abbreviation.</p>
<dl>
<dt>FTP
<dd>File Transfer Protocol
<dt>TCP/IP
<dd>Transmission Control Protocol/IP address
<dt>SNMP
<dd>Simple Network Management Protocol
</dl>
</body>
</html>

出力:
HTML記述リスト

タイプ 2: 単一の説明と複数の用語

例 1

<!DOCTYPE html>
<html>
<body>
<dl>
<dt> Ebay</dt>
<dt>Etsy</dt>
<dt>Walmart</dt>
<dd>The Top 10 internet shopping websites in the year 2019</dd>
</dl>
</body>
</html>

出力:

HTML記述リスト

次に、

で 'lang' 属性を使用します。用語が異なる言語を使用している場合。これらの属性は、ISO 言語コードを 2 文字の値として出力します。

例 2

<!DOCTYPE html>
<html>
<body>
<h2>A Description HTML list</h2>
<dl lang="es">
<dt>formas</dt>
<dt lang="en-us">Shapes</dt>
<dt lang="fr">Formes</dt>
<dd>A Shape determines the different structure of the objects. </dd>
</dl>
</body>
</html>

出力:

HTML記述リスト

タイプ 3: 複数の説明を記述する単一の用語

例

<html>
<head>
<title>DEFINITION LIST</title>
</head>
<body bgcolor=" brown" text="pink">
<h1><u>DEFINITION LIST DEMO</u></h1>
<h3>
<dl>
<dt lang="es"><u>Compact:</u></dt>
<dd>A Compact may refer to make-up case.
</dd>
<dd>When taken as adjective it refers to smaller part. Example, need a compact sofa to sit.</dd>
</dl>
<h3>
</body>
</html>

出力:

HTML記述リスト

タイプ 4: 複数の用語と複数の説明

例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.1">
<title>Definition List example</title>
</head>
<body>
<h1>Definition List Demo4</h1>
<dl>
<dt> Engaged</dt>
<dt>Leaves</dt>
<dd>Students got engaged during their Lab hours in the college.</dd>
<dd>Childrens feels when their father leaves for the work.</dd>
</dl>
</body>
</html>

出力:

HTML記述リスト

タイプ 5: スタイル属性を使用した定義リスト

ここでは、説明用語を強調するために、色に style 属性が示されています。

例 1

<html>
<head> HTML Definition Lists </head>
<body>
<h2> list of Popular International Entrance Examination <h2>
<dl>
<dt style="color:Blue"> TOEFL </dt>
<dd> -: Test of English As Foreign Language . This Score is Accepted in the country like Canada,UK,USA</dd>
<br>
<dt style="color:Magenta"> GRE </dt>
<dd> -: The Graduate Record Examination. This Test is allowed to enter in the States like Canada and US foran indian Students in the Science and Technology Fields  </dd>
</dl>
</body>
</html>

出力:

HTML記述リスト

の使用

タグを使用すると、近くのテキストが用語の定義として割り当てられていることがわかります。

例 2

<!DOCTYPE html>
<html>
<head>
<title> Demo</title>
<dl>
<dt lang="en-GB"><dfn> Definition list</dfn></dt>
<dt><dfn><b>Apple fruit </b></dfn></dt>
<dd>This fruit is quoted as "miracle food" where this gives best nutrients to the body. They are rich in antioxidents</dd>
<dd>A small fragment of apple intakes daily cures cancer,heart disease etc.</dd>
<dd> Different varieties includes Braeburn,Cameo,Fuji,Gala </dd>
</dl>
</html>

出力:

HTML記述リスト

タイプ 6: 説明リストの背景色を配置する

以下の例は、属性「bgcolor」を使用して背景色付きのコンテンツを示しています。

例

<html>
<head>
<title>DEFINITION LIST</title>
</head>
<body bgcolor="Green" text="pink">
<h1><u>DEFINITION LIST DEMO</u></h1>
<h3>
<dl>
<dt lang="en-GB"><u>PYTHON:</u></dt>
<dd>Python is a progranning Language originally developed by Guido van. Its an Open Source and Cross-Platform. Applications include Web development, Data Machine Learning
</dd>
</dl>
<h3>
</body>
</html>
</dl>
</html>

出力:

HTML記述リスト

結論 – HTML 記述リスト

定義リストに関するこの記事、あるいは用語集リストとも言えるこの記事が、定義リストの利用可能な用途のいくつかを示すガイドになったことを願っています。これらを使用して、情報の断片間の有用な連携を開発する方法についての基本的な理解を理解しました。たとえば、Google 用語集では、意味のある情報をどのようにマークアップして Web ページ上でさまざまな方法で使用できるかを示しています。これらには、一部の Web サイトがセマンティックを使用してデータに美しさを表現し、与えられた情報を非常にシンプルかつ柔軟に再利用できる将来の機能が備わっています。

以上がHTML記述リストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 less html define for using Attribute Generic this background
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML 順序なしリスト次の記事：HTML 順序なしリスト

関連記事

続きを見る