Sublime TextプラグインEmmetの使い方を詳しく解説

要約:

インストール前回の記事Sublime Text-インストールを読んで、Sublime独自のショートカットキーと組み合わせて使用​​し、HTMLを素早く書いてください。

以下は一般的に使用されます。完全な情報については、emmet の公式ドキュメントを参照してください。

タグを生成する

1. ドキュメント構造を迅速に生成します

• ! または html:5 を迅速に生成し、HTML5!或html:5，快速生成 HTML5 结构(都需要再按tab键)

nbsp;html>


    <meta>
    <title>Document</title>

• html:xt 生成 HTML4 过渡型

• html:4s 生成 HTML4 严格型

2.生成带 id 的元素

标签 # ID名，如：p#header

<p></p>

3.生成带 class 的元素

标签 . 类名，如：p.title

<p></p>

4.生成后代元素：>

如：nav>ul>li

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

5.生成兄弟元素：+

如：p+p+p

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

6.生成上级元素：^

如：p^p

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

7.重复生成多个元素：*
如：ul>li*5

    
•     
•     
•     
•     

8.生成带自定义属性：[attr]

如：p[value=1]

<p></p>

9.生成带文本内容：{}

如：a{Click me}

<a>Click me</a>

10.加编号：$

• 从1开始：加$

如：p.item${$$}*3

<p>01</p>
<p>02</p>
<p>03</p>

• 倒序： $ 后面增加 @-

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

<p>03</p>
<p>02</p>
<p>01</p>

• 指定序号：可以使用 @N

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

<p>04</p>
<p>05</p>
<p>06</p>

11.分组：()

如：(ul>ol)*3

    

    

    

来个综合案例

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

                                                                                                              

01	02	03
01	02	03
01	02	03

生成css

css样式多，缩写自然也很多，列举常用的举一反三即可。

其中css缩写是采用模糊搜索匹配的，比如ov:h == ov-h == ovh == oh。

• w10 <a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 10px; w10p width: 10%; w10e width: 10em; w10x width: 10xe;

• h10 <a href="http://www.php.cn/wiki/836.html" target="_blank">height</a>: 10px;

• por <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>: relative; poa position: absolute;

• fll <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>: left; fr float: <a href="http://www.php.cn/wiki/905.html" target="_blank">right</a>;

• dt <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: table; db display: block; dib display: inline-block;

• ovy <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</a>: both;

• mt <a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a>: ; mb <a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</a>: ; 構造 (もう一度 Tab キーを押す必要があります)

首页
简介
动态

🎜🎜🎜html:xt HTML4 遷移型を生成します🎜🎜🎜html:4s HTML4 厳密型を生成します🎜🎜2. id🎜🎜tag # ID 名を持つ要素を生成します例: p#header🎜

<nav>
    <ul>
        <li><a>首页</a></li>
        <li><a>简介</a></li>
        <li><a>动态</a></li>
    </ul>
</nav>

🎜3. クラスを使用して要素を生成します🎜🎜 🎜 タグ: p.title🎜

1首页
2简介
3动态

🎜 などのクラス名: nav>ul>li🎜

<img  src="/static/imghwm/default1.png" data-src="img/x1.png" class="lazy" alt="Sublime TextプラグインEmmetの使い方を詳しく解説" >
<img  src="/static/imghwm/default1.png" data-src="img/x1.png" class="lazy" alt="Sublime TextプラグインEmmetの使い方を詳しく解説" >

🎜 などの子孫要素を生成します。 5. 兄弟要素の生成: +🎜🎜 など: p+p+p🎜

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!

🎜 6. 上位要素の生成: ^🎜🎜 など: p^p🎜

Lorem ipsum dolor sit amet.

🎜7. 複数の要素を繰り返し生成します: *
例: ul>li*5🎜rrreee🎜8. カスタマイズされた 属性🎜: [attr]🎜🎜 例: p[value=1]🎜rrreee🎜9. テキスト コンテンツの生成: {}🎜🎜例: a{Click me}🎜rrreee🎜10。番号を追加します: $🎜🎜🎜🎜 1 から開始: $🎜🎜 例: p.item${ $$}*3🎜rrreee🎜🎜🎜 逆の順序: $ の後に @-🎜 が続く🎜 例: p.item$@-{ $$@-}*3 🎜rrreee🎜🎜🎜シリアル番号を指定します。@N🎜を使用できます。🎜例: p.item$@4{$ $@4}*3🎜 rrreee🎜11.グループ🎜: ()🎜🎜そのような例: (ul>ol)*3 🎜rrreee🎜包括的な内容を見てみましょうcase🎜🎜🎜table#tab[value= 1].a>tr*3>(td{$$}>span)*3🎜rrreee🎜css生成🎜🎜css スタイルはたくさんあります, そして当然多くの略語がありますが、よく使われる略語を列挙して推測してみましょう。 🎜🎜CSS の略語は、ov:h == ov-h == ovh == oh などのあいまい検索を使用して照合されます。 🎜🎜🎜🎜w10 <a href="http://www.php.cn/wiki/835.html" target="_blank">width🎜: 10px;</a> w10p width: 10%; w10e width: 10em; w10x width: 10xe;🎜🎜🎜h10 <a href="http:/%20/www.php.cn/wiki/836.html" target="_blank">高さ🎜: 10px;</a>🎜🎜🎜por <a href="http://www.%20php.cn/wiki/902.html" target="_blank">位置🎜: 相対;</a> poa 位置: 絶対;🎜🎜🎜fll <a href="http://www.php.cn/wiki/919.html" target="_blank">float🎜: left;</a> fr float: <a href="http://www%20.php.cn/wiki/905.html" target="_blank">正しいです🎜;</a>🎜🎜🎜dt <a href="http://www.php.cn/%20wiki/927.html" target="_blank">display🎜: table;</a> db display: block; dib display: inline-block;🎜 li>🎜🎜ovy <a href="http://www.php.cn/wiki/926.html" target="_blank">overflow-y🎜: hidden;</a>🎜🎜🎜cb <a href="http://www.php.cn/wiki/917.html" target="_blank">クリア🎜: 両方;</a>🎜🎜🎜 mt <a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top🎜: ;</a> mb <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><a>首页</a></li>
        <li><a>简介</a></li>
        <li><a>动态</a></li>
    </ul>
</nav>

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

1首页
2简介
3动态

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

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

<img  src="/static/imghwm/default1.png" data-src="img/x1.png" class="lazy" alt="Sublime TextプラグインEmmetの使い方を詳しく解説" >
<img  src="/static/imghwm/default1.png" data-src="img/x1.png" class="lazy" alt="Sublime TextプラグインEmmetの使い方を詳しく解説" >

• 删除标签：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.

以上がSublime TextプラグインEmmetの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。