HTML `＜datalist＞`：原生下拉搜索框，无需 JS 也能实现联想功能

在网页表单交互中，“带联想的下拉搜索框”是高频需求——无论是电商平台的商品搜索、城市选择器，还是标签输入场景，用户都希望输入时能快速匹配预设选项，减少手动输入成本。但传统实现方案往往依赖大量JavaScript：监听输入事件、过滤数据、渲染下拉列表，不仅代码冗余，还可能因脚本加载延迟影响体验。而HTML原生的<datalist>标签，仅需几行代码就能实现“输入联想+下拉选择”的核心功能，零JS依赖、轻量高效，堪称表单开发的“隐藏神器”。今天，我们就来系统解锁这个原生标签的用法与实战技巧。

一、为什么需要 <datalist>？传统方案的痛点与破局

在<datalist>出现前，实现下拉搜索框主要有两种方案，但都存在明显缺陷：

1.1 纯 <select> 下拉框：灵活度不足

用<select>+<option>实现固定选项选择，优点是原生支持、无需脚本，但缺点致命：用户只能从预设选项中选择，无法输入自定义内容。例如城市选择框，若用户需要选择的城市不在选项中，就无法完成输入，完全无法满足“搜索+灵活输入”的需求。

1.2 JS 自定义搜索框：成本高、性能差

为了兼顾“联想搜索”和“自定义输入”，开发者通常会用<input>+<ul>模拟：通过JS监听输入事件，实时过滤后端返回的数据源，再动态渲染<ul>作为下拉列表。这种方案的问题在于：

• 代码繁琐：需处理输入监听、数据过滤、列表渲染、点击选中、键盘导航等一系列逻辑，代码量少则几十行，多则上百行；
• 性能隐患：频繁的输入事件触发和DOM操作，可能导致页面卡顿（尤其在选项数量多的场景）；
• 兼容性复杂：不同浏览器对输入事件、键盘行为的处理存在差异，需额外适配。

1.3 <datalist> 的破局：原生支持，兼顾灵活与高效

<datalist>的核心优势在于**“原生集成”**：浏览器自带输入联想、下拉渲染、选项选择等交互逻辑，无需任何JS代码，同时支持“选择预设选项”和“输入自定义内容”，完美平衡灵活度与开发效率。

• 零JS依赖：核心功能由浏览器原生实现，无需编写一行脚本；
• 轻量高效：不占用额外资源，渲染和交互性能优于JS方案；
• 灵活适配：既支持选择预设选项，也允许输入自定义内容；
• 原生可访问性：自动支持键盘导航（上下键选择、Enter确认），符合WCAG标准，无需额外适配屏幕阅读器。

二、基础用法：3步实现原生联想搜索

<datalist>的使用逻辑极其简单，核心是“绑定输入框+定义选项列表”，3步即可完成基础功能开发。

2.1 步骤1：创建 <input> 输入框，通过 list 属性关联 <datalist>

给<input>标签添加list属性，属性值为目标<datalist>的id，建立两者的关联关系：

<!-- input输入框：list属性值与datalist的id一致 -->
<input type="text" list="product-list"  <!-- 关联id为product-list的datalist -->placeholder="搜索商品（如：无线耳机）..." class="search-input"
>

2.2 步骤2：创建 <datalist> 标签，定义预设选项

用<datalist>标签包裹<option>标签，每个<option>对应一个联想选项。其中：

• value：选项的核心值，选中后会自动填充到输入框；
• label（可选）：选项的补充说明（如商品属性、分类），部分浏览器（Chrome、Edge）会在选项右侧显示，提升可读性。

<!-- datalist选项列表：id需与input的list属性完全匹配 -->
<datalist id="product-list"><option value="无线蓝牙耳机" label="降噪 | 续航24h"></option><option value="智能手表" label="心率监测 | 防水50米"></option><option value="平板电脑" label="10.9英寸 | 256GB"></option><option value="无线充电器" label="多设备兼容 | 15W快充"></option><option value="机械键盘" label="青轴 | 全尺寸 | 热插拔"></option>
</datalist>

2.3 步骤3：添加基础样式（可选，提升视觉体验）

为输入框添加简单样式，适配页面设计风格，下拉列表的样式由浏览器默认控制（后续会讲解定制方案）：

