0

0

sublime如何快速插入HTML标签闭合对?(自动补全增强)

尼克

尼克

发布时间:2026-02-01 16:59:20

|

736人浏览过

|

来源于php中文网

原创

Sublime Text 提供三种 HTML 标签闭合方式:① Ctrl+Shift+A 包裹选中文本;② 启用 auto_close_tags 实现自动补全;③ 安装 Emmet 插件支持智能缩写展开。

sublime如何快速插入html标签闭合对?(自动补全增强)

Ctrl+Shift+A 快速包裹选中文本为 HTML 标签

这是 Sublime Text 最直接、最常用的闭合标签插入方式,不依赖插件,原生支持。选中一段文字(比如 hello),按下 Ctrl+Shift+A(Windows/Linux)或 Cmd+Shift+AmacOS),会弹出输入框,输入 div 回车后,自动变成

hello

注意:这个操作本质是「包裹」,不是「补全」——它不会在光标处自动插入空的

讯飞星火
讯飞星火

科大讯飞推出的多功能AI智能助手

下载
对,而是必须先有选中内容。

  • 如果没选中任何文本,该快捷键无响应
  • 输入标签名时支持 Tab 补全已有标签(如输 ul 后按 Tab 会补全为 ul 并跳入属性位置)
  • 输入带属性的标签也有效,例如输 img src="" 回车,会生成 sublime如何快速插入HTML标签闭合对?(自动补全增强)(但多数自闭合标签如 imgbr 实际不需要闭合,这点需手动删掉多余

启用 auto_close_tag 设置让输入 后自动补全闭合

Sublime Text 默认不自动补全 HTML 闭合标签,但可通过配置开启基础补全行为。打开 Preferences → Settings – User,在 JSON 中添加:

{
    "auto_close_tags": true,
    "auto_close_slash": true
}

启用后:

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

  • 输入
    + >,会自动补全为
    ,光标停在两个标签之间
  • 输入 会触发闭合标签建议(如输入 后按 Tab,可补全最近未闭合的
  • auto_close_slash 控制 触发行为,关闭它会导致 不再弹出建议
  • 该设置对自闭合标签(imginput 等)无效,不会多补一个 ,这是合理行为
  • 用 Emmet 插件实现智能缩写 + 闭合(推荐主力方案)

    Emmet 是 Sublime Text 上最成熟、最符合前端直觉的 HTML 补全方案。安装后,输入 div>p*3 + Tab,直接展开为:

    关键点:

    • 所有 Emmet 缩写(如 .container>ul>li*5)默认生成完整闭合结构,无需额外操作
    • 光标默认停在第一个
    • 的内容区,按 Ctrl+Alt+→ 可跳转到下一个编辑点(Emmet 的 next_edit_point
    • 已输入的开始标签(如
      ),把光标放在其末尾,按 Ctrl+Shift+Gemmet: balance_outward)可快速选中整个标签块,方便复制/删改
    • 若发现缩写不生效,请确认文件语法是否为 HTML(右下角状态栏显示,不是 Plain TextXML

    常见失效原因和绕过方法

    很多人试了上述方法却没反应,大概率卡在这几个地方:

    • 文件未设为 HTML 语法:点击右下角语言名 → 选 HTML;或者保存为 .html 后缀,Sublime 通常自动识别
    • 快捷键被其他插件覆盖:打开 Preferences → Key Bindings – User,检查是否有冲突规则(如某插件占用了 Ctrl+Shift+A
    • Emmet 未启用 HTML 支持:打开 Preferences → Package Settings → Emmet → Settings,确认 "html": { "snippets": {...} } 存在且未被注释
    • 输入法处于中文状态:Sublime 的快捷键和缩写补全对输入法敏感,切到英文模式再试

    闭合标签看着简单,但真正顺手的体验来自组合使用:用 Emmet 写结构、用 Ctrl+Shift+A 包裹文案、靠 auto_close_tags 拾遗补漏。别指望一个开关解决所有场景,每个功能都有明确边界。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

422

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

537

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

313

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

pdf怎么转换成xml格式
pdf怎么转换成xml格式

将 pdf 转换为 xml 的方法:1. 使用在线转换器;2. 使用桌面软件(如 adobe acrobat、itext);3. 使用命令行工具(如 pdftoxml)。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1904

2024.04.01

xml怎么变成word
xml怎么变成word

步骤:1. 导入 xml 文件;2. 选择 xml 结构;3. 映射 xml 元素到 word 元素;4. 生成 word 文档。提示:确保 xml 文件结构良好,并预览 word 文档以验证转换是否成功。想了解更多xml的相关内容,可以阅读本专题下面的文章。

2094

2024.08.01

xml是什么格式的文件
xml是什么格式的文件

xml是一种纯文本格式的文件。xml指的是可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。想了解更多相关的内容,可阅读本专题下面的相关文章。

1086

2024.11.28

点击input框没有光标怎么办
点击input框没有光标怎么办

点击input框没有光标的解决办法:1、确认输入框焦点;2、清除浏览器缓存;3、更新浏览器;4、使用JavaScript;5、检查硬件设备;6、检查输入框属性;7、调试JavaScript代码;8、检查页面其他元素;9、考虑浏览器兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

187

2023.11.24

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

30

2026.01.31

热门下载

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

精品课程

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

共48课时 | 8.2万人学习

Git 教程
Git 教程

共21课时 | 3.2万人学习

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

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