0

0

sublime怎么快速将代码块包裹在特定标签中?(HTML技巧)

尼克

尼克

发布时间:2026-03-08 14:14:02

|

572人浏览过

|

来源于php中文网

原创

emmet 可快速包裹代码:选中内容后按 ctrl+shift+g(win/linux)或 cmd+shift+g(macos),输入缩写如 div.item 或 ul>li* 即可;需确保有选区且语法模式为 html/javascript,否则失效。

sublime怎么快速将代码块包裹在特定标签中?(html技巧)

用 Emmet 快速包裹代码块

Sublime Text 默认就支持 Emmet,不用装插件也能直接用。选中一段 HTML 或纯文本,按 Ctrl+Shift+G(Windows/Linux)或 Cmd+Shift+G(macOS),输入缩写比如 div.itemul>li*,回车就自动套上对应结构。

常见错误是光标没选中内容就按快捷键——Emmet 包裹功能必须有明确选区,否则会插入空标签或报错 Emmet: No content to wrap。另外,如果当前语法模式不是 HTMLJavaScript(比如在 CSS 文件里),部分缩写可能不生效。

  • 确保底部状态栏显示 HTMLJavaScript,右键可切换
  • 缩写里带 * 时(如 li*),会为每行选中内容生成一个标签,适合多行列表
  • 想包成 <pre class="brush:php;toolbar:false;">&lt;code&gt;...&lt;/code&gt;</pre>,直接输 pre>code,别漏掉 >

手动包裹时避免标签错位

手敲标签最容易出问题的是闭合顺序和缩进混乱,尤其嵌套深的时候。比如想把三行 p 包进 section,手动加头尾容易漏掉 或错贴到某一行末尾。

推荐做法:先在选区上方空行敲开标签 <section></section>,再在选区下方空行敲闭标签 ,最后用 Ctrl+Shift+P 调出命令面板,搜 Indentation: Reindent Lines 统一缩进。这样比边选边敲安全得多。

立即学习前端免费学习笔记(深入)”;

Boba.video
Boba.video

AI动漫视频生成器

下载
  • 别在选中状态下直接输入 <section></section>——Sublime 会把输入内容插在选区开头,而不是包在外面
  • 如果已错位,用 Ctrl+Shift+A 全选标签对(前提是光标在标签内),再剪切粘贴调整
  • <pre class="brush:php;toolbar:false;">&lt;/code&gt; 和 &lt;code&gt;&lt;textarea&gt;&lt;/code&gt; 这类标签对空白符敏感,包裹后记得删掉多余换行,否则渲染异常&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;自定义快捷键实现一键包裹&lt;/H3&gt; &lt;p&gt;默认的 &lt;code&gt;Ctrl+Shift+G&lt;/code&gt; 对某些人来说不够顺手,或者想固定用某组标签(比如总要包成 &lt;code&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/code&gt;)。可以自己配快捷键,绑定到特定命令。&lt;/p&gt; &lt;p&gt;打开 &lt;code&gt;Preferences &gt; Key Bindings&lt;/code&gt;,在右侧用户配置里加一条:&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;[ { &quot;keys&quot;: [&quot;ctrl+alt+f&quot;], &quot;command&quot;: &quot;emmet_wrap_with_abbreviation&quot;, &quot;args&quot;: {&quot;abbreviation&quot;: &quot;figure&gt;figcaption&quot;} } ]</pre> <p>注意 <code>abbreviation 值必须是合法 Emmet 缩写,不能带空格或中文。配完保存,选中文本按 Ctrl+Alt+F 就直接包成 <figure><figcaption>...</figcaption></figure>

    • 多个快捷键别冲突,比如 ctrl+alt+f 和系统截图快捷键撞了就得换
    • 如果缩写含属性(如 div[data-id="1"]),等号前后不能有空格,否则解析失败
    • 命令名必须是 emmet_wrap_with_abbreviation,写成 wrap_with_emmet 之类会无效

    非 HTML 文件里怎么处理

    .md.js.py 文件里想给一段代码加 <code> 标签,Emmet 默认不响应。得先临时切语法模式:右下角点当前语言名(如 Markdown),选 HTML,再用 Ctrl+Shift+G;或者更稳妥——用正则替换。

    比如 JS 文件里有一段字符串要转成带 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 的 HTML 片段,打开替换面板(&lt;code&gt;Ctrl+H&lt;/code&gt;),勾上 &lt;code&gt;.*&lt;/code&gt; 按钮,查找:&lt;code&gt;^([^\n]+)$&lt;/code&gt;,替换为:&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;$1&lt;/code&gt;</pre>,然后只对选区运行。

    • 正则里 $1 是捕获组,确保括号在查找表达式里,别漏了
    • Markdown 文件里用 ``` 包代码块更合适,硬套 HTML 标签反而破坏渲染逻辑
    • JSX 文件里包裹需注意引号嵌套,<div dangerouslysetinnerhtml="{{__html:">${text}`}} /> 这种场景建议用模板字符串拼接,别靠包裹 实际用多了就会发现,最麻烦的不是怎么包,而是包完要不要删空行、要不要补 class、要不要转义特殊字符——这些细节不统一,协作时很容易出样式或 XSS 问题。</div>

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

738

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

219

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1561

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

649

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

1188

2024.03.22

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式:单引号;双引号;heredoc语法等等。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

1163

2024.04.29

go语言字符串相关教程
go语言字符串相关教程

本专题整合了go语言字符串相关教程,阅读专题下面的文章了解更多详细内容。

191

2025.07.29

c++字符串相关教程
c++字符串相关教程

本专题整合了c++字符串相关教程,阅读专题下面的文章了解更多详细内容。

111

2025.08.07

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

44

2026.03.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

AngularJS教程
AngularJS教程

共24课时 | 4万人学习

CSS教程
CSS教程

共754课时 | 40.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号