.search-input {width: 350px;padding: 0.9rem 1.2rem;border: 1px solid #e5e7eb;border-radius: 8px;font-size: 1rem;outline: none;transition: all 0.3s ease;
}/* 聚焦状态优化 */
.search-input:focus {border-color: #4a90e2;box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
}

2.4 最终效果演示

当用户在输入框中输入内容时，浏览器会自动匹配<datalist>中包含输入内容的选项（不区分大小写），并显示下拉列表：

• 输入“无线”：下拉列表显示“无线蓝牙耳机”“无线充电器”；
• 输入“键”：下拉列表显示“机械键盘”；
• 若输入“鼠标”（无匹配选项）：下拉列表不显示，用户可继续输入“无线鼠标”作为自定义内容。

用户可通过两种方式选择选项：

1. 鼠标点击：直接点击下拉列表中的选项，值会自动填充到输入框；
2. 键盘导航：按“向下键”聚焦到下拉列表，按“Enter”或“Tab”键确认选择。

三、核心特性：不止于“文本联想”的灵活适配

<datalist>并非只能实现简单的文本联想，通过与不同类型的<input>配合、动态生成选项等方式，可适配更复杂的业务场景。

3.1 支持多种 <input> 类型：覆盖不同输入需求

<datalist>可与<input>的多种类型结合，不止于type="text"，满足数值、邮箱、搜索等特定场景：

（1）type=“search”：原生搜索框（带清除按钮）

type="search"的输入框自带“一键清除”功能（输入内容后显示“×”按钮），无需JS即可实现清空，适合搜索场景：

<input type="search" list="city-list" placeholder="搜索城市（如：北京）..." class="city-input"
>
<datalist id="city-list"><option value="北京"></option><option value="上海"></option><option value="广州"></option><option value="深圳"></option><option value="杭州"></option><option value="成都"></option>
</datalist>

（2）type=“number”：数值联想（支持范围限制）

配合type="number"，可实现数值类选项的联想（如价格、数量），还能通过min/max属性限制输入范围，避免非法值：

<input type="number" list="price-list" placeholder="选择价格（元）..." min="0"  <!-- 最小输入值 -->max="5000"  <!-- 最大输入值 -->step="10"  <!-- 步长（每次增减10） -->
>
<datalist id="price-list"><option value="99"></option><option value="199"></option><option value="299"></option><option value="599"></option><option value="999"></option><option value="1999"></option>
</datalist>

3.2 动态生成选项：对接后端数据

虽然<datalist>是原生标签，但可通过JS动态生成选项（仅用于“生成选项”，核心联想逻辑仍由浏览器原生处理），适配后端接口返回的动态数据（如商品列表、用户标签）：

<!-- 输入框与空datalist -->
<input type="text" list="dynamic-product-list" placeholder="搜索商品（加载中...）..." id="dynamic-input"
>
<datalist id="dynamic-product-list"></datalist><script>// 1. 模拟后端接口：获取商品数据const fetchProductData = () => {return new Promise((resolve) => {// 模拟接口延迟（500ms）setTimeout(() => {resolve(["JavaScript 高级程序设计（第4版）","CSS 权威指南（第4版）","HTML 与 CSS 设计与构建网站（第8版）","React 实战：设计模式和最佳实践（第2版）","Vue.js 设计与实现"]);}, 500);});};// 2. 动态渲染datalist选项const renderDynamicOptions = async () => {const input = document.getElementById("dynamic-input");const datalist = document.getElementById("dynamic-product-list");try {// 获取后端数据const productList = await fetchProductData();// 清空现有选项（避免重复）datalist.innerHTML = "";// 遍历数据生成<option>productList.forEach(product => {const option = document.createElement("option");option.value = product;datalist.appendChild(option);});// 更新输入框占位符input.placeholder = "搜索商品（如：JavaScript）...";} catch (error) {console.error("加载商品数据失败：", error);input.placeholder = "商品数据加载失败，请重试...";}};// 3. 页面加载时执行window.addEventListener("load", renderDynamicOptions);
</script>

• 核心优势：JS仅负责“生成选项”，无需处理输入匹配、下拉渲染等逻辑，代码量比完全自定义的JS搜索框减少80%以上，且性能更优。

3.3 自定义匹配逻辑：突破默认“包含匹配”

