前端Emmet插件使用

一、简介

1.Emmet是一个提高前端开发效率的编辑器插件,主要用于HTMLCSS的编写。它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。官网:https://www.emmet.io/

 

2.个人目前使用的是VS CODE编辑器。VsCode内置了Emmet语法,而且还有Emmet的语法提示。在后缀为.html/.css的文件中输入缩写后按Tab键即会自动生成相应代码。

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

 

二、HTML

1.语法规则

E 代表HTML标签。

E#id 代表id属性。

E.class 代表class属性。

E[attr=foo] 代表某一个自定义属性。

E{foo} 代表标签包含的内容是foo

E>N 代表NE的子元素。

E+N 代表NE的同级元素。

E^N 代表NE的上级元素。

E*N 代表生成NE元素。

 

2.元素(Elements

使用元素的名称和缩写,Emmet会自动转换成对应标签。

栗子:
div =>

 
 

foo =>   

html:5 => 将生成html5标准的包含body为空基本dom

html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML

html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01

a:mail => href="mailto:"> 

a:link => href="http://"> 

base => href=""> 

br =>
 

c=>

link => rel="stylesheet" href=""> 

script:src =>  

form:get =>

action="" method="get">
 

label =>  

input => type="text"> 

inp => type="text" name="" id=""> 

input:hidden => type="hidden" name=""> input:h亦可

input:email => type="email" name="" id=""> 

input:password => type="password" name="" id=""> 

input:checkbox => type="checkbox" name="" id=""> 

input:radio => type="radio" name="" id=""> 

select =>  

option =>  

bq =>

 

btn =>  

btn:s =>  

btn:r =>

 

3.文本操作符(Text

div{这是一段文本}  =>  

这是一段文本
 

a{点我点我}  =>  href="">点我点我

 

4.属性操作符(Attribute operators

id=#class=.

div.test => <div class="test">div>

div#page => <div id="page">div>

p.my => <p class="my">p>

input.name1.name2.name3 => <input type="text" class="name1 name2 name3">

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

.class => <div class="class">div>

em>.class => <em><span class="class">span>em>

table>.row>.col

=>

<table>

<tr class="row">

<td class="col">td>

tr>

table>

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

a[data1='test' data2=''] => <a href="" data1="test" data2="">a>

 

5.嵌套操作符(Nesting operators)(嵌套操作符可以配合元素属性进行连写)

子级(>):生成左侧元素的子级元素

div#id2>ul>div#id3 =>

<div id="id2">

<ul>

<div id="id3">div>

ul>

div>

同级(+):生成左侧元素的同级元素

div#id2>ul+div#id3 =>

<div id="id2">

<ul>ul>

<div id="id3">div>

div>

父级(+):生成左侧元素的父级元素的兄弟元素

div>p.parent>span.child^ul.brother^li =>

<div>

<p class="parent"><span class="child">span>p>

<ul class="brother">ul>

div>

<li>li>

 

6.分组操作符(分组使用()来实现缩写的分离)

比如这个例子:如果不加括号那么a将作为span的子级元素生成.加上括号a将于()内的元素同级。

div>(ul>li+span)>a   vs code中需要改成:div>(ul>li+span)a=>

<div>

<ul>

<li>li>

<span>span>

ul>

<a href="">a>

div>

 

7.乘法操作符(*

p>span*3 =>

<p>

<span>span>

<span>span>

<span>span>

p>

 

(ul>li)*3=>

 

8.自动计数($

p>span.name${number_$}*3 =>

<p>

<span class="name1">number_1span>

<span class="name2">number_2span>

<span class="name3">number_3span>

p>

如果生成两位数则使用两个连续的$$,更多位数以此类推。
使用@修饰符,可以更改编号的升序、降序和基数(起始值):

注意这个操作符在$之后添加,@-表示降序,@+表示升序,默认使用升序。@N可以改变起始值.需要注意的是如果配合升降序使用的话N是放到+-符号后。

ul>li.name$@-*3

<ul>

<li class="name3">li>

<li class="name2">li>

<li class="name1">li>

ul>

 

ul>li.number$@10*3

<ul>

<li class="number10">li>

<li class="number11">li>

<li class="number12">li>

ul>

 

9.模拟文本/随机文本(lorem)

Emmet内置了Lorem Ipsum功能来实现.loremN或者lipsumN,N表示生成的单词数,正整数.可以不填.

 

lorem3 => Lorem ipsum dolor.

lorem4 => Lorem ipsum dolor sit.

lorem5 => Lorem ipsum dolor sit amet.

 

(p>lorem4)*3 =>

<p>Lorem ipsum dolor sit.p>

<p>Eos soluta sint impedit.p>

<p>Accusamus ea quam nobis.p>

 

例子:

div.nav>(nav#navbar>(ul>li>(a[href="/xxx/product/$" data-index=$]>lorem4)*5))+div.btn[type='button']>span{--}^^div#main

 

10.包装文本

 

自定义文本1

自定义文本1

自定义文本1

期望如下:

<nav>

  <ul>

    <li>自定义文本1li>

    <li>自定义文本2li>

    <li>自定义文本3li>

  ul>

nav>

实现步骤:

1.选中文本,按下ctrl+shift+p打开命令窗口输入Emmet:wrap.sublime的快捷键为ctrl+shift+G)

2.选择Emmet:使用缩写进行包装(Wrap with Abbreviation)选项

3.输入缩写字符nav>ul>li*,按下回车键即可看到效果.(vs code默认不支持)

 

PS:

输入的缩写代码中*所在位置不同得到的效果也是不同的。

如果给的文本带有序号的情况,我们也是可以通过缩写“|t”来删除序号。如:nav>ul>li*|t

 

11.HTML缩写栗子:

 

 

缩写:a

 

缩写:a:link

 

缩写:a:mail

 

缩写:abbr

 

缩写:acronym

 

缩写:base

 

缩写:basefont

 

缩写:br


 

缩写:frame

 

缩写:hr


 

缩写:bdo

 

缩写:bdo:r

 

缩写:bdo:l

 

缩写:col

 

缩写:link

 

缩写:link:css

 

缩写:link:print

 

缩写:link:favicon

 

缩写:link:touch

 

缩写:link:rss

 

缩写:link:atom

 

缩写:meta

 

缩写:meta:utf

 

缩写:meta:win

 

缩写:meta:vp

 

缩写:meta:compat

 

缩写:style

 

缩写:script

 

缩写:script:src

 

缩写:img

 

缩写:iframe

 

缩写:embed

 

缩写:object

 

缩写:param

 

缩写:map

 

缩写:area

 

缩写:area:d

 

缩写:area:c

 

缩写:area:r

 

缩写:area:p

 

缩写:form

 

缩写:form:get

 

缩写:form:post

 

缩写:label

 

缩写:input

 

缩写:inp

 

缩写:input:hidden

别名:input[type=hidden name]

 

缩写:input:h

别名:input:hidden

 

缩写:input:text, input:t

别名:inp

 

缩写:input:search

别名:inp[type=search]

 

缩写:input:email

别名:inp[type=email]

 

缩写:input:url

别名:inp[type=url]

 

缩写:input:password

别名:inp[type=password]

 

缩写:input:p

别名:input:password

 

缩写:input:datetime

别名:inp[type=datetime]

 

缩写:input:date

别名:inp[type=date]

 

缩写:input:datetime-local

别名:inp[type=datetime-local]

 

缩写:input:month

别名:inp[type=month]

 

缩写:input:week

别名:inp[type=week]

 

缩写:input:time

别名:inp[type=time]

 

缩写:input:number

别名:inp[type=number]

 

缩写:input:color

别名:inp[type=color]

 

缩写:input:checkbox

别名:inp[type=checkbox]

 

缩写:input:c

别名:input:checkbox

 

缩写:input:radio

别名:inp[type=radio]

 

缩写:input:r

别名:input:radio

 

缩写:input:range

别名:inp[type=range]

 

缩写:input:file

别名:inp[type=file]

 

缩写:input:f

别名:input:file

 

缩写:input:submit

 

缩写:input:s

别名:input:submit

 

缩写:input:image

 

缩写:input:i

别名:input:image

 

缩写:input:button

 

缩写:input:b

别名:input:button

 

缩写:isindex

 

缩写:input:reset

别名:input:button[type=reset]

 

缩写:select

 

缩写:option

 

缩写:textarea

 

缩写:menu:context

别名:menu[type=context]

 

缩写:menu:c

别名:menu:context

 

缩写:menu:toolbar

别名:menu[type=toolbar]

 

缩写:menu:t

别名:menu:toolbar

 

缩写:video

 

缩写:audio

 

缩写:html:xml

 

缩写:keygen

 

缩写:command

 

缩写:bq

别名:blockquote

 

缩写:acr

别名:acronym

 

缩写:fig

别名:figure

 

缩写:figc

别名:figcaption

 

缩写:ifr

别名:iframe

 

缩写:emb

别名:embed

 

缩写:obj

别名:object

 

缩写:src

别名:source

 

缩写:cap

别名:caption

 

缩写:colg

别名:colgroup

 

缩写:fst, fset

别名:fieldset

 

缩写:btn

别名:button

 

缩写:btn:b

别名:button[type=button]

 

缩写:btn:r

别名:button[type=reset]

 

缩写:btn:s

别名:button[type=submit]

 

 

三、CSS

官方文档:https://docs.emmet.io/css-abbreviations/

 

 

参考链接:https://www.cnblogs.com/summit7ca/p/6944215.html

你可能感兴趣的:(编辑器)