In the process of front-end development, the preparation of HTML, CSS code is always accounted for a large proportion of the work. In particular manually write the HTML code, particularly low efficiency, because of the need of various beat "angle brackets" closing labels. And now Emmet is to improve the efficiency of the birth of code written, it provides a very concise syntax rules, and then generates the corresponding HTML or CSS code structure at once, as well as a variety of useful features to help carry out front-end development.
You may have heard a powerful tool similar function: Zen Coding, the relatively old, and now Emmet is an upgraded version of Zen Coding, developed by the original author, etc. Zen Coding. On Emmet strict sense, is not a software or tool, it is a plug-in editor, an editor must be based on use. It currently supports the following editors:
Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat (可以通过 “Install Mixin” 对话框安装)
Komodo Edit/IDE ( Tools → Add-ons)
Notepad++
PSPad
<textarea>
CodeMirror2/3
Brackets
Click on the above list editor you are currently using, you can get the corresponding plug-in file, you can use after the installation of the related functions Emmet. Since Sublime text 2 is currently the best and most powerful front-end development code editor, so this paper to Sublime text 2, for example, to explain the installation and basic grammar of Emmet.
text 2 are mounted Sublime Emmet
Sbulime text 2 Plug sure to pass this Package Control plug-in, if you have not installed this plug-in, pay close attention to the installation go about it. After the installation is complete, we pressed the "shift + ctrl + p" outgoing panel, enter "pci" to lock "Package Control: Install Package" this feature, then Enter to see a list, we continue to enter "emmet" you can find this plug-in, such as a carriage return after a few moments to complete the installation.
Emmet started
Emmet can quickly write HTML and CSS as well as implement other functions. It is based on "language" to determine the current file to HTML using CSS syntax or grammar to parse. For example .html suffix to the current file that Sublime text 2 will be a way to parse HTML highlight the file, Emmet will be based on HTML syntax for the command you typed compiled HTML structure. If it is a .c file in the C language, the command you write out according to the syntax of Emmet, will not be compiled.
In addition, the file without a suffix, you can press down "shift + ctrl + p" outgoing panel, enter "seth" you can choose to use the current document is HTML mode or modes of other programming languages to explain. Here is a Emmet instructions:
#page>div.logo+ul#navigation>li*5>a{Item $}
We copy it to Sublime text 2 has been open an HTML file, this time knocking at the TAB key, you will find this line into a command structure following HTML:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
how about it? It is amazing, just write a line of code, you can generate such a complex HTML structure, but also can claim the corresponding class, id and content. This line of command you now might read, the following will explain in detail the syntax, you now just need to know Emmet workflow: open an HTML or CSS files -> Press syntax for writing instruction -> pressed the TAB key -> Generate!
Emmet generate HTML structure of basic grammar
Generating an initial HTML document initial structure of an HTML document structure, that is, including doctype, html, head, body and the like meta content. You only need to enter a "!" Can
Reproduced in: https: //my.oschina.net/xxiu/blog/198558