默认情况下，<datalist>的匹配逻辑是“输入内容包含在选项中”（如输入“键”会匹配“机械键盘”）。若需更严格的匹配规则（如“开头匹配”“关键词匹配”），可通过简单的JS配合实现：

<input type="text" list="custom-match-list" placeholder="开头匹配搜索（如：机械）..." id="custom-input"
>
<datalist id="custom-match-list"><option value="机械键盘"></option><option value="机械鼠标"></option><option value="无线键盘"></option><option value="无线鼠标"></option><option value="机械硬盘"></option>
</datalist><script>const input = document.getElementById("custom-input");const datalist = document.getElementById("custom-match-list");// 保存原始选项数据（避免重复请求）const originalOptions = Array.from(datalist.options).map(option => option.value);// 监听输入事件，实现“开头匹配”input.addEventListener("input", () => {const inputValue = input.value.trim().toLowerCase();// 1. 输入为空时，恢复所有原始选项if (inputValue === "") {datalist.innerHTML = originalOptions.map(opt => `<option value="${opt}"></option>`).join("");return;}// 2. 过滤“以输入内容开头”的选项const matchedOptions = originalOptions.filter(option => option.toLowerCase().startsWith(inputValue));// 3. 渲染匹配的选项datalist.innerHTML = matchedOptions.map(opt => `<option value="${opt}"></option>`).join("");});
</script>

• 效果：输入“机械”时，会匹配“机械键盘”“机械鼠标”“机械硬盘”（开头匹配）；输入“无线”时，会匹配“无线键盘”“无线鼠标”；若输入“键”，则无匹配选项（因为没有选项以“键”开头），完美实现自定义匹配规则。

四、实战场景：<datalist> 的高频业务应用

<datalist>在表单交互中应用广泛，以下是3个典型实战案例，覆盖电商、地址填写、内容管理等场景。

4.1 案例1：电商商品搜索框（带属性标签）

在电商平台的商品搜索场景中，<datalist>可结合label属性显示商品核心属性（如价格、分类），帮助用户快速识别选项：

