定义列表<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>

 

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

  • （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>

前端 HTML body标签相关内容 常用标签 定义列表<dl>的更多相关文章

  1. 前端 HTML body标签相关内容 常用标签 列表标签 ul，ol,li

    列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...

  2. 前端 HTML body标签相关内容 常用标签 图片标签 <img/>

    图片标签 <img/> 一个网页除了有文字,还会有图片.我们使用<img/>标签在网页中插入图片. <img/> 是单闭合标签 语法:<img src=&qu ...

  3. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

  4. 前端 HTML body标签相关内容 常用标签 表格标签 table

    表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...

  5. 前端 HTML body标签相关内容 常用标签 超链接标签 a标签

    超链接标签 <a> 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,也可以是相同网页上的不同位 ...

  6. 前端 HTML body标签相关内容 常用标签 段落标签 p标签

    段落标签 <p>,paragraph的简写.定义段落,默认段落之间有间隔的 浏览器展示特点: 跟普通文本一样,但我们可以通过css来设置当前段落的样式 是否又独占一行呢? 答案是的 块级元 ...

  7. 前端 HTML body标签相关内容 常用标签 标题标签 h1-h6

    标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...

  8. 前端 HTML body标签相关内容 常用标签 表单标签 form

    表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...

  9. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍

    input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...

随机推荐

  1. Ubuntu 14.04 安装 Blender，并放桌面

    1.打开Blender官网 2.在主页点击down按钮,跳转到下载页面 3.根据自己的操作系统,选择合适的版本,这里使用的是ubunut 64位,所以下载Linux 64bit,保存文件,一般保存到h ...

  2. Turning off “Language Service Disabled” error message in VS2017

    We are getting the following "Error" message in our MVC web application in Visual studio 2 ...

  3. 路由查询命令tracert

    from:https://jingyan.baidu.com/article/9c69d48f4df25713c8024e66.html 在命令行中输入“tracert ”并在后面加入一个IP地址,可 ...

  4. 分辨率，PPi,DPI,DPR,物理像素，逻辑像素

    屏幕尺寸:指的是屏幕对角线的长度 分辨率:是指宽度上和高度上最多能显示的物理像素点个数 点距:像素与像素之间的距离,点距和屏幕尺寸决定了分辨率大小 PPI:屏幕像素密度,即每英寸(1英寸=2.54厘米 ...

  5. 通信原理之UDP协议（四）

    1.UDP简要介绍 UDP是传输层协议,和TCP协议处于一个分层中,但是与TCP协议不同,UDP协议并不提供超时重传,出错重传等功能,也就是说其是不可靠的协议. 2.UDP协议头 2.1.UDP端口号 ...

  6. js函数 test.caller 谁在调用test函数

    返回调用指定函数的函数. function test() { if (test.caller === null) console.log('test 函数在全局调用'); // 获取调用 test函数 ...

  7. C语言复制图片文件

    以下代码将文件一的图片复制到文件二中 #include<stdio.h> #include<stdlib.h> int main() { char ch; char fname ...

  8. Centos7下使用mail发送邮件配置

    参考文档:https://blog.csdn.net/lyf844692713/article/details/81479066 安装环境查看 查看服务是否安装 rpm -qa|grep mail 如 ...

  9. easyui combobox setValue方法不能触发onSelect事件

    //setValue方法不能触发onSelect事件 //$("#FundingSource").combobox("setValue", data.Fundi ...

  10. 洛谷P1192 台阶问题【记忆化搜索】

    题目:https://www.luogu.org/problemnew/show/P1192 题意: 给定n和k,一个人一次可以迈1~k步,问走n步有多少种方案. 思路: 本来傻乎乎上来就递归,显然会 ...