> 웹 프론트엔드 > HTML 튜토리얼 > HTML 설명 목록

HTML 설명 목록

WBOY
풀어 주다: 2024-09-04 16:44:11
원래의
600명이 탐색했습니다.

이 문서에서는 설명 목록 또는 정의 목록이 HTML 문서에서 어떻게 유용한지 설명합니다. 그렇다면 설명 목록을 정의하는 방법은 무엇입니까? 간단히 말해서 정의 목록이라고 말할 수 있습니다(예: 인터넷/웹 페이지에 정보를 표시하는 용어집). 그러나 설명 목록의 사용량은 적지만 몇 가지 목적이 있습니다. 한편, 이 정의 목록은 웹 페이지에 부가적인 가치를 제공합니다. 예를 들어, 웹 페이지에 제공된 텍스트는 컨텍스트를 설명합니다. 즉, 컨텍스트를 의미론적으로 표시함으로써 도움을 줍니다. 이렇게 하면 구조화된 정보를 쉽게 추출할 수 있습니다. 정의 목록은 용어, 값 및 다른 용어집을 설명하는 완벽한 용어입니다.

구문:

<dl>
<dt>
……
</dt>
<dd>
………..
</dd>
</dl
로그인 후 복사

설명 목록에는

,
,
의 세 가지 요소가 있습니다.
  1. 정의 목록
    – 많은 수를 설명하는 데 사용됩니다. 나열된 정보에 있는 용어를 선택하고 외부 태그를 형성합니다. 일반 문서처럼 전달하거나 용어집으로 자주 사용됩니다.
  2. 정의용어
    – 이 요소는 현재 정의 목록에서 사용되었으며 인라인 데이터 또는 dl 요소의 값을 갖습니다.
  3. 정의 설명
    - 이 요소는 이 요소 아래의 데이터를 블록 수준 또는 인라인으로 정의합니다.

HTML 설명 목록 태그

설명 목록은 목록 유형 중 하나입니다. 순서가 지정된 글머리 기호 목록의 일반적인 형태로 간주됩니다. 유일한 차이점은 글머리 기호 아이콘이 없다는 것입니다.

참고: 모든 정의 목록은
조합/일대다 관계의 조합. 이러한 설명 태그는 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 설명 목록

다음으로

용어가 다른 언어를 사용하는 경우. 이러한 속성은 ISO 언어 코드를 두 글자 값으로 표시합니다.

예#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: 스타일 속성을 사용한 정의 목록

설명 용어를 강조하기 위해 색상에 스타일 속성이 표시됩니다.

예시 #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 용어집은 의미 있는 정보를 마크업하고 웹페이지에서 다양한 방법으로 사용할 수 있는 방법을 제공합니다. 여기에는 일부 웹사이트가 의미 체계를 사용하여 데이터에 아름다움을 부여하고 주어진 정보를 매우 간단하고 유연하게 재사용하는 미래 기능이 있습니다.

위 내용은 HTML 설명 목록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