emmet语法_emmet语法规则 - CSDN
精华内容
参与话题
  • 【Emmet】HTML速写之Emmet语法规则

    万次阅读 多人点赞 2020-09-09 17:26:30
    这里推荐一个Emmet语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构,下面会介绍如何使用。 Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都...

    Emmet—写HTML/CSS快到飞起

    在前端开发的过程中,最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等,头疼。这里推荐一个Emmet语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构,下面会介绍如何使用。

    Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都可以使用该语法规则,我们平时开发的Sublime TextEclipseNotepad++VS codeAtomDreamweaver等等编辑器都可以使用。

    安装方式和平时安装插件一样搜索这个emmet插件安装,每个编辑器安装方式不同,请各自尝试


    先来个例子:

    这里写图片描述
    这个普通的HTML结构,你需要多久打出来呢?
    我只需要几秒钟,写好下面这条语句,按下键盘Tab键即可看到上图中的结构了

    div#box>p.title+ul.list>li.child$*3{我是第$个}^div#box2
    

    是不是很爽,很快~~啊 ~ 啊~,仅仅一行代码就生成了一个复杂的HTML结构,并且id,class,内容都对应的上


    开始讲解语法吧

    1:html初始结构

    下图中的结构,偷懒的都会直接一个!=> Tab 解决,这样可以快速生成基础的结构,同时防止手写时忘记某个代码块,输入错误的代码。
    这里写图片描述

    2:id(#),class(.)

    id指令:# ; class指令:.

    • div#test
    <div id="test"></div>
    
    • div.test
    <div class="test"></div>
    

    3:子节点(>),兄弟节点(+),上级节点(^)

    子节点指令:> ; 兄弟节点指令:+ ; 上级节点:^

    • div>ul>li>p
    <div>
       <ul>
         <li>
           <p></p>
         </li>
       </ul>
     </div>
    
    • div+ul+p
    <div></div>
    <ul></ul>
    <p></p>
    
    • div>ul>li^div (这里的^是接在li后面所以在li的上一级,与ul成了兄弟关系,当然两个^^就是上上级)
    <div>
       <ul>
         <li></li>
       </ul>
       <div></div>
     </div>
    

    4:重复(*)

    重复指令:*

    • div*5(*号后面添加数字表示重复的元素个数
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
    

    5:分组(())

    分组指令:()

    • div>(ul>li>a)+div>p
      括号里面的内容为一个代码块,表示与括号内部嵌套和外面的的层级无关
    <div>
       <ul>
         <li><a href=""></a></li>
       </ul>
       <div>
         <p></p>
       </div>
     </div>
    

    解释:这里如果不加括号的话,猜想下,a+div这样div就是和a是兄弟关系了,会包含在li里面。懂了吧哈哈

     <div>
       <ul>
         <li>
           <a href=""></a>
           <div>
             <p></p>
           </div>
         </li>
       </ul
    

    6:属性([attr])——id,class都有怎么能少了属性呢

    属性指令:[]

    • a[href=’###’ name=‘xiaoA’] (中括号内填写属性键值对的形式,并且空格隔开
    <a href="###" name="xiaoA"></a>
    

    ###6:编号($)
    编号指令:$

    • ul>li.test$*3 ($代表一位数,后面更上*数字就代表从1递增到填写的数字
     <ul>
       <li class="test1"></li>
       <li class="test2"></li>
       <li class="test3"></li>
     </ul>
    

    注意

    • 一个$ 代表一位数,$$就是两位数了,以此类推就可以形成$(1),$$(01),$$$(001)
    • 如果想自定义从几开始递增的话就利用:$@+数字*数字
      例如:ul>li*3.test$@3
     <ul>
       <li class="test3"></li>
       <li class="test4"></li>
       <li class="test5"></li>
     </ul>
    

    7:文本({})

    文本指令:{}

    • ul>li.test$*3{测试$} ({里面填写内容,可以和$一起组合使用哦}
    <ul>
      <li class="test1">测试1</li>
      <li class="test2">测试2</li>
      <li class="test3">测试3</li>
    </ul>
    

    8:隐式标签

    这个标签没有指令,而是部分标签可以不使用输入标签,直接输入指令,即可识别父类标签。

    例如:.test

    <div class="test"></div>
    

    例如:ul>.test$*3

     <ul>
       <li class="test1"></li>
       <li class="test2"></li>
       <li class="test3"></li>
     </ul>
    

    例如:select>.test$*5

    <select name="" id="">
      <option class="test1"></option>
      <option class="test2"></option>
      <option class="test3"></option>
      <option class="test4"></option>
      <option class="test5"></option>
    </select>
    

    等等…
    隐私标签有如下几个:

    • li:用于 ul 和 ol 中
    • tr:用于 table、tbody、thead 和 tfoot 中
    • td:用于 tr 中
    • option:用于 select 和 optgroup 中

    最后就是:看没用,操作几遍,几分钟你就能掌握这些指令,然后飞快的撸码

    展开全文
  • emmet常用语法总结

    2017-06-01 10:08:44
    使用方法 emmet的使用方法也非常简单,以sublime text为例,直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码...语法: 后代:> 缩写:nav>ul>li nav> ul> li>li> ul> nav>

    使用方法

    emmet的使用方法也非常简单,以sublime text为例,直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码片段。(如果与已有的快捷键有冲突的话,可以自行在编辑器中将拓展键设为其他快捷键)

    语法:

    后代:>

    缩写:nav>ul>li

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

    兄弟:+

    缩写: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>p>span+em^^bq

    <div></div>
    <div>
        <p><span></span><em></em></p>
    </div>
    <blockquote></blockquote>
    

    分组:()

    缩写: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>
    

    乘法:*

    缩写:ul>li*5

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

    自增符号:$

    缩写: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>
    

    ID和类属性

    缩写:#header

    <div id="header"></div>
    

    缩写:.title

    <div class="title"></div>
    

    缩写:form#search.wide

    <form id="search" class="wide"></form>
    

    缩写:p.class1.class2.class3

    <p class="class1 class2 class3"></p>
    

    自定义属性

    缩写: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>
    

    文本:{}

    缩写:a{Click me}

    <a href="">Click me</a>
    

    缩写:p>{Click }+a{here}+{ to continue}

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

    隐式标签

    缩写:.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>
    

    HTML

    所有未知的缩写都会转换成标签,例如,foo → <foo></foo>

    缩写:!

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    
    </body>
    </html>
    

    缩写:a

    <a href=""></a>
    

    缩写:a:link

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

    缩写:a:mail

    <a href="mailto:"></a>
    

    缩写:abbr

    <abbr title=""></abbr>
    

    缩写:acronym

    <acronym title=""></acronym>
    

    缩写:base

    <base href="" />
    

    缩写:basefont

    <basefont />
    

    缩写:br

    <br />
    

    缩写:frame

    <frame />
    

    缩写:hr

    <hr />
    

    缩写:bdo

    <bdo dir=""></bdo>
    

    缩写:bdo:r

    <bdo dir="rtl"></bdo>
    

    缩写:bdo:l

    <bdo dir="ltr"></bdo>
    

    缩写:col

    <col />
    

    缩写:link

    <link rel="stylesheet" href="" />
    

    缩写:link:css

    <link rel="stylesheet" href="style.css" />
    

    缩写:link:print

    <link rel="stylesheet" href="print.css" media="print" />
    

    缩写:link:favicon

    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    

    缩写:link:touch

    <link rel="apple-touch-icon" href="favicon.png" />
    

    缩写:link:rss

    <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
    

    缩写:link:atom

    <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
    

    缩写:meta

    <meta />
    

    缩写:meta:utf

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    

    缩写:meta:win

    <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
    

    缩写:meta:vp

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    

    缩写:meta:compat

    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    

    缩写:style

    <style></style>
    

    缩写:script

    <script></script>
    

    缩写:script:src

    <script src=""></script>
    

    缩写:img

    <img src="" alt="" />
    

    缩写:iframe

    <iframe src="" frameborder="0"></iframe>
    

    缩写:embed

    <embed src="" type="" />
    

    缩写:object

    <object data="" type=""></object>
    

    缩写:param

    <param name="" value="" />
    

    缩写:map

    <map name=""></map>
    

    缩写:area

    <area shape="" coords="" href="" alt="" />
    

    缩写:area:d

    <area shape="default" href="" alt="" />
    

    缩写:area:c

    <area shape="circle" coords="" href="" alt="" />
    

    缩写:area:r

    <area shape="rect" coords="" href="" alt="" />
    

    缩写:area:p

    <area shape="poly" coords="" href="" alt="" />
    

    缩写:form

    <form action=""></form>
    

    缩写:form:get

    <form action="" method="get"></form>
    

    缩写:form:post

    <form action="" method="post"></form>
    

    缩写:label

    <label for=""></label>
    

    缩写:input

    <input type="text" />
    

    缩写:inp

    <input type="text" name="" id="" />
    

    缩写:input:hidden

    别名:input[type=hidden name]

    <input type="hidden" name="" />
    

    缩写:input:h

    别名:input:hidden

    <input type="hidden" name="" />
    

    缩写:input:text, input:t

    别名:inp

    <input type="text" name="" id="" />
    

    缩写:input:search

    别名:inp[type=search]

    <input type="search" name="" id="" />
    

    缩写:input:email

    别名:inp[type=email]

    <input type="email" name="" id="" />
    

    缩写:input:url

    别名:inp[type=url]

    <input type="url" name="" id="" />
    

    缩写:input:password

    别名:inp[type=password]

    <input type="password" name="" id="" />
    

    缩写:input:p

    别名:input:password

    <input type="password" name="" id="" />
    

    缩写:input:datetime

    别名:inp[type=datetime]

    <input type="datetime" name="" id="" />
    

    缩写:input:date

    别名:inp[type=date]

    <input type="date" name="" id="" />
    

    缩写:input:datetime-local

    别名:inp[type=datetime-local]

    <input type="datetime-local" name="" id="" />
    

    缩写:input:month

    别名:inp[type=month]

    <input type="month" name="" id="" />
    

    缩写:input:week

    别名:inp[type=week]

    <input type="week" name="" id="" />
    

    缩写:input:time

    别名:inp[type=time]

    <input type="time" name="" id="" />
    

    缩写:input:number

    别名:inp[type=number]

    <input type="number" name="" id="" />
    

    缩写:input:color

    别名:inp[type=color]

    <input type="color" name="" id="" />
    

    缩写:input:checkbox

    别名:inp[type=checkbox]

    <input type="checkbox" name="" id="" />
    

    缩写:input:c

    别名:input:checkbox

    <input type="checkbox" name="" id="" />
    

    缩写:input:radio

    别名:inp[type=radio]

    <input type="radio" name="" id="" />
    

    缩写:input:r

    别名:input:radio

    <input type="radio" name="" id="" />
    

    缩写:input:range

    别名:inp[type=range]

    <input type="range" name="" id="" />
    

    缩写:input:file

    别名:inp[type=file]

    <input type="file" name="" id="" />
    

    缩写:input:f

    别名:input:file

    <input type="file" name="" id="" />
    

    缩写:input:submit

    <input type="submit" value="" />
    

    缩写:input:s

    别名:input:submit

    <input type="submit" value="" />
    

    缩写:input:image

    <input type="image" src="" alt="" />
    

    缩写:input:i

    别名:input:image

    <input type="image" src="" alt="" />
    

    缩写:input:button

    <input type="button" value="" />
    

    缩写:input:b

    别名:input:button

    <input type="button" value="" />
    

    缩写:isindex

    <isindex />
    

    缩写:input:reset

    别名:input:button[type=reset]

    <input type="reset" value="" />
    

    缩写:select

    <select name="" id=""></select>
    

    缩写:option

    <option value=""></option>
    

    缩写:textarea

    <textarea name="" id="" cols="30" rows="10"></textarea>
    

    缩写:menu:context

    别名:menu[type=context]>

    <menu type="context"></menu>
    

    缩写:menu:c

    别名:menu:context

    <menu type="context"></menu>
    

    缩写:menu:toolbar

    别名:menu[type=toolbar]>

    <menu type="toolbar"></menu>
    

    缩写:menu:t

    别名:menu:toolbar

    <menu type="toolbar"></menu>
    

    缩写:video

    <video src=""></video>
    

    缩写:audio

    <audio src=""></audio>
    

    缩写:html:xml

    <html xmlns="http://www.w3.org/1999/xhtml"></html>
    

    缩写:keygen

    <keygen />
    

    缩写:command

    <command />
    

    缩写:bq

    别名:blockquote

    <blockquote></blockquote>
    

    缩写:acr

    别名:acronym

    <acronym title=""></acronym>
    

    缩写:fig

    别名:figure

    <figure></figure>
    

    缩写:figc

    别名:figcaption

    <figcaption></figcaption>
    

    缩写:ifr

    别名:iframe

    <iframe src="" frameborder="0"></iframe>
    

    缩写:emb

    别名:embed

    <embed src="" type="" />
    

    缩写:obj

    别名:object

    <object data="" type=""></object>
    

    缩写:src

    别名:source

    <source></source>
    

    缩写:cap

    别名:caption

    <caption></caption>
    

    缩写:colg

    别名:colgroup

    <colgroup></colgroup>
    

    缩写:fst, fset

    别名:fieldset

    <fieldset></fieldset>
    

    缩写:btn

    别名:button

    <button></button>
    

    缩写:btn:b

    别名:button[type=button]

    <button type="button"></button>
    

    缩写:btn:r

    别名:button[type=reset]

    <button type="reset"></button>
    

    缩写:btn:s

    别名:button[type=submit]

    <button type="submit"></button>
    著作权归作者所有。
    商业转载请联系作者获得授权,非商业转载请注明出处。
    原文: http://www.w3cplus.com/tools/emmet-cheat-sheet.html © w3cplus.com
    展开全文
  • Emmet语法

    2020-09-30 15:50:34
    示例: div#box>p.title+ul.list>li.child$*3{我是第$个}^div#box2 或者 #box>p.title+(ul.list>li.child$*3)+#box2 ...-- .col-lg-3.col-md-3.col-sm-4.col-xs-6*8>...div class="col-lg-3 col-md-3 col...

    示例:

    div#box>p.title+ul.list>li.child$*3{我是第$个}^div#box2
    

    或者

    #box>p.title+(ul.list>li.child$*3)+#box2
    


    <!-- .col-lg-3.col-md-3.col-sm-4.col-xs-6*8>img[src="img/$.jpg"] -->
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/1.jpg" alt=""></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/2.jpg" alt=""></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/3.jpg" alt=""></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/4.jpg" alt=""></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/5.jpg" alt=""></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/6.jpg" alt=""></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/7.jpg" alt=""></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/8.jpg" alt=""></div>
    

    一、子节点(>),兄弟节点(+),上级节点(^)

    div>ul>li^div (这里的^是接在li后面所以在li的上一级,与ul成了兄弟关系,当然两个^^就是上上级)

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

    二、重复(*)

    用“$”符号实现1到n的自动编号(“*”实现多个元素)

    // 输入
    li.item$*3
    
    // 按下TAB键
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    

    可在 “$” 后添加 “@n” 修改编号的起始值为n。

    // 输入
    li.item$@3*3
    
    // 按下TAB键
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    

    可在 “$” 后添加 “@-” 修改编号的方向。

    // 输入
    li.item$@-3*3
    
    // 按下TAB键
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    
    // 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>
    

    三、 分组 ()

    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>
    

    四、隐式标签

    这个标签没有指令,而是部分标签可以不使用输入标签,直接输入指令,即可识别父类标签。

    例如:.test

    <div class="test"></div>
    

    例如:ul>.test$*3

     <ul>
       <li class="test1"></li>
       <li class="test2"></li>
       <li class="test3"></li>
     </ul>
    
    

    例如:select>.test$*5

    <select name="" id="">
      <option class="test1"></option>
      <option class="test2"></option>
      <option class="test3"></option>
      <option class="test4"></option>
      <option class="test5"></option>
    </select>
    

    例如:table>.row>.col

    <table>
        <tr class="row">
            <td class="col"></td>
        </tr>
    </table>
    

    例如:em>.class

    <em><span class="class"></span></em>
    

    五、css缩写

    六、属性([attr])

    参考:

    https://blog.csdn.net/fghsfeyhdf/article/details/78069259

    https://www.cnblogs.com/dirgo/p/10239161.html (超全,推荐)

    https://blog.csdn.net/qq_33744228/article/details/80910377#commentBox

    展开全文
  • emmet语法

    2020-03-07 11:59:41
    emmet语法 在前端开发的过程中,最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等,头疼。这里推荐一个Emmet语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行代码就能生成你想要...

                                         emmet语法

    在前端开发的过程中,最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等,头疼。这里推荐一个Emmet语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构。

    Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。

    1. 快速生产html骨架:!+ tab键盘

    1. 快速创建某个元素,并指定id、class属性值 id(#),class(.) +tab键盘

    div.allen

    div#my_id

    1. 子节点(>),兄弟节点(+),上级节点(^)

    div>ul>li>p + tab键盘

    div+ul+p  + tab键盘

    没有成功

    1. 重复(*)

    div*5(*号后面添加数字表示重复的元素个数

    1. 分组(())

    (括号里面的内容为一个代码块,表示与括号内部嵌套和外面的的层级无关)

    div>(ul>li>a)+div>p

    去掉括号,div>ul>li>a+div>p

    1. 属性

    1. 文本

    1. 隐式标签

     

    h41 + tab键àheight:41px; 要写在样式里,

    w66 + tab键àwidth:66px

    按住滚轮拖动滚轮:批量输入

    Div*4 + tab键—>生产4个div标签

    Ul>li*5>a + tab键à生产一个ul标签下有5个li子标签,每个li标签又都有一个a标签

    .one“+”.two   + tab键à生产2个div并且其class属性值分别是one、two

    .allen{家用电器}++ tab键—>

    展开全文
  • emmet 语法

    千次阅读 2018-09-01 21:50:14
    关于 HTML 中的 emmet 语法心得 一 . 生成带有id,class的HTML标签 1 . #abc 生成一个ID名为 abc 的 div 效果如下: &lt;div id="abc"&gt;&lt;/div&gt; 2 . ol#bbb.ddd 生成...
  • Emmet--语法手册

    2020-07-28 23:30:53
    Emmet--语法手册
  • emmet 基本语法汇总

    2014-05-24 19:16:13
    Emmet是一个可以提高前端开发效率的实用插件,你可以通过极短的代码输入来获得你想要的代码结构,而你需要做的前期工作就是花些时间来熟悉emmet本身的语法,其实这些语法看起来并不复杂,下面就向大家分享一下emmet...
  • 常用的 Emmet 语法

    2019-01-17 17:05:55
    Emmet 是一个快速书写 HTML 代码的工具,被...常用语法展示: &lt;!-- div --&gt; &lt;div&gt;&lt;/div&gt; &lt;!-- div#name --&gt; &lt;div id="name"&...
  • 前端Emmet语法小结

    万次阅读 2019-12-15 00:35:55
    emmet语法名称 操作符 Child(子标签) > Sibling (兄弟标签) + Climb-up(上级元素) ^ Grouping(分组) () Multiplication(重复多份) * Item numbering(编号) $ ID #...
  • 使用VsCode自带的Emmet语法: 新建html文件,保存之后,输入“!”,按Tap(或Enter)键,自动生成HTML结构 标签只要直接输入标签名(不要输入&amp;amp;lt;&amp;amp;gt;),按Tap(或Enter)键自动生成...
  • HTML->Emmet语法

    千次阅读 2018-09-07 21:27:18
    2.emmet语法规则: 元素嵌套: 子元素嵌套: //输入: div&amp;amp;amp;gt;div&amp;amp;amp;gt;div //输出: &amp;amp;amp;lt;div&amp;amp;amp;gt; &amp;amp;amp;lt;div&amp;amp;amp;gt...
  • Emmet 语法

    2018-06-05 17:22:57
    什么是 Emmet 语法? 简单来说,就是可以快速构建 HTML 结构的快捷语法。 我大多数使用的是 Webstrom 代码编辑器,因此是内置了 Emmet 语法的。这次使用的是 Sublime 编辑器,这就需要去网上下载相应插件,在网上...
  • 前端开发神器 Emmet: 生成 HTML 文档初始结构 html:5 或者 ! 生成 HTML5 结构 html:xt 生成 HTML4 过渡型 html:4s 生成 HTML4 严格型 生成带有 id 、class 的 HTML 标签 ul#ccc.ddd 生成后代:> div.aaa>...
1 2 3 4 5 ... 20
收藏数 5,392
精华内容 2,156
关键字:

emmet语法