ホームページ > 記事 > ウェブフロントエンド > フロントエンド開発に必須
フロントエンド開発に必須
- WBOYオリジナル
- 2016-06-24 11:20:171290ブラウズ
はじめに
Emmet (旧名 Zen コーディング) は、フロントエンド開発の効率を大幅に向上させるツールです。
基本的に、ほとんどのテキスト エディタでは、「スニペット」と呼ばれるコードのチャンクを保存して再利用できます。スニペットは生産性を向上させるのに最適ですが、ほとんどの実装には、最初にコード スニペットを定義する必要があり、実行時にコード スニペットを拡張できないという欠点があります。
Emmet はフラグメントの概念を新しいレベルに引き上げます。動的に解析できる CSS の形式で式を設定し、入力した略語に基づいて対応するコンテンツを取得できます。 Emmet は成熟しており、HTML/XML および CSS コードを作成するフロントエンド開発者に適していますが、プログラミング言語にも使用できます。
例エディターに短縮コード ul>li*5 を入力し、展開キー (デフォルトはタブ) を押してコード スニペットを取得します:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul>ダウンロードしてインストールします
Editor プラグイン
以下はEmmet エディターに提供されるプラグインをインストールします。
Sublime Text
Eclipse/Aptana
TextMate
Coda
エスプレッソ
ショコラ
Komodo Edit
Notepad++
PSPad
テキストエリア
コードミラー
ブラケット
NetBeans
Adobe Dreamweaver
オンライン編集者のサポート：
jsfiddlejsbin bin
codepencoderdivshot
コディオプラグインサポートEmmet の関数と機能がサポートされる場合があります。 + gt;
nav>ul>li
<nav> <ul> <li></li> </ul></nav>
兄弟: +
div+p+bq
<div></div><p></p><blockquote></blockquote>
スーパーバイザー: ^
div+div>p>span+em ^bqりりー
div+div>p>span+em^^bq
<div></div><div> <p><span></span><em></em></p> <blockquote></blockquote></div>
グループ化: ()
div>(header>ul>li*2>a)+footer>p
<div></div><div> <p><span></span><em></em></p></div><blockquote></blockquote>
(div>ダウンロード> (dt+dd)*3)+footer>p
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer></div>
乗算: *
ul>li*5
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl></div><footer> <p></p></footer>
増分記号: $
ul>li.item$*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul>
h$[title=item$]{ヘッダー$}*3
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li></ul>
ul>li.item$$$*5
<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$@3*5
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li></ul>
ID とクラス属性
#header
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li></ul>
.title
<div id="header"></div>
form#search.wide
<div class="title"></div>
p.class1.class2 .class3
<form id="search" class="wide"></form>
カスタム属性
p[title= "Hello world"]
<p class="class1 class2 class3"></p>
td[rowspan=2colspan=3 title]
<p title="Hello world"></p>
[a='value1' b="value2 "]
<td rowspan="2" colspan="3" title=""></td>
テキスト: {}
a{クリックしてください}
<div a="value1" b="value2"></div>
p>{続行するには、}+a{ここ}+{ をクリックしてください}
<a href="">Click me</a>
暗黙のタグ
。クラス
<p>Click <a href="">here</a> to continue</p>
em>.class
<div class="class"></div>
ul> ;.class
<em><span class="class"></span></em>
table>.row>.col
<ul> <li class="class"></li></ul>
HTML
不明な略語はすべてタグに変換されます (例: foo) →
!
<table> <tr class="row"> <td class="col"></td> </tr></table>
a
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>
a:link
<a href=""></a>
a:mail
<a href="http://"></a>
abbr
<a href="mailto:"></a>
頭字語
<abbr title=""></abbr>
base
<acronym title=""></acronym>
basefont
<base href="" />
br
<basefont />
frame
<br />
hr
<frame />
bdo
<hr />bdo :r
rree
bdo:l
rree
col
rree
リンク
<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" />
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" />
style
<style></style>
script
<script></script>
script:src
<script src=""></script>
img
<img src="" alt="" />
iframe
<iframe src="" frameborder="0"></iframe>
embed
<embed src="" type="" />
object
<object data="" type=""></object>
param
<param name="" value="" />
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="" />
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" />
input:text input:t inp
<input type="text" name="" id="" />
input:hidden input:h input[type=hidden name]
<input type="hidden" name="" />
input:search inp[type=search]
<input type="search" name="" id="" />
input:email inp[type=email]
<input type="email" name="" id="" />
input:url inp[type=url]
<input type="url" name="" id="" />
input:password input:p inp[type=password]
<input type="password" name="" id="" />
input:datetime inp[type=datetime]
<input type="datetime" name="" id="" />
input:date inp[type=date]
<input type="date" name="" id="" />
input:datetime-local inp[type=datetime-local]
<input type="datetime-local" name="" id="" />
input:month inp[type=month]
<input type="month" name="" id="" />
input:week inp[type=week]
<input type="week" name="" id="" />
input:time inp[type=time]
<input type="time" name="" id="" />
input:number inp[type=number]
<input type="number" name="" id="" />
input:color inp[type=color]
<input type="color" name="" id="" />
input:checkbox input:c inp[type=checkbox]
<input type="checkbox" name="" id="" />
input:radio input:r inp[type=radio]
<input type="radio" name="" id="" />
input:range inp[type=range]
<input type="range" name="" id="" />
input:file input:f inp[type=file]
<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:button[type=reset]
<input type="reset" value="" />
select
<select name="" id=""></select>
option
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
menu:context menu:c menu[type=context]
<menu type="context"></menu>
menu:toolbar menu:t menu[type=toolbar]
<menu type="toolbar"></menu>
video
<video src=""></video>
audio
<audio src=""></audio>
html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>
keygen
<keygen />
command
<command />
bq blockquote
<blockquote></blockquote>
acr acronym
<acronym title=""></acronym>
fig figure
<figure></figure>
figc figcaption
<figcaption></figcaption>
ifr iframe
<iframe src="" frameborder="0"></iframe>
emb embed
<embed src="" type="" />
obj object
<object data="" type=""></object>
src source
<source></source>
cap caption
<caption></caption>
colg colgroup
<colgroup></colgroup>
fst fset fieldset
<fieldset></fieldset>
btn button
<button></button>
btn:b button[type=button]
<button type="button"></button>
btn:r button[type=reset]
<button type="reset"></button>
btn:s button[type=submit]
<button type="submit"></button>最后
关于更多的HTML以及CSS的缩写请查看：官网文档