Emmet 语法探析


Emmet(Zen Coding)是一个能大幅度提高前端开发效率的一个工具。

大多数编辑器都支持Snippet,即存储和重用一些代码块。但是前提是:你必须先定义

这些代码块。

Emmet的特点在于你可以设置CSS形式的能够动态解析的表达式,然后根据所输入

的表达式来生成相应的内容。Emmet还有一些常用的高级功能,如生成Lorem Ipsum,更新CSS的属性值,

将图片资源转换成data url形式等。通过对Emmet的熟练使用,可以极大地推动你的生产力。

使用Emmet生产HTMl语法解析

  • 生成HTML文档初始结构

    首先使用Ctrl+N新建一个页面,然后使用Ctrl+Shift+PSet Syntax:HTML.在得到的支持HTML语法

    文档中输入一个"!",然后摁下TAB键,就可以生成一个HTML5的标准文档结构:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
< title>Document</title>
</head>
<body> </body>
</html>

其他常用的 HTML 结构指令:

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

生成带有id、class的HTML标签

Emment 默认的标签为div

生成id为main的div标签,指令为#main

编写一个clas为aaa的span标签,指令为span

编写一个id为list的class为fruit的ul标签,指令为ul#list.fruit

生成后代:>

大于号表示后面要生成的内容为当前标签的后代。例如要生成一个无序列表,

而且被class为list的div包裹,则指令为:div.list>ul>li

生成兄弟:+

如果要生成平级元素,就需要+号,ex: div+p+dq

生成上级元素: ^

根据ul与li的关系不难理解上级元素(Climb-up)的意思。

尝试如下指令: div>ul>li^span,生成结构如下:

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

重复生成多份: *

对于一个无序列表,如果要生成多个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>

生成自定义属性: [attr]

a标签中往往需要附带href属性和title属性,如果想要生成一个href为"http://google.com",

title为"google"的a标签,指令为: a[href="http://google.com" title="google"]

对生成内容编号: $

ex: 为五个li增加一个class属性值为itme1,然后依次递增从1-5,则使用$符号:ul>li.item$*5,

  • 如果要生成三位数的序号,ul>li.item$$$*5;
  • 同时也可以在$后面增加@-来实现倒序排列,ul>li.item$@-*5;
  • 使用@N指定开始的序号: ul>li.item$@3*5,生成如下代码;
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>

生成文本内容:{}

ex: 生成a标签里面的内容:a[href="http://github.com"]{点击链接GITHUB}

这样就生成一个github的超链接.生成内容的时候特别要注意前后的符号关系,

虽然 a>{Click me} 和 a{Click me} 生成的结构是相同的,但是加上其他的内容就不一定了.

ex:

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b> <!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

切忌指令中,不要有空格,一面导致代码无法使用。

