Emmet 语法探析

最新推荐文章于 2024-07-04 16:37:43 发布

airu9101

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量153

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/code-charmer/p/4893375.html

版权

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>

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

转载于:https://www.cnblogs.com/code-charmer/p/4893375.html

airu9101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Emmet 语法探析

Emmet 语法探析Emmet(Zen Coding)是一个能大幅度提高前端开发效率的一个工具。大多数编辑器都支持Snippet,即存储和重用一些代码块。但是前提是：你必须先定义这些代码块。Emmet的特点在于你可以设置CSS形式的能够动态解析的表达式，然后根据所输入的表达式来生成相应的内容。Emmet还有一些常用的高级功能，如生成Lorem Ipsum,更新CSS的属性值，...
复制链接

扫一扫