Emmet 语法探析

时间：2021-09-08 21:53:39

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>

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

相关文章