1. Emmet installation method:
Step 1: First you need to install the Package Control component for sublime text:
Press Ctrl + `to call out the console of sublime text
Paste the following code into the bottom command line and press Enter:
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(' ',' ')).read())
Restart Sublime Text
If you see package control in Perferences->package settings, it means the installation is successful
Step 2: Use Package Control to install the Emmet plug-in:
If it has been installed before, you need to remove the package first, search the entire folder for emmet in the sublime root directory, and delete everything you can find.
Press Ctrl + Shift + P command pad
Enter install and then select install Package, then enter emmet to find emmet, click to automatically complete the installation.
Usage method: Adjust the completion shortcut key
Change the default button (The latest version no longer requires setting here):
In settings–package setting–emmet–key binding-user add the following:
[ { "keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}] } ]
Usage: Enter the abbreviation of HTML or CSS code directly in the editor, and then press the tab key to expand it into a complete code snippet.
Installation problem please wait a bit while pyV8 binary error: This is no longer required in the latest version pyv8 package
General solution:https://www.jianshu.com/p/6768a4046bd9Common solution:The latest version is like this. The official github website of emmet for sublime has accepted this problem. and solved it, but it still failed to install using package control. I just installed it twice and it worked. Uninstalled emmet and PyV8 repeatedly. The reason was a problem with pyV8.
2. HTML syntax:
Descendants:>
Abbreviation: nav>ul>li <nav> <ul> <li></li> </ul> </nav>
Brother: +
Abbreviation: div + p + bq <div></div> <p></p> <blockquote></blockquote>
Superior: ^
Abbreviation: div + div>p>span + em^bq <div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div> Abbreviation: div + div>p>span + em^^bq <div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>
Group: ()
Abbreviation: 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> Abbreviation: (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>
Multiplication: *
Abbreviation: ul>li*5 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Auto-increment symbol: $
Abbreviation: 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> Abbreviation: h$[title=item$]{Header $}*3 <h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3> Abbreviation: 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> Abbreviation: 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> Abbreviation: 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 and class attributes
Abbreviation: #header <div id="header"></div> Abbreviation: .title <div class="title"></div> Abbreviation: form#search.wide <form id="search" class="wide"></form> Abbreviation: p.class1.class2.class3 <p class="class1 class2 class3"></p>
Custom attribute
Abbreviation: p[title="Hello world"] <p title="Hello world"></p> Abbreviation: td[rowspan=2 colspan=3 title] <td rowspan="2" colspan="3" title=""></td> Abbreviation: [a='value1' b="value2"] <div a="value1" b="value2"></div>
Text: {}
Abbreviation: a{Click me} <a href="">Click me</a> Abbreviation: p>{Click} + a{here} + { to continue} <p>Click <a href="">here</a> to continue</p>
Implicit tag
Abbreviation: .class <div class="class"></div> Abbreviation: em>.class <em><span class="class"></span></em> Abbreviation: ul>.class <ul> <li class="class"></li> </ul> Abbreviation: table>.row>.col <table> <tr class="row"> <td class="col"></td> </tr> </table>
HTML
All unknown abbreviations are converted to tags, for example, foo →
Abbreviation: ! <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> Abbreviation: a <a href=""></a> Abbreviation: a:link <a href="http://"></a> Abbreviation: a:mail <a href="mailto:"></a> Abbreviation: abbr <abbr title=""></abbr> Abbreviation: acronym <acronym title=""></acronym> Abbreviation: base <base href="" /> Abbreviation: basefont <basefont /> Abbreviation: br <br /> Abbreviation: frame <frame /> Abbreviation: hr <hr /> Abbreviation: bdo <bdo dir=""></bdo> Abbreviation: bdo:r <bdo dir="rtl"></bdo> Abbreviation: bdo:l <bdo dir="ltr"></bdo> Abbreviation: col <col /> Abbreviation: link <link rel="stylesheet" href="" /> Abbreviation: link:css <link rel="stylesheet" href="style.css" /> Abbreviation: link:print <link rel="stylesheet" href="print.css" media="print" /> Abbreviation: link:favicon <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> Abbreviation: link:touch <link rel="apple-touch-icon" href="favicon.png" /> Abbreviation: link:rss <link rel="alternate" type="application/rss + xml" title="RSS" href="rss.xml" /> Abbreviation: link:atom <link rel="alternate" type="application/atom + xml" title="Atom" href="atom.xml" /> Abbreviation: meta <meta /> Abbreviation: meta:utf <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> Abbreviation: meta:win <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" /> Abbreviation: meta:vp <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> Abbreviation: meta:compat <meta http-equiv="X-UA-Compatible" content="IE=7" /> Abbreviation: style <style></style> Abbreviation: script <script></script> Abbreviation: script:src <script src=""></script> Abbreviation: img <img src="" alt="" /> Abbreviation: iframe <iframe src="" frameborder="0"></iframe> Abbreviation: embed <embed src="" type="" /> Abbreviation: object <object data="" type=""></object> Abbreviation: param <param name="" value="" /> Abbreviation: map <map name=""></map> Abbreviation: area <area shape="" coords="" href="" alt="" /> Abbreviation: area:d <area shape="default" href="" alt="" /> Abbreviation: area:c <area shape="circle" coords="" href="" alt="" /> Abbreviation: area:r <area shape="rect" coords="" href="" alt="" /> Abbreviation: area:p <area shape="poly" coords="" href="" alt="" /> Abbreviation: form <form action=""></form> Abbreviation: form:get <form action="" method="get"></form> Abbreviation: form:post <form action="" method="post"></form> Abbreviation: label <label for=""></label> Abbreviation: input <input type="text" /> Abbreviation: inp <input type="text" name="" id="" /> Abbreviation: input:hidden Alias: input[type=hidden name] <input type="hidden" name="" /> Abbreviation: input:h Alias: input:hidden <input type="hidden" name="" /> Abbreviations: input:text, input:t Alias: inp <input type="text" name="" id="" /> Abbreviation: input:search Alias: inp[type=search] <input type="search" name="" id="" /> Abbreviation: input:email Alias: inp[type=email] <input type="email" name="" id="" /> Abbreviation: input:url Alias: inp[type=url] <input type="url" name="" id="" /> Abbreviation: input:password Alias: inp[type=password] <input type="password" name="" id="" /> Abbreviation: input:p Alias: input:password <input type="password" name="" id="" /> Abbreviation: input:datetime Alias: inp[type=datetime] <input type="datetime" name="" id="" /> Abbreviation: input:date Alias: inp[type=date] <input type="date" name="" id="" /> Abbreviation: input:datetime-local Alias: inp[type=datetime-local] <input type="datetime-local" name="" id="" /> Abbreviation: input:month Alias: inp[type=month] <input type="month" name="" id="" /> Abbreviation: input:week Alias: inp[type=week] <input type="week" name="" id="" /> Abbreviation: input:time Alias: inp[type=time] <input type="time" name="" id="" /> Abbreviation: input:number Alias: inp[type=number] <input type="number" name="" id="" /> Abbreviation: input:color Alias: inp[type=color] <input type="color" name="" id="" /> Abbreviation: input:checkbox Alias: inp[type=checkbox] <input type="checkbox" name="" id="" /> Abbreviation: input:c Alias: input:checkbox <input type="checkbox" name="" id="" /> Abbreviation: input:radio Alias: inp[type=radio] <input type="radio" name="" id="" /> Abbreviation: input:r Alias: input:radio <input type="radio" name="" id="" /> Abbreviation: input:range Alias: inp[type=range] <input type="range" name="" id="" /> Abbreviation: input:file Alias: inp[type=file] <input type="file" name="" id="" /> Abbreviation: input:f Alias: input:file <input type="file" name="" id="" /> Abbreviation: input:submit <input type="submit" value="" /> Abbreviation: input:s Alias: input:submit <input type="submit" value="" /> Abbreviation: input:image <input type="image" src="" alt="" /> Abbreviation: input:i Alias: input:image <input type="image" src="" alt="" /> Abbreviation: input:button <input type="button" value="" /> Abbreviation: input:b Alias: input:button <input type="button" value="" /> Abbreviation: isindex <isindex /> Abbreviation: input:reset Alias: input:button[type=reset] <input type="reset" value="" /> Abbreviation: select <select name="" id=""></select> Abbreviation: option <option value=""></option> Abbreviation: textarea <textarea name="" id="" cols="30" rows="10"></textarea> Abbreviation: menu:context Alias: menu[type=context]> <menu type="context"></menu> Abbreviation: menu:c Alias: menu:context <menu type="context"></menu> Abbreviation: menu:toolbar Alias: menu[type=toolbar]> <menu type="toolbar"></menu> Abbreviation: menu:t Alias: menu:toolbar <menu type="toolbar"></menu> Abbreviation: video <video src=""></video> Abbreviation: audio <audio src=""></audio> Abbreviation: html:xml <html xmlns="http://www.w3.org/1999/xhtml"></html> Abbreviation: keygen <keygen /> Abbreviation: command <command /> Abbreviation: bq Alias: blockquote <blockquote></blockquote> Abbreviation: acr Alias:acronym <acronym title=""></acronym> Abbreviation: fig Alias: figure <figure></figure> Abbreviation: figc Alias: figcaption <figcaption></figcaption> Abbreviation: ifr Alias: iframe <iframe src="" frameborder="0"></iframe> Abbreviation: emb Alias: embed <embed src="" type="" /> Abbreviation: obj Alias: object <object data="" type=""></object> Abbreviation: src Alias: source <source></source> Abbreviation: cap Alias: caption <caption></caption> Abbreviation: colg Alias: colgroup <colgroup></colgroup> Abbreviations: fst, fset Alias: fieldset <fieldset></fieldset> Abbreviation: btn Alias: button <button></button> Abbreviation: btn:b Alias: button[type=button] <button type="button"></button> Abbreviation: btn:r Alias: button[type=reset] <button type="reset"></button> Abbreviation: btn:s Alias: button[type=submit] <button type="submit"></button>