Concept: Emmet plug-in is used in the editor of a quick code to write a plug-in, such as sublime text, you can use it to quickly create code, this article is mainly in the sublime text editor to do the test code.
First, the HTML
1. Quickly create HTML
(1) Html:5---tab
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Document</title>6 </Head>7 <Body>8 9 </Body>Ten </HTML>
2. Tags
(1) Label--Tab
Example: P--Tab
< P ></ P >
3. Class. or id#
(1) P.CLASS1#ID1---tab
<class= "Class1" ID= "Id1"></p >
(2) P.class1.class2#id1#id2---tab (only one ID is selected, can have more than one class)
<class= "Class1 class2" ID= "Id2"></p >
4. Text {}
(1) p{Hello}--Tab
< P > Hello </p>
5. Properties
(1) a[href=https://baidu.com]-tab
<href= "https://baidu.com"></a>
6. Nesting >
(1) P>span
< P >< span ></ span ></ P >
7. Peer +
(1) P+span
< P ></ P > < span ></ span >
8. Nested tiered upgrade version
(1) Div.one#one>h1{this is one.} +div.two#two>h1{this is a.}
1 <Divclass= "One"ID= "One">2 <H1>This is one.</H1>3 <Divclass= "both"ID= "both">4 <H1>This is a.</H1>5 </Div>6 </Div>
(2) (Div.one#one>h1{this is one.}) + (Div.two#two>h1{this is.})
1 <Divclass= "One"ID= "One">2 <H1>This is one.</H1>3 </Div>4 <Divclass= "both"ID= "both">5 <H1>This is a.</H1>6 </Div>
9. Up one level ^
(1) Div>p>a^span---tab (that is, same layer as P)
1 <Div>2 <P><ahref=""></a></P>3 <span></span>4 </Div>
10. Omitting labels
(1) automatically determines the label according to the parent element
Example:. container---tab
<class= "container"></div>
Example: ul>.list--Tab
1 < ul > 2 < class= "List"></li>3</ ul>
11. Duplicate Code
(1) Ul>li*3---tab
1 <ul>2 <Li></Li>3 <Li></Li>4 <Li></Li>5 </ul>
(2) Ul>li{item}*3---tab
1 <ul>2 <Li>Item</Li>3 <Li>Item</Li>4 <Li>Item</Li>5 </ul>
(3) (Ul>li{item})----tab
1 <ul>2 <Li>Item</Li>3 </ul>4 <ul>5 <Li>Item</Li>6 </ul>7 <ul>8 <Li>Item</Li>9 </ul>
12. List calculation
(1) ul>li.item$*3----Tab (PS: One-digit $, two-digit two $)
1 <ul>2 <Liclass= "Item1"></Li>3 <Liclass= "Item2"></Li>4 <Liclass= "Item3"></Li>5 </ul>
(2) Ul>li.item$$*3---tab
1 <ul>2 <Liclass= "ITEM01"></Li>3 <Liclass= "ITEM02"></Li>4 <Liclass= "Item03"></Li>5 </ul>
Second, CSS
1.W100-Tab
h10p-Tab
M5E-Tab
P5R-Tab
Or
w100+h10p+m5e+p5r
(Ps:p---%; e--em; R--REM; X---ex;)
1 width:100px; 2 height:10%; 3 margin:5em; 4 Padding:5rem;
[Email protected]--tab
1{2 font-family:; 3 src:url (); 4 }3. Supplier prefix-(some non-standard, will be prefixed)
(1)-trs---tab
1 -webkit-transition:prop time; 2 -o-transition:prop time; 3 transition:prop time;
PS: If you do not want to add all the prefixes, you can use abbreviations to specify, such as-WM-TRF to add only the-webkit and-moz prefixes:
1 -webkit-transform:; 2 -moz-transform:; 3 transform:;
Third, custom Emmet plug-in
-Add a new abbreviation or update an existing abbreviation to modify the Snippets.json file
-Change the behavior of Emmet filters and actions to modify the Preferences.json file
-Define how to generate HTML or XML code to modify the Syntaxprofiles.json file
Resources:
http://www.iteye.com/news/27580
Https://gold.xitu.io/post/5843a0e861ff4b006b97f5d5
Emmet plugin shortcut keys:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
