VS Code中Alt+Shift+↓复制整行易致HTML结构错位，因其复制物理行而非逻辑块；多行选择应使用Shift+Alt+方向键；复制HTML片段优先用开发者工具Copy outerHTML；页面按钮复制需用textContent并处理async/await。
VS Code 里复制整行用 Alt+Shift+↓，但 HTML 结构容易错位
这个快捷键确实快，按一下就把当前行复制到下一行，再按就继续往下叠。但它不理解 HTML 的嵌套关系——比如你在 <li> 行触发，粘贴后新行可能落在 外面，变成孤儿节点。
容易踩的坑：
-
Alt+Shift+↓复制的是“物理行”，不是“逻辑块”，缩进也被原样带走，粘贴后可能比父容器多两级缩进 - 开启 Prettier 后，这类手动复制的内容常被自动格式化“推歪”，反而更难对齐
- 在 Vue 或 JSX 文件里，该快捷键仍生效，但组件标签层级可能被意外打断
多行选择后复制，优先用 Shift+Alt+鼠标拖动 而非框选
想复制连续几行？别直接鼠标从开头拖到结尾——那样会把换行符吃掉，粘贴时变成单行。正确做法是：把光标停在第一行首，按住 Shift+Alt，再用方向键或鼠标向下拖动选区。这样选中的是完整行（含行尾换行符），粘贴出来仍是多行结构。
适用场景：
立即学习“前端免费学习笔记（深入）”；
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 复制一个
<div class="card">...</div>块，保留缩进和换行 - 批量提取多段
<script></script>内容做备份 - 避免因 HTML 渲染器折叠空白字符导致格式丢失
复制带格式的 HTML 片段，用开发者工具 Copy outerHTML
页面上看到的 HTML 经过 JS 渲染、样式影响，甚至被禁用了右键。这时别硬试 Ctrl+C，直接打开开发者工具（Cmd+Option+I），在 Elements 面板里右键目标元素 → Copy → Copy outerHTML。
注意点：
-
outerHTML包含该标签自身及全部子内容；innerHTML只含内部；Copy text是纯文本，丢弃所有标签 - 如果元素是动态生成的（比如由 Vue 渲染），需等 DOM 稳定后再操作，否则可能复制到空节点
- 某些安全策略强的页面会禁用开发者工具，此时可临时用
document.querySelector(...).outerHTML在控制台执行
写按钮一键复制代码块，必须用 textContent 而非 innerText
如果你在页面里放了个“复制”按钮，绑定的是 navigator.clipboard.writeText()，那读取目标 <code> 内容时，一定要用 textContent。它保留原始换行符和空格；innerText 会把缩进转为空格、合并连续换行，粘贴出来就是扁平一团。
常见错误：
- 从高亮插件（如 Prism.js）包裹的
<span></span>里取内容，实际应定位到最内层原始<code>标签 - 没加
async/await导致 Promise 被忽略，复制静默失败 - 在 HTTP 页面上调用
navigator.clipboard，直接抛"Permission denied"
