Examples of using DD DT DL Tags

Time:2020-12-3

We usually use the < UL > < li > tag, but the DD and DT tags are also quite good, especially when publishing programs, we can use it for typesetting of function module lists.

<dl>< /dl>< dt>< /dt>< dd>< /dd>
< DL > < / dl > is used to create a common list, < DT > < / dt > is used to create the upper level items in the list, < DD > < / DD > is used to create the lowest level items in the list, and < DT > < DT > and < DD > < / DD > must be placed between the < DL > < / dl > flag pair. Take a look at the following example:

DL — define list — define list
DT — define list title — used to generate the title of each list item in the definition list, and reuse the title that can define multiple list items.
DD — define list define — used to generate the expository fields of each list item in the definition list. Multiple expository fields can be defined by repeated use. DD is a short description or solution of the corresponding DT

example:

Copy code

The code is as follows:

<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>

Example 2:

Copy code

The code is as follows:

<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”>
<head>
< title > Untitled Document
<style type=”text/css”>
<!–
dt {
float: left;
width: 60px;
margin: 0px;
padding: 0px;
}
dd {
float: left;
clear: none;
width: 290px;
margin: 0px;
padding: 0px;
}
dl {
width: 350px;
font-size: 9pt;
line-height: 1.5em;
position:relative;
margin: 0px;
padding: 0px;
left:15px;
}
.red {
color: #FF3300;
}
#box {
width: 500px;
background-color: #F1F1F7;
}
#box #content {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
}
–>
</style>
</head>
<body>
<div>
<div>
<img src=/Article/UploadFiles/200704/20070412091408274.gif align=”left”/ >
<dl>
< DT > Product Name: < / dt >
< DD > < strong > [what a big one] < / strong > worry: < span > < EM > 8.5% < / EM > < / span > < / DD > benefits
< DT > Product Introduction: < / dt > Product
Commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name commodity name [< span; > detailed introduction < / span >] < / DD > in detail
< DT > store address: < / dt >
< DD > trade name
< DT > contact number: < / dt >
<dd>0000-12345678 87654321 </dd>
</dl>
</div>
</div>
</body>
</html>