sublime text插件emmet的用法教程

转载自:http://blog.wpjam.com/m/emmet-grammar/

使用 Emmet 生成 HTML 的语法详解

现在,打开你的 ST2 然后新建一个 HTML 文档,跟着文章,即时输入对应的指令然后亲自尝试一下!

生成 HTML 文档初始结构

HTML 文档的初始结构,就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构,你没有看错,输入一个感叹号(当然是英文符号),然后摁下 TAB 键,就会发现生成了下面的结构:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">< title>Document</title>
</head>
<body></body>
</html>

这就是一个 HTML5 的标准结构,也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构,那么输入指令 html:xt 即可生成如下结构:

<!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">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8">< title>Document</title>
</head>
<body></body>
</html>

Emmet 会自动把 doctype 给你补全了,怎么样,这样的功能会不会让你动心?简单总结一下常用的 HTML 结构指令:

  • html:5 或者 ! 生成 HTML5 结构
  • html:xt 生成 HTML4 过渡型
  • html:4s 生成 HTML4 严格型

生成带有 id 、class 的 HTML 标签

Emmet 的语法有点类似 CSS 的语法,生成 id 为 aaa 的 div 标签,我们只需要编写下面指令:

#aaa

Emmet 默认的标签为 div ,如果我们不给出标签名称的话,默认就生成 div 标签。如果编写一个 class 为 bbb 的 span 标签,我们需要编写下面指令:

span.bbb

然后就生成了对应的结构。同理,如果想要编写一个 id 为 ccc 的 class 为 ddd 的 ul 标签,我们可以这样写:

ul#ccc.ddd

很简单吧?比你用手写 id 、class 方便多了吧

生成后代:>

大于号表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表,而且被 class 为 aaa 的 div 包裹,那么可以使用下面指令:

div.aaa>ul>li

可以生成如下的结构:

<div class="aaa"><ul><li></li></ul>
</div>

生成兄弟:+

上面是生成下级元素,如果想要生成平级的元素,就需要使用 + 号。例如下面指令:

div+p+bq

就可以生成如下的 HTML 结构:

<div></div>
<p></p>
<blockquote></blockquote>

生成上级元素:^

上级 (Climb-up)元素是什么意思呢?前面咱们说过了生成下级元素的符号“>”,当使用 div>ul>li 的指令之后,再继续写下去,那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签,那么我需要先用 “^” 提升一下层次。例如:

div>ul>li^span

就会生成如下结构:

<div><ul><li></li></ul><span></span>
</div>

如果我想相对与 div 生成一个平级元素,那么就再上升一个层次,多用一个“^”符号:

div>ul>li^^span

重复生成多份:*

特别是一个无序列表,ul 下面的 li 肯定不只是一份,通常要生成很多个 li 标签。那么我们可以直接在 li 后面 * 上一些数字:

ul>li*5

这样就直接生成五个项目的无序列表了。如果想要生成多份其他结构,方法类似。

生成分组:()

用括号进行分组,这样可以更加明确要生成的结构,特别是层次关系,例如:

div>(header>ul>li*2>a)+footer>p

这样很明显就可以看出层次关系和并列关系,生成如下结构:

<div><header><ul><li><a href=""></a></li><li><a href=""></a></li></ul></header><footer><p></p></footer>
</div>

此外,分组还可以很方便的结合上面说的 “*” 符号生成重复结构:

(div>dl>(dt+dd)*3)+footer>p

生成结构:

<div><dl><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd></dl>
</div>
<footer><p></p>
</footer>

生成自定义属性:[attr]

a 标签中往往需要附带 href 属性和 title 属性,如果我们想生成一个 href 为 “http://blog.wpjam.com” ,title 为“我爱水煮鱼”的 a 标签,可以这样写:

a[href="http://blog.wpjam.com" title="我爱水煮鱼"]

其他标签和属性都类似。

对生成内容编号:$

例如无序列表,我想为五个个 li 增加一个 class 属性值 item1 ,然后依次递增从 1-5,那么就需要使用 $ 符号:

ul>li.item$*5

这样就生成了如下结构:

<ul><li class="item1"></li><li class="item2"></li><li class="item3"></li><li class="item4"></li><li class="item5"></li>
</ul>

$ 就表示一位数字,只出现一个的话,就从1开始。如果出现多个,就从0开始。如果我想生成三位数的序号,那么要写三个 $:

