Sublime Text3 's powerful plugin emmet introduction

Today toss a half-day sublime Text3 but this plug-in Emmet really strong is to get started.

Section go to Http://blog.csdn.net/mengwuyoulin/article/details/43056733#comments

Detailed Emmet can be referenced in http://docs.emmet.io/abbreviations/syntax/

1. Install sublime TEXT3 2. Install the package Control
After installing this, you can install the required plugins online.
Method 1, ctrl+~ Open the console, enter the following Python command in the console
Import urllib.request,os;pf= ' package control.sublime-package '; Ipp=sublime.installed_packages_path (); Urllib.request.install_opener (Urllib.request.build_opener (Urllib.request.ProxyHandler ())); Open (Os.path.join ( IPP,PF), ' WB '). Write (Urllib.request.urlopen (' http://sublime.wbond.net/' +pf.replace (', '%20 ')). Read ())
Wait for the download to install.

Method 2, download the package control plug-in to the plug-in directory

The plugin directory opens in the menu Preference--browse Packages, without creating a new

Follow the prompts to restart sublime Text3, if you see the package control item in Preferences->package settings, the installation succeeds, if not, refer to Method 2 to download the Control manual Installation

Third, install the plug-in
Common commands: Install package (Installation extension)
List package (all extensions listed)
Remove package (remove extension)

Upgrade Package (Upgrade extension)

1, Emmet plug-in installation
1) Ctrl+shift+p: Bring up the Control Panel
2) search box type the Install Package command (can also be abbreviated) and enter, then select Emmet in the list (you can also search directly for Emmett for retrieval)
3) Click OK to wait for the installation
4) Automatic installation end will automatically eject a plugin for the installation information of the file. To recall the control Panel, type the list package to list all extensions to see if the installation was successful.

Emmet Common tips: (enter the following shorthand, press the TAB key to trigger the effect)

Generate HTML Document Initial structure
Html:5 or! Generating HTML5 structures
HTML:XT Generating HTML4 transition type
Html:4s generation HTML4 Strict type

Generate an HTML tag with ID, class
Emmet The default tag is Div, if we don't give the tag name, the div tag is generated by default.
To write a span tag with a class of BBB, we need to write the following instruction:
span.bbb
Write a UL label with a class ID of CCC for DDD
Ul#ccc.ddd

Generating Descendants:>
The greater-than sign indicates that the content to be generated later is the descendant of the current label.

To generate an unordered list and be wrapped by Class AAA Div
Div.aaa>ul>li
Generate an ordered list
. Abc>ol>li

Build Brother: +
Above is the generation of subordinate elements, if you want to create a peer element, you need to use the + sign
Div+p+bq

Generate ancestor elements: ^
What does a superior (climb-up) element mean? In front of us, we said ">" to generate the subordinate elements, and after using Div>ul>li's instructions, continue writing, then the next content is in the Li subordinate. If I want to write a span tag with UL level, then I need to start with "^" to raise the hierarchy
Div>ul>li^span

Generate multiple copies: *
Generate multiple copies: *
In particular, an unordered list, UL under the Li certainly not just a copy, usually to generate a lot of Li tags. Then we can go directly to the LI behind * some numbers:
Ul>li*5

Build groups: ()
Use parentheses to group, so that you can more clearly define the structure to be generated, especially the hierarchical relationship
Div> (header>ul>li*2>a) +footer>p

Build Custom properties: [attr]
A tag often needs to include the href attribute and the title attribute, if we want to generate an href "http://blog.wpjam.com", the title "I Love Boiled fish" a label
a[href= "http://blog.wpjam.com" title= "I love boiled fish"]

To generate content number: $
If there is no sequence list, I want to add a class attribute value item1 for five Li, then increment from 1-5, then you need to use the $ symbol:
Ul>li.item$*5
$ means one digit, and only one appears, starting with 1. If more than one appears, start at 0. If I want to generate a three-digit ordinal number, then write three $
Ul>li.item$$$*5
Can only be generated in such a monotonous sequence number. For the powerful Emmet, it's definitely not going to happen, and we can add @-back to reverse order.
Ul>li.item$@-*5
Again, we can use @N to specify the starting sequence number:
Ul>li.item$@3*5

Generate text content: {}
It explains how to generate HTML tags, and what's inside. Of course, you can also generate:
a[href= "http://blog.wpjam.com"]{click here to I love boiled fish in water}
In the generation of content, pay particular attention to the symbolic relationship, although a>{click me} and A{click me} generated the same structure, but with other content is not necessarily
<!--A{click}+b{here}--
<a href= "" >click</a><b>here</b>
<!--A>{click}+b{here}--
<a href= "" >click<b>here</b></a>

Do not have spaces
When writing instructions, you may want to use some space for the readability of the code. This will cause the code to become unusable.