【前端】如何制作一个自己的网页(18)定义列表

三、定义列表(Definition List)

除了有序和无序列表,还有一种HTML列表类型,被称为定义列表。

应用场景:对某个术语或内容进行解释和描述,所以由标题和描述两部分组成,描述是对标题的解释和说明,标题是对描述的总结和提炼。

示例:一些网站顶部或底部的相关信息。

图中展示的某网站顶部信息,「首页」就可以理解为标题,对应的「历史上的今天」、「百科冷知识」和「图解百科」就是对标题的说明和描述。

在HTML中,我们使用<dl><dt><dd>标签创建一个定义列表。

定义列表

这几行代码定义了一个自定义列表。

第1、6行,使用<dl></dl>标签对定义了一个定义列表。

第2行,使用 <dt></dt>标签对定义了一个术语,也就是标题。

第3-5行,使用<dd></dd>标签对为该标题添加了三个描述。

定义列表中每一项都有一个 <dt><dd>标签,分别用于定义术语(标题)和对术语(标题)进行解释与描述。

<dl>

    <dt>帮助中心</dt>

    <dd>账户管理</dd>

    <dd>购物指南</dd>

    <dd>个人订单</dd>

</dl>

代码的具体解释:

<dl>标签

dl是definition list的缩写 ,表示定义列表。

<dl>标签一般和<dd>、<dt>标签配合使用,不会单独出现,且尽量在<dl>标签中只使用<dd>、<dt>标签。

一般情况下,一个<dl>标签可以包含多对<dt>和<dd>。

<dt>标签

dt是definition term的缩写,表示术语,也就是我们说的标题。

<dt>标签不能单独存在,必须包裹在<dl>标签中。

<dt>标签和<li>标签一样属于容器标签,里面可以添加任意标签,也就是可以包含段落、图片、链接、列表等。

<dd>标签

dd是definition description的缩写,表示一个术语(标题)的描述。

<dd>和<dt>是同级标签,它们都是<dl>的子标签。

同样,<dd>标签中可以放任意标签。

总结:

定义列表默认状态的显示效果

1、定义列表的列表项前没有任何项目符号;

2、<dt>和<dd>虽然是同级标签,但是它们的默认样式不同:<dt>顶格显示,而<dd>带有一段缩进,这样层次更加分明。

<dl>

    <dt>帮助中心</dt>

    <dd>账户管理</dd>

    <dd>购物指南</dd>

    <dd>个人订单</dd>

</dl>

总结:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/455546.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker harbor

文章目录 一&#xff0c;搭建私有仓库1.1下载registry1.2在 daemon.json 中添加私有镜像仓库地址1.3重新加载重启docker1.4运行容器1.5拉取一个centos7镜像1.6给镜像加标签1.7上传镜像1.8显示私有仓库的所有镜像1.8查看私有仓库的 centos 镜像有哪些tag 二&#xff0c;什么是ho…

Linux Redis查询key与移除日常操作

维护老项目Express node 编写的后端程序、有这么一个方法、没有设置redis过期时间&#xff08;建议设置过期时间&#xff0c;毕竟登录生产服务器并不是每个人都有权限登录的&#xff01;&#xff01;&#xff01;&#xff09;。如果变动只能通过登录生产服务器、手动修改… 于…

你还在使用存储过程吗?

上周&#xff0c;reddit 网 r/dotnet 区的网友 technolang 发帖&#xff1a;「你还在使用存储过程吗&#xff1f;」 我很好奇为什么 2024 年了我们还在使用存储过程。难道网络应用中没有一个业务层来处理所有事情吗&#xff1f;依赖 DBA 并在数据库层创建依赖关系似乎没有必要。…

【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff(geogrid,WPS所需数据)

【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff&#xff08;geogrid&#xff0c;WPS所需数据&#xff09; 数据准备&#xff1a;以叶面积指数LAI为例QGis实操&#xff1a;基于GIS4WRF插件将geotiff数据转为tiff警告&#xff1a;GIS4WRF: Input layer had an unexpected …

ONLYOFFICE 文档8.2版本已发布:PDF 协作编辑、改进界面、性能优化等更新

ONLYOFFICE 在线编辑器最新版本已经发布&#xff0c;其中包含30多个新功能和500多个错误修复。阅读本文了解所有更新。 关于 ONLYOFFICE 文档 ONLYOFFICE 是一个开源项目&#xff0c;专注于高级和安全的文档处理。坐拥全球超过 1500 万用户&#xff0c;ONLYOFFICE 是在线办公领…

2024年 Spring Boot 系列学习宝典!!!!!

欢迎来到Spring Boot的世界&#xff01;本系列文章旨在为开发者提供从入门到精通的全面指导&#xff0c;无论你是Spring Boot新手还是有经验的开发者&#xff0c;都能在这里找到有价值的内容。让我们一起踏上这段旅程&#xff0c;探索如何使用Spring Boot构建高效、可扩展的应用…

Redis底层和缓存雪崩,击穿,穿透

一、Redis的数据结构 1.动态字符串 我们知道Redis中保存的Key是字符串&#xff0c;value往往hi字符串或者字符串的集合。可见字符串是Redis中最常用的一种数据结构。不过&#xff0c;Redis 没有直接使用c语言的字符串&#xff0c;因为c语言字符串存在许多问题&#xff1a; …

