常见问题页面

简单约 20 分钟

你将构建什么

一个常见问题（FAQ）页面：用 HTML 原生的 <details> 和 <summary> 标签实现可折叠的问答列表，点击问题展开答案，再点击收起。包含页面标题、分类分组和页脚。

学习目标

用 details/summary 标签实现无 JS 的折叠交互
用语义化标签组织问答内容
用 CSS 美化折叠组件的默认样式
理解无障碍交互的原生方案

前置要求

了解 HTML 基本标签
了解 CSS 基础样式
已完成“个人主页”项目或具备同等基础

步骤

1
搭建页面骨架
创建 index.html，写入文档骨架。在 <body> 中用 <h1> 写页面标题“常见问题”，紧跟一个 <p> 简短说明。
代码
```
<main>
  <h1>常见问题</h1>
  <p>以下是大家最常问的问题，点击问题即可展开答案。</p>
  
</main>
```
预期结果
页面显示标题和说明文字。

添加可折叠问答项

用 <details> 包裹每个问答项，<summary> 放问题，后面跟 <p> 放答案。<details> 默认折叠，点击 summary 展开。

代码

<details>
  <summary>这个项目需要安装什么软件吗？</summary>
  <p>不需要，用任何文本编辑器和浏览器就能完成。</p>
</details>

<details>
  <summary>学完这个项目要多久？</summary>
  <p>大约 20 分钟，包括编写和测试。</p>
</details>

<details>
  <summary>需要先学 JavaScript 吗？</summary>
  <p>不需要，这个项目只用 HTML 和 CSS。</p>
</details>

预期结果

页面显示三个可点击的问题，点击展开答案，再点击收起。

按分类分组

用 <h2> 把问题分成“基础问题”和“进阶问题”两组，每组下面放对应的 <details>。让内容更有层次。

代码

<h2>基础问题</h2>
<details>
  <summary>需要安装什么软件吗？</summary>
  <p>不需要，用文本编辑器和浏览器即可。</p>
</details>

<h2>进阶问题</h2>
<details>
  <summary>能用 CSS 自定义折叠图标吗？</summary>
  <p>可以，用 list-style: none 隐藏默认箭头，再用伪元素加自定义图标。</p>
</details>

预期结果

问题按分类分组，每组有小标题。

4
用 CSS 美化折叠组件
给 summary 加鼠标指针样式，去掉默认的三角箭头，用自定义图标代替。给展开的 details 加一点背景色区分。
代码
```
summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none; /* 隐藏默认箭头 */
}

summary::-webkit-details-marker {
  display: none; /* WebKit 浏览器隐藏默认箭头 */
}

details[open] {
  background: #f0f7ff;
  border-radius: 4px;
  padding: 0.5rem;
}
```
预期结果
折叠组件有了自定义样式，展开时有浅蓝背景。

自己动手试试

起始代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>常见问题</title>
  </head>
  <body>
    <main>
      <h1>常见问题</h1>
      <!-- TODO: 添加分类分组和 details/summary 问答项 -->
    </main>
  </body>
</html>

解决方案代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>常见问题</title>
    <style>
      summary {
        cursor: pointer;
        font-weight: 600;
        list-style: none;
      }
      summary::-webkit-details-marker {
        display: none;
      }
      details[open] {
        background: #f0f7ff;
        border-radius: 4px;
        padding: 0.5rem;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>常见问题</h1>
      <p>以下是大家最常问的问题，点击问题即可展开答案。</p>
      <h2>基础问题</h2>
      <details>
        <summary>需要安装什么软件吗？</summary>
        <p>不需要，用文本编辑器和浏览器即可。</p>
      </details>
      <h2>进阶问题</h2>
      <details>
        <summary>能用 CSS 自定义折叠图标吗？</summary>
        <p>可以，用 list-style: none 隐藏默认箭头，再用伪元素加自定义图标。</p>
      </details>
    </main>
  </body>
</html>

你学到了什么

你学会了用 HTML 原生的 details/summary 实现折叠交互——无需 JavaScript 就能得到可访问的组件。善用原生标签能减少代码量、提升性能和无障碍体验。

常见问题页面

你将构建什么

学习目标

前置要求

步骤

搭建页面骨架

添加可折叠问答项

按分类分组

用 CSS 美化折叠组件

自己动手试试

你学到了什么

相关资源

相关课程

相关练习

相关工具

相关参考文档

相关错误

相关术语

相关术语

相关错误