<p>HTML注释快捷键是Ctrl+/(Windows/Linux)或Cmd+/(macOS)，用于自动添加<!-- -->；但光标在<script>或<style>内时会插入//或/ /，且在线环境需启用Emmet才支持!生成骨架。</p>
HTML在线运行环境（如 CodePen、JSFiddle、CodeSandbox）本身不提供编辑器级快捷键支持，真正起作用的是你本地浏览器 + 编辑器组合的行为——但多数人误以为“在线运行”自带快捷键，结果在 !+Enter 或 Ctrl+/ 上卡住。
为什么在线编辑器里!不生成 HTML 骨架？
因为在线平台的编辑区通常不是标准的 VS Code 或 Sublime 环境，而是基于 Monaco（CodePen）、Ace（JSFiddle）或自研编辑器，它们默认不启用 Emmet，也不识别 ! 触发逻辑：
- CodePen：需手动开启 Emmet —— 点右上角 Settings → HTML → 勾选 “Enable Emmet” 才能让
html:5或!生效 - JSFiddle：Emmet 默认关闭，且
!会被当作普通字符输入；必须用html:5+ Tab，且仅在“HTML 面板”中有效 - CodeSandbox：对 Emmet 支持较好，但
!仅在新建空 .html 文件时响应，粘贴进已有文件则失效 - 所有平台都不响应
Tab补全自定义组件名（如my-header），除非你提前配置了语言映射
Ctrl+/ 在线注释为什么有时加的是 // 而不是 <!-- -->？
在线编辑器会根据光标所在语言上下文自动判断注释语法，而不是固定按 HTML 处理：
- 光标在
<script>块内 → 插入//（JS 注释） - 光标在
<style>块内 → 插入/* */（CSS 注释） - 光标在纯 HTML 区域（如
<div>标签之间）→ 才插入<!-- --> - 如果整行已含 JS/CSS 内容（例如
<div onclick="alert(1)">），部分编辑器会误判为 JS 上下文，导致注释错位
哪些快捷键在线环境基本可用、无需配置？
这些是浏览器或底层编辑器引擎原生支持、几乎跨平台稳定的组合：
立即学习“前端免费学习笔记（深入）”；
-
Ctrl+Z/Cmd+Z：撤销，所有平台都响应 -
Ctrl+F/Cmd+F：页面内搜索，搜的是渲染后 DOM 文本，不是源码 -
F12或Ctrl+Shift+I：唤出 DevTools，在 Elements 面板里双击标签可直接编辑 HTML 结构 -
Ctrl+Enter（CodePen）或Cmd+Enter（CodeSandbox）：运行/刷新预览，比点按钮快得多 -
Esc：在 DevTools 的 Elements 面板中退出编辑模式，避免误提交
真正容易被忽略的点是：在线环境的“快捷键”本质是客户端行为，它不走服务器、不依赖后端配置，但受制于 iframe 沙箱策略、CSP 头限制，甚至浏览器扩展（如密码管理器）可能劫持 Ctrl+Space 导致补全失灵——这时候不是代码问题，是环境干扰。
