5个冷门HTML标签替代20行JS代码

html复制<details>
  <summary>点击查看详情</summary>
  <p>这里是隐藏的内容...</p>
</details>

2.2 进阶技巧

• 默认展开：添加open属性

html复制<details open>
  <summary>默认展开的内容</summary>
  ...
</details>

• 添加平滑动画：

css复制details[open] summary ~ * {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

注意：虽然可以用CSS修改三角箭头样式，但建议保留原生指示符以确保可用性

3.

3.1 替代autocomplete组件

传统实现需要：

1. 监听input事件
2. 实现防抖
3. 发起搜索请求
4. 渲染下拉列表
5. 处理键盘导航

而

html复制<input list="browsers" placeholder="选择浏览器">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

3.2 实际应用场景

• 固定选项的自动补全
• 单位选择器（如货币、尺寸）
• 历史记录提示

实测数据：在包含100个选项时，原生datalist的渲染速度比JS实现快3-5倍

4. ：可视化进度指示器

4.1 基本属性解析

这个标签完美替代那些用div拼出来的进度条：

html复制<meter 
  min="0" 
  max="100" 
  low="30" 
  high="80" 
  optimum="90"
  value="65">
</meter>

关键属性：

• low/high：定义阈值范围
• optimum：指示最佳值位置
• 浏览器会自动根据值区间显示不同颜色

4.2 样式自定义技巧

虽然浏览器有默认样式，但可以用CSS深度定制：

css复制meter {
  width: 100%;
  height: 20px;
}

/* WebKit样式覆盖 */
meter::-webkit-meter-bar {
  background: #eee;
}

meter::-webkit-meter-optimum-value {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
}

5.

：模态框的终极解决方案

5.1 从20行JS到1行HTML

传统模态框需要：

• 创建遮罩层
• 管理z-index
• 实现ESC关闭
• 处理焦点陷阱
• 添加无障碍属性

而

html复制<dialog id="modal">
  <h2>这是一个原生模态框</h2>
  <button onclick="modal.close()">关闭</button>
</dialog>

<button onclick="modal.showModal()">打开模态框</button>

html复制<dialog>
  <form method="dialog">
    <button type="submit">确认</button>
  </form>
</dialog>

javascript复制modal.addEventListener('click', (e) => {
  if(e.target === modal) modal.close()
})