recherche

Maison >interface Web >tutoriel HTML >Explication détaillée de l'utilisation du plug-in Sublime Text Emmet

Explication détaillée de l'utilisation du plug-in Sublime Text Emmet

高洛峰
高洛峰original
2017-03-26 10:14:511917parcourir

Résumé :

Installation Veuillez lire l'article précédent Sublime Text—Installation Utilisez-le avec les touches de raccourci intégrées de sublime. L'écriture de code HTML est si rapide.

Les éléments suivants sont couramment utilisés. Pour des informations complètes, veuillez vous référer à la documentation officielle d'emmet.

Générer des balises

1. Générez rapidement la structure du document

  • ! ou html:5, générez rapidement la structure HTML5 (Vous devez appuyer à nouveau sur la touche de tabulation) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>

  • html:xt Générer le type de transition HTML4

  • html:4s Générer du HTML4 strict

2. Générer un élément avec l'identifiant

tag # ID name, tel que : p#header

<p id="header"></p>

3. Générez la balise de l'élément avec

class

. Nom de la classe, tel que : p.title

<p class="title"></p>

4. Générez les éléments descendants : >

Par exemple : nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

5. Générer des éléments frères et sœurs : +

Par exemple : p+p+p

<p></p>
<p></p>
<p></p>

6. : ^

Par exemple : p^p

<p></p>
<p></p>

7 Générer plusieurs éléments à plusieurs reprises : *
Par exemple : ul>li*5 

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

8. . Générez à partir de l'attribut Define  : [attr]

tel que : p[value=1]

<p value="1"></p>

9. Générez du contenu avec du texte : {}

tels que :

a{Click me}

<a href="">Click me</a>
10. Ajouter un numéro : $

  • À partir de 1 : ajouter $

Par exemple :

p.item${$$}*3

<p class="item1">01</p>
<p class="item2">02</p>
<p class="item3">03</p>
  • Ordre inversé : $ suivi de @-

tel que :

p.item$@-{$$@-}*3

<p class="item3">03</p>
<p class="item2">02</p>
<p class="item1">01</p>
  • Précisez le numéro de série : Vous pouvez utiliser @N

tel que :

p.item$@4{$$@4}*3

<p class="item4">04</p>
<p class="item5">05</p>
<p class="item6">06</p>
11.

Groupe : ( )

Par exemple :

(ul>ol)*3

<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
Un

cas global

table#tab[value=1].a>tr*3>(td{$$}>span)*3

<table id="tab" value="1" class="a">
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
</table>
est généré en CSS

Il existe de nombreux styles CSS, et naturellement il existe de nombreuses abréviations. Il suffit de lister celles couramment utilisées et de tirer des conclusions.

L'abréviation CSS est mise en correspondance à l'aide d'une recherche floue, telle que ov:h == ov-h == ovh == oh.

  • w10 <a href="http://www.php.cn/wiki/835.html" target="_blank">largeur<p style="text-align: left;"> : 10px ; </p></a> w10p <a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 10px; w10e width: 10%; w10x width: 10em;width: 10xe;
  • h10 <a href="http://www.php.cn/wiki/836%20.html" target="_blank">hauteur<p style="text-align: left;"> : 10px;</p></a><a href="http://www.php.cn/wiki/836.html" target="_blank">height</a>: 10px;
  • pour <a href="http://www.php.cn%20/wiki/902.html" target="_blank">position<p style="text-align: left;"> : relative;</p></a> poa <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>: relative;position: absolute;
  • fll <a href="http%20://www.php.cn/wiki/919.html" target="_blank">float<p style="text-align: left;"> : gauche;</p></a> fr float : <a href="http://www.php%20.cn/wiki/905.html" target="_blank">droit<code><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>: left;;float: <a href="http://www.php.cn/wiki/905.html" target="_blank">right</a>;
  • dt <a href="http://www%20.php.cn/wiki/927.html" target="_blank">display<p style="text-align: left;">: table;</p></a> db <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: table; dib display: block;display: inline-block;
  • ovy overflow-y

     : caché ;<a href="http://www.php.cn/wiki/926.html" target="_blank">overflow-y</a>: hidden;
  • cb <a href="http://www.php.cn/wiki/917.html" target="_blank">clear<p style="text-align: left;"> : les deux ;</p></a><a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>: both;
  • mt <a href="http://www.php.cn/wiki/933.html" target="_blank">marge-haut<p style="text-align: left;"> : ;</p></a> mb <a href="http://www.php.cn/wiki/935.html" target="_blank">marge-bas<code><a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a>: ; : ;<a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</a>: ;

  • pt <a href="http://www.php.cn/wiki/949.html" target="_blank">padding-top</a>: ; pb <a href="http://www.php.cn/wiki/951.html" target="_blank">padding-bottom</a>: ;

  • tac <a href="http://www.php.cn/wiki/870.html" target="_blank">text-align</a>: center;

  • lh <a href="http://www.php.cn/wiki/864.html" target="_blank">line-height</a>:;

  • tsn <a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a>: none;

  • tja <a href="http://www.php.cn/wiki/881.html" target="_blank">text-justify</a>: auto;

  • c color: #000; cr color: rgb(0, 0, 0); cra color: rgba(0, 0, 0, .5);

  • op opacity: ;

  • cnt content: '';

  • ol <a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>: ;

  • bd+ border: 1px solid #000; bdb+ border-bottom: 1px solid #000;

  • bd2px#333s border: 2px #333 solid;

快捷键

如果没作用请检查快捷键是否冲突

  • 快速生成包裹标签：Ctrl+Shift+G

只有文本没有结构时，如下

首页
简介
动态

选中文本按快捷键Ctrl+Shift+G，再弹出的：Enter Wrap Abbreviation（输入扩展缩写）中输入nav>ul>li.item$*>a就会生成

<nav>
    <ul>
        <li class="item1"><a href="">首页</a></li>
        <li class="item2"><a href="">简介</a></li>
        <li class="item3"><a href="">动态</a></li>
    </ul>
</nav>

如果原先的文本带编号，不想要则可以在上面的基础上加|t,nav>ul>li.item$*>a|t即可生成如上结果。

1首页
2简介
3动态

  • 自动添加/更新图片尺寸：ctrl+U

光标移到标签上的任意位置，按下快捷键ctrl+U即可。

<img src="img/x1.png" />
<img src="img/x1.png" width="100" height="200" />

  • 删除标签：shift+ctrl+;

  • 定位到上个编辑点：ctrl+alt+left

  • 定位到下个编辑点：ctrl+alt+right

  • 选中下一项：shift+ctrl+.

  • 加/减1：ctrl+up/ctrl+down

  • 加/减10：shift+alt+up/shift+alt+down

  • 展开缩写：ctrl+e（和tab键作用相同）

  • 重命名标签(rename_tag)：ctrl+shift+'

  • 更换标签(update_as_you_type)：ctrl+Shift+U

  • 匹配标签对：ctrl+alt+j

生成测试文本

输入lorem再按tab会随机生成一段英文,默认是生成30个单词，可以加上数字控制单词数量，如lorem5。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis incidunt, expedita voluptates ratione praesentium error a accusamus corporis deleniti. Cum, debitis id, in rem exercitationem at voluptatum illum minima corporis!
Lorem ipsum dolor sit amet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser HTML pour implémenter des exemples de code de positionnementArticle suivant：Comment utiliser HTML pour implémenter des exemples de code de positionnement

Articles Liés

Voir plus