emmet语法简介及在Vscode中使用Emmet快速编辑代码

17 篇文章 19 订阅

Emmet语法

一、Emmet语法简介

1、什么是Emmet?

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet,它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码

请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!

语法基本规则如下:

E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表NE的子元素。
E+N 代表NE的同级元素。
E^N 代表NE的上级元素。

二、基础用法

1、元素(Elements)

我们可以使用元素的名称,如div或p来生成HTML标签。Emmet没有一组可用的标签名称,可以写任何单词并将其转换为标签。也就是只要知道元素的缩写,Emmet会自动转换成对应标签.

div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成html5标准的包含body为空基本dom
html:xt => 生成XHTML过渡文档类型,DOCTYPEXHTML
html:4s => 生成HTML4严格文档类型,DOCTYPEHTML 4.01
a:mail          => <a href="mailto:"></a>
a:link          => <a href="http://"></a>
base            => <base href="">
br              => <br>
link            => <link rel="stylesheet" href="">
script:src      => <script src=""></script>
form:get        => <form action="" method="get"></form>
label           => <label for=""></label>
input           => <input type="text">
inp             => <input type="text" name="" id="">
input:hidden    => <input type="hidden" name=""> input:h亦可
input:email     => <input type="email" name="" id="">
input:password  => <input type="password" name="" id="">
input:checkbox  => <input type="checkbox" name="" id="">
input:radio     => <input type="radio" name="" id="">
select          => <select name="" id=""></select>
option          => <option value=""></option>
bq              => <blockquote></blockquote>
btn             => <button></button>
btn:s           => <button type="submit"></button>
btn:r           => <button type="reset"></button>
2、文本操作符(Text)

如果想在生成元素的同时添加文本内容可以使用{}

Copydiv{这是一段文本}
<div>这是一段文本</div>
a{点我点我}
<a href="">点我点我</a>  
3、属性操作符(Attribute operators)

属性运算符用于修改输出元素的属性.

