只知道 `＜ul＞` 和 `＜ol＞`？扒一扒京东大厂都在用的“冷门”排版神标签（附实战代码）

张开发
• 2026/4/11 18:16:11 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

只知道 `＜ul＞` 和 `＜ol＞`？扒一扒京东大厂都在用的“冷门”排版神标签（附实战代码）
我在审查新手代码或者做渗透测试时，经常会去扒各大网站的前端源码。我发现一个非常有意思的现象：很多刚入行的新手在写网页列表时，无论遇到什么排版，脑子里永远只有ul、li和div。特别是在做类似“京东首页左侧分类导航”或者“人物名片介绍”时，由于标签没选对，CSS代码写得又臭又长，各种嵌套乱七八糟。其实，HTML 里藏着一个专门对付这种“带有小标题和详细解释”结构的神仙标签——定义列表（Definition List）。一、什么是定义列表？为什么大厂都在用？我们平时见到的无序列表（ul）和有序列表（`ol一、什么是定义列表？为什么大厂都在用？我们平时见到的无序列表（ul）和有序列表（ol），适合用来罗列平级的单条信息（比如新闻列表、排行榜）。但如果你要展示的是**“一对多”的解释型内容**呢？比如：术语解释：一个专业名词，下面跟着几句解释。人物名片：标题是“杨幂”，下面跟着“代表作”、“家庭成员”、“旗下艺人”等独立的信息项。电商导航（如京东）：标题是“家用电器”，下面跟着“电视”、“空调”、“洗衣机”等具体分类。这时候，用ul就显得非常别扭，不仅语义不对，排版也很痛苦。而定义列表天生就是为这种场景设计的！二、揭秘定义列表的“铁三角”标签定义列表不像ul只有两个标签，它是由三个标签组成的“铁三角”，分工极其明确：dl（Definition List）：外壳。它是整个定义列表的容器，负责把相关的标题和解释包在一起。dt（Definition Term）：主题/标题。通常用来写那个需要被解释的名词或分类名称。dd（Definition Description）：解释项。用来具体解释上面的dt。老兵敲黑板：必须牢记的嵌套规则！dl标签的肚子里，只能直接存放dt和dd。千万别手欠在里面直接塞普通的div或p。dt和dd是亲兄弟（同级关系），千万别把dd包在dt里面！一个dt后面可以跟着好几个dd，浏览器会非常聪明地认为：这几个dd都是用来解释离它们最近的那个dt的。三、基础实战：给女明星建个名片库光说不练假把式，我们直接上代码，看看最基础的定义列表怎么写。💻 基础代码演示：!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"title定义列表基础演示/titlestyle/* 为了演示清晰，加一点基础样式 */dt{font-weight:bold;font-size:20px;color:#d32f2f;margin-top:15px;}dd{color:#333;margin-bottom:5px;/* 浏览器默认会给 dd 加上左侧缩进，这是它原生的排版优势 */}

更多文章