Emmet之html语法
一、简写语法
Emmet 用和 CSS 选择器相似的语法来描述元素的嵌套层级关系和属性，实现 HTML/XML/CSS 等代码的智能自动补全。
其通过文件名后缀识别文件类型，从而使用对应的自动补全语法。默认自动补全快捷键为制表符（Tab）。
下文中的“自动补全”均指“按下快捷键后自动补全”。
注意：Emmet 语法中的空格表示结束解析，所以书写语句中不能出现空格。
1、元素
在编辑器中输入元素名称，即可自动补全生成 HTML 标签，即使不是标准的 HTML 标签。
// before
div
foo // after
<div></div>
<foo></foo>
输入 ! 或者 html:5 可以自动补全为 HTML5 基本结构。想要输出 HTML4 文本类型申明可以输入 html:4s 或者 html:4t 。
// before
! (或html:5) // after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
2、嵌套操作
1）child：使用 “>” 生成子元素
// before
div>ul>li // after
<div>
<ul>
<li></li>
</ul>
</div>
2) Sibling: 使用符号 “+” 生成兄弟元素
// before
div+p+bq // after
<div></div>
<p></p>
<blockquote></blockquote>
3) Climb-up:使用 “^” 生成父元素，与 “>” 相反
// before
div+div>p>span+em^bq // after
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
你甚至可以使用多个 “^”。
// before
div+div>p>span+em^^^bq
// after
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
4) Multiplication:使用 “*” 操作符生成多个元素
// before
div>ul>li*5 // after
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
5) Grouping:使用 “()” 操作符将元素分组，实现更复杂的简写任务
// before
// "+" 后面的元素与括号中的第一个元素属于兄弟关系
div>(header>ul>li*2)+footer>p //after
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
3. 属性操作
在简写时就可以为元素设置属性。
1) id 与 class
简写时，元素与 id 属性值之间用 “#” 分隔，与 class 属性值之间用 “.” 分隔。
// before
div#header+div.page+div#footer.class1.class2.class3 // after
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
2) 其他属性
使用 [attr] 标记添加其他属性。
// before
td[title='hello' colspan=3] // after
<td title="hello" colspan="3"></td>
注意：
- 方括号中可添加任意数量的属性
不给定属性值，则属性值为""。td[colspan title]将得到 <td colspan="" title=""></td>- 属性值可用单引号或双引号，输出统一为双引号
- 如果属性值中没有空格，则引号可省略
3) 为条目编号
使用 “*” 符号生成的多个元素，可用 “$” 操作符实现从1到 N 自动编号。
// before
li.item$*3 // after
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
可在 “$” 后添加 “@n” 修改编号的起始值为n。
// before
li.item$@3*3 // after
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
可在 “$” 后添加 “@-” 修改编号的方向。
// before
li.item$@-3*3 // after
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
4. 添加文本
使用花括号 “{}” 操作符为元素添加文本节点。
// before
a[href=me.htm]{click me} // after
<a href="me.htm">click me</a>
因为文本也是节点，所以 a[href=me.htm]{click me} 与 a[href=me.htm]>{click me} 等价。
但有多个元素时则要注意。
// before
a[href=me.htm]{click me}+p{ok}
a[href=me.htm]>{click me}+p{ok} // after
<a href="me.htm">click me</a>
<p>ok</p> <a href="me.htm">click me
<p>ok</p>
</a>
Emmet 的简写方式在 snippets.json 中定义，更多使用方式可通过查看该文件了解。
对于 visual studio code 编辑器来说，该文件路径为： [安装根目录]\Microsoft VS Code\resources\app\node_modules\emmet\lib\snippets.json
参考：Emmet官方文档
Emmet之html语法的更多相关文章
- Emmet(Zen Coding)语法规则简介
———Emmet(Zen Coding)语法规则简介——— [Zen Coding可谓快速开发HTML和CSS的利器,主要采用仿css类选择器方式编写代码,以下是该利器的基本语法规则和代码示例] 基础 ...
- Emmet的HTML语法（敲代码的快捷方式）
Emmet的HTML语法(敲代码的快捷方式) 版权声明:本文为网上转载. 所有操作按下“tab”键即可瞬间完成 元素 1.在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准 ...
- [转载]Emmet (ZenCoding) 缩写语法
Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...
- “一键”生成HTML——Emmet插件常用语法
Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒).我个人惯用的是sublime,因此下文介绍 ...
- Emmet 生成 HTML 的语法
Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...
- Emmet 语法大全（缩写语法/sublime 插件）
Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...
- Emmet 语法探析
Emmet 语法探析 Emmet(Zen Coding)是一个能大幅度提高前端开发效率的一个工具. 大多数编辑器都支持Snippet,即存储和重用一些代码块.但是前提是:你必须先定义 这些代码块. E ...
- 转：Emmet 学习之路 - 2 基本语法
http://blog.csdn.net/jizhongchun/article/details/8472755 导读:Emmet的基本语法.学习步骤是:1 基本语法: 2 html命令: 3 css ...
- Emmet缩写语法
缩写语法 Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的 ...
随机推荐
- BCD码与16进制互转算法
关于这类算法,以前的文章已经讲过类似的:BCD码转二进制 #include <stdio.h> // HEX转BCD //bcd_data(<0x255,>0) unsigne ...
- 5. React 组件的协同使用 组件嵌套和Mixin
组件是React的核心,构建大型项目时多个组件之间需要进行协同使用.可以从横向和纵向两个角度来实现组件的协同使用,纵向的协同使用就是组件嵌套,横向的协同使用就是Mixin(抽取公共方法 ...
- 音乐API
博主在前几篇博客中介绍了小Q聊天机器人的源码及其包含的一些功能,并在应用市场上上线了一个版本,其中有一个功能是歌曲搜索,即输入格式为"歌曲#歌曲名#歌手"即可搜索出相应的歌曲并进行 ...
- Cocos2D iOS之旅:如何写一个敲地鼠游戏(十一):完善游戏逻辑
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...
- visual studio 2015使用python tools远程调试maya 2016
步骤: 1. 去https://apps.exchange.autodesk.com/MAYA/en/Home/Index搜索Developer Kit并下载,maya 2016可以直接点击这里下载. ...
- Windows Server2012R2 添加Microsoft .NET Framework 3.5 功能失败的解决方法
最近部署了一台Windows Server2012R2的虚机,在安装sharepoint foundation 2013之前安装必备的组件的时候安装到一半报错了没有安装成功,后来发现原来是系统的.NE ...
- Cocos2D:塔防游戏制作之旅(四)
让我们看一下项目的结构.在TowerDefense文件夹,你将找到: 含有Cocos2D文件的libs文件夹 含有所有图片和声音的资源文件夹 现在,你已经准备就绪准备开始建造炮台之旅了 ;) 放置炮塔 ...
- Caffe框架,训练model并测试数据
1. 训练model #!/usr/bin/env sh ./build/tools/caffe train --solver=examples/focal_length/focal_solver.p ...
- PO标准form的一点疑问
最近在修改采购订单form的时候,发现采购订单form往数据库中插数据的地方找不到,程序太多.我们又需要根据界面上的item的值在订单界面数据生成数据库数据时插值时,只能是想其他办法,一种是在on-i ...
- 海量数据挖掘MMDS week2: 频繁项集挖掘 Apriori算法的改进：非hash方法
http://blog.csdn.net/pipisorry/article/details/48914067 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...