Emmet基本语法

Emmet是编辑器的插件

缩写语法

Emmet 使用类似于 CSS 选择器的语法来描述元素的结构与属性

汇总代码

Child: > 
 
输入:nav>ul>li
输出:
<nav>
    <ul>
      <li></li>
    </ul>
</nav>
 
Multiplication: *  
 
输入:ul>li*5
输出:
<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>
 
Item numbering: $
 
输入: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>
 
输入:h$[title=item$]{Header $}*3
输出:
    <h1 title="item1">Header 1</h1>
    <h2 title="item2">Header 2</h2>
    <h3 title="item3">Header 3</h3>
 
输入: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>
 
输入: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>
 
输入: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>
 
输入:form#search.wide
输出: <form id="search" class="wide"></form>
 
输入:p.class1.class2.class3
输出:<p class="class1 class2 class3"></p>
 
ID and CLASS attributes 快速输出id和class标签结构
 
输入:#header
输出:
<div id="header"></div>
输入:.header
输出:
<div class="header"></div>
 
Sibling: + 组合标签
 
输入:div+p+bq
输出:
<div></div>
<p></p>
<blockquote></blockquote>
 
Climb-up: ^
 
输入:div+div>p>span+em^bq
输出:
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
 
输入:div+div>p>span+em^^bq
输出:
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
 
Grouping: ()
 
输入: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>
 
Custom attributes 自定义对象
 
输入:p[title="Hello world"]
输出:<p title="Hello world"></p>
 
输入:td[rowspan=2 colspan=3 title]
输出:<td rowspan="2" colspan="3" title=""></td>
 
输入:[a='value1' b="value2"]
输出:<div a="value1" b="value2"></div>
 
Text: {}
 
输入:a{Click me}
输出:<a href="">Click me</a>
 
输入:p>{Click }+a{here}+{ to continue}
输出:<p>Click <a href="">here</a> to continue</p>
 
Implicit tag names
 
输入:.class
输出:<div class="class"></div>
 
输入:em>.class
输出:<em><span class="class"></span></em>
 
输入:ul>.class
输出:<ul> <li class="class"></li> </ul>
 
输入:table>.row>.col
输出:
<table>
    <tr class="row">
    <td class="col"></td>
    </tr>
</table>

 

嵌套操作符

> (子元素)

可以使用 > 运算符将元素嵌套在彼此内部

较准确的含义是:使用 `>` 运算符,您将下降生成的树,所有兄弟元素的位置将根据最深的元素解析

div>ul>li

表现为:

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

+ (兄弟元素)

使用 + 运算符将元素以相同层级放在同一父元素上

div+p+bq

表现为:

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

^ 返回上层

  • 使用 ^ 运算符,您可以爬上树的一个层次,并更改上下文
div+div>p>span+em^bq

表现为:

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
// 此时的上下文返回到两个div所在的这一层了
  • 当然了,^ 也可以多个并用,有几个 ^ 就返回几层
div+div>p>span+em^^bq

表现为:

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
// 此时上下文已经返回到最外层了

这里要注意,最多返回到跟第一个元素同级的,以上面的例子,^^ 已经返回到了最外层,跟 ^^^ 的效果是一样的

* 乘法

使用 * 操作符,您可以定义应该输出多少次该元素,跟我们加减乘除里的乘法含义相近

ul>li*5

表现为:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

()分组

() 操作符对复杂的子元素进行分组,简而言之,每个()中都是一个独立的子元素

适用于某个子元素比较复杂的情况

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>

可以将分组当作 Document Fragments,后续元素将与分组第一个元素同级。

分组嵌套,并且使用 * 操作法:

(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>

使用分组后,可以用一个缩写来生成整个页面,不过不建议这么做。[1]

属性操作符(Attribute operators)

顾名思义,就是HTML中的属性,因为我们的页面不光有单纯的HTML,还有各式各样的属性,操作或者创建这些属性就需要用到属性操作符了

ID 和 Class

Emmet使用类似于CSS选择器的语法给元素添加属性

div#header+div.page+div#footer.class1.class2.class3

表现为:

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

那我们在实际开发中可能除了常用的属性外,还会用一些自定义的属性,那如果创建呢?

自定义属性(Custom attributes)

您可以使用类似CSS中的符号 [attr="xxx"] 向元素添加自定义属性

div[title="Hello world!" colspan=3]

表现为:

<div title="Hello world!" colspan="3"></div>

需要说明的是:

  1. 方括号内的属性数量不限,如果你喜欢,可以一直加
  2. 如果不是默认属性值的话会生成插入占位 比如:div[title colspan] 会变成 <div title="" colspan=""> 前提是编辑器支持这样的写法
  3. 属性值可以使用单引号或者双引号都可以
  4. 属性值如果不包含空格可以省去引号

$编号(Item numbering)

操作符可以生成重复元素,而 $ 可以去元素进行编号。需要将 $ 放在元素名、属性名或者属性值里

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>

如果想实现00x的格式,该怎么办呢?

可以连写多个$就可以生成带有前导的编号了

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>

那如果我想实现降序呢?

使用 @ 修饰符,可以改变编号的方向以及起点

ul>li.item$@-*5

理论上,应该表现为[2]

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

如果想改变起点,不从1开始,可以使用 @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>

当然了,你也可以将多种修饰符混合使用[3]

ul>li.item$@-3*5

理论上的表现:

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

Text: {}文本

可以使用大括号 {}为元素添加文本,就类似于模板的插入符

div{hello world}

表现为:

<div>hello world</div>

需要注意的是{text}类似于独立元素(例如div,p)。不过当它紧跟在元素后面时就有特殊的含义了

比如 a{click}  a>{click} 结果一样,而 a{click}+b{here}  a>{click}+b{here} 结果不一样

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

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

在第二个例子中的b标签是在a标签内。这就是不同点:当{text}紧跟在元素后面时,它没有改变父元素的上下文

可以再用一个比较复杂的例子来说明:

p>{Click me }+a{here}+{ to continue}

表现为:

<p>Click me <a href="">here</a> to continue</p>

在上面的例子里,我们为了让p标签包含Click me,所以用 > 进入子结构,因为现在的上下文已经是p标签的子结构,所以a标签也在p标签内

如果我们想让 p  a 在同一层级,同时两者都包含文本的话,我们应该怎么做呢?

p{click me}+a{here}+{ to continue}

表现为:

<p>Click me</p>
<a href="">here</a> to continue

这样p和a都在同一层级,就满足要求咯~

注意事项

以上所有的语法,都不能出现空格,除非是在特定的括号中。因为Emmet在遇到空格时,就认为已经结束,会停止解析。

所以在生成目标结果前,一定不能格式化缩写

 

 

版权声明 © 本文内容来自若白博客:R-Blog.cn 文章链接:https://r-blog.cn/202207022904.html 转载请注明出处 原创不易,觉得有用的话,请转发保留版权信息表示支持!
THE END
分享
二维码
打赏
海报
Emmet基本语法
Emmet是编辑器的插件 缩写语法 Emmet 使用类似于 CSS 选择器的语法来描述元素的结构与属性 汇总代码 Child: > 输入:nav>ul>li 输出: <na……
<<上一篇
下一篇>>