Emmet 语法探析的更多相关文章

  1. 中文分词工具探析(二):Jieba

    1. 前言 Jieba是由fxsjy大神开源的一款中文分词工具,一款属于工业界的分词工具--模型易用简单.代码清晰可读,推荐有志学习NLP或Python的读一下源码.与采用分词模型Bigram + H ...

  2. 中文分词工具探析(一):ICTCLAS (NLPIR)

    1. 前言 ICTCLAS是张华平在2000年推出的中文分词系统,于2009年更名为NLPIR.ICTCLAS是中文分词界元老级工具了,作者开放出了free版本的源代码(1.0整理版本在此). 作者在 ...

  3. javaScript系列 [02]-javaScript对象探析

    [02]-javaScript对象探析 题记:多年前,以非常偶然的方式关注了微信公众号“面向对象”,本以为这个公众号主要以分享面向对象编程的干货为主,不料其乃实实在在的猿圈相亲平台.通过查看公开资料, ...

  4. Emmet语法预览

    Emmet 是一个能提高前端开发效率的编辑器插件,支持 Sublime,Atom,TextMate,Nodepad++ 等主流编辑器.Emmet 定义了一些缩写,当我们输入缩写代码后,按展开键(默认是 ...

  5. Emmet语法大全手册

    这是基于官方手册整理制作的,因为那个手册网页打开很慢,所以就整理在这里了.以备不时之需. Syntax   Child: > nav>ul>li <nav> <ul ...

  6. 深入探析koa之中间件流程控制篇

    koa被认为是第二代web后端开发框架,相比于前代express而言,其最大的特色无疑就是解决了回调金字塔的问题,让异步的写法更加的简洁.在使用koa的过程中,其实一直比较好奇koa内部的实现机理.最 ...

  7. 开源中文分词工具探析(三):Ansj

    Ansj是由孙健(ansjsun)开源的一个中文分词器,为ICTLAS的Java版本,也采用了Bigram + HMM分词模型(可参考我之前写的文章):在Bigram分词的基础上,识别未登录词,以提高 ...

  8. 开源中文分词工具探析(四):THULAC

    THULAC是一款相当不错的中文分词工具,准确率高.分词速度蛮快的:并且在工程上做了很多优化,比如:用DAT存储训练特征(压缩训练模型),加入了标点符号的特征(提高分词准确率)等. 1. 前言 THU ...

  9. 开源中文分词工具探析(五):FNLP

    FNLP是由Fudan NLP实验室的邱锡鹏老师开源的一套Java写就的中文NLP工具包,提供诸如分词.词性标注.文本分类.依存句法分析等功能. [开源中文分词工具探析]系列: 中文分词工具探析(一) ...

随机推荐

  1. TransactionScrope 2

    继上一篇文章TransactionScrope 在做相应的变动时,发现可以重现ORA-14450错误,如: List<Thread> ls = new List<Thread> ...

  2. FOR UPDATE SKIP LOCKED

    SYS_UNIT 中有UNIT_ID 0000000001 0000000002 0000001100 原意为若启用多线程,则每个线程在获取时仅可以获取一条数据(互斥) 脚本如下 1.SELECT * ...

  3. java实例变量及方法调用顺序

    public class Base { private String name="base"; public Base(){ sayHello(); } void sayHello ...

  4. Unity-视图

    Project(项目)视图:显示项目所包含的全部资源,每个Unity项目文件夹都会包含一个Assets文件夹,Assets文件夹是用来存放用户所创建的对象和导入的资源. Hierarchy(层级)视图 ...

  5. noip2015 提高组day1、day2

    NOIP201505神奇的幻方   试题描述 幻方是一种很神奇的N∗N矩阵:它由数字 1,2,3,……,N∗N构成,且每行.每列及两条对角线上的数字之和都相同.    当N为奇数时,我们可以通过以下方 ...

  6. 高性能PHP日志插件--Seaslog

    日志系统作为记录系统运行的信息,包括 用户输入,安全日志等,日志系统是不能影响用户的使用. 为什么需要记录日志? 既然日志系统增加了整个系统的开销,为什么我还需要它,这是因为日志能帮我们记录运行的很多 ...

  7. 记录一下C#+Oracle批量插入的一个方法

    public bool insertOracle(DataTable dataTable, string sql) // Oracle sql 查询的是表头 { string ConnStr = Wi ...

  8. SSH 概念及使用详解

    注意:转载请注明出处:http://www.programfish.com/blog/?p=124 SSH 基本概念 SSH 英文全称是secure shell,字面意思:安全的shell. SSH协 ...

  9. python运维开发(二十一)----文件上传和验证码+session

    内容目录: 文件上传 验证码+session 文件和图片的上传功能 HTML Form表单提交,实例展示 views 代码 HTML ajax提交 原生ajax提交,XMLHttpRequest方式上 ...

  10. Python即时网络爬虫项目: 内容提取器的定义(Python2.7版本)

    1. 项目背景 在Python即时网络爬虫项目启动说明中我们讨论一个数字:程序员浪费在调测内容提取规则上的时间太多了(见上图),从而我们发起了这个项目,把程序员从繁琐的调测规则中解放出来,投入到更高端 ...