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

Json string + Cookie + localstorage in JS

Table of contents 1.Json string 1.1Json Syntax 1....

How to connect Django 2.2 to MySQL database

1. The error information reported when running th...

Vue+el-table realizes merging cells

This article example shares the specific code of ...

SystemC environment configuration method under Linux system

The following is the configuration method under c...

MySQL complete collapse: detailed explanation of query filter conditions

Overview In actual business scenario applications...

Detailed Tutorial on Installing VirtualBox 6.0 on CentOS 8 / RHEL 8

VirtualBox is a free and open source virtualizati...

Ubuntu 20.04 CUDA & cuDNN Installation Method (Graphical Tutorial)

CUDA installation download cuda Enter the nvidia-...

Detailed tutorial on installing harbor private warehouse using docker compose

Overview What is harbor? The English word means: ...

Summary of methods to improve mysql count

I believe many programmers are familiar with MySQ...

React hooks pros and cons

Table of contents Preface advantage: shortcoming:...

Several ways to set the expiration time of localStorage

Table of contents Problem Description 1. Basic so...

Summary of some common methods of JavaScript array

Table of contents 1. How to create an array in Ja...

Solution to web page confusion caused by web page FOUC problem

FOUC is Flash of Unstyled Content, abbreviated as ...

Implementation of installing Docker in win10 environment

1. Enter the Docker official website First, go to...

A brief discussion on HTML titles, paragraphs, line breaks, horizontal lines, and special characters

title XML/HTML CodeCopy content to clipboard <...