ul>li.item$$$*5

输出:

<ul><li class="item001"></li><li class="item002"></li><li class="item003"></li><li class="item004"></li><li class="item005"></li>
</ul>

只能这样单调的生成序号?对于强大的 Emmet 来说,肯定不会会了,我们也可以在 $ 后面增加 @- 来实现倒序排列:

ul>li.item$@-*5

生成如下结构:

<ul><li class="item5"></li><li class="item4"></li><li class="item3"></li><li class="item2"></li><li class="item1"></li>
</ul>

同样,我们也可以使用 @N 指定开始的序号:

ul>li.item$@3*5

这样就会从 3 开始排序,生成如下代码:

<ul><li class="item3"></li><li class="item4"></li><li class="item5"></li><li class="item6"></li><li class="item7"></li>
</ul>

配合上面倒序输出,可以这样写:

ul>li.item$@-3*5

生成的就是以 3 为底倒序:

<ul><li class="item7"></li><li class="item6"></li><li class="item5"></li><li class="item4"></li><li class="item3"></li>
</ul>

生成文本内容:{}

上面讲解了如何生成 HTML 标签,那里面的内容呢?当然也可以生成了:

a[href="http://blog.wpjam.com"]{点击这里到 我爱水煮鱼}

这样就生成了一个到我爱水煮鱼的超链接了。在生成内容的时候,特别要注意前后的符号关系,虽然 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

而去掉空格之后,就可以正常执行生成结构了。HTML 语法部分说完了,现在回头看看第一篇文字,你是否已经看懂了那一串指令?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/492998.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CES 2019开胃菜竟然是芯片,英特尔 英伟达 高通 华为 AMD已经开打!

来源&#xff1a;网易智能1月8日消息&#xff0c;一年一度的CES即将在美国拉斯维加斯开幕&#xff0c;开幕前夕&#xff0c;各家厂商纷纷推出新品&#xff0c;其中最突出的&#xff0c;便是几家半导体厂商推出的最新款芯片&#xff0c;让CES 2019一开始就变得纷繁热闹。下面&am…

springmvc resources 配置

http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/ 如果<mvc:resources mapping"/resources/**" location"/resources/mytheme/" />注意location是Webroot目录下面的文件夹则<link href"${pageCo…

dos部分命令

都是转载的别的网址的&#xff0c; 部分如下&#xff1a; 删除 test 这个目录下的所有目录和档案 rmdir /s/q test http://blog.csdn.net/kofterry/article/details/5183110

一文概述 2018 年深度学习 NLP 十大创新思路

来源&#xff1a;AI科技评论摘要&#xff1a;Sebastian Ruder 是一位 NLP 方向的博士生、研究科学家&#xff0c;最近&#xff0c;他基于十几篇经典论文盘点了 2018 年 NLP 领域十个令人激动并具有影响力的想法&#xff0c;并将文章发布在 Facebook 上。今年&#xff0c;我发现…

Django 数据库

做过交互性网站的朋友&#xff0c; 应该知道数据库是网络应用不可或缺的模块。 Django也不例外&#xff0c; 它有强大的数据库接口。 下面我们以MySql为例&#xff0c; 建立数据库系统和Django的连接。 Get the Database Driver我们可以在 https://pypi.python.org 网站&#…

sublime text安装插件出现问题

出现这个问题的时候&#xff0c; 参考&#xff1a;http://blog.csdn.net/zhyh1986/article/details/40678263

斯坦福重磅报告:2030年的人工智能与生活

来源&#xff1a;元浦说文摘要&#xff1a;本文节选自斯坦福大学「人工智能百年研究」的首份报告&#xff1a;《2030 年的人工智能与生活》&#xff0c;这篇报告是计划持续至少 100 年的研究系列中的第一篇。该报告描述了目前人工智能相关技术、法律以及道德上的挑战&#xff0…

redis清空缓存

flushall转载于:https://www.cnblogs.com/xiabaizhu/p/3924957.html

有25匹马,5条赛道

昨天参加暴风影音的校招笔试&#xff0c;选择题和编程题选择题中的一道题是这样的&#xff1a;有25匹马&#xff0c;5条赛道&#xff0c;一匹马一条赛道&#xff0c;无法为每匹马计时&#xff0c;每一场比赛只能知道5匹马的相对快慢&#xff0c;求决胜出前5名至少需要多少场比赛…

