企业官网建设流程全解析

1. 三种列表的核心区别与选型思路

1.1 为什么列表标签是页面布局的基础

先问一个问题：你看一个网页时，第一眼看到的是什么？导航菜单、商品分类、侧边栏的功能入口、购物车里的商品清单——这些在视觉上看起来形态各异的模块，底层结构几乎都是列表。确切地说，90%的导航菜单和按钮组都是<ul><li>搭出来的骨架，只是样式上做了伪装，你看不出来它是个列表而已。

很多新手一提到列表，就觉得“不就是几个圆点和数字嘛”，这种认知会严重限制后面的布局能力。我在带项目时经常看到有人用一堆<div>硬拼导航栏，每个菜单项都是一个div加一堆class，改起来极其痛苦。其实用列表标签构建的导航结构，本身就带有“一组相关条目”的语义，配合CSS可以快速实现横排、竖排、图文混排，后期维护也只改一处就能影响整组，省事得多。

HTML里列表家族主要有三位成员：有序列表<ol>、无序列表<ul>、定义列表<dl>（HTML5之后更准确的叫法是“描述列表”，但大家习惯还是叫定义列表）。三者的核心区别不在视觉，而在语义——它们分别表达“有顺序的一组内容”“没有顺序的一组内容”“名词与描述成对出现的一组内容”。选哪个不取决于好不好看，取决于内容本身的性质。

1.2 选错标签会带来什么麻烦

有人觉得标签选错也无所谓，反正渲染出来差不多。但实际工作中，选错标签至少带来三类麻烦：

第一类是样式上的。比如你要做一个多步骤的流程展示，“第一步注册—第二步填写资料—第三步完成”，用<ol>天然自带序号，省去手动编号；你要是非用<ul>，就得手动往前面加数字，加CSS计数器，或者干脆写死文字，数据和样式耦合在一起，后面插入一步就要改全组。

第二类是SEO和可访问性上的。搜索引擎的爬虫和屏幕阅读器在解析页面时，会依赖HTML的语义结构来判断内容权重和阅读顺序。一个用<ul>承载的导航比用<div>堆出来的导航“更值得被识别”。对依赖读屏软件的用户来说，列表结构能让他们快速感知“这里有几条项目”，直接跳转或浏览，这是div做不到的。

第三类是代码可维护性上的。列表是单层还是多层、每一项是纯文字还是图文组合、点击行为是跳转还是展开子菜单，这些在列表标签里都有对应的规范做法。按规范写，你三个月后再看代码仍然一眼就能读懂结构；不按规范写，你就得靠注释和回忆，效率极低。

所以磨刀不误砍柴工，先把三种列表的准确用法和适用场景摸透，再动手写页面，后面会顺手很多。

2. 有序列表（ol）和它的属性细节

2.1 ol的三种常见type与默认行为

<ol>全称ordered list，国内教材里管它叫有序列表，表达的是“步骤、排名、流程”这类有先后顺序的条目。默认渲染效果是每行前面带一个阿拉伯数字序号，从1开始递增。

先看最基础的写法：

<ol> <li>注册账号</li> <li>完善个人信息</li> <li>提交审核</li> </ol>

这段代码浏览器渲染出来的效果就是三行文字，前面分别带着1、2、3的编号。这里有个值得新人记下的细节：浏览器自动生成的序号虽然显示出来了，但它不属于<li>的文本内容，哪怕你在CSS里把序号颜色、字号单独改了，它也不会影响<li>里面文字的样式。

<ol>有一个type属性，可以切换序号的表现形式，可选值有五种：

实际工作中，更多时候是通过CSS的list-style-type属性来控制序号样式，而不是直接用type属性，因为CSS可控性更强、能做的花样更多，而且能把样式从HTML结构中剥离出来。比如你想让序号变成圆圈、方框、甚至自定义图形，CSS里一键切换，而type只能提供那五种固定形态。

2.2 start与reversed两个容易被忽略的属性

type属性之外，<ol>还有两个属性值得一说，因为工作时用到它们的频率比想象中高。

