sublime Emmet的用法及相关语法
15923次浏览
上一节，我们讲了 ，讲了Emmet插件。
本节来讲一下Emmet插件的用法及相关语法。
Emmet插件极大的提高了编程员的编程速度，下面我们来讲讲它的具体语法：
一、生成 HTML 文档初始结构
HTML 文档的初始结构，就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构，你没有看错，输入一个感叹号（当然是英文符号），然后摁下 ctrl+E 键，就会发现生成了下面的结构：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Document&/title&
这就是一个 HTML5 的标准结构，也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构，那么输入指令 html:xt,然后ctrl+E, 即可生成如下结构：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml& xml:lang=&en&&
&meta http-equiv=&Content-Type& content=&text/charset=UTF-8&&
&title&Document&/title&
Emmet 会自动把 doctype 给你补全了，怎么样，这样的功能会不会让你动心？简单总结一下常用的 HTML 结构指令：
html:5 或者 ! 生成 HTML5 结构
html:xt 生成 HTML4 过渡型
html:4s 生成 HTML4 严格型
二、生成带有 id 、class 的 HTML 标签
Emmet 的语法有点类似 CSS 的语法，生成 id 为 aaa 的 div 标签，我们只需要编写下面指令：
Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。如果编写一个 class 为 bbb 的 span 标签，我们需要编写下面指令：
然后就生成了对应的结构。同理，如果想要编写一个 id 为 ccc 的 class 为 ddd 的 ul 标签，我们可以这样写：
ul#ccc.ddd
很简单吧？比你用手写 id 、class 方便多了吧
三、生成后代：&
大于号表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表，而且被 class 为 aaa 的 div 包裹，那么可以使用下面指令：
div.aaa&ul&li
可以生成如下的结构：
四、生成兄弟：+
上面是生成下级元素，如果想要生成平级的元素，就需要使用 + 号。例如下面指令：
就可以生成如下的 HTML 结构：
&div&&/div&
&blockquote&&/blockquote&
五、生成上级元素：^
上级 （Climb-up）元素是什么意思呢？前面咱们说过了生成下级元素的符号“&”，当使用 div&ul&li 的指令之后，再继续写下去，那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签，那么我需要先用 “^” 提升一下层次。例如：
div&ul&li^span
就会生成如下结构：
&span&&/span&
如果我想相对与 div 生成一个平级元素，那么就再上升一个层次，多用一个“^”符号：
div&ul&li^^span
六、重复生成多份：
特别是一个无序列表，ul 下面的 li 肯定不只是一份，通常要生成很多个 li 标签。那么我们可以直接在 li 后面 * 上一些数字：
这样就直接生成五个项目的无序列表了。如果想要生成多份其他结构，方法类似。
七、生成分组：()、
用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系，例如：
div&(header&ul&li*2&a)+footer&p
这样很明显就可以看出层次关系和并列关系，生成如下结构：
&li&&a href=&&&&/a&&/li&
&li&&a href=&&&&/a&&/li&
八、此外，分组还可以很方便的结合上面说的 “*” 符号生成重复结构：
(div&dl&(dt+dd)*3)+footer&p
生成结构：
九、生成自定义属性：[attr]
a 标签中往往需要附带 href 属性和 title 属性，如果我们想生成一个 href 为 “ ，title 为“haorooms 博客”的 a 标签，可以这样写：
a[href=&/& title=&haorooms 博客&]
其他标签和属性都类似。
十、对生成内容编号：$
例如无序列表，我想为五个个 li 增加一个 class 属性值 item1 ，然后依次递增从 1-5，那么就需要使用 $ 符号：
ul&li.item$*5
这样就生成了如下结构：
&li class=&item1&&&/li&
&li class=&item2&&&/li&
&li class=&item3&&&/li&
&li class=&item4&&&/li&
&li class=&item5&&&/li&
$ 就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个 $：
ul&li.item$$$*5
&li class=&item001&&&/li&
&li class=&item002&&&/li&
&li class=&item003&&&/li&
&li class=&item004&&&/li&
&li class=&item005&&&/li&
只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：
ul&li.item$@-*5
生成如下结构：
&li class=&item5&&&/li&
&li class=&item4&&&/li&
&li class=&item3&&&/li&
&li class=&item2&&&/li&
&li class=&item1&&&/li&
同样，我们也可以使用 @N 指定开始的序号：
ul&li.item$@3*5
这样就会从 3 开始排序，生成如下代码：
&li class=&item3&&&/li&
&li class=&item4&&&/li&
&li class=&item5&&&/li&
&li class=&item6&&&/li&
&li class=&item7&&&/li&
配合上面倒序输出，可以这样写：
ul&li.item$@-3*5
生成的就是以 3 为底倒序：
&li class=&item7&&&/li&
&li class=&item6&&&/li&
&li class=&item5&&&/li&
&li class=&item4&&&/li&
&li class=&item3&&&/li&
十一、生成文本内容：{}
上面讲解了如何生成 HTML 标签，那里面的内容呢？当然也可以生成了：
a[href=& haorooms 的博客}
这样就生成了一个到我博客的超链接了。在生成内容的时候，特别要注意前后的符号关系，虽然 a&{Click me} 和 a{Click me} 生成的结构是相同的，但是加上其他的内容就不一定了，例如：
&!-- a{click}+b{here} --&
&a href=&&&click&/a&&b&here&/b&
&!-- a&{click}+b{here} --&
&a href=&&&click&b&here&/b&&/a&
这样就生成了完全不同的结构，注意这些小细节哦。
不要有空格
在写指令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下。这就会导致代码无法使用。例如下面这句：
(header & ul.nav & li*5) + footer
而去掉空格之后，就可以正常执行生成结构了。
相关文章：
关键词搜索sublime从纯净版到基本插件的安装
sublime从纯净版到基本插件的安装
01.纯净版下载地址:
02.下载Package Control插件管理工具,网址:https://packagecontrol.io/
　　安装介绍:https://packagecontrol.io/installation
点击菜单Preferences&&&Browse Packages…
然后打开上一级文件夹到已安装的Packages所在文件夹&Installed Packages
从&https://packagecontrol.io/下载后，复制该文件到上面打开的目录
重启Sublime Text,完成对Package Control的安装
03.然后就是汉化了
　　Ctrl+Shift+P --& install --&Package Control: install --& 回车
　　然后出入chinese就可以了,回车自动安装&
& & 安装成功界面
04.侧边栏修改为黑色
　　通过Ctrl+Shift+P --& install --&Package Control: install 搜索下载这个SyncedSidebarBg插件
　　安装成功页面
05.自动提示路径插件(autuFileName)
06.Emmet语法插件
　　注:安装Emmet后tab键失效问题/sergeche/emmet-sublime#tab-key-handler
　　附Emmet语法:
1 展开缩写 - Tab或Ctrl+E
2 互动“展开缩写” - Ctrl+Alt+Enter
3 匹配的标签对拓展 - ?D（苹果机）/ Ctrl+,（PC）
4 匹配的标签对汇入 - ?J/Shift+Ctrl+0
5 转到对匹配 - ??T/Ctrl+Alt+J
6 向上增加一个标签 - ?W/Shift+Ctrl+G
7 进入编辑点 - Ctrl+Alt+→或Ctrl+Alt+←
8 选择项目 - ??.或??,/ Shift+Ctrl+.或Shift+Ctrl+,
9 切换注释 - ??//Shift+Ctrl+/
10 拆分/加入标签 - ??'/Shift+Ctrl+`
11 删除标记 - ?'/Shift+Ctrl+;
12 更新图像大小 - ??I/Ctrl+U
13 评估数学表达式 - ??Y/Shift+Ctrl+Y
14 反映CSS值 - ??R/Shift+Ctrl+R
15 编码/解码图像数据：URL - ??D/Ctrl+'
16 重命名标签- ??K/Shift+Ctrl+'
17 递增/递减号行动：
19 加1： Ctrl+↑
20 减1： Ctrl+↓
21 0.1增加： Alt+↑
22 0.1递减： Alt+↓
23 增量10：??↑/Shift+Alt+↑
24 递减10：??↓/Shift+Alt+↓
07.JSFormat:JS代码格式化:快捷键Ctrl+Alt+F &或者 选中代码右键JSFormat
08.LESS:编译less文件的插件
　　unable to interpret argument cleancss...如果出现该错误信息
　　打开控制台输入npm install less-plugin-clean-css
　　然后重启sublime,即可
　　打开.less文件，编写代码保存即可看到同时生成.css的文件，如果没有则需要安装node。不推荐用这种方法编译，要么用koala，要么就用grunt编译。
09.less2Css : less代码高亮插件
10.DocBlockr : 生成注释
11.IMESupport : 汉字跟谁光标输入
11.trailing spaces :&检测并一键去除代码中多余的空格
　　安装插件并重启，即可自动提示多余空格。一键删除多余空格：CTRL+SHITF+T（需配置），更多配置请点击标题。快捷键配置：在Preferences / Key Bindings – User加上代码（数组内）
　　{ &keys&: [&ctrl+shift+t&], &command&: &delete_trailing_spaces& }
12.filediffs : 代码去重;比较当前文件与选中的代码、剪切板中代码、另一文件、未保存文件之间的差别。可配置为显示差别在外部比较工具，精确到行。
　　　　　　右键标签页，出现FileDiffs Menu或者Diff with Tab…选择对应文件比较即可
13.gitgutter : 指示代码中插入、修改、删除的地方
14.Bracket Highlighter :&可匹配[],&(),&{},&“”,&”,&&tag&&/tag&，高亮标记，便于查看起始和结束标记
15.SideBarEnhancements:增强侧边栏插件
16.Boxy Theme 主题
　　配置信息:
　　图标插件zz File Icons
&color_scheme&: &Packages/Boxy Theme/schemes/Boxy Monokai.tmTheme&,
&ignored_packages&:
&theme&: &Boxy Ocean.sublime-theme&,
&theme_accent_lime&: true,
&theme_autocomplete_item_selected_colored&: true,
&theme_bar_margin_top_sm&: true,
&theme_dropdown_atomized&: true,
&theme_find_panel_close_hidden&: true,
&theme_icon_button_highlighted&: true,
&theme_panel_switcher_atomized&: true,
&theme_quick_panel_item_selected_colored&: true,
&theme_quick_panel_size_md&: true,
&theme_scrollbar_colored&: true,
&theme_scrollbar_line&: true,
&theme_sidebar_close_always_visible&: true,
&theme_sidebar_folder_atomized&: true,
&theme_statusbar_size_md&: true,
&theme_tab_close_always_visible&: true,
&theme_tab_selected_overlined&: true,
&theme_tab_size_md&: true
&17.CSS format:CSS代码格式化;选择css代码后右键
18.HTML prettify:JS/CSS/HTML代码格式化
　　默认快捷键Ctrl+Shift+H
19.自动保存:设置里面加一行代码　　花括号内
　　&save_on_focus_lost&: true
20.：按CTRL
+ B生成网页HTML；在最前面添加[TOC]自动生成目录；　
21.：实时在浏览器中预，而MarkdownPreview是需要手动生成的和F5的。览如果双屏的话，应该具有不错的体验。快捷键如下：
Ctrl+Alt+O: Preview Markup
in Browser.Ctrl+Alt+X: Export Markup
as HTML.Ctrl+Alt+C: Copy Markup
--基本工具都差不多有了,先就这样,可以下载附件直接替换你的安装配置文件夹路径:C:\Users\YZZ\AppData\Roaming\sublime Text 3--
图片来源: 轩枫阁 &作者：ivan
我的热门文章
即使是一小步也想与你分享Web前端（3）
今天在学习的过程中，看到了一个非常方便的html的标签的写法：
“ul&li*4”+Tab键
但是我发现我自己写的时候按了Tab并没有反应，查阅资料才发现，原来使用这个功能需要安装Emmet这个插件，说到安装插件我就头疼了，Sublime Text安装插件真是各种问题，利用Package Control安装插件总是下载不下来，于是我决定手动安装：
1、首先先下载Emmet插件，
下载地址：
2、打开Sublime Text，依次Preferences→Browse Packages… 打开了一个文件夹，讲解压的Emmet插件复制到这个目录下
3、重启Sublime Text，你会看到右下角在下载PyV8，等到下载成功你就可以看到Emmet所在的目录多了一个PyV8的文件夹
4、安装成功，重启Sublime Text3 你就可以用这个功能了。
Over！皆大欢喜，终于有一件顺心的事了！！^-^
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：404次
排名：千里之外Sublimetext3安装Emmet插件步骤
作者：佚名
字体：[ ] 来源：互联网 时间：12-04 15:43:52
Sublime text 3安装Emmet插件步骤步骤，大家需要的可以参考使用
看清楚哦~~这是Sublime text 3不是2的版本，两者的安装还是有区别的，下面的方法是我感觉比较简单的，其他的要命令什么的感觉太复杂了，经测试是OK的。
先关闭Sublime text 3：
第一步：下载&，解压命名文件夹为Package Control。(注意大小写)
第二步：下载，解压后覆盖到刚刚的Package Control中，完成插件API函数的更新。
第三步：打开Sublime Text 3，选择菜单：Preference--&Browse Package... 浏览插件
第四步：把package control复制到此目录，重启&Sublime text 3。
然后菜单Preferences就会多了两个Package..的东西如下：&Package Control 安装成功
点击菜单Preference--&Package Control
点击Install Package
等待几秒后再弹出如下内容，敲键盘emmet，选择如下：
在 Emmet 安装完成后，会显示如下屏幕：然后会自动安装PyV8，安装完成，重启 Sublime Text 3。
重启之后还会看到左下角再次呈现 Loading PyV8 的提示，待其载入完毕，打开一个新文档最后测试，输入指令（不行就再重启一下）
ul#test&li*4
按Ctrl+e 生成---代码如下:&ul id="test"&
&li&&/li&&/ul&
大家感兴趣的内容
12345678910
最近更新的内容}