Id和Class (elem#id and elem.class )

Copydiv.test  => <div class="test"></div>
div#pageId => <div id="pageId"></div>

隐式标签则会自动联想生成对应元素,根据配置规则不同生成的结果也是不同的.

Copy.class
=>
<div class></div>
em>.class
=>
<em><span class></span></em>
table>.row>.col
=>
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

绑定多个类名用.符号连续起来即可

Copydiv.test1.test2.test3
=>
<div class="test1 test2 test3"></div>

自定义属性使用 [attr1=’’ attr2=’’]

Copya[href='#' data-title='customer' target='_blank']
=>
<a href="#" data-title="customer" target="_blank"></a>
4、嵌套操作符(Nesting operators)

嵌套操作符用于将缩写元素放置在生成的树中,是否应放置在上下文元素的内部或附近.

子级:>

通过>标识元素可以生成嵌套子级元素,可以配合元素属性进行连写

Copydiv#pageId>ul>li 
=> 
<div id="pageId">
    <ul>
        <li></li>
    </ul>
</div>

同级:+

+字符表示生成兄弟级元素.

Copydiv#pageId+div.child
=>
<div id="pageId"></div>
<div class="child"></div>

父级:^

用于生成父级元素的同级元素,从这个

字符所在位置开始,查找左侧最近的元素的父级元素并生成其兄弟级元素.

Copydiv>p.parent>span.child^ul.brother>li
=>
<div>
    <p class="parent"><span class="child"></span></p>
    <ul class="brother">
        <li></li>
    </ul>
</div>
5、分组操作符(Grouping)

分组使用()来实现缩写的分离.比如这个例子,如果不加括号那么a将作为span的子级元素生成.加上括号a将于()内的元素同级.

Copydiv>(ul>li+span)>a
=>
<div>
    <ul>
        <li></li>
        <span></span>
    </ul>
    <a href=""></a>
</div>
6、乘法(Multiplication)

使用N即可自动生成重复项.N是一个正整数.在使用时请注意N所在位置,位置不同生成的结果不同.

Copyul>li*3
=>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
7、自动计数(numbering)

这个功能挺方便的对于生成重复项时增加一个序号,只需要加上$符号即可.

Copyul>li.item${item number:$}*3
<ul>
    <li class="item1">item number:1</li>
    <li class="item2">item number:2</li>
    <li class="item3">item number:3</li>
</ul>

如果生成两位数则使用两个连续的$ , 更 多 位 数 以 此 类 推 . . . 使 用 @ 修 饰 符 , 可 以 更 改 编 号 方 向 ( 升 序 或 降 序 ) 和 基 数 ( 例 如 起 始 值 ) . 注 意 这 个 操 作 符 在 ,更多位数以此类推... 使用@修饰符,可以更改编号方向(升序或降序)和基数(例如起始值).注意这个操作符在 ,...使@.之后添加
@-表示降序,@+表示升序,默认使用升序.
@N可以改变起始值.需要注意的是如果配合升降序使用的话N是放到±符后.

Copyul>li.item$@-*3
=>
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>
---------------------------
ul>li.item$@-10*3
=>
<ul>
    <li class="item12"></li>
    <li class="item11"></li>
    <li class="item10"></li>
</ul>

三、常见用法及举例

Emmet语法是有很多高级用法的。例如模拟文本/随机文本包装文本等等之类的操作。还有一些特别特别复杂的组合

比如下面这段东西:

table.table-row[role='table']>(thead>tr>td{item $@120}*5)+(tbody>tr>(td.item$$@-)lorem10*5)

生成的东西:

<table class="table-row" role="table">
    <thead>
        <tr>
            <td>item 120</td>
            <td>item 121</td>
            <td>item 122</td>
            <td>item 123</td>
            <td>item 124</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <td class="item05">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, assumenda.</td>
            </td>
            <td>
                <td class="item04">Magnam possimus molestias ipsum animi rem placeat, ut obcaecati laudantium.</td>
            </td>
            <td>
                <td class="item03">Consequuntur, labore ad optio cupiditate iusto dolores fugit quidem officiis.</td>
            </td>
            <td>
                <td class="item02">Veniam, explicabo consequuntur blanditiis at dicta fuga ratione eos beatae.</td>
            </td>
            <td>
                <td class="item01">Fuga voluptatum illo quis ducimus ad eveniet non. Saepe, eveniet.</td>
            </td>
        </tr>
    </tbody>
</table>

但是在我看来,不好意思, 我宁愿自己去敲下面这些代码,也不愿意去记这些花里胡哨的东西。本身我们使用Emmet语法就是为了偷懒而不用写大量的重复性的HTML代码而来的。如果使用了那些过于复杂的Emmet语法。是不是我们就失去了一开始的偷懒的初心呢?虽然看起来很牛逼,但是没有必要。

所以,我仅在下面举例一些比较常用,和普通程序员可能用到的使用方式。如果有大佬想要了解那些高级用法。可以去Emmet官网文档自行了解

1.生成后代元素:>

tag1>tag2表示在标签(元素)tag1内生成后代标签(元素)tag2

ul>li>a>img

效果:

<ul>
	<li><a href=""><img src="" alt=""></a></li>
</ul>
2.生成兄弟元素:+

tag1+tag2表示在标签(元素)tag1后生成兄弟标签(元素)tag2

ul+li+a+img

效果:

<ul></ul>
<li></li>
<a href=""></a>
<img src="" alt="">
3.生成上级元素:^

tag1^tag2表示在标签(元素)tag1的父级后生成兄弟标签(元素)tag2,如果有两个^符号,则再提升一级(向上找父亲),以此类推

ul>li>a^li>span^^input

效果

<ul>
	<li><a href=""></a></li>
    <li><span></span></li>
</ul>
<input type="text">
4.生成多个元素:*

tag1*n表示生成n个标签(元素)tag1

ul>li*3

效果

<ul>
	<li></li>
    <li></li>
    <li></li>
</ul>
5.生成类名和id:. 和#

tag1.classname1表示给标签(元素)tag1添加类名classname1,可添加多个类名,若没有写tag1则默认创建一个类名为classname1的div

创建带有指定class样式的标签:div.box
<div class="box"></div>
创建带有指定id样式的标签:div#box
 <div id="box"></div>
一个标签创建多个class:div.box1.box2.box3
<div class="box1 box2 box3"></div>
一个标签同时创建class和id:div.box#box2
 <div class="box" id="box2"></div>
6.生成文本内容:{}

tag1{msg}表示在tag1内添加内容msg

h1{abc}

效果

<h1>abc</h1>
7.生成属性:[]

tag1[attr1]表示给标签(元素)tag1添加属性attr1,可包含多个属性

ul>li>a[href='#']

效果:

ul>
  <li>
      <a href="#"></a>
  </li>
</ul>
img[src='pic.jpg' alt='图片']

效果:

<img src="pic.jpg" alt="图片">
// 也可以自定义属性:
ul>li>test[data-content='this_is_data_value']

效果:

<ul>
   <li>
      <test data-content="this_is_data_value"></test>
   </li>
</ul>
8.生成编号:$

$一般用在id名,类名,内容中;当只有一个$时,数字从1开始,当有多个$时,数字从0开始

@n可以让数字从n开始
$需搭配*使用,否则将会原样输出

ul>li.$*3

效果

<ul>
   <li class="1"></li>
   <li class="2"></li>
   <li class="3"></li>
</ul>
ul>li.item$$${666$}*3

效果:

<ul>
	<li class="item001">6661</li>
	<li class="item002">6662</li>
	<li class="item003">6663</li>
</ul>
9.生成分组:()

可更加明确地表示层次关系

ul>li>a^^input

可写为

(ul>li>a)+input

效果:

<ul>
	<li><a href=""></a></li>
</ul>
<input type="text">

后面还有很多上细节的东西,但是个人觉得真的没必要记,记住的话只是浪费时间而已,投入成本与回报偏差极大。

个人见解,大佬勿喷

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要下载VSCodeEmmet插件,你可以按照以下步骤进行操作: 1. 打开VS Code,确保已经成功安装了VS Code。 2. 点击左侧的扩展图标(四个方块组成的小正方形)或使用快捷键Ctrl+Shift+X打开扩展面板。 3. 在搜索框输入"Emmet",然后在搜索结果找到"Emmet"插件。 4. 点击"安装"按钮进行插件的安装。 5. 安装完成后,你就可以使用Emmet插件来提高你的开发效率了。 请注意,为了更好地使用Emmet插件,你可能需要了解一些常用的Emmet语法VSCode的详细教程提到了常用的Emmet语法及举例,你可以参考该教程来学习如何使用Emmet插件进行代码快速编写。 同时,如果你习惯使用IntelliJ IDEA的快捷键,你可以安装VSCode的插件"IntelliJ IDEA Keybindings"来在VSCode使用IDEA的快捷键。 希望以上信息能帮助到你,如果还有其他问题,请随时提问。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [VSCode用法及插件详细教程](https://download.csdn.net/download/zp8126/86920396)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [VS Code 下载安装以及非常好用的插件](https://blog.csdn.net/qq_45515766/article/details/131172738)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值