search

Home  >  Article  >  Web Front-end  >  Detailed explanation of the use of Sublime Text plug-in Emmet

Detailed explanation of the use of Sublime Text plug-in Emmet

高洛峰
高洛峰Original
2017-03-26 10:14:511853browse

Summary:

Installation Please read the previous article Sublime Text-Installation, use it with sublime’s own shortcut keys, and write HTML quickly.

The following are commonly used. For complete information, please see the emmet official documentation.

Generate tags

1. Quickly generate document structure

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

  • html:xt Generate HTML4 transitional type

  • html:4s Generate HTML4 strict type

2. Generate elements with id

Tag # ID name, such as:

p#header

<p id="header"></p>
3. Generate elements with

class

tag. Class name, such as:

p.title

<p class="title"></p>
4. Generate descendant elements:>

Such as:

nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>
5 .Generate sibling elements: +

such as:

p+p+p

<p></p>
<p></p>
<p></p>
6. Generate superior elements: ^

such as:

p^p

<p></p>
<p></p>
7. Repeatedly generate multiple elements: *

Such as:
ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

8. Generate from Definition

Attribute: [attr]

For example:

p[value=1]

<p value="1"></p>
9. Generate text content: {}

For example:

a{Click me}

<a href="">Click me</a>
10. Add number: $

  • Start from 1: add $

For example:

p.item${$$}*3

<p class="item1">01</p>
<p class="item2">02</p>
<p class="item3">03</p>
  • Reverse order: $ followed by @-

For example:

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

<p class="item3">03</p>
<p class="item2">02</p>
<p class="item1">01</p>
  • Specify the serial number: you can use @N

For example:

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

<p class="item4">04</p>
<p class="item5">05</p>
<p class="item6">06</p>
11.

Group: ()

For example:

(ul>ol)*3

<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
Let’s take a

comprehensive case

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

<table id="tab" value="1" class="a">
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
</table>
Generate css

Many css styles , there are naturally many abbreviations, just list the commonly used ones and draw inferences.

The css abbreviation is matched using fuzzy search, such as ov:h == ov-h == ovh == oh.

  • w10

    width<a href="//m.sbmmt.com/wiki/835.html" target="_blank">: 10px;</a> w10p width: 10%; w10e width: 10em; w10x width: 10xe;

  • h10

    height<a href="//m.sbmmt.com/wiki/836.html" target="_blank">: 10px;</a>

  • por

    position<a href="//m.sbmmt.com/wiki/902.html" target="_blank">: relative;</a> poa position: absolute;

  • fll

    float<a href="//m.sbmmt.com/wiki/919.html" target="_blank">: left;</a> fr float: right<a href="//m.sbmmt.com/wiki/905.html" target="_blank">;</a>

  • dt

    display<a href="//m.sbmmt.com/wiki/927.html" target="_blank">: table;</a> db display: block; dib display: inline-block;

    • ##ovy

  • overflow-y: hidden;<a href="//m.sbmmt.com/wiki/926.html" target="_blank"></a>

    • cb

  • clear: both;<a href="//m.sbmmt.com/wiki/917.html" target="_blank"></a>

    ##mt
  • margin-top

    : ; mb <a href="//m.sbmmt.com/wiki/933.html" target="_blank"></a>margin-bottom: ;<a href="//m.sbmmt.com/wiki/935.html" target="_blank"></a>

  • pt <a href="//m.sbmmt.com/wiki/949.html" target="_blank">padding-top</a>: ; pb <a href="//m.sbmmt.com/wiki/951.html" target="_blank">padding-bottom</a>: ;

  • tac <a href="//m.sbmmt.com/wiki/870.html" target="_blank">text-align</a>: center;

  • lh <a href="//m.sbmmt.com/wiki/864.html" target="_blank">line-height</a>:;

  • tsn <a href="//m.sbmmt.com/wiki/861.html" target="_blank">text-shadow</a>: none;

  • tja <a href="//m.sbmmt.com/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="//m.sbmmt.com/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 class="item1"><a href="">首页</a></li>
        <li class="item2"><a href="">简介</a></li>
        <li class="item3"><a href="">动态</a></li>
    </ul>
</nav>

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

1首页
2简介
3动态

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

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

<img src="img/x1.png" />
<img src="img/x1.png" width="100" height="200" />

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

The above is the detailed content of Detailed explanation of the use of Sublime Text plug-in Emmet. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use html to implement positioning code examplesNext article：How to use html to implement positioning code examples

Related articles

See more