万物智联时代——2018年AIOT产业蓝皮书正式发布

来源&#xff1a;物联网资本论摘要&#xff1a;纵观2018年AIOT行业&#xff0c;可以说大事不断&#xff0c;阿里巴巴正式宣布将全面进军物联网&#xff0c;“中兴事件”持续发酵也使得半导体行业受到广泛关注&#xff0c;NB-IoT模组价格进一步下调补贴后已进入20元大关等等。作…

判断栈的弹出序列

题目描述输入两个整数序列&#xff0c;第一个序列表示栈的压入顺序&#xff0c;请判断第二个序列是否为该栈的弹出顺序。 假设压入栈的所有数字均不相等。 例如序列1,2,3,4,5是某栈的压入顺序&#xff0c; 序列4&#xff0c;5,3,2,1是该压栈序列对应的一个弹出序列&#xff0c;…

2018微信年度数据报告:00后最爱表情捂脸哭 80后呲牙笑

来源 &#xff1a;腾讯科技摘要&#xff1a;腾讯科技讯 1月9日消息&#xff0c;在今日举行的2019微信公开课PRO上&#xff0c;微信发布了《2018微信年度数据报告》。报告显示&#xff0c;2018年&#xff0c;微信每个月有10.82亿用户保持活跃&#xff0c;每天有450亿次信息发送出…

第二章 二进制数值和记数系统

1 什么是数字 数字是属于抽象数学系统的一个单位&#xff0c;服从特定的顺序法则、加法法则和乘法法则。 2 位置记数法 数字是用位置记数法编写的。最右边的数位表示它的值乘以基数的0次幂&#xff0c;紧挨着这个数的左边的数位表示它的值乘以基数的1次幂&#xff0c;依此类推。…

行业变革的镜子:2018年融资最多的24家美国创业公司

来源&#xff1a;资本实验室据Crunchbase统计&#xff0c;2018年融资最多的24家美国创业公司融资总额达到103.66亿美元&#xff0c;累计融资超过232亿美元。这24家公司为我们提供了非常丰富的数据和视角&#xff0c;让我们得以观察到新技术与新商业模式对传统行业的颠覆正在加速…

Win32中如何判断多个键同时按下

可以使用下面的两个Win32函数 GetKeyState The GetKeyState function retrieves the status of the specified virtual key. The status specifies whether the key is up, down, or toggled (on, off—alternating each time the key is pressed). SHORT GetKeyState(int nVi…

一般测试题

1、常见的兼容性问题 2、HTML5跨域访问的方式 3、怎么解决跨域访问 4、Javascript事件绑定的顺序 5、冒泡和捕获 6、Hybrid的调试如何调试 7、Index索引有哪些 8、常见的排序算法有哪些 9、SOA1.0 SOA2.0区别 10、RESTFul与Web Service的区别及好处 11、cookie的保存时间、sess…

一打在2019年亮相的迷人科技项目:飞行汽车、子弹头列车、登月、……

来源&#xff1a;IEEE电气电子工程师学会以色列要登月&#xff01;以色列的SpaceIL计划在2019年上半年向月球发射一个月球着陆器。该公司最初成立的目的是角逐Google的月球XPrize大奖&#xff0c;但比赛截止日期已过&#xff0c;奖金无人认领。SpaceIL的着陆器将搭一颗印尼电信…

全排列算法的思想

全排列算法 题目要求&#xff1a; 输入一个字符串,按字典序打印出该字符串中字符的所有排列。例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba。 结果请按字母顺序输出。 总体的思想是固定前面的某些元素位&#xff0c;比如1&#x…

[Go语言]从Docker源码学习Go——init()方法和identifier首字母大小写区分

init()方法 如果想在一个go文件里&#xff0c;进行一些初始化的工作&#xff0c;可以把代码放到init()方法中。 init()方法先被执行。 func init() { // initialization of package } 注意&#xff1a;它是没有输入参数和返回参数的。 identifier首字母大小写区分 当identifier…

深度学习在目标视觉检测中的应用进展与展望

作者&#xff1a;张慧,王坤峰,王飞跃来源&#xff1a;王飞跃科学网博客摘要&#xff1a;目标视觉检测是计算机视觉领域的一个重要问题&#xff0c;在视频监控、自主驾驶、人机交互等方面具有重要的研究意义和应用价值.近年来&#xff0c;深度学习在图像分类研究中取得了突破性进…