HTML Academy · 课时

无序列表：ul 与 li

Q: 「无序列表：ul 与 li」这节课中我会学到什么？

使用 ul 和 li 元素构建项目符号列表。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 ul 和 li 元素构建项目符号列表。

无序列表：ul 与 li 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

什么是无序列表

无序列表使用项目符号 points 显示项目——顺序并不重要：

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

无序列表元素

<ul>（无序列表）元素包裹列表。只有 <li> elements 应作为其直接子元素：

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->

使用 CSS 设置项目符号样式

使用 CSS 控制列表标记：

ul {
  list-style-type: disc;       /* default: filled circle */
  /* circle, square, none */
}

/* Custom bullet with ::before */
ul li::before {
  content: '→ ';
  color: blue;
}

/* Remove all list styling: */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

将导航表示为无序列表

从语义上看，导航菜单是链接列表：

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

列表项可以包含任意内容

列表项可以容纳任意流式内容：

<ul>
  <li>
    <strong>HTML</strong>
    <p>The structure of the web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>The presentation layer.</p>
  </li>
</ul>

内联列表

使用 CSS 将列表项水平显示：

<ul class="inline-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<!-- CSS: -->
<!--
.inline-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
-->

无序列表的语义用途

无序列表的常见语义用途：

导航菜单
功能列表
标签云
相关链接
食谱中的配料列表

多个项目使用无序列表而非段落

当有多个相关项目时，使用列表在语义上优于使用彼此分开的段落：

<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

<!-- Good: -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

使用列表图像设置列表标记

使用自定义图像作为列表项目符号：

ul {
  list-style-image: url('/icons/check.svg');
}

/* More reliable: use background-image on li::before */
ul li {
  list-style: none;
  padding-left: 1.5rem;
  background: url('/icons/check.svg') no-repeat left center;
  background-size: 1rem;
}

列表样式简写属性

list-style 简写属性可以设置类型、位置和图像：

ul {
  list-style: square inside;    /* type + position */
  list-style: none;             /* remove bullets */
}

/* list-style-position: inside vs outside */
ul {
  list-style-position: inside;  /* bullet inside padding box */
  /* outside = default, bullet outside text block */
}

无障碍访问

列表的无障碍注意事项：

屏幕阅读器会播报列表类型和项目数量
使用 list-style: none 可能导致某些屏幕阅读器不将其播报为列表——添加 role="list" 以保留语义

<ul style="list-style: none" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

快速检查

无序列表的唯一有效直接子元素是什么？

回顾：无序列表

无序列表要点：

<ul> 包裹一个顺序不重要的列表
<li> 是唯一有效的直接子元素
默认项目符号：实心圆；使用 list-style-type 更改
从语义上看，导航菜单是由链接组成的 <ul> 列表
如果使用 CSS 移除项目符号，请添加 role="list"

常见问题解答

「无序列表：ul 与 li」课时是免费的吗？

是的 — 「无序列表：ul 与 li」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「无序列表：ul 与 li」这节课中我会学到什么？

使用 ul 和 li 元素构建项目符号列表。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「无序列表：ul 与 li」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy