讲师中心 微信公众号
AI工具推荐 视频效率加速

Sublime使用Emmet快速生成表格:前端黑科技一看就会

浅芳酱_3705

浅芳酱_3705

发布时间:2026-06-15 12:26:19

|

634人浏览过

|

来源于php中文网

原创

Emmet表格缩写需在HTML语法下生效,且Sublime需正确识别为HTML;必须显式添加thead/tbody等语义容器;{cell$}中$不可有空格;ST3/ST4无需额外安装Emmet插件。

sublime使用emmet快速生成表格:前端黑科技一看就会

Emmet 表格缩写必须在 HTML 语法下才生效

Sublime 不会自动识别新建文件为 HTML,哪怕你刚敲完 <table>,只要右下角显示的是 Plain Text 或 Markdown,Tab 就完全不触发 Emmet 展开。这是 80% 的人卡住的第一步。

解决方法只有两个可靠路径:

  • 新建文件 → 点击右下角语法名(如 Plain Text)→ 从弹出菜单选 HTML
  • 更稳妥:先保存为 index.html 再编辑,此时语法自动锁定为 HTML

别信“输完再切语法就自动重解析”——已输入的缩写不会回溯生效,删掉重打 + Tab 才行。

table>tr*3>td*4 是错的,浏览器会静默修复但结构不合法

这个写法看似直觉,实际违反 HTML 规范:<tr> 不能直接作为 <table> 的子元素,必须包裹在 <tbody>、<thead> 或 <tfoot> 里。Emmet 按字面展开后,Chrome 虽会自动补 <tbody>,但 DOM 结构不可靠,后续用 JS 操作 table.tBodies 时可能取不到预期节点。

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

正确做法是显式写出语义容器:

  • thead>tr>th*4+Tab → 先生成带 4 列表头的一行
  • tbody>tr*2>td*4+Tab → 再生成 tbody 下 2 行 × 4 列数据
  • 手动补上外层 <table> 标签,或把两段粘在一起后整体用 <table> 包裹

注意:+ 是同级并列,不是 > 的替代;thead>tr>th*4+tbody>tr*2>td*4 这种写法是错的,+ 前后不能有 > 连接。

前端设计优化skill
前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度,帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度,帮助开发者将普通页面升级为高品质产品级界面。

下载

想填内容?用 {cell$} 而不是 {cell $}

自增计数器 $ 必须紧贴花括号内文本,中间不能有空格,否则生成出来全是 cell $ 字面量。

常见错误写法与效果对比:

  • tr*2>td{cell$}*3+Tab → 正确,生成 cell1、cell2、cell3 三列,每行都如此
  • tr*2>td{cell $}*3+Tab → 错误,每格都是文字 cell $,不计数
  • tr*2>td{cell$ }*3+Tab → 同样错误,$ 后多了空格

如果要给每行加不同前缀(比如第 1 行是 user1,第 2 行是 user2),Emmet 原生不支持行级计数,得靠多光标手动改,或后续用正则替换。

ST3/ST4 不用装 Emmet,装了反而容易坏

Sublime Text 3(Build 3143+)和 ST4 默认内置 Emmet,通过 Package Control 再装一个叫 “Emmet”的插件,大概率覆盖原生逻辑,导致 Tab 失效、报 KeyError: 'html' 或缩写完全无响应。

检查是否被干扰:

  • 打开 Preferences → Package Settings → Emmet → Settings – User,如果是空文件,说明走默认;如果里面写了 variables、snippets 等旧字段,删掉
  • 打开 Preferences → Settings – Syntax Specific,确认当前是 HTML 文件时,"syntax": "Packages/HTML/HTML.tmLanguage" 存在且未被覆盖

所有缩写必须按 Tab,按 Enter 就是换行——这个绑定不可改,也别试图去改键位映射,会和其他补全冲突。

真正麻烦的点不在语法本身,而在“语法没切对”和“插件装重了”这两处,修好它们,tr*3>td*4 和 thead>tr>th*3+tbody>tr*5>td*2 就真能一键落地。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2463

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5303

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6350

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5938

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

843

2024.05.22

Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

0

2026.10.15

MySQL 忘记密码怎么办
MySQL 忘记密码怎么办

MySQL忘记密码专题汇集不同版本与系统下的root密码重置方法,覆盖MySQL 5.7、8.0、Mac、Linux及本地集成环境,并提示恢复权限与重新登录的检查步骤。

0

2026.10.15

Vue.js 中 ref 和 reactive 的区别
Vue.js 中 ref 和 reactive 的区别

Vue.js中ref和reactive的区别专题汇集两种响应式API的定义、访问方式、对象解构、侦听与性能取舍等文章,帮助结合实际状态类型选择合适写法。

0

2026.10.15

VS Code 怎么配置开发环境
VS Code 怎么配置开发环境

VS Code开发环境专题汇集编辑器安装、语言扩展、编译器、解释器、终端和调试配置文章,覆盖Java、Python、C++和PHP等常见语言的入门设置。

0

2026.10.15

热门下载

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

精品课程

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn