使用Ctrl+Shift+F输入标签或属性搜索，结合正则如<span\s+[^>]*id=精准匹配，限定*.html等文件类型提升效率。

在 VSCode 中全局搜索 HTML 标签及其属性，可以通过内置的搜索功能快速实现。掌握正确的方法能大幅提升前端开发效率。

使用快捷键打开全局搜索

按下 Ctrl + Shift + F（Windows/Linux）或 Cmd + Shift + F（Mac）打开全局搜索面板。在这个输入框中可以直接输入 HTML 标签名或属性进行查找。

• 搜索所有 <div> 标签：输入 <div 或 <div
• 查找包含某个属性的标签：例如搜索 class= 或 data-testid
• 精确匹配标签结构：使用正则可增强搜索能力（见下文）

结合正则表达式精准匹配

启用正则搜索可以更准确地定位特定 HTML 结构。点击搜索框右侧的 .* 按钮开启正则模式。

根据ui图生成前端页面

将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。

下载

• 查找所有带有 id 属性的 span 标签：
  <span\s+[^>]*id=
• 搜索闭合或自闭合的 img 标签：
  <img\b[^>]*>
• 查找包含特定类名的 div：
  <div[^>]*class=["'][^"']*my-class

限定文件类型提升效率

如果只想在 HTML 或特定框架文件中搜索，可在“文件包括”栏限制范围。

立即学习“前端免费学习笔记（深入）”；

• 只搜索 .html 文件：在“文件包括”输入 *.html
• 搜索 Vue 或 JSX 文件中的标签：使用 *.vue 或 *.jsx
• 排除 node_modules：默认已排除，也可手动添加 !**/node_modules

基本上就这些。熟练使用全局搜索配合正则，能快速定位项目中任意 HTML 标签和属性，不复杂但容易忽略细节。