Emmet est un utilitaire de saisie de texte permettant de gagner du temps de saisie. apres avoir noté les raccourcis, il suffit d'appuyer sur Tab et hop! il fait le reste ...
nav>ul>li
<nav>
<ul>
<li></li></ul></nav>div+p+bq
<div></div><p></p><blockquote></blockquote>ul>li*5
<ul>
<li></li><li></li><li></li><li></li><li></li></ul>div+div>p>span+em^bq
<div></div><div>
<p><span></span><em></em></p><blockquote></blockquote></div>div+div>p>span+em^^bq
<div></div><div>
<p><span></span><em></em></p></div><blockquote></blockquote>ul>li.item$*5
<ul>
<li class="item1"></li><li class="item2"></li><li class="item3"></li><li class="item4"></li><li class="item5"></li></ul>h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3>ul>li.item$$$*5
<ul>
<li class="item001"></li><li class="item002"></li><li class="item003"></li><li class="item004"></li><li class="item005"></li></ul>ul>li.item$@-*5
<ul>
<li class="item5"></li><li class="item4"></li><li class="item3"></li><li class="item2"></li><li class="item1"></li></ul>ul>li.item$@3*5
<ul>
<li class="item3"></li><li class="item4"></li><li class="item5"></li><li class="item6"></li><li class="item7"></li></ul>div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li><li><a href=""></a></li></ul></header><footer>
<p></p></footer></div>(div>dl>(dt+dd)*3)+footer>p
<div>
<dl>
<dt></dt><dd></dd><dt></dt><dd></dd><dd></dd><dt></dt></dl></div><footer>
<p></p></footer>a{Click me}
<a href="">Click me</a>p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>#toto
<div id="toto"></div>.title
<div class="title"></div>em>.class
<em><span class="class"></span></em>ul>.class
<ul>
<li class="class"></li></ul>form#search.wide
<form id="search" class="wide"></form>p.class1.class2.class3
<p class="class1 class2 class3"></p>table>.row>.col
<table>
<tr class="row">
<td class="col"></td></tr></table>p[title="Hello world"]
<p title="Hello world"></p>td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>[a='value1' b="value2"]
<div a="value1" b="value2"></div>!
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8" /><title>Document</title></head><body></body></html>a
<a href=""></a>a:link
<a href="http://"></a>a:mail
<a href="mailto:"></a>br
<br />link
<link rel="stylesheet" href="" />link:css
<link rel="stylesheet" href="style.css" />link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />script
<script></script>img
<img src="" alt="" />form
<form action=""></form>label
<label for=""></label>input
<input type="text" />inp
<input type="text" name="" id="" />input:search
<input type="search" name="" id="" />input:email
<input type="email" name="" id="" />input:p
<input type="password" name="" id="" />input:date
<input type="date" name="" id="" />input:tel
<input type="tel" name="" id="" />input:number
<input type="number" name="" id="" />input:c
<input type="checkbox" name="" id="" />input:r
<input type="radio" name="" id="" />opt
<option value=""></option>video
<video src=""></video>audio
<audio src=""></audio>btn
<button></button>btn:s
<button type="submit"></button>sect
<section></section>art
<article></article>hdr
<header></header>ftr
<footer></footer>str
<strong></strong>ol+
<ol>
<li></li></ol>ul+
<ul>
<li></li></ul>table+
<table>
<tr>
<td></td></tr></table>tr+
<tr>
<td></td></tr>optg+
<optgroup>
<option value=""></option></optgroup>posposition:relative;pos:sposition:static;pos:aposition:absolute;pos:rposition:relative;pos:fposition:fixed;ttop:;rright:;bbottom:;lleft:;zz-index:;fl:nfloat:none;fl:lfloat:left;fl:rfloat:right;clclear:both;cl:lclear:left;cl:rclear:right;d:ndisplay:none;d:bdisplay:block;d:idisplay:inline;d:ibdisplay:inline-block;ovoverflow:hidden;ovxoverflow-x:hidden;ovyoverflow-y:hidden;mmargin:;m:amargin:auto;mtmargin-top:;mrmargin-right:;mbmargin-bottom:;mlmargin-left:;ppadding:;ptpadding-top:;prpadding-right:;pbpadding-bottom:;plpadding-left:;wwidth:;w:awidth:auto;hheight:;h:aheight:auto;mawmax-width:;mahmax-height:;miwmin-width:;mihmin-height:;fwfont-weight:;fw:bfont-weight:bold;fs:ifont-style:italic;fzfont-size:;fffont-family:;va:tvertical-align:top;va:mvertical-align:middle;va:bvertical-align:bottom;tatext-align:left;ta:ltext-align:left;ta:ctext-align:center;ta:rtext-align:right;ta:jtext-align:justify;tdtext-decoration:none;tttext-transform:uppercase;tt:ctext-transform:capitalize;bgcbackground-color:#fff;bgc:tbackground-color:transparent;bgibackground-image:url();bgi:nbackground-image:none;bgr:nbackground-repeat:no-repeat;bgpbackground-position:0 0;bgszbackground-size:;bgsz:cvbackground-size:cover;ccolor:#000;c:rcolor:rgb(0, 0, 0);c:racolor:rgba(0, 0, 0, .5);bdborder:;bdtborder-top:;bdrborder-right:;bdbborder-bottom:;bdlborder-left:;bdrsborder-radius:;lis:nlist-style:none;!!important@f@font-face {font-family:;src:url(|);}@m@media screen {}Cheat-sheet du plugin EMMET réalisé lors de l'autoformation au sain du programme SIMPLON. Je fais partie de la 1ère promotion de l'essaimage de Roubaix
Des remarques? contactez-moi!
Fan? suivez-moi!