第一个是start，用来指定序号的起始值。什么场景需要它？最常见的就是两个列表拼起来显示连续的编号。比如一个页面分两栏展示产品卖点，左边三条、右边三条，视觉上虽然是分开的两个模块，但逻辑上是同一个流程的六个步骤，那你右栏的<ol>就应该写start="4"，这样读者看到的编号就是连贯的1到6，不会出现两栏都从1开始导致逻辑断裂的情况。

<ol start="4"> <li>绑定支付方式</li> <li>完成首笔交易</li> </ol>

第二个是reversed，布尔属性，写上它之后序号会倒着排。比如你做一个倒计时式的任务清单，或者发布“TOP10排行榜”但希望第一名显示在最上面、序号从10排到1的视觉效果，reversed一键搞定，省去手动改每一条编号的麻烦。

<ol reversed> <li>青铜选手</li> <li>白银选手</li> <li>黄金选手</li> </ol>

这组属性很容易被忽略，但理解了它们的作用，你就知道“列表的序号是由浏览器根据结构和属性自动计算的”，而不是像Word里手动打字那样写死。理解了这一点，以后遇到动态加载列表、从中间某条开始展示编号的需求，你就知道该去控制哪个属性了。

2.3 嵌套有序列表的序号自动重置规则

嵌套是列表的一个重要能力。<ol>里面嵌套<ol>，浏览器会自动重新从1开始编号，这个行为在最初接触时容易踩坑——有人以为内层会接着外层的序号继续往下走，结果发现它又从头开始，还以为是浏览器渲染错误。

嵌套的正确姿势是，内层<ol>要放在<li>里面，而不是直接放在外层<ol>下面：

<ol> <li>打开编辑器 <ol> <li>新建项目</li> <li>选择模板</li> </ol> </li> <li>编写代码 <ol> <li>写HTML</li> <li>写CSS</li> <li>写JavaScript</li> </ol> </li> </ol>

HTML规范要求<ul>、<ol>的直接子元素只能是<li>，反过来<li>里面可以放任何流式内容，包括标题、段落、图片、表格，自然也包括另一个列表。这种“列表套列表”的结构在前端里非常普遍，多级菜单、目录树、嵌套评论区都是这种结构的变体。

嵌套时浏览器的默认行为是：外层的<ol>用数字编号，内层的<ol>自动改用小写字母编号，第三层再用罗马数字。这是浏览器的默认样式表决定的，如果你希望内层也保持数字编号，就需要用CSS去自定义，在后面第5章的实操中我会专门讲。

注意：<li>不是只能用在<ol>和<ul>里，它本身是个独立的列表项标签，但HTML规范要求<li>必须有一个<ul>、<ol>或<menu>作为父元素。你单独写一个<li>不包列表，浏览器虽然能渲染，但校验会报错。

3. 无序列表（ul）实战：从基础样式到网购按钮

3.1 网购按钮的HTML骨架搭建

无序列表<ul>的核心特征是“项目之间没有主次先后之分”。它默认的效果是每行前面带一个实心圆点，恰好用来承载导航、按钮组、功能入口这类平级内容。

现在进入重头戏：用无序列表做一个网购场景里的按钮组。我以“商品详情页底部操作栏”为例，这种模块在移动端电商App和网页版商城都非常常见，一般包含“客服”“店铺”“购物车”“立即购买”这几个按钮。

先搭HTML结构：

<ul class="shop-action-bar"> <li class="action-item service"> <a href="#">客服</a> </li> <li class="action-item shop"> <a href="#">店铺</a> </li> <li class="action-item cart"> <a href="#">购物车<span class="badge">3</span></a> </li> <li class="action-item buy-now"> <a href="#">立即购买</a> </li> </ul>

这段结构很“朴素”，就是四个<li>并排放在一个<ul>里，每个<li>里放一个链接。它的优势在哪？结构清晰、语义正确，四个操作互不隶属、地位平等，正好匹配<ul>“无序的平级集合”这一定义。你用<div>堆也能实现一样的视觉效果，但结构语义上就缺失了“这一组是相关可操作项”的信息，后面接读屏优化时要额外补角色声明，纯属自找麻烦。

3.2 三步把列表变成长条按钮组

有了结构之后，最关键的是写CSS把竖排的列表变成横向的按钮栏。很多新手在这一步手忙脚乱，其实只要三步就能搞定。

