HTML 有三种列表类型,每种都有其语义含义。使用正确的类型有助于无障碍性(屏幕阅读器会朗读"列表,3 项")和结构表达。
无序列表 —— 顺序无关紧要
html
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
默认带项目符号渲染。适用于导航菜单、功能列表、标签——任何顺序不重要的场景。
<ol type="1" start="1">
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 20 minutes</li>
</ol>
带数字渲染。适用于步骤、排名、操作说明。属性:type(1、a、A、i、I)、start(起始数字)、reversed。
<dl>
<dt>HTML</dt>
<dd>The markup language for web pages.</dd>
<dt>CSS</dt>
<dd>The styling language for web pages.</dd>
</dl>
<dt> 是术语,<dd> 是它的描述——非常适合术语表、元数据和键/值对。
<nav>
<ul>
<li><a href="/">Home</a>
<ul><li><a href="/sub">Sub-page</a></li></ul> <!-- nested submenu -->
</li>
</ul>
</nav>
导航菜单通常被标记为 <nav> 内嵌套一个 <ul>。
列表不只是为了项目符号——它们赋予内容结构,屏幕阅读器会朗读这种结构,而你也可以自由设置样式(默认标记很容易用 CSS 移除)。
在 <ul>、<ol>、<dl> 之间做选择就是在传达含义:无序、有顺序,还是术语-定义。