前端 HTML body标签相关内容 常用标签 定义列表

时间:2023-03-09 15:42:08
前端 HTML body标签相关内容 常用标签 定义列表<dl>

定义列表<dl>

定义列表的作用非常大。

<dl>英文单词:definition list,没有属性。dl的子元素只能是dt和dd。

  • <dt>:definition title 列表的标题,这个标签是必须的
  • <dd>:definition description 列表的列表项,如果不需要它,可以不加

备注:dt、dd只能在dl里面;dl里面只能有dt、dd。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<dl>
<dt>北京</dt>
<dd>国家首都,政治文化中心</dd>
<dd>污染很严重,PM2.0天天报表</dd>
<dt>上海</dt>
<dd>魔都,有外滩、东方明珠塔、黄浦江</dd>
<dt>广州</dt>
<dd>中国南大门,有珠江、小蛮腰</dd>
</dl> </body>
</html>

前端 HTML body标签相关内容 常用标签 定义列表<dl>

 

上图可以看出,定义列表表达的语义是两层:

  • (1)是一个列表,列出了几个dd项目
  • (2)每一个词儿都有自己的描述项。

备注:dd是描述dt的。

定义列表用法非常灵活,可以一个dt配很多dd:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<dl>
<dt>北京</dt>
<dd>国家首都,政治文化中心</dd>
<dd>污染很严重,PM2.0天天报表</dd>
<dt>上海</dt>
<dd>魔都,有外滩、东方明珠塔、黄浦江</dd>
<dt>广州</dt>
<dd>中国南大门,有珠江、小蛮腰</dd>
</dl> </body>
</html>

还可以拆开,让每一个dl里面只有一个dt和dd,这样子感觉清晰一些:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<dl>
<dt>北京</dt>
<dd>国家首都,政治文化中心</dd>
<dd>污染很严重,PM2.0天天报表</dd>
</dl> <dl>
<dt>上海</dt>
<dd>魔都,有外滩、东方明珠塔、黄浦江</dd>
</dl> <dl>
<dt>广州</dt>
<dd>中国南大门,有珠江、小蛮腰</dd>
</dl> </body>
</html>