<\/a>??<\/li> <\/ol> ?<\/p>
<\/p>
3.? 嵌套<\/strong>?
現(xiàn)在你只需要1行代碼就可以實現(xiàn)標(biāo)簽的嵌套。?
<\/p> >:子元素符號,表示嵌套的元素<\/li> +:同級標(biāo)簽符號<\/li> ^:可以使該符號前的標(biāo)簽提升一行<\/li> 效果如下圖所示:?
<\/p>
<\/p>
4.? 分組<\/strong>?
你可以通過嵌套和括號來快速生成一些代碼塊,比如輸入(.foo>h1)+(.bar>h2),會自動生成如下代碼:?
<\/p> <\/p>\n
<\/p>\n
Html代碼? <\/p>
??<\/li>
- ??
<\/h1>??<\/li>
- <\/div>??<\/li>
??<\/li>
- ??
<\/h2>??<\/li>
- <\/div>??<\/li> <\/ol>
?<\/p>
<\/p>
5.? 隱式標(biāo)簽<\/strong>?
聲明一個帶類的標(biāo)簽,只需輸入div.item,就會生成<\/div>。?
在過去版本中,可以省略掉div,即輸入.item即可生成
<\/div>. Now if you only enter .item, Emmet will determine based on the parent tag. For example, if you enter .item in
, - <\/li> will be generated.
<\/p> <\/p>
The following are all implicit tag names:
<\/p>
- li: for ul and ol <\/li>
- tr: used in table, tbody, thead and tfoot <\/li>
- td: used in tr <\/li>
- option: used in select and optgroup <\/li>
6. Define multiple elements <\/strong>
To define multiple elements, you can use the * symbol. For example, ul>li*3 can generate the following code:
<\/p> <\/p>\n
<\/p>\n
Html code <\/p>
<\/li> -
- <\/li> <\/li>
-
- <\/li> <\/li>
-
- <\/li> ;\/ul> The element <\/li>
- If you enter ul>li.item$*3, the following code will be generated: <\/ol>\n
<\/p> Html code
<\/p>
- <\/li> ;<\/li> <\/strong>
- <\/li> \/\/Of course, it is also possible to change it to ul>li#item$*3. The result is as follows
- <\/li><\/p>
- <\/li>
- <\/li><\/p>\n
<\/ul><\/p>\n
<\/p>
- <\/li>
- \n
- 2. CSS abbreviation<\/li>
- \n
- 1. Value<\/li> <\/ol>For example, to define For the width of the element, just enter w100 to generate
<\/p>\n
Css code
<\/p>
<\/p>width: 100px;
<\/p>
<\/strong>
In addition to px, other units can also be generated, such as inputting h10p m5e, the result is as follows: <\/strong>
<\/p> Css code <\/p>\n
<\/p>\n
<\/p>height: 10%;
margin: 5em; - <\/li> <\/ol>
<\/p>Unit alias list:
<\/p>\n
p means %
e means em
<\/p>x means ex
<\/p>\n
px or no unit can be expressed as px \/\/ Added by Kerita <\/p>\n
<\/p> 2. Additional attributes
- Maybe you have already known some abbreviations before, such as @f , can generate:
- \n<\/ol>
Css code
<\/p>@font-face {
- <\/li> font-family :;
- <\/li> src:url();
- <\/li>}
- <\/li>
<\/strong>Some other attributes, such as background-image, border-radius, Additional options such as font, @font-face, text-outline, text-shadow, etc. can be generated through the \" \" symbol. For example, entering @f will generate:
<\/p> Css code <\/p>\n
<\/p>\n
<\/p> @font-face {
- font-family: 'FontName'; <\/li>
- src: url('FileName.eot '); <\/li>
- src: url('FileName.eot?#iefix') format('embedded-opentype'), <\/li>
- url('FileName.woff') format('woff' ), <\/li> <\/ol> url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
<\/p> font-weight: normal;
3. Fuzzy matching <\/strong>
If you are not sure about some abbreviations, Emmet will match the closest syntax based on your input, such as entering ov: h, ov-h, ovh and oh, the generated code is the same:
<\/p> <\/p>\n
<\/p>\n
Css code <\/p>
- overflow :hidden; If you enter non-W3C standard CSS attributes, Emmet will automatically add the vendor prefix. For example, if you enter trs, it will generate: <\/li>\n<\/ol>
<\/p>
Css code <\/p>
-webkit-transform: ; <\/strong>-moz-transform: ;
-ms-transform: ;
transform: ; \" symbol, you can also prefix the attribute. For example, enter -super-foo: <\/p>\n<\/p>\n
<\/p>\n
<\/p> Css code
- <\/li>
- -webkit-super-foo: ; <\/li>
- -moz-super-foo: ; <\/li>
- -ms-super-foo: ; <\/li>
- -o-super-foo: ; <\/li> <\/ol>
<\/p>If you do not want to add all prefixes, you can use an abbreviation to specify, for example, -wm-trf means only adding -webkit and -moz prefixes:
<\/p>\n
Css code
<\/p>
<\/p>\n
-webkit-transform: ; <\/p>\n
<\/p>-moz-transform: ;
transform: ; - <\/li>
- <\/li>
- The prefix abbreviation is as follows: <\/li>\n
-
- w means -webkit-<\/li> <\/ol>m means -moz -
s means -ms -
o means -o-
<\/p>
5. Gradient<\/p>\n
<\/p>\n
<\/p>Input lg(left, # fff 50%, #000), the following code will be generated:
\n- <\/li>
- <\/li> Css code
- <\/li> <\/ol> background-image: - webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, # fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000); <\/p>
- background-image: -o-linear -gradient(left, #fff 50%, #000); <\/li>
- background-image: linear-gradient(left, #fff 50%, #000); <\/li>
- <\/li>
- <\/li>
<\/strong>
3. Additional functions
<\/p>\n<\/p>\n
Generate Lorem ipsum text<\/p>\n
<\/p>Lorem ipsum refers to a Latin article commonly used in the field of typesetting design. The main purpose is to test the effect of the article or text in different fonts and layouts. With Emmet, you can generate these words simply by typing lorem or lipsum. You can also specify the number of characters, such as lorem10, which will generate:
\n-
- Quote<\/li>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus. <\/li>
- <\/li>
- <\/li> <\/ol>
<\/p>4. Customization
<\/p>\n
You can also customize the Emmet plug-in:
<\/strong> To add a new abbreviation or update an existing abbreviation, modify the snippets.json file
To change the behavior of Emmet filters and operations, modify the preferences.json file <\/strong> to define how HTML is generated Or XML code, you can modify the syntaxProfiles.json file
5. Plug-ins for different editors <\/p> <\/p>The editors supported by Emmet are as follows (the link is for the Emmet plugin for editor):
<\/p>\n
<\/p>Sublime Text 2
<\/p>TextMate 1.x
Eclipse\/Aptana
Coda 1.6 and 2.x<\/strong>
Espresso
Chocolat (added through the \"Install Mixin\" dialog box)
<\/p>Komodo Edit\/IDE (added through the Tools → Add-ons menu)- <\/li>Notepad
- <\/li>PSPad
- <\/li>