フロントエンド開発ツール: Emmet 紹介_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:50:08

オリジナル

1204 人が閲覧しました

Emmet はフロントエンド開発の効率を向上させるエディタープラグインで、Sublime、Atom、TextMate、Nodepad++ などの主流のエディターをサポートします。 Emmet はいくつかの略語を定義しています。略語コードを入力して展開キー (デフォルトは Tab キー) を押すと、完全なコードが展開されます。たとえば、HTML ファイルに ul.list>li{$th}*2 と入力し、展開キーを押すと、次のコードに展開されます

<ul class="list">  <li>第1个</li>  <li>第2个</li></ul>

ログイン後にコピー

CSS ファイルに posa と入力しますと展開すると、

position: absolute;

ログイン後にコピー

便利ですね～

Emmet の HTML 略称は、CSS セレクター形式の記述をサポートしています。たとえば、ID が box、クラス名が news-box の div を書きたいとします。div の下に a 要素があり、その href は xxx です。 div#box.news-box>a[href=xxx] と記述するだけです。これは CSS セレクターとまったく同じです。

Emmet が提供する一般的に使用される略語をいくつか示します。

HTML の略語

html:5 は

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

ログイン後にコピー

link:css は

<link rel="stylesheet" href="style.css">

ログイン後にコピー

btn は

<🎜 に展開されます>

<button></button>

ログイン後にコピー

select+ は

<select name="" id="">  <option value=""></option></select>

ログイン後にコピー

ul+ は

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

ログイン後にコピー

ol+ は

<ol>  <li></li></ol>

ログイン後にコピー

dl+ は

< に展開されます🎜>table+ は

<dl>  <dt></dt>  <dd></dd></dl>

ログイン後にコピー

tr+ は

<table>  <tr>    <td></td>  </tr></table>

ログイン後にコピー

cc:ie6 は

<tr>  <td></td></tr>

ログイン後にコピー

cc:ie は

<!--[if lte IE 6]><![endif]-->

ログイン後にコピー

<🎜 に展開されます>

cc:noie は

<!--[if IE]><![endif]-->

ログイン後にコピー

CSS 省略形

<!--[if !IE]><!--><!--<![endif]-->

ログイン後にコピー

ボックスモデル関連

d に展開されて表示されます: block;

フォント関連

f フォントに展開: ;

テキスト関連

va は、vertical-align: top に展開されます。

```
opacity: ;filter: alpha(opacity=);
```
ログイン後にコピー
background

bg は背景に展開されます: #000;

境界線と輪郭

bd は境界線に展開します: ;

List

lis は list-style に展開します: ;

その他

! important

@m は

@kf は、上記の省略形の場合

@media screen {}

ログイン後にコピー

に展開されますは展開され、ブラウザーのプレフィックス (ベンダープレフィックス付き) とともに生成されます。

Emmet 的命令

展开缩写 Tab
每按一下，扩大选择范围：选择当前元素及其父级元素 ⌃D / Ctrl+,
每按一下，缩小选择范围：选择当前元素的第一个字元素 ⌃J / Shift+Ctrl+0
光标移动移动至匹配的标签，多次按时在标签内容的结尾和标签的头部位置切换 – ⇧⌃T / Ctrl+Alt+J
用简写来包裹选中内容 — ⌃W / Shift+Ctrl+G
光标到下一个编辑点。编辑点指的是，没有内容元素内部 — Ctrl+Alt+→ 或 Ctrl+Alt+←
选择元素。多次按会在元素，元素属性，元素属性值之间切换 – ⇧⌘. 或 ⇧⌘, / Shift+Ctrl+. 或 Shift+Ctrl+,
删除标签，但不包括其innerHTML的内容 – ⌘' / Shift+Ctrl+;
数学表达式求值。如：3+2 求值 5 — ⇧⌘Y / Shift+Ctrl+Y
重构CSS3带浏览器前缀（vendor-prefixed）的值 – ⇧⌘R / Shift+Ctrl+R
修改标签的名称 – ⇧⌘K / Shift+Ctrl+'

增减数值类别

增加1: Ctrl+↑ 这个与Mac的按键冲突，需要修改快捷键
减少1: Ctrl+↓
增加0.1: Alt+↑
减少0.1: Alt+↓
增加10: ⌥⌘↑ / Shift+Alt+↑
减少10: ⌥⌘↓ / Shift+Alt+↓
⌃W / Shift+Ctrl+G

注：/ 左边是Mac的快捷键，右边是Windows的快捷键

浏览器前缀补全

-浏览器前缀-属性名其中浏览器前缀包括

w: webkit
m: moz
s: ms
o: o

例如：输入 -wm-somepop + Tab 展开为

-webkit-somepop: ;-moz-somepop: ;somepop: ;

ログイン後にコピー

渐变（Gradients）

lg(属性)如 bg:lg(to right, #f60,#f00); + Tab 展开为

background:-webkit-linear-gradient(left, #f60, #f00);background:-o-linear-gradient(left, #f60, #f00);background:linear-gradient(to right, #f60, #f00);

ログイン後にコピー