蚁剑连接本地木马文件报错

项目场景&#xff1a; 本地搭建php和蚁剑环境&#xff0c;连接本地木马文件ma.php 问题描述 使用蚁剑连接localhost时报错 错误{ "address":"127.0.0.1" "code":"ECONNREFUSED", "errno":"ECONNREFUSED", &qu…

【Kubernetes实战】Kubernetes集群搭建(虚拟机环境,一主两从)

目录 一、 以Node1节点为例创建虚拟机二、 环境初始化三、集群所需组件安装1. docker&#xff08;18.06.3&#xff09;2. 安装Kubernetes组件 四、安装Kubernetes集群1. 准备集群镜像2. 集群初始化3. 安装网络插件 五、环境测试(服务部署) 集群规模&#xff1a;一主二从(一个ma…

云计算实验1——基于VirtualBox的Ubuntu安装和配置

实验步骤 1、VirtualBox的安装 本实验使用VirtualBox-7.0.10 进行演示。对于安装包&#xff0c;大家可以前往 VirtualBox官网下载页面(https :/ / www. virtualbox.org/wiki/Downloads)下载其7.0版本安装包进行安装&#xff0c;或者直接使用QQ群的安装包VirtualBox-7.0.10-15…

数字英文验证码识别 API 对接说明

本文将介绍一种 数字英文验证码识别 API 对接说明&#xff0c;它是基于深度学习技术&#xff0c;可用于识别变长英文数字验证码。输入验证码图像的内容&#xff0c;输出验证码结果。 接下来介绍下 数字英文验证码识别 API 的对接说明。 申请流程 要使用 API&#xff0c;需要…

腾讯地图SDK 手势失效或冲突的解决办法

前言 由于高德地图sdk开始涨价割韭菜了&#xff0c;因此&#xff0c;我司在降本增效的大背景下&#xff0c;需要把高德地图换成腾讯地图。 在更换sdk过程中&#xff0c;踩了一些关于地图手势事件的坑&#xff0c;这里记录下&#xff0c;希望能给遇到同样问题的大佬们一个思路。…

21、基于Firefly-rk3399字符设备驱动寄存器控制LED

文章目录 一、电路分析引脚配置功能(R/W register) 二、RK3399数据手册分析&#xff1a;1、GPIO(General-purpose input/output)介绍&#xff1a;2、CRU(Clock & Reset Unit)介绍查找GPIO相关内容&#xff1a; 3、PMU(Power Management Uni)4、GRF&#xff08;General Regi…

git 报错 SSL certificate problem: certificate has expired

git小乌龟 报错 SSL certificate problem: certificate has expired 场景复现&#xff1a; 原因&#xff1a; 这个错误表明你在使用Git时尝试通过HTTPS进行通信&#xff0c;但是SSL证书已经过期。这通常发生在使用自签名证书或证书有效期已到期的情况下。 解决方法: 1.如果是…

WTN6 E 系列语音芯片 单线时序及示例代码

1. 概述: WTN6 系列为多功能&#xff0c;低功耗&#xff0c;高性能的 CMOS 语音芯片。现有 WTN6020E、WTN6040E、 WTN6080E、WTN6170E 四种芯片&#xff08;语音长度分别为 20s、40s、80s、170s&#xff09;&#xff0c;已投入市场。 音频采样率目前最高可达 32kHz&#xff0…

streamlit 实现 flink SQL运行界面

实现效果 streamlit flink-playground.py 文件如下&#xff1a; import streamlit as st import io import contextlib import sys import os import uuid import subprocess from jinja2 import Templatest.set_page_config(layout"wide")# 设置页面标题 st.title…

SL3160 dcdc150V降压5.1V/1A 车载GPS定位器供电芯片

一、主要特性 宽输入电压范围&#xff1a;SL3160支持10~150V的宽输入电压范围&#xff0c;使其能够适应各种电源电压波动&#xff0c;确保稳定输出。 高效降压转换&#xff1a;该芯片采用先进的电源管理技术&#xff0c;转换效率高达90%以上&#xff0c;降低了散热压力和整体…

点云标注工具开发记录(五)之点云文件加载、视角转换

在Open3D中&#xff0c;通过read方法&#xff0c;我们可以读取不同格式的点云数据&#xff0c;那么&#xff0c;在不使用Open3D的相关接口时&#xff0c;我们就需要自己重写文件读入、加载、渲染展示方法&#xff0c;效果如下&#xff1a; 点云文件读入 首先&#xff0c;我们要…

vue开发的一个小插件vue.js devtools

可打开谷歌商城的情况下&#xff0c;不可打开的可以到极简插件里面去下载 极简插件官网_Chrome插件下载_Chrome浏览器应用商店 搜索vue即可

Flutter仿京东商城APP实战 用户中心基础布局

用户中心界面 pages/tabs/user/user.dart import package:flutter/material.dart; import package:jdshop/utils/zdp_screen.dart; import package:provider/provider.dart;import ../../../store/counter_store.dart;class UserPage extends StatefulWidget {const UserPage…