定义列表<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. 如何把光盘制作成ISO镜像文件

    如何把一张光盘转换成为ISO的镜像文件呢,这需要借助软件的力量. 下面来简单的介绍下吧. 工具/原料 UltraISO软碟通软件. 光驱 方法/步骤 下载并安装UltraISO软碟通软件. 插入要做的 ...

  2. 使用WPF Animated GIF实现GIF图片的播放

    这个类库很方便,也很简单:http://wpfanimatedgif.codeplex.com/ 参考博客:http://blog.csdn.net/gqqnb/article/details/721 ...

  3. 8. Oracle通过rman进行克隆

    一. 安装规划 IP ROLE 192.168.1.235 克隆对象 192.168.1.221 克隆库 二. 备库创建相应的dump文件夹 # 在主库查询对应的dump目录 select name, ...

  4. 【代码审计】OTCMS_PHP_V2.83_代码执行漏洞分析

      0x00 环境准备 OTCMS官网:http://otcms.com 网站源码版本:网钛CMS PHP版 V2.83 [更新于2017.12.31] 程序源码下载:http://d.otcms.c ...

  5. css - Grid网格布局

    .wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...

  6. Sequential Minimal Optimization (SMO) 算法

    SVM 最终关于 $a$ 目标函数为凸优化问题,该问题具有全局最优解,许多最优化算法都可以解决该问题,但当样本容量相对很大时,通常采用 SMO 算法(比如 LIBSVM),该算法为启发式算法,考虑在约 ...

  7. 在PowerShell中使用Vim

    1.需要去Vim官网下载并安装一个可运行于Win8系统的执行文件(ftp://ftp.vim.org/pub/vim/pc/gvim74.exe). 2.设置PowerShell环境,使能“allow ...

  8. tomcat项目启动报错java.lang.ClassCastException: org.apache.xerces.parsers.XML11Configuration……

    周一上班启动项目,报错如图: 看到网上说的原因,有jar包冲突造成的,我这里的是: 情况:console打印信息有多次连接数据库,但该项目只需要连接一个库.再仔细看,发现有其他项目的信息,打开tomc ...

  9. .NET Core开发日志——Middleware

    熟悉ASP.NET架构的开发者一定对于HTTP Modules与HTTP Handlers不陌生.两者的作用主要是对网络请求执行特定的处理工作.而在.NET Core中,它们都被Middleware( ...

  10. 一篇采访窥C#的未来

    今天坐公交时用手机打开 .NET Blog 阅读这周的 The week in .NET ,在看 Virtual Panel: What's Next for .NET? 这篇采访报道时,被其中对 R ...