Emmet – raccourcis balise html
All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo> else style → <style></style>
A combiner avec Emmet Commandes pour générer html et Emmet squelette html
zones
| snippet | résultat |
|---|---|
leg |
<legend></legend> |
sect,section |
<section></section> |
art,article |
<article></article> |
hdr,header |
<header></header> |
ftr,footer |
<footer></footer> |
adr,address |
<address></address> |
mn |
<main></main> |
tem |
<template></template> |
bq |
<blockquote></blockquote> |
fig |
<figure></figure> |
figc |
<figcaption></figcaption> |
link
| snippet | résultat |
|---|---|
link |
<link rel="stylesheet" href="" /> |
link:css |
<link rel="stylesheet" href="style.css" /> |
link:print |
<link rel="stylesheet" href="print.css" media="print" /> |
link:favicon |
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> |
link:touch |
<link rel="apple-touch-icon" href="favicon.png" /> |
link:rss |
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" /> |
link:atom |
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" /> |
link:import, link:im |
<link rel="import" href="component.html" /> |
meta
| snippet | résultat |
|---|---|
meta |
<meta /> |
meta:utf |
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
meta:win |
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" /> |
meta:vp |
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> |
meta:compat |
<meta http-equiv="X-UA-Compatible" content="IE=7" /> |
meta:redirect |
<meta http-equiv="refresh" content="0" url="" /> |
a
| snippet | résultat |
|---|---|
a |
<a href=""></a> |
a:link |
<a href="http://"></a> |
a:mail |
<a href="mailto:"></a> |
script
| snippet | résultat |
|---|---|
script |
<script></script> |
script:src |
<script src=""></script> |
img
| snippet | résultat |
|---|---|
img |
<img src="" alt="" /> |
img:srcset, img:s |
<img srcset="" src="" alt="" /> |
img:sizes, img:z |
<img sizes="" srcset="" src="" alt="" /> |
ri:dpr, ri:d |
<img srcset="" src="" alt="" /> |
ri:viewport, ri:v |
<img sizes="" srcset="" src="" alt="" /> |
picture, source
| snippet | résultat |
|---|---|
picture,pic |
<picture></picture> |
source, src |
<source /> |
source:src, src:sc |
<source src="" type="" /> |
source:srcset, src:s |
<source srcset="" /> |
source:media, src:m |
<source media="(min-width: )" srcset="" /> |
source:type, src:t |
<source srcset="" type="image/" /> |
source:sizes, src:z |
<source sizes="" srcset="" /> |
source:media:type, src:mt |
<source media="(min-width: )" srcset="" type="image/" /> |
source:media:sizes, src:mz |
<source media="(min-width: )" sizes="" srcset="" /> |
source:sizes:type, src:zt |
<source sizes="" srcset="" type="image/" /> |
pic+, ri:type, ri:t |
<picture>
<source srcset="" />
<img src="" alt="" />
</picture>
|
ri:art, ri:a |
<picture>
<source media="(min-width: )" srcset="" />
<img src="" alt="" />
</picture>
|
map, area
| snippet | résultat |
|---|---|
map |
<map name=""></map> |
area |
<area shape="" coords="" href="" alt="" /> |
area:d |
<area shape="default" href="" alt="" /> |
area:c |
<area shape="circle" coords="" href="" alt="" /> |
area:r |
<area shape="rect" coords="" href="" alt="" /> |
area:p |
<area shape="poly" coords="" href="" alt="" /> |
map+ |
<map name="">
<area shape="" coords="" href="" alt="" />
</map>
|
formulaire
| snippet | résultat |
|---|---|
form |
<form action=""></form> |
form:get |
<form action="" method="get"></form> |
form:post |
<form action="" method="post"></form> |
label |
<label for=""></label> |
input |
<input type="text" /> |
inp |
<input type="text" name="" id="" /> |
input:hidden, input:h |
<input type="hidden" name="" /> |
input:text, input:t |
<input type="text" name="" id="" /> |
input:search |
<input type="search" name="" id="" /> |
input:email |
<input type="email" name="" id="" /> |
input:url |
<input type="url" name="" id="" /> |
input:password, input:p |
<input type="password" name="" id="" /> |
input:datetime |
<input type="datetime" name="" id="" /> |
input:date |
<input type="date" name="" id="" /> |
input:datetime-local |
<input type="datetime-local" name="" id="" /> |
input:month |
<input type="month" name="" id="" /> |
input:week |
<input type="week" name="" id="" /> |
input:time |
<input type="time" name="" id="" /> |
input:tel |
<input type="tel" name="" id="" /> |
input:number |
<input type="number" name="" id="" /> |
input:color |
<input type="color" name="" id="" /> |
input:checkbox, input:c |
<input type="checkbox" name="" id="" /> |
input:radio, input:r |
<input type="radio" name="" id="" /> |
input:range |
<input type="range" name="" id="" /> |
input:file, input:f |
<input type="file" name="" id="" /> |
input:submit, input:s |
<input type="submit" value="" /> |
input:image,input:i |
<input type="image" src="" alt="" /> |
input:button, input:b |
<input type="button" value="" /> |
input:reset |
<input type="reset" value="" /> |
select |
<select name="" id=""></select> |
select:disabled, select:d |
<select name="" id="" disabled="disabled"></select> |
select+ |
<select name="" id="">
<option value=""></option>
</select>
|
option, opt |
<option value=""></option> |
optg |
<optgroup></optgroup> |
optgroup+, optg+ |
<optgroup>
<option value=""></option>
</optgroup>
|
textarea, tarea |
<textarea name="" id="" cols="30" rows="10"></textarea> |
btn |
<button></button> |
button:submit, button:s, btn:s |
<button type="submit"></button> |
button:reset, button:r, btn:r |
<button type="reset"></button> |
button:disabled, button:d, btn:d |
<button disabled="disabled"></button> |
fst, fset |
<fieldset></fieldset> |
fieldset:disabled,fieldset:d, fset:d, fst:d |
<fieldset disabled="disabled"></fieldset> |
isindex |
<isindex /> |
liste : ul, li, dl
| snippet | résultat |
|---|---|
ol+ |
<ol>
<li></li>
</ol>
|
ul+ |
<ul>
<li></li>
</ul>
|
dl+ |
<dl>
<dt></dt>
<dd></dd>
</dl>
|
table,tr,td,colgroup,col
| snippet | résultat |
|---|---|
table+ |
<table>
<tr>
<td></td>
</tr>
</table>
|
colgroup+, colg+ |
<colgroup>
<col />
</colgroup>
|
tr+ |
<tr>
<td></td>
</tr>
|
Divers balises du body
| snippet | résultat |
|---|---|
iframe, ifr |
<iframe src="" frameborder="0"></iframe> |
embed, emb |
<embed src="" type="" /> |
object, obj |
<object data="" type=""></object> |
param |
<param name="" value="" /> |
marquee |
<marquee behavior="" direction=""></marquee> |
video |
<video src=""></video> |
audio |
<audio src=""></audio> |
keygen |
<keygen /> |
command |
<command /> |