第一步，去掉默认的项目符号和缩进。浏览器默认给<ul>加了一大堆东西，可怜那list-style和padding不清掉，你的列表就永远带着一排圆点和左侧空白。这里有个极其常见的老坑：直接用list-style: none去掉圆点后发现列表项还是有缩进，因为padding-left还留在那里，必须同时清零。

.shop-action-bar { list-style: none; margin: 0; padding: 0; display: flex; border-top: 1px solid #e5e5e5; background: #fff; }

第二步，让<li>横向排列并平均分配宽度。我推荐用Flexbox，一条display: flex加上flex: 1，四个<li>就会等宽横排，自动占满整个容器宽度，不需要计算任何百分比。

.shop-action-bar .action-item { flex: 1; text-align: center; line-height: 50px; } .shop-action-bar .action-item a { display: block; width: 100%; height: 100%; color: #333; font-size: 14px; text-decoration: none; position: relative; }

第三步，突出主按钮。网购操作栏里“立即购买”是最高优先级的操作，视觉上必须让它和别人区分开。给它加个高饱和度的背景色就行：

.shop-action-bar .buy-now a { background: #ff4d4f; color: #fff; font-weight: bold; }

做到这一步，你已经把<ul><li>从“一堆圆点列表”变成了“一条精美的电商操作栏”，那个圆点早就消失得无影无踪了。整个过程中HTML结构零改动，全部靠CSS来打扮——这种“HTML管结构、CSS管皮肤”的分离思路，就是前端开发的核心思维之一。

3.3 用CSS计数器给ul做自定义序号

说完横向布局，再回来补充一个有关<ul>的高阶技能。前面提到start、reversed这些属性是<ol>专属的，<ul>没有序号的概念，因为它本身就是“无序”的。但业务上经常出现一种需求：视觉上需要序号，语义上内容又没有顺序——比如“商品排行榜”，从语义看列表项之间并无先后逻辑，但展示时需要显示排名数字。

这种需求最优雅的解决方案是CSS计数器。它能在<ul>上也能生成自动递增的序号，数字由浏览器计算，不用写死在HTML里：

<ul class="ranking-list"> <li>无线降噪耳机</li> <li>智能手环</li> <li>便携蓝牙音箱</li> </ul>

.ranking-list { list-style: none; counter-reset: rank; padding: 0; } .ranking-list li { counter-increment: rank; padding-left: 35px; position: relative; line-height: 36px; } .ranking-list li::before { content: counter(rank); position: absolute; left: 0; width: 24px; height: 24px; background: #c0c0c0; color: #fff; text-align: center; line-height: 24px; border-radius: 50%; font-size: 13px; }

这里的核心逻辑是：counter-reset在<ul>上把计数器初始化成0，counter-increment在每个<li>上让计数器加1，content: counter(rank)把当前计数器的值塞进伪元素::before里显示。这样你增删列表项时，序号会自动跟着变，不用手动维护任何数字，也不会出现<ol>嵌套那种字母、罗马数字混排的尴尬。

这个技巧在实际项目中用途很广，比如排行榜、时间线、步骤指示器，甚至一些动态生成内容的场景，都可以用它来省掉模板里那个冗余的idx+1。

3.4 网购区的分组导航与图标按钮

回到网购场景再做一个变体。除了底部操作栏，商品详情页通常还有“规格选择”“服务承诺”“店铺信息”这些模块。拿“服务承诺”来举例，它一般是“正品保障”“极速退款”“7天无理由退换”几个功能点并列展示，每个点前面配一个小图标，这正是<ul>的分组导航典型场景。

结构可以这样写：

<ul class="service-promise"> <li class="promise-item"> <img src="icons/authentic.svg" alt="正品保障图标"> <span>正品保障</span> </li> <li class="promise-item"> <img src="icons/refund.svg" alt="极速退款图标"> <span>极速退款</span> </li> <li class="promise-item"> <img src="icons/return.svg" alt="7天无理由图标"> <span>7天无理由退换</span> </li> </ul>

每组<li>内部是图标加文字的简单组合。这里要注意一个容易被忽视的细节：alt属性一定要写清楚图标的含义，因为图标对视觉用户是辅助装饰，对读屏用户就是唯一的信息来源。你写“正品保障图标”虽然不算多精细，但至少能让他们知道这里有个图标和它代表的含义，比什么都不写强。

CSS布局让三项均匀排开即可：

.service-promise { display: flex; list-style: none; margin: 12px 0; padding: 0; background: #fafafa; border-radius: 6px; } .service-promise .promise-item { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 8px; font-size: 13px; color: #555; gap: 4px; }

这组导航的语义非常清楚：三项服务承诺地位平等，没有先后，内容可能以后增删，用<ul>承载再合适不过。而且相比用<div><span>拼出来的结构，<ul>的代码更紧凑、层级更直观，团队里其他人接手代码时，一看就知道这块是“一组并列的功能点”，而不是需要从class名里猜。

3.5 购物车商品清单的列表化改造

购物车是电商页面里列表逻辑最重的一个模块：每一项商品都是独立条目，条目之间存在删除、修改数量等操作，整体是一个动态集合。用<ul>来承载商品项列表是最符合语义的做法。

<ul class="cart-list"> <li class="cart-item"> <img src="goods/001.jpg" alt="商品封面"> <div class="goods-info"> <p class="goods-name">纯棉基础款T恤 白色 M码</p> <p class="goods-price">¥ 79.00 <del>¥129.00</del></p> </div> <button class="btn-remove">删除</button> </li> <li class="cart-item"> <img src="goods/002.jpg" alt="商品封面"> <div class="goods-info"> <p class="goods-name">日系帆布托特包 卡其色</p> <p class="goods-price">¥ 129.00</p> </div> <button class="btn-remove">删除</button> </li> </ul>

每条<li>内部是图片、文本信息、操作按钮的组合，这完全合法——<li>里面允许放任何流式内容。这样设计的好处是，整个购物车就是个“大列表”，每个商品项就是“列表里的一项”，以后做批量操作（全选删除、批量结算）时，可以按列表项来遍历数据，逻辑会非常清晰。

CSS可以做成左右结构的行布局：

.cart-list { list-style: none; margin: 0; padding: 0; } .cart-item { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid #eee; } .cart-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; } .goods-info { flex: 1; } .goods-price { color: #f40; font-weight: bold; }

这里flex: 1起的作用是把“商品信息块”撑满剩余空间，让删除按钮稳定地靠右。这种“图片固定宽度、信息自适应弹性宽度、操作按钮固定宽度”的三段式布局，是购物车列表最常见的形式，也是<li>内嵌组合布局的一个典型范式。

4. 定义列表（dl/dt/dd）的正确打开方式

4.1 dl不是随便用的，它表达的是“名词—描述”配对

定义列表<dl>（Description List，描述列表）在三种列表里是最容易被误解的。很多人以为它只能是“单词—解释”的词典形态，局限了它的应用范围。其实它的语义是“一组名词及其描述的配对集合”，只要页面里存在“什么东西对应什么说明”这种关系的模块，都适合用<dl>。

基础结构长这样：

<dl> <dt>商品编号</dt> <dd>NB-2024-0821</dd> <dt>库存状态</dt> <dd>有货（36件）</dd> <dt>配送方式</dt> <dd>顺丰包邮</dd> </dl>

<dt>是“被描述的名词”，<dd>是“对这个名词的具体描述”。浏览器默认会缩进<dd>，让名词和描述在视觉上形成明显区分。这里又有一个点要注意：一个<dt>可以对应多个<dd>，比如“可选颜色：黑色、白色、灰色”，可以写成一个<dt>后面跟三个<dd>；反过来，多个<dt>共用一个<dd>也行，视内容而定。

4.2 用dl做商品参数表

定义列表最能发光发热的场景就是“信息展示型表格”。拿电商的商品参数来举例，如果用<table>做，代码冗长且语义偏重“表格数据”；如果用<dl>，结构简洁，而且语义恰好匹配“参数名—参数值”的配对关系。

<dl class="product-specs"> <dt>品牌</dt> <dd>极想生活</dd> <dt>面料</dt> <dd>100%精梳棉</dd> <dt>产地</dt> <dd>中国·宁波</dd> <dt>洗涤说明</dt> <dd>30℃以下水温机洗，不可漂白，阴凉处悬挂晾干</dd> </dl>

默认渲染效果是每对“名词—描述”各占一行，<dd>有左侧缩进。在购物页面的实际场景里，参数区通常空间有限，希望一行承载两到三对信息，这就需要CSS把<dt>和<dd>改成“同行两列”的排版，而不是上下堆叠。

给一个实用方案，把每个“名词—描述”对固定成一行，用flex让它们水平排列：

.product-specs { margin: 16px 0; padding: 12px 16px; background: #f8f8f8; border-radius: 8px; } .product-specs dt { font-weight: bold; color: #333; } .product-specs dd { margin: 0 0 10px 0; color: #666; }

如果想做成两列表格那种效果，可以给每个<dt>和<dd>设固定宽度然后浮动，或者直接改用grid布局：

.product-specs { display: grid; grid-template-columns: 100px 1fr; row-gap: 8px; } .product-specs dd { margin: 0; }

这里把dd的默认外边距清零了，因为grid布局已经接手了间距控制，不需要再靠margin-left来制造缩进。实际使用中，grid方案在参数较多时排版效果最好，也最容易实现每两列回行，非常整齐。

注意：<dt>和<dd>不像<li>那样必须在<ul>或<ol>里出现，但HTML规范要求<dt>和<dd>必须拥有<dl>作为父元素。需要注意<dd>的默认margin-left在移动端有时候看起来很怪，清零还是保留要看设计稿，不是一概而论。

4.3 用dl做术语表与FAQ折叠区

除了商品参数，定义列表在“术语解释、FAQ问答”这类场景也很好用。

比如页面底部常常挂一个“常见问题”模块，每个问题对应一段答案，这就是标准的“名词—描述”配对，天然适合<dl>：

<dl class="faq-list"> <dt>订单支付后多久发货？</dt> <dd>支付成功后48小时内发货，预售商品以商品页标注时间为准。</dd> <dt>支持哪些支付方式？</dt> <dd>支持支付宝、微信支付、银联云闪付和货到付款。</dd> </dl>

这时你还能在<dt>上做一个点击折叠交互：点“问题”展开“答案”，再点收起。结构上只用一个<details>或一段JavaScript切换<dd>的隐藏类就能实现，不需要改写HTML结构。我把折叠的简单示范放在第6章排查技巧里一起说，因为牵扯一点JavaScript，放在实操部分讲更连贯。

4.4 dt和dd谁先谁后、一个名词多个描述怎么写

关于<dt>和<dd>的组合规则，这里值得花点篇幅说清楚，因为团队评审代码时经常碰到理解不统一的情况。

规则一：<dl>里可以先来一组<dt>，后面跟一个或多个<dd>，这叫“一名词多描述”。比如“可选尺码”这个名词，后面可以挂“S”“M”“L”“XL”四个<dd>：

<dl> <dt>可选尺码</dt> <dd>S</dd> <dd>M</dd> <dd>L</dd> <dd>XL</dd> </dl>

规则二：<dt>和<dd>不必严格成对出现，可以多个<dt>之后接一个<dd>。比如几个同义词对应同一个解释，这在术语表里很常见：

<dl> <dt>前端</dt> <dt>前台</dt> <dd>用户在浏览器中直接看到并与之交互的界面部分。</dd> </dl>

规则三：从HTML5以后，<dl>还能用来包裹“对话场景”的说话人和内容，不过在实际业务页面中几乎没人这么用，我建议还是保持“名词—描述”这个常规思路，别为了炫技硬套。

这部分唯一的坑在于：有些人会在<dl>里直接塞<div>来分组，这在HTML5.2之后是被允许的规范做法，但在更早的标准里会导致校验错误。如果团队技术栈历史比较久，建议先保持最朴素的<dt>直接跟在<dl>下的写法，兼容性最稳。

5. 列表嵌套、CSS重置与浏览器默认样式的坑

5.1 多级菜单的列表嵌套实操

前面提过列表可以嵌套，实际业务里最经典的嵌套场景就是多级菜单。拿“商品分类”来举例，一级分类下面有二级分类，二级下面可能还有三级，用<ul>嵌套<ul>是最自然的结构：

<ul class="category-menu"> <li> <a href="#">手机数码</a> <ul class="sub-menu"> <li><a href="#">手机</a></li> <li><a href="#">耳机</a></li> <li> <a href="#">智能穿戴</a> <ul class="sub-menu third-level"> <li><a href="#">智能手表</a></li> <li><a href="#">运动手环</a></li> </ul> </li> </ul> </li> <li> <a href="#">家用电器</a> <ul class="sub-menu"> <li><a href="#">冰箱</a></li> <li><a href="#">洗衣机</a></li> </ul> </li> </ul>

结构要点：“子菜单<ul>必须嵌在父级<li>内部”，这一点新手特别容易写错——有的人喜欢把子级<ul>放在父级<li>外面，导致渲染时子菜单跑到父菜单后面去，CSS悬停逻辑也不好写。记住一个口诀：“列表的子元素只能是<li>，<li>的子元素可以是一切”。

CSS方面，两级菜单最常用的方案是：一级横向排开，二级竖向绝对定位，鼠标悬停时显示。这个方案网上教程很多，我不重复写全套，只提醒三个关键点：

• 子菜单要position: absolute定位到父级<li>下方，父级<li>必须position: relative，否则子菜单会“跑丢”。
• 子菜单默认要display: none隐藏，悬停父级<li>时再display: block。
• 父级<li>和子菜单之间不能有缝隙，否则鼠标从一级菜单移向二级菜单的途中会触发mouseleave，菜单刚展开就收回，体验很糟。

5.2 list-style的三种写法与隐藏圆点的真相

无序列表的小圆点、有序列表的数字，都是由CSS的list-style系列属性控制的。它其实是一个复合属性，由三个子属性组成：

一般我推荐简写，一行搞定：

ul { list-style: square inside; }

这句话的意思就是“项目符号用方块，放在文字里面”。实际工作中，用list-style: none把默认符号干掉是最频繁的操作，因为绝大多数时候列表符号不符合设计稿，需要CSS重新造。但这里我额外说明一个真相：list-style: none只移除了标记符号，列表项的缩进往往还在，所以同时把padding-left: 0和margin: 0加上，才能让列表“完全贴边”。

list-style-position的inside和outside区别也值得知道：outside是默认值，符号在文字块之外，导致多行文本的第二行不会和第一行对齐；inside让符号和文字处于同一行内，多行时文本会回绕到符号下方，视觉上有点奇怪。实际项目中我一般不用inside，真要精确控制符号和文字间距，用::before伪元素做一个假符号更自由。

来个实际案例，做自定义圆点符号：

ul.custom-dots { list-style: none; padding-left: 0; } ul.custom-dots li { position: relative; padding-left: 20px; } ul.custom-dots li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; }

用::before生成圆点，你就可以随意控制它的颜色、大小、垂直位置，而不用受限于系统内置符号，这是在正式项目里最常用的自定义列表符号方案。

5.3 浏览器默认样式差异一览

不同浏览器对列表的默认样式有细节差异，主要体现在margin和padding的处理上。比如Chrome在Normalize前后，<ul>默认有padding-left: 40px、margin-top/bottom: 1em、list-style-type: disc；而同一套样式在旧版Safari里可能表现不同，导致布局空出多余空间。

业界通用的方案是引入CSS Reset（比如meyer reset）或normalize.css来抹平差异。如果你在项目里不方便引第三方库，最低限度的做法是在全局样式表里加上：

ul, ol { list-style: none; margin: 0; padding: 0; } dl { margin: 0; } dd { margin: 0; }

这几行简单粗暴的代码可以保证你后面写列表样式时，不会被浏览器默认的缩进和间距干扰。实际工作中，团队项目通常有统一的Reset文件，但写个人项目或练手页面时，我习惯在最上面直接贴这几行，省得调试时莫名其妙多出边距。

提示：<ol>和<ul>的padding-left默认值是40px左右，不是0。很多新手一上来就查“为什么ul左边有空白”，其实就是这里没清干净。记住“清列表样式三件套：list-style-none、margin-0、padding-0”，能省掉大量排查时间。

6. 实战案例：购物车联动结算按钮的完整实现

6.1 页面结构与需求拆解

整合前面所有知识点，我做一个小而完整的实战案例：一个带结算按钮的购物车区域。需求是这样——左侧是商品清单，右侧是结算面板，底部操作区有一个“去结算”按钮，商品数量和总价根据清单自动计算。

这次把列表和按钮用<ul>统一组织起来，覆盖“列表作为数据容器”和“列表作为操作按钮组”这两个用途。

先看HTML全貌：

<div class="cart-wrapper"> <ul class="cart-list"> <li class="cart-item">.btn-checkout { display: inline-block; width: 120px; height: 40px; background: #ff4d4f; color: #fff; font-size: 15px; line-height: 40px; text-align: center; border-radius: 4px; text-decoration: none; transition: background 0.2s ease; } .btn-checkout:hover { background: #e04344; } .btn-checkout:active { background: #c0393b; }

这里的细节是，我把a标签做成了块级元素才能撑起width和height，否则行内元素不会响应宽高。如果你不用a而用button，就得额外处理border、font-family继承等浏览器默认样式，哪个顺手用哪个，没有绝对标准。

悬停态颜色比默认态暗一点，能让用户感知“鼠标在这里”；按下态再暗一档，传递“点击已生效”的反馈。这种三层反馈看似基础，但少了它，用户会不确定自己有没有点上按钮。

6.3 加减按钮的JavaScript联动逻辑

实现了静态结构之后，用一段小JavaScript让加减按钮和总计金额联动起来。这个案例不算复杂，但覆盖了列表项遍历、事件委托、数据更新这几个常见操作。

const cartList = document.querySelector('.cart-list'); const totalPriceEl = document.querySelector('.total-price'); function calcTotal() { let total = 0; const items = cartList.querySelectorAll('.cart-item'); items.forEach(item => { const unit = parseFloat(item.dataset.price); const count = parseInt(item.querySelector('.count').textContent, 10); total += unit * count; }); totalPriceEl.textContent = '¥ ' + total.toFixed(2); } cartList.addEventListener('click', function(e) { const target = e.target; if (target.classList.contains('btn-plus')) { const countEl = target.parentElement.querySelector('.count'); let count = parseInt(countEl.textContent, 10); countEl.textContent = count + 1; calcTotal(); } if (target.classList.contains('btn-minus')) { const countEl = target.parentElement.querySelector('.count'); let count = parseInt(countEl.textContent, 10); if (count > 1) { countEl.textContent = count - 1; calcTotal(); } } }); calcTotal();

这里我用的是事件委托——把点击事件绑在cart-list这个父容器上，而不是给每个加减按钮单独绑定。这样以后新增商品条目，只要结构和现有li一致，事件会自动生效，不需要重新绑定。>*, *::before, *::after { box-sizing: border-box; }

至于列表在移动端点按时的蓝色半透明遮罩，那是移动端浏览器默认的-webkit-tap-highlight-color，可以设成透明：

li a { -webkit-tap-highlight-color: transparent; }

这两个设置属于移动端适配的“默认动作”，提前做掉能少很多兼容性烦恼。

8. FAQ折叠区实操：给dl加上手风琴效果

8.1 用details免JS实现展开收起

第四章留下来的FAQ折叠区，这里补上具体解法。用原生<details>元素包裹<dl>，能零JavaScript实现展开收起。

<details class="faq-item" open> <summary>订单支付后多久发货？</summary> <dl> <dt>发货时间</dt> <dd>支付成功后48小时内发货，预售商品以商品页标注时间为准。</dd> <dt>物流查询</dt> <dd>可在“我的订单—物流信息”中实时查看。</dd> </dl> </details> <details class="faq-item"> <summary>支持哪些支付方式？</summary> <dl> <dt>在线支付</dt> <dd>支付宝、微信支付、银联云闪付。</dd> <dt>货到付款</dt> <dd>目前仅部分城市支持，下单时以可选项为准。</dd> </dl> </details>

<summary>是<details>默认显示的标题，用户点击它就能切换内容的展开与收起，浏览器原生处理了所有交互逻辑，无需写一行JavaScript。open属性可以让它默认展开。加上一点点CSS就能获得较好的观感：

.faq-item { border: 1px solid #e5e5e5; border-radius: 6px; padding: 12px 16px; margin-bottom: 10px; } .faq-item summary { cursor: pointer; font-weight: bold; color: #333; } .faq-item dl { margin: 12px 0 0; } .faq-item dd { margin: 4px 0 0; color: #555; }

这个方案的可访问性比自定义JavaScript手风琴更好——键盘用户可以用Tab聚焦到summary，按回车或空格就能展开收起。屏幕阅读器也能正确朗读展开状态。如果不是特别复杂的手风琴需求，我建议优先考虑<details>，实现简单，维护也省心。

8.2 summary和dt的嵌套陷阱

这里有一个容易踩的坑：<summary>的合法子元素不包含<dl>，换句话说你如果把整个<dl>塞进<summary>里，浏览器会把<dl>踢出去，导致结构错乱。正确做法是让<summary>只放标题文本，<dl>作为<details>的子元素放在<summary>的后面，也就是上面写法那样。

另外，<summary>里放复杂交互元素要谨慎——如果把按钮、链接放进去，用户点击它们时可能触发展开收起，造成事件冲突。需要操作按钮就放在<dd>或<details>内的描述区域，别塞进标题行。

9. 用列表做“一键返回顶部”按钮的补充方案

9.1 固定在页面角落的返回按钮

很多页面右下角会有一个悬浮的“返回顶部”按钮，这个按钮如果按组件的思路做，也可以用<ul>包裹——虽然它只有一项，用不上列表语义，但如果在它内部将来要扩展“反馈”“分享”等多个入口，列表结构就派上用场了。

<ul class="float-actions"> <li> <a href="#top" class="btn-top">↑</a> </li> </ul>

.float-actions { position: fixed; right: 20px; bottom: 40px; list-style: none; margin: 0; padding: 0; } .float-actions .btn-top { display: block; width: 44px; height: 44px; background: rgba(0, 0, 0, 0.6); color: #fff; text-align: center; line-height: 44px; border-radius: 50%; text-decoration: none; font-size: 20px; } .float-actions .btn-top:hover { background: rgba(0, 0, 0, 0.8); }

因为只有一个<li>，列表在这里的作用更多是“未来扩展的余地”和“结构与class语义一致”。如果你确定只放一个按钮，直接用<a>也能达到同样效果，不必教条地套列表。

9.2 平滑滚动的两种实现

“返回顶部”的点击行为，最简单的是用href="#top"配合页面顶部的锚点。但跳转会瞬间完成，没有平滑滚动体验，这时可以用一行CSS开启平滑滚动：

html { scroll-behavior: smooth; }

这个CSS属性让页面上所有锚点跳转都带上平滑动画，不需要JavaScript。唯一的缺点是它会影响所有页面内跳转行为，如果只想让“返回顶部”按钮平滑，其他跳转保持默认，那就要用JavaScript控制：

document.querySelector('.btn-top').addEventListener('click', function(e) { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); });

两种方式效果一样，区别在控制粒度。“项目着急上线、不想写JS”用CSS平滑；产品经理只要求按钮平滑、页面其他锚点不要平滑，就用JavaScript方案。这类选择没有对错，按需求来就好。

10. 个人实操心得与建议

列表标签在整个HTML体系里算是“小知识点”，但它的应用场景远超大多数人想象。我在实际项目里见过大量“乱用div堆布局”的代码，后期改一个间距要翻三四个地方，而列表化结构往往一个CSS选择器就能统管整组条目，这种差异在团队协作时尤其明显。

给我的个人建议是：写页面之前先花10秒问自己——“这块内容是不是一组并列的条目？”，如果是，优先考虑<ul>；如果有明确顺序，用<ol>；如果是名词配描述的形式，用<dl>。判断对了，代码结构自己就清晰了。别小看这10秒的思考，长期积累下来，你写出的页面在可维护性和可访问性上会明显高出别人一截。

另外一个心得是，别让列表标签局限在“点列表”“数字列表”的刻板印象里。借助CSS Flexbox和伪元素，它能变成导航栏、按钮组、图标入口、商品清单、排行榜，甚至完整的电商操作栏。结构上老老实实按语义来，样式上大胆想象，这层“语义与现实分离”的感觉，恰好就是前端开发最核心的乐趣所在。

最后分享一个小技巧：如果团队项目里定了CSS规范，通常都会要求“列表默认清样式”。我习惯把所有列表的margin、padding、list-style清零这个动作放到全局样式的开头位置，不管当前页面有没有用列表。这样每次用到列表时，就不用再像救火一样去清默认样式了，代码也能更干净一些。