PhpStorm HTML5标签补全需设语言级别为HTML5、启用Emmet的html:5模板、在标签名位置触发补全，旧版本IDE可能不支持新标签如<dialog>。
PhpStorm 的 HTML 代码完成不是“按 Ctrl+Space 就完事”，它默认只对已知标签和属性生效，没配好 DTD 或语言级别，<main>、<section> 这类 HTML5 标签根本不会出现在补全列表里。
确认项目 HTML 语言级别设为 HTML5
这是最常被忽略的前提。PhpStorm 默认可能沿用旧项目设置或全局默认（比如 HTML 4.01），导致 HTML5 标签不被识别。
- 打开 File → Settings → Languages & Frameworks → HTML（macOS 是 PhpStorm → Preferences）
- 检查
HTML version下拉框是否为HTML5，不是就选它 - 如果项目含
.html文件但没自动识别为 HTML，右键文件 → Override File Type → HTML
启用 Emmet 并验证 HTML5 模板是否激活
Emmet 是 PhpStorm 内置的 HTML 快速输入引擎，但它的缩写行为依赖模板配置。默认 html:5 模板会生成带 <!DOCTYPE html> 和语义化结构的骨架，但若被禁用或覆盖，html:5 补全就失效。
- 进入 Settings → Editor → Emmet → HTML
- 确认
Expand abbreviations on Tab已勾选 - 在
Abbreviation列表中找到html:5，确保其右侧的Expanded abbreviation显示完整 HTML5 结构（含<main>、<header>等） - 输入
html:5后按Tab，应直接生成标准 HTML5 文档框架
补全 HTML5 语义标签时卡住？检查是否在正确上下文
PhpStorm 的标签补全有上下文感知：在 <body> 外敲 main 不会触发 <main> 补全；在属性值里敲 role 也不会弹出 navigation 建议——它只在“标签名位置”或“属性名位置”响应。
立即学习“PHP免费学习笔记（深入）”；
- 把光标放在起始标签名处（如
<|>中的竖线位置），再按Ctrl+Space - 输入前几个字母（如
nav），补全列表会高亮匹配项，<nav>通常排第一 - 若仍无反应，尝试先输入
<再触发补全，避免编辑器误判为文本内容 - 注意：某些自定义模板或 Blade/Vue 文件中，需额外配置 Template Data Language 为 HTML 才能启用 HTML5 补全
为什么 <dialog> 或 <details> 补全不到？
这些是较新的 HTML 标签，PhpStorm 版本太老（如 2020.3 之前）内置的 HTML Schema 可能未包含它们，补全数据源滞后于浏览器支持。
- 升级到 PhpStorm 2022.3 或更新版本，HTML5 支持更完整
- 手动添加自定义标签：进入 Settings → Languages & Frameworks → Schemas and DTDs → Catalog，点击
+添加远程 URL：https://html.spec.whatwg.org/（仅作参考，实际生效依赖本地 Schema 缓存） - 更可靠的做法：用 Emmet 缩写，如
dialog+Tab→ 生成<dialog></dialog>，无需依赖 Schema
真正卡住的地方往往不是功能没开，而是语言级别错配、上下文不在标签插入点、或用了老版本 IDE 却期待新标签——尤其当团队共用旧版 PhpStorm 时，<article> 补全失败大概率不是你操作错了，是别人没升级。
