Emmet语法1（语义）
缩写语义
Emmets 使用了类似于 CSS 选择器的语法，用于描述在生成的树和元素的特性内部的元素位置。
元素
你可以使用类似div或p等元素名来生成 HTML的tag。
Emmet并没有一组预定义的可用的标记名称，你可以编写任何单词并将其转换为tag：
`div` => `<div></div>`
`foo` => `<foo></foo>`等。
嵌套运算符
嵌套运算符被用于生成树内部的位置简写元素：无论它放置在内部或
上下文元素附近。
Chilld:>
你可以使用 > 运算符将元素嵌套在彼此内部：
`div>ul>li`
会生成
```
<div>
<ul>
<li></li>
</ul>
</div>
```
Sibling:
使用 + 运算符将元素放在一起，放在同一级别上：
`div+p+bq`
会生成
```
<div></div>
<p></p>
<blockquote></blockquote>
```
Climb-up：^
你可以使用>运算符来向下溯源生成树，并且所有同级元素的位置都将根据最深的元素解析出来：
`div+div>p>span+em`
会被拓展成
```
<div></div>
<div>
<p><span></span><em></em></p>
</div>
```
你可以使用^运算符来向上一层溯源生成树，并转换下文的元素内容的样子
`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>
```
乘法：*
使用*运算符，您可以定义元素应输出的次数：
`ul>li*5`
会输出
```
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
```
分组：（）
继承制被Emmet用户用于对复杂缩写中的子树进行分组：
`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>
```
如果你使用浏览器的 DOM，则可以将组视为文档片段：每个组包含缩写子树，及其下插入到与组的第一个元素相同的级别的所有元素。
可以将组嵌套在彼此内部，并使用*运算符将它们组合起来：
`(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>
```
你可以使用组来将一整个页面用一个单一缩写来标记，但请不要这样做。
属性运算符
属性运算符用于修改输出元素的属性。例如，在 HTML 和 XML 中，您可以快速将class属性添加到生成的元素中去。
ID 和 CLASS
在 CSS 中，使用 elem#id 和 elem.class 表示法来访问具有指定 ID 或类属性的元素。在 Emmet 中，可以使用完全相同的语法将这些属性添加到指定的元素：
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>
```
自定义属性
你可以使用 [attr] 表示法（如 CSS 中）向元素添加自定义属性：
`td[title="Hello world!" colspan=3]`
会输出
```
<td title="Hello world!" colspan="3"></td>
```
*你可以在方括号内放置尽可能多的属性。*
*你不必指定属性值：td[colspan title] 将生成 <td colspan="" title="">，每个空属性内都有表号(tapstops)（如果编辑器支持）。
*你可以使用单引号或双引号来报属性值。*
*如果值不包含空格，则无需引用这些值：td[title=hello colspan=3] 将正常工作。*
项目编号： $
使用乘法*运算符，您可以重复元素，但使用 $ 可以编号它们。将 $ 运算符放在元素的名称、属性的名称或属性的值中，输出以当前数量为次数的重复元素：
`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>
```
你可以连续使用多个$来叠加包含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>
```
更改编号基点和方向
使用@修饰符，可以更改编号方向（升序或降序）和基（例如起始值）。
例如，要更改方向，在 $之后添加 @-：
`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>
```
要改变基数（counter base value），在$后面加@（修改的数字）
`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>
```
你可以将这些修改器一起使用
`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>
```
文本：{}
您可以使用大括号向元素添加文本：
`a{Click me}`
将产生
`<a href="">Click me</a>`
请注意，`{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 }+a{here}+{ to continue}`
生成
`<p>Click <a href="">here</a> to continue</p>`
在此示例中，为了在元素内写"Click here to continue"，我们已有意识地使用>运算符来向下移动树到p之后了，但在有a元素存在的情况下，我们其实不需要这么做，因为我们只需要a元素有“here”这个单词，不需要更改父级上下文。
为了进行比较，下面是没有>运算符的的相同缩写方法：
`p{Click }+a{here}+{ to continue}`
生成
`<p>Click </p>`
`<a href="">here</a> to continue`
关于缩写格式的说明
当您熟悉 Emmet 的缩写语法时，可能需要使用一些格式来使缩写更具可读性。例如，在元素和运算符之间使用空格，如下所示：
`(header > ul.nav > li*5) + footer`
但它不起作用，因为空格是 Emmet 停止缩写解析的停止符号。
许多用户错误地认为每个缩写应在新的一行进行编写，但它们是错误的：您可以在文本中的任何位置键入和展开缩写：
这就是为什么Emmet需要一些指示器（如空格），来告诉它需要停止缩写解析的位置，如果你仍然认为这种格式需要复杂的缩写来使其变得更具可读性：
*缩写不是一个平台语言，他们不需要变得具备可读性，他们只需要尽快地拓展和移动*
*你并不是真的需要写很复杂的缩写，所以别再觉得打字在网站开发中是耗时的过程，你会很快发现构建一个复杂缩写比很多个简短的缩写要更慢更容易出错。*
网友评论