emmet语法

emmet语法

• https://www.w3cplus.com/tools/emmet-cheat-sheet.html

• sublime安装emmet

  • 按Ctrl+`调出sublime text的console
  • 粘贴以下代码到底部命令行并回车： import urllib2,os;pf=’Package Control.sublime-package’;ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/‘+pf.replace(’ ‘,’%20’)).read())
  • 重启Sublime Text

  • 在Perferences->package settings中看到package control，则表示安装成功

    1. ul>li*5

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

    2. 后代 nav>ul>li

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

    3. 兄弟 div+p+bq

           <div>div>
           <p>p>
           <blockquote>blockquote>

    4. 上级 div+div>p>span+em^bq

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

    5. div+div>p>span+em^^bq

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

    6. 分组 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>

    7. (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>

    8. 乘法 ul>li*5

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

    9. 自增 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>

    10. h [title=item ]{header $}*3

            <ul>
                <li class="item1">li>
                <li class="item2">li>
                <li class="item3">li>
                <li class="item4">li>
                <li class="item5">li>
            ul>

    11. 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>

    12. 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>

    13. 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>

    14. ID和类属性 #header

            <div id="header">div>

    15. .title

            <div class="title">div>

    16. form#search.wide

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

    17. p.class1.class2.class3

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

    18. 自定义属性 p[title=”Hello world”]

            <p title="Hello world">p>

    19. td[rowspan=2 colspan=3 title]

            <td rowspan="2" colspan="3" title="">td>

    20. [a=’value’ b=”value2”]

            <div a="value" b="value2">div>

    21. 文本{} a{click me}

            <a href="">click mea>

    22. p>{click}+a{here}+{to continue}

            <p>click<a href="">herea>to continuep>

    23. 隐式标签 .class

            
        class></div>

    24. em>.class

            class></span></em>

    25. ul>.class

            <ul>
                <li class>li>
            ul>

    26. table>.row>.col

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

    27. a

            <a href="">a>

    28. a:link

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

    29. a:mail

            <a href="mailto:">a>

    30. abbr

            <abbr title="">abbr>

    31. acronym

            <acronym title="">acronym>

    32. base

            <base href="">

    33. basefont

            <basefont>

    34. br

            <br>

    35. frame

            <frame>

    36. hr

            <hr>

    37. bdo

            <bdo dir="">bdo>

    38. bdo:r

            <bdo dir="rtl">bdo>

    39. bdo:l

            <bdo dir="ltr">bdo>

    40. col

            col>

    41. link

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

    42. link:css

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

    43. link:print

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

    44. link:favicon

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

    45. link:touch

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

    46. link:rss

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

    47. link:atom

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

    48. meta

            <meta>

    49. meta:utf

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

    50. meta:win

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

    51. meta:vp

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

    52. meta:compat

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

    53. style

            <style>style>

    54. script

            <script>script>

    55. script:src

            <script src="">script>

    56. img

            <img src="" alt="">

    57. iframe

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

    58. embed

            "" type="">

    59. object

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

    60. param

            <param name="" value="">

    61. map

            <map name="">map>

    62. area

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

    63. area:c

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

    64. area:r

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

    65. area:p

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

    66. form

            <form action="">form>

    67. form:get

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

    68. form:post

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

    69. label

            <label for="">label>

    70. input

            type="text">

    71. inp

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

    72. input:hidden

            type="hidden" name="">

    73. input:h

            type="hidden" name="">

    74. input:hidden

            type="hidden" name="">

    75. input:text,input:t

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

    76. input:search

            type="search" name="" id="">

    77. input:email

            type="email" name="" id="">

    78. input:url

            type="url" name="" id="">

    79. input:password

            type="password" name="" id="">

    80. input:p

            type="password" name="" id="">

    81. input:datetime

            type="datetime" name="" id="">

    82. input:date

            type="date" name="" id="">

    83. input:datetime-local

            type="datetime-local" name="" id="">

    84. input:month

            type="month" name="" id="">

    85. input:week

            type="week" name="" id="">

    86. input:time

            type="time" name="" id="">

    87. input:number

            type="number" name="" id="">

    88. input:color

            type="color" name="" id="">

    89. input:checkbox

            type="checkbox" name="" id="">

    90. input:c

            type="checkbox" name="" id="">

    91. input:r

            type="radio" name="" id="">

    92. input:range

            type="range" name="" id="">

    93. input:file

            type="file" name="" id="">

    94. input:f

            type="file" name="" id="">

    95. input:s

            type="submit" value="">

    96. input:image

            type="image" src="" alt="">

    97. input:i

            type="image" src="" alt="">

    98. input:button

            type="button" value="">

    99. input:b

            type="button" value="">

    100. isindex

             <isindex>

    101. input:reset

             type="reset" value="">

    102. select

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

    103. option

             <option value="">option>

    104. textarea

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

    105. menu:context

             <menu type="context">menu>

    106. menu:c

             <menu type="context">menu>

    107. menu:toolbar

             <menu type="toolbar">menu>

    108. menu:t

             <menu type="toolbar">menu>

    109. video

             <video src="">video>

    110. audio

             <audio src="">audio>

    111. html:xml

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

    112. keygen

             <keygen>

    113. command

             <command>

    114. bq

             <blockquote>blockquote>

    115. acr

             <acronym title="">acronym>

    116. fig

             <figure>figure>

    117. figc

             <figcaption>figcaption>

    118. ifr

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

    119. emb

             "" type="">

    120. obj

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

    121. src

             <source>source>

    122. cap

             <caption>caption>

    123. colg

             <colgroup>colgroup>

    124. fst,fest

             <fieldset>fieldset>

    125. btn

             <button>button>

    126. btn:r

             <button type="reset">button>

    127. btn:s

             <button type="submit">button>