(This content is based on the Windows environment)
First, has installed the sublime Text3
Second, 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 Urllib2,os; Pf= ' Package control.sublime-package '; Ipp=sublime.installed_packages_path (); Os.makedirs (IPP) if not os.path.exists (IPP) else None; Urllib2.install_opener (Urllib2.build_opener (urllib2. Proxyhandler ())); Open (Os.path.join (IPP,PF), ' WB '). Write (Urllib2.urlopen (' http://sublime.wbond.net/' +pf.replace (', '%20 '). Read () ); print ' Restart Sublime Text to finish installation '
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>[email protected]*5
Again, we can use @N to specify the starting sequence number:
Ul>[email protected]*5
Generate text content: {}
The above explains how to generate HTML tags, what about the content? 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.
The application in CSS
Writing Position:absolute; This property, we only need to enter the Posa four letters can be
1. Shorthand attributes and attribute values
If you want to generate width:100px; You only need to enter w100, because the default setting for Emmet W is the width abbreviation, followed by the number is the property value. The default property value unit is PX, and you can immediately follow the value of the character generation unit, which can be any character. For example, W100foo will generate Width:100foo; Such a statement. You can also abbreviate attribute units, if you follow the property value followed by the character is P, then the width:100% will be generated; Such a statement where p represents the percentage unit. Similar to this is also: E→em; X→ex
A property such as margin may not be a property value, and generating multiple attribute values requires a cross-bar (-) to concatenate two property values, because spaces are not allowed in Emmet directives. For example, using the m10-20 command can generate margin:10px 20px; Such a statement. If you want to generate negative values, add a horizontal bar. It is important to note that if you specify units for each attribute, you do not need to use a cross-bar split. For example, using the M10FF20FF command can generate MARGIN:10FF 20ff; This statement, if you put a bar in front of the 20FF, 20FF will become negative.
You want to generate more than one statement at a time, you can use ' + ' to connect two statements, such as using h10p+m5e to generate height:10%;margin:5em; These two statements
Color values can also be generated quickly, such as C#3→color: #333; more complicated, using bd5#0s can generate border:5px #000 solid; Such a sentence
#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00
Generate!important This statement is of course very simple, just need a '! ' to do it.
2. Add additional Options
Use @f to generate code structures for Font-face in CSS3
Background-image, Border-radius, Font, @font-face, Text-outline, Text-shadow, etc., we can generate an enhanced structure by entering ' + ' at the time of generation, for example, we can enter @f+ command, you can export the font-face structure of the option enhanced version
3. Increase the experimental prefix (Vendor prefixes)
CSS3 and so there is no formal specification, but many browsers have implemented the corresponding function, only as a test only, so in front of the property with its own unique experimental prefix, different browsers will only recognize the style with their own prefix. However, in order to achieve compatibility, we have to write a lot of redundant code, and to add the corresponding prefix. Use Emmet to quickly generate a CSS3 property with a prefix.
Built-in some common CSS3 properties that require experimental prefixes, such as input TRF pop-up prompts, then hit enter to generate. and Emmet enhanced this feature. Precede any character with a bar (-) to generate a prefix code for the property, such as input-foo-css
Although FOO-CSS is not a property, it can still be generated. In addition, you can control exactly which browser prefixes or sequences are generated in detail, using-WM-TRF to generate
W is the abbreviation for the WebKit prefix, M is the Moz prefix abbreviation, s is the MS prefix abbreviation, and O is the abbreviation for the Opera browser prefix. If you use-OSMW-ABC, you can generate
4. Create a gradient background
A new attribute is added to the CSS3 linear-gradient use this property to directly create a gradient effect. However, the parameters of this property are complex, and you need to add an experimental prefix, there is no doubt that a large number of code generated. Using the LG () Directive in Emmet can be generated quickly, for example: using LG (left, #fff 50%, #000) to generate directly:
Emmet Advanced Feature Description:
5. Generate Lorem Ipsum
Lorem Ipsum represents a text that is not understood at random. Lorem ipsum text to people can not understand, so as to ignore the meaning of content and focus on the content of the layout, as a test data filling. Using Emmet to generate Lorem Ipsum text is simple, just use the Lorem command, and after you hit the Tab key
Emmet's Lorem command is more than just a simple function of outputting such a piece of text, since, as a test data, you can add parameters to specify the number of characters to output. For example, if we want to output a H1 header for 10 words, we can use the following command H1>LOREM10. However, this feature is not very useful for web testing in Chinese, after all, the layout of Chinese and English words is different.
6. Jump Edit Area
With shift+ctrl+. And shift+ctrl+, move down or up, select an entire block, start with the label, then the entire property, and then the attribute value.
7, increase the size of the picture
Move the cursor to the code snippet and press Ctrl+u to allow Emmet to automatically read the dimensions of the picture. The prerequisite is that the picture is present and the correct reference is in.
For the tag, the width and Height properties are appended, and if it is introduced by background, the CSS property with width and height will be added below.
8. Update CSS Property values
To change the angle value of the rotation, we need to modify it in turn or press CTRL + Select to modify it. With Emmet, it is much more convenient, we just need to modify one of them, and then press the SHIFT+CTRL+R key to update other related property values.
9. Convert image resources to data URL form
To move the cursor to the location of the picture in Background:url (), press CTRL + ' to encode the picture into the data URL format. Of course, the prerequisite is that the picture resource reference is correct.
Sublime Text 3 Common plug-in installation (including Emmet plug-in instruction introduction)
