Emmet 快速编写html代码

快来打我* 2022-06-16 03:45 184阅读 0赞

# 简介 #

[快速编写HTML代码][HTML]

![emmet功能展示][emmet]

语法简单，语法类似css选择器，30分钟内你就可以搞定它。开发商为sublime、atom、brackets、hbuilder、webstrom等编辑器或IDE提供对应的插件，你可以在你喜欢的编辑器中使用它。它还支持对[css快速][css]编辑功能。

*  [Emmet官网][Emmet]
 *  [Emmet官方文档][Emmet 1]
 *  [Emmet官方下载][Emmet 2]

# 缩写 #

缩写是emmet工具包的核心：这些特殊的表达式在运行时被解析，并转化为对应的结构化代码块（例如html)。缩写语法像css选择器，这样web开发人员可以轻易的使用它，通常情况下按下`tab`或`ctrl+e`会生成对应的代码。

#page>div.logo+ul#navigation>li*5>a{Item $}

可以转换为...

div id="page">
        <div class="logo"></div>
        <ul id="navigation">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </div>

# 语法 #

官网语法介绍文档：[http://docs.emmet.io/abbreviations/syntax/][http_docs.emmet.io_abbreviations_syntax]

## 元素 ##

比如p、h1元素，会生成标签`<p></p>`、`<h1></h1>`，并且你可以写任意文字将会转化为标签`tt`\->`<tt></tt`，意味着emmet可以用于编辑xml等标记语言。

## 嵌套的运算符 ##

用嵌套的运算符来代表html中dom元素的树形结构

### 子层：`>` ###

div>ul>li

生成...

### 兄弟层：`+` ###

header+nav+section+footer

生成...

### 上层：`^` ###

header>h1^nav

生成...

### 乘法：`*` ###

ul>li*4

生成...

### 分组：`()` ###

div>(header>ul>li*2>a)+footer>p

生成...

## 属性运算符 ##

用于修改输出元素的属性。例如，可以在html和xml中生成元素的class属性。

### ID和CLASS：`#` `.` ###

在css中可以使用div\#id和div.class来设置指定元素并指定id或class的样式。在emmet中，同样可以使用这些语法来为html元素添加属性，并指定值。

div#header+div.navigation+div.footer

生成...

### 自定义属性：\[\] ###

您可以使用\[attr1="value1" attr2=value2\]的形式来添加元素属性值。

a[href=index.html title=index]

生成...

*  空格分隔多个属性
 *  值处的引号可以省略
 *  emmet自动为元素生成必须的属性

### 项目编号： `### #### 随着乘法`*`运算符可以重复的元素，但`$\`你可以*编号\*它们。 ###

ul>li.item$*3

生成...

您可以使用多个`$`成一排用零垫编号：

ul>li.item$$$*3

生成...

#### 修改编号方向：`$@-` ####

在序号`$`后添加`@-`，实现项目标号的反序。

ul>li.item$@-*3

生成...

#### 开始值：`$@3` ####

修改计算基值，在序号`$`后添加`@数字`。

ul>li.item$@2*3

...转换为

您可以一起使用这些修饰符：

ul>li.item$@-3*5

### 文本：`{}` ###

a{hello}

生成...

<a href="">hello</a>

复杂一点的

<a href="">click</a><b>here</b>
    
    
    <a href="">click<b>here</b></a>

# 隐式标记 #

emmet解析器根据表达式上下文（父子关系），推导出被省略元素的类型。从而对emmet语法的表达式再次简写。

.header>h1#title+ul>.item*2

生成...

常见规则：

1.  上下文无法获得元素时，产生`div`元素；
2.  `li`对应于`ul ol`，例如，`ul>.item` -> `<ul><li class="item"></li></ul>`；
3.  `tr`对应于`table thead tbody tfoot`；
4.  `td`对应于`tr`；
5.  `option`对于`select optgroup`；

# 填充文本：`lorem` #

编写的静态网页常常做为动态网页的模版，你不得不填写一些无用的文本来撑起整个页面。

ul>li*2>lorem2

生成...

<ul>
        <li>Lorem ipsum.</li>
        <li>Alias, dolorum?</li>
    </ul>

*  `lorem`然后执行emmet会生成30个单词;
 *  `lorem10`会生成10个单词;

[HTML]: http://docs.emmet.io/abbreviations/
[emmet]: /images/20220616/79e6d0d4b0f94588aa862dea3d97b196.png
[css]: http://docs.emmet.io/css-abbreviations/
[Emmet]: http://emmet.io/
[Emmet 1]: http://docs.emmet.io/
[Emmet 2]: http://emmet.io/download/
[http_docs.emmet.io_abbreviations_syntax]: http://docs.emmet.io/abbreviations/syntax/