<div class="product-search-container"><input type="search" list="product-search-list" placeholder="搜索商品（如：耳机）..." class="product-search-input"><datalist id="product-search-list"></datalist><button class="search-btn">搜索</button>
</div><style>.product-search-container {display: flex;align-items: center;max-width: 600px;margin: 2rem auto;gap: 0;}.product-search-input {flex: 1;padding: 0.9rem 1.2rem;border: 1px solid #e5e7eb;border-right: none;border-radius: 8px 0 0 8px;font-size: 1rem;outline: none;transition: border-color 0.3s;}.product-search-input:focus {border-color: #ff4757;}.search-btn {padding: 0.9rem 1.5rem;border: none;border-radius: 0 8px 8px 0;background: #ff4757;color: white;font-size: 1rem;cursor: pointer;transition: background 0.3s;}.search-btn:hover {background: #e03140;}
</style><script>// 模拟后端商品数据（含名称和属性）const productData = [{ name: "无线蓝牙耳机", label: "降噪 | 24h续航 | ¥299" },{ name: "智能手表", label: "血氧监测 | 防水 | ¥599" },{ name: "平板电脑", label: "10.9英寸 | 256GB | ¥2999" },{ name: "机械键盘", label: "青轴 | 全尺寸 | ¥199" },{ name: "无线充电器", label: "多设备 | 15W | ¥89" }];// 渲染商品选项const renderProductOptions = () => {const datalist = document.getElementById("product-search-list");datalist.innerHTML = productData.map(product => `<option value="${product.name}" label="${product.label}"></option>`).join("");};// 页面加载时渲染window.addEventListener("load", renderProductOptions);// 搜索按钮点击事件（模拟提交）document.querySelector(".search-btn").addEventListener("click",() => {const inputValue = document.querySelector(".product-search-input").value.trim();if (inputValue === "") {alert("请输入搜索内容");return;}// 模拟搜索提交（实际项目中可替换为接口请求）alert(`正在搜索商品：${inputValue}`);});
</script>

• 效果：用户输入“耳机”时，下拉列表显示“无线蓝牙耳机”及属性“降噪 | 24h续航 | ¥299”，选择后点击“搜索”按钮即可提交；若输入自定义内容（如“有线耳机”），也能正常提交搜索，兼顾预设选项与灵活输入。

4.2 案例2：城市选择器（中文+拼音双联想）

在地址填写、定位等场景中，用户可能习惯用中文或拼音输入城市（如“北京”或“Beijing”），<datalist>可通过label属性实现双联想，提升用户体验：

<div class="city-select-container"><label for="city-input" class="city-label">所在城市：</label><input type="text" id="city-input"list="city-datalist" placeholder="输入中文或拼音（如：北京/Beijing）..." class="city-input"><datalist id="city-datalist"><option value="北京" label="Beijing | 直辖市"></option><option value="上海" label="Shanghai | 直辖市"></option><option value="广州" label="Guangzhou | 广东省"></option><option value="深圳" label="Shenzhen | 广东省"></option><option value="杭州" label="Hangzhou | 浙江省"></option><option value="成都" label="Chengdu | 四川省"></option><option value="重庆" label="Chongqing | 直辖市"></option></datalist>
</div><style>.city-select-container {display: flex;align-items: center;gap: 0.8rem;margin: 2rem;}.city-label {font-size: 1rem;color: #333;}.city-input {width: 280px;padding: 0.8rem 1rem;border: 1px solid #e5e7eb;border-radius: 6px;font-size: 1rem;}
</style>

• 效果：用户输入“Bei”时，会匹配到“北京”（label含“Beijing”）；输入“Guang”时，匹配“广州”（label含“Guangzhou”）；输入“浙江”时，匹配“杭州”（label含“浙江省”），支持多维度联想，适配不同用户习惯。

4.3 案例3：标签输入框（多标签+联想）

在内容发布、用户画像等场景中，标签输入需要“多标签管理+联想选择”，<datalist>可配合少量JS实现该功能，允许用户选择预设标签或添加自定义标签：

<div class="tag-input-container"><!-- 已添加的标签容器 --><div class="tags-container" id="tags-container"></div><!-- 标签输入框 --><input type="text" list="tag-datalist" placeholder="添加标签（按Enter确认）..." class="tag-input"id="tag-input">
</div>
<datalist id="tag-datalist"><option value="前端开发"></option><option value="JavaScript"></option><option value="CSS"></option><option value="HTML"></option><option value="React"></option><option value="Vue"></option><option value="TypeScript"></option>
</datalist><style>.tag-input-container {display: flex;flex-wrap: wrap;align-items: center;gap: 0.6rem;padding: 0.8rem;border: 1px solid #e5e7eb;border-radius: 8px;width: 500px;margin: 2rem;}.tags-container {display: flex;flex-wrap: wrap;gap: 0.6rem;}.tag-item {display: flex;align-items: center;gap: 0.4rem;padding: 0.4rem 0.8rem;background: #f0f7ff;color: #4a90e2;border-radius: 4px;font-size: 0.9rem;}.tag-remove-btn {background: none;border: none;color: #999;cursor: pointer;font-size: 1.1rem;line-height: 1;padding: 0;}.tag-remove-btn:hover {color: #4a90e2;}.tag-input {flex: 1;min-width: 120px;padding: 0.5rem;border: none;outline: none;font-size: 0.9rem;}
</style><script>const tagsContainer = document.getElementById("tags-container");const tagInput = document.getElementById("tag-input");// 存储已添加的标签（去重）let addedTags = new Set();// 添加标签函数const addTag = (tagText) => {const trimmedTag = tagText.trim();// 过滤空值和重复标签if (!trimmedTag || addedTags.has(trimmedTag)) return;// 1. 存储标签addedTags.add(trimmedTag);// 2. 创建标签元素const tagElement = document.createElement("div");tagElement.className = "tag-item";tagElement.innerHTML = `${trimmedTag}<button class="tag-remove-btn" data-tag="${trimmedTag}">×</button>`;tagsContainer.appendChild(tagElement);// 3. 绑定删除事件tagElement.querySelector(".tag-remove-btn").addEventListener("click", (e) => {const tagToRemove = e.target.dataset.tag;addedTags.delete(tagToRemove);tagElement.remove();});// 4. 清空输入框tagInput.value = "";};// 监听Enter键添加标签tagInput.addEventListener("keydown", (e) => {if (e.key === "Enter") {e.preventDefault(); // 阻止表单提交addTag(tagInput.value);}});// 监听Tab键快速添加（选择datalist选项后按Tab）tagInput.addEventListener("keydown", (e) => {if (e.key === "Tab" && tagInput.value.trim()) {e.preventDefault();addTag(tagInput.value);}});
</script>

• 效果：用户可通过输入框联想选择预设标签（如“React”“Vue”），按Enter或Tab键添加；也可输入自定义标签（如“Next.js”），添加后标签显示在输入框左侧，点击“×”可删除，兼顾效率与灵活性。

五、避坑指南：使用 <datalist> 的关键注意事项

5.1 浏览器兼容性与样式定制限制

<datalist>的核心功能兼容性良好，但下拉列表的样式定制存在明显限制，需提前规划：

（1）兼容性情况

• 完全支持：Chrome 20+、Firefox 4+、Safari 10.1+、Edge 12+（覆盖99%以上的现代浏览器用户）；
• 部分支持：
  • Safari 9及以下：不支持label属性（仅显示value），且下拉列表样式无法修改；
  • IE 10-11：支持基础联想功能，但不支持type="search"，且匹配逻辑仅支持“开头匹配”（不支持包含匹配）；
• 不支持：IE 9及以下（用户占比极低，可忽略或提供降级方案）。

（2）样式定制限制（核心痛点）

浏览器对<datalist>下拉列表的样式控制极其有限，无法通过CSS修改以下内容：

• 下拉列表的背景色、边框、阴影、圆角；
• 选项的字体大小、行高、hover背景色；
• 下拉列表的宽度（默认与输入框一致）、最大高度。

解决方案：

• 轻度定制需求：接受浏览器默认样式，仅优化输入框样式（如边框、聚焦效果），保证整体视觉协调；
• 高度定制需求：采用“原生功能+JS增强”方案——默认使用<datalist>的联想逻辑，当需要自定义样式时，用JS监听输入事件，隐藏原生下拉列表，渲染自定义<ul>列表模拟联想效果：

5.2 避免与 <select> 混淆：明确使用场景

<datalist>与<select>都能提供选项列表，但核心定位完全不同，需根据业务需求选择：

特性
核心功能	输入联想+自定义输入（允许输入选项外内容）	固定选项选择（仅能选择预设选项，无法自定义）
交互触发方式	输入内容后自动显示下拉列表	点击输入框右侧箭头显示下拉列表
适用场景	搜索框、城市选择、标签输入（需灵活输入）	性别选择、月份选择、固定分类（无自定义需求）
选项数量适配	适合中大量选项（依赖搜索筛选）	适合少量选项（无需搜索，直接选择）

选择建议：

• 若用户需要“搜索+选择+自定义输入”，用<datalist>；
• 若用户仅需“从固定选项中选择”，用<select>。

5.3 处理“无匹配选项”的用户反馈

当用户输入内容无匹配选项时，<datalist>不会显示任何提示，可能导致用户困惑（如“为什么没有下拉列表？是不是输入错误？”）。解决方案是添加“无匹配提示”，引导用户继续操作：

<input type="text" list="no-match-list" placeholder="搜索标签..." id="no-match-input"
>
<datalist id="no-match-list"><option value="前端开发"></option><option value="JavaScript"></option>
</datalist>
<!-- 无匹配提示（默认隐藏） -->
<div id="no-match-tip" style="color: #999; margin: 0.5rem 0 0 0; font-size: 0.9rem; display: none;">暂无匹配标签，可输入自定义标签（按Enter添加）
</div><script>const input = document.getElementById("no-match-input");const tip = document.getElementById("no-match-tip");const options = Array.from(document.getElementById("no-match-list").options).map(opt => opt.value.toLowerCase());// 监听输入事件，显示/隐藏提示input.addEventListener("input", () => {const inputValue = input.value.trim().toLowerCase();if (!inputValue) {tip.style.display = "none";return;}// 判断是否有匹配选项const hasMatch = options.some(opt => opt.includes(inputValue));tip.style.display = hasMatch ? "none" : "block";});
</script>

5.4 性能优化：避免过多选项导致卡顿

当<datalist>的选项数量超过1000个时，可能出现以下性能问题：

• 浏览器渲染下拉列表时卡顿；
• 联想匹配速度变慢（尤其在旧浏览器中）。

优化方案：

1. 分页加载选项：通过JS监听输入长度，当输入字符数≥2时，再加载匹配的前50个选项（避免一次性加载大量选项）；
2. 接口防抖：若选项从后端接口获取，添加防抖（如300ms延迟），避免输入过程中频繁请求接口；
3. 选项去重与排序：确保选项无重复，且按“热门度”或“字母顺序”排序，提升用户选择效率。

// 性能优化示例：防抖+分页加载选项
const debounce = (fn, delay = 300) => {let timer;return (...args) => {clearTimeout(timer);timer = setTimeout(() => fn.apply(this, args), delay);};
};// 防抖处理的选项加载函数
const loadOptions = debounce(async (inputValue) => {// 输入字符数<2时，不加载选项if (inputValue.length < 2) {document.getElementById("large-list").innerHTML = "";return;}// 模拟接口请求，获取匹配选项（仅返回前50个）const response = await fetch(`/api/tags?keyword=${inputValue}`);const allMatched = await response.json();const limitedMatched = allMatched.slice(0, 50); // 限制最多50个选项// 渲染选项const datalist = document.getElementById("large-list");datalist.innerHTML = limitedMatched.map(opt => `<option value="${opt}"></option>`).join("");
});// 监听输入事件
document.getElementById("large-input").addEventListener("input", (e) => {loadOptions(e.target.value);
});

六、可访问性（A11y）最佳实践

<datalist>作为原生表单元素，具备良好的可访问性基础，但需注意以下细节，确保键盘用户、屏幕阅读器用户能正常使用：

6.1 确保键盘导航正常

<datalist>原生支持键盘导航，但需避免通过JS禁用核心键盘事件：

• 输入时按“向下键”：聚焦到下拉列表的第一个选项；
• 按“上下键”：在选项间切换聚焦；
• 按“Enter”或“Tab”键：将选中选项的值填充到输入框；
• 按“Esc”键：关闭下拉列表（部分浏览器支持）。

禁忌：不要用e.preventDefault()阻止“向下键”“Enter”等核心事件，避免键盘用户无法操作。

七、总结：原生表单的“轻量王者”

HTML <datalist>作为一个被低估的原生标签，用极简的代码解决了“下拉搜索+灵活输入”的核心需求，其核心价值可概括为三点：

7.1 开发效率高：零JS依赖，快速落地

无需编写复杂的输入监听、数据过滤、列表渲染逻辑，仅需几行HTML代码就能实现联想搜索功能，大幅减少开发时间。尤其适合快速原型开发、轻量级表单（如工具类网站、后台管理系统的简单搜索框），让开发者专注于业务逻辑而非交互细节。

7.2 性能体验优：浏览器原生优化，流畅不卡顿

联想匹配、下拉渲染等核心逻辑由浏览器原生处理，避免了JS频繁操作DOM导致的卡顿问题，在弱网络环境或低端设备上表现更稳定。同时，原生支持键盘导航和屏幕阅读器，兼顾普通用户与特殊用户的体验。

7.3 灵活度适中：兼顾“选择”与“输入”

既支持用户从预设选项中快速选择（提升效率），又允许输入自定义内容（满足灵活需求），覆盖了“搜索框”“城市选择”“标签输入”等多数表单场景，比纯<select>更灵活，比完全自定义的JS搜索框更轻量。

7.4 实践建议：合理选择，扬长避短

• 优先使用场景：

  1. 轻量级搜索框（如商品搜索、标签选择）；
  2. 需兼顾“选择”与“自定义输入”的场景（如城市选择、邮箱输入）；
  3. 对开发效率要求高，且对下拉列表样式无极致定制需求的项目。

• 谨慎使用场景：

  1. 需高度定制下拉列表样式（如品牌化设计、复杂交互）；
  2. 选项数量超过1000个（需配合分页加载优化）；
  3. 需兼容IE 9及以下浏览器（需额外开发降级方案）。

在前端开发中，我们常常追求“框架化”“复杂化”的解决方案，却忽略了HTML原生标签的强大能力。<datalist>的存在提醒我们：很多时候，最简单的工具反而能最高效地解决问题。下次遇到下拉搜索需求时，不妨先试试这个“轻量王者”——它可能会让你的表单交互开发效率翻倍。

你在项目中使用过<datalist>吗？有哪些有趣的实践或踩坑经历？欢迎在评论区分享你的经验～