插件的安装
- package control
- emmet
快捷键
| 快捷键 | 说明 |
|---|---|
| Command + D | 选择当前光标所在的一个词 （继续按会继续选取下一个同样的词） |
| Ctrl + M | 前往匹配的括号 |
| Command + T | 查询/前往文件 |
| Command + R | 查询/前往funcdtion或method |
| Command + K + B | 隐藏/显示边栏 |
| Command + 左键 | 设置多个光标操作 |
| Command + f | 查找 |
| Command + / | 注释/非注释 |
| Command + L | 选择当前光标整行 |
| Command + K + U | 转换为大写 |
| Command + K + L | 转换为小写 |
| cmmand + shirt + V | 粘贴并缩进 |
| cmmand + shirt + f | 查找并替换 |
| cmmand + shrit + d | 复制当前行 |
| cmmand + control + 上下方向键 | 向上下移动 |
| Ctrl + Shift + K | 删除当前行 |
emmet语法
快速编写HTML代码
激活键（默认）：tab
| 快捷键 | 说明 | 效果 |
|---|---|---|
| html:xt | XHTML过渡文档类型 | |
| html:5/! | HTML5文档类型 | |
| html:4s | HTML4严格文档类型 | |
| p.bar#foo | 轻松添加类、id、文本和属性 | <p class="bar" id="foo"></p> |
| h1{foo}和a[href=#] | 定义HTML元素的内容和属性 | <h1>foo</h1> <a href="#"></a> |
| h1{foo}和a[href=#] | 定义HTML元素的内容和属性 | <h1>foo</h1> <a href="#"></a> |
| div>a | 子元素符号，表示嵌套的元素 | <div><a href=""></a></div> |
| div+a | 同级标签符号 | <div></div> <a href=""></a> |
| ^ | 可以使该符号前的标签提升一行 | 暂时看不出啥区别 |
| (.foo>h1)+(.bar>h2) | 嵌套和括号来快速生成一些代码块 | <div class="foo"><h1></h1></div> <div class="bar"><h2></h2></div> |
| .item | 隐式标签li：用于ul和ol中 | <ul><li calss="item"></li></url> |
| .item | 隐式标签tr：用于table、tbody、thead和tfoot中 | <table><tr calss="item"></tr></table> |
| .item | 隐式标签td：用于tr中 | <tr><td calss="item"></td></tr> |
| .item | 隐式标签option：用于select和optgroup中 | <select><option calss="item"></option></select> |
| ul>li*3 | 定义多个元素 | <ul><li></li><li></li><li></li></ul> |
| ul>li.item$*3 | 定义多个带属性的元素 | <ul><li class="item"></li><li class="item"></li><li class="item"></li></ul> |
CSS缩写
| 快捷键 | 说明 | 效果 |
|---|---|---|
| h10p+m5e | 单位别名列表[^f1] | height: 10%; margin: 5em; |
| @f | 附加属性 | @font-face { font-family:; src:url(); } |
| ov:h, ov-h, ovh和oh | 模糊匹配 | overflow: hidden; } |
[^f1]: 单位别名列表： p 表示% , e 表示 em , x 表示 ex .
Sublime-HTMLPrettify 插件
| 快捷键 | 说明 |
|---|---|
| Command + Shift + H | 格式化 |