DD DT DL tag usage examples

DD DT DL tag usage examples
We usually use the <ul><li> tags, but the dd and dt tags are also good, especially when publishing a program, you can use them to layout the list of functional modules.

<dl>< /dl>< dt>< /dt>< dd>< /dd>
<dl>< /dl> is used to create a normal list, <dt>< /dt> is used to create the upper item in the list, and <dd>< /dd> is used to create the lower item in the list. Both <dt>< /dt> and <dd>< /dd> must be placed between the <dl>< /dl> tag pair. Take a look at the following example and you will understand:

dl ——define list——define list
dt ——define list title——is used to generate the titles of each list item in the definition list. It can be used repeatedly to define the titles of multiple list items.
dd——define list define——is used to generate the description text fields for each list item in the definition list. It can be used repeatedly to define multiple description text fields. dd is a brief description or explanation 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</title>
<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 id="box">
<div id="content">
<img src=/Article/UploadFiles/200704/20070412091408274.gif align="left"/ >
<dl>
<dt>Product Name:</dt>
<dd><strong>[What a big one] </strong>Youhui: <span class="red"><em>15% off</em></span></dd>
<dt>Product Introduction:</dt>
<dd>Product nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct name…[<span class="red";>Detailed introduction</span>]</dd>
<dt>Store Address:</dt>
<dd>Product Name</dd>
<dt>Contact number:</dt>
<dd>0000-12345678 87654321 </dd>
</dl>
</div>
</div>
</body>
</html>

<<:  How to implement insert if none and update if yes in MySql

>>:  Implementation of CSS sticky footer classic layout

Recommend

Generate OpenSSL certificates in Linux environment

1. Environment: CentOS7, Openssl1.1.1k. 2. Concep...

Install Docker environment in Linux environment (no pitfalls)

Table of contents Installation Prerequisites Step...

Commonly used js function methods in the front end

Table of contents 1. Email 2. Mobile phone number...

5 cool and practical HTML tags and attributes introduction

In fact, this is also a clickbait title, and it c...

Detailed explanation of the difference between WeChat applet bindtap and catchtap

Table of contents 1. What is an event? 2. How to ...

React Router 5.1.0 uses useHistory to implement page jump navigation

Table of contents 1. Use the withRouter component...

Exploration and correction of the weird behavior of parseInt() in js

Background: I wonder if you have noticed that if ...

Why developers must understand database locks in detail

1.Lock? 1.1 What is a lock? The real meaning of a...

Vue implements a simple shopping cart example

This article shares the specific code of Vue to i...

Detailed explanation of the use of Linux lseek function

Note: If there are any errors in the article, ple...

A small problem about null values ​​in MySQL

Today, when testing the null value, I found a sma...

Detailed explanation of how to install mysql5.7.16 from source code in centos7 environment

This article describes how to install mysql5.7.16...

A brief discussion on several advantages of Vue3

Table of contents 1. Source code 1.1 Monorepo 1.2...

Summary of using the exclamation mark command (!) in Linux

Preface Recently, our company has configured mbp,...

Solve the problem of specifying udp port number in docker

When Docker starts a container, it specifies the ...