应使用 type="button" 的 button 元素实现热门搜索标签，通过事件委托统一监听父容器 click 事件，读取 data-query 触发搜索，并自动填充提交主表单，同时添加视觉反馈与 aria-label 提升可访问性。

点击热门搜索标签直接触发搜索，核心是让标签具备按钮行为，同时避免页面跳转或表单重置。

用 button 元素替代 a 标签更可靠

很多实现用 <a href="javascript:void(0)"></a> 模拟点击，但语义不清、键盘导航不友好。推荐直接使用带 type="button" 的 <button></button>：

• 语义正确，天然支持空格/回车触发
• 不会意外跳转或刷新页面
• 可直接绑定事件，无需阻止默认行为

示例：

手机

统一绑定事件，避免重复监听

不要给每个标签单独写 onclick，用事件委托提升性能和可维护性：

• 监听父容器（如 <div class="hot-tags">）的 <code>click 事件
• 用 event.target 判断是否点击了 .hot-tag
• 读取 data-query 属性获取搜索词

关键代码片段：


html-ppt-to-pdf
将使用 `
` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载
document.querySelector('.hot-tags').addEventListener('click', e => {
  if (e.target.classList.contains('hot-tag')) {
    const query = e.target.dataset.query;
    search(query); // 执行搜索逻辑
  }
});

自动填充并提交主搜索表单

用户点击标签后，应把关键词填入搜索框并提交，保持操作连贯：

• 找到页面中的搜索输入框（如 input[name="q"]），设置其 value
• 调用表单的 submit() 方法，而非手动触发 click 按钮
• 确保表单 action 和 method 已正确配置

注意：如果搜索依赖 JS（如 Ajax），则只需调用你的搜索函数，无需操作 DOM 表单。

视觉反馈与可访问性补充

点击后应有即时响应，提升交互感：

• 添加 :active CSS 样式（如背景变深、缩放 95%）
• 为 <button></button> 设置 aria-label（例如 aria-label="搜索 手机"）
• 禁用状态可用 disabled 属性或 aria-disabled="true"

不复杂但容易忽略。