详解Sublime Text 等编辑器插件Emmet的使用

原创 阁主  2018-02-10 19:47:33  阅读 762 次 评论 2 条
摘要:

下面整理的是常用的,完整的可看emmet官方文档。

生成标签

1.快速生成文档结构

  • !html:5,快速生成 HTML5 结构(都需要再按tab键)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>
  • html:xt 生成 HTML4 过渡型

  • html:4s 生成 HTML4 严格型

2.生成带 id 的元素

标签 # ID名,如:p#header

<p id="header"></p>

3.生成带 class 的元素

标签 . 类名,如:p.title

<p class="title"></p>

4.生成后代元素:>

如:nav>ul>li

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

5.生成兄弟元素:+

如:p+p+p

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

6.生成上级元素:^

如:p^p

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

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

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

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

如:p[value=1]

<p value="1"></p>

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

如:a{Click me}

<a href="">Click me</a>

10.加编号:$

  • 从1开始:加$

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

<p class="item1">01</p>
<p class="item2">02</p>
<p class="item3">03</p>
  • 倒序: $ 后面增加 @-

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

<p class="item3">03</p>
<p class="item2">02</p>
<p class="item1">01</p>
  • 指定序号:可以使用 @N

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

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

11.分组:()

如:(ul>ol)*3

<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>

来个综合案例

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>

生成css

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

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

  • w10 width: 10px; w10p width: 10%; w10e width: 10em; w10x width: 10xe;

  • h10 height: 10px;

  • por position: relative; poa position: absolute;

  • fll float: left; fr float: right;

  • dt display: table; db display: block; dib display: inline-block;

  • ovy overflow-y: hidden;

  • cb clear: both;

  • mt margin-top: ; mb margin-bottom: ;

  • pt padding-top: ; pb padding-bottom: ;

  • tac text-align: center;

  • lh line-height:;

  • tsn text-shadow: none;

  • tja text-justify: auto;

  • color: #000; cr color: rgb(0, 0, 0); cra color: rgba(0, 0, 0, .5);

  • op opacity: ;

  • cnt content: '';

  • ol outline: ;

  • 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.

以上就是详解Sublime Text 等编辑器插件Emmet的使用的详细内容,更多请朋友们多谷歌和百度!

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少!

打开支付宝扫一扫,即可进行扫码打赏哦

本文地址:https://www.mainblog.cn/45.html
版权声明:本文为原创文章,版权归 阁主 所有,欢迎分享本文,转载请保留出处!
免责申明:有些内容源于网络,没能联系到作者。如侵犯到你的权益请告知,我们会尽快删除相关内容。

发表评论


表情

评论列表

  1. 赞
    赞  浏览器图标  系统图标 【评论达人 LV.6】  @回复

    为什么每次沙发都是我的呢!!!! face_31

  2. 笨哒哒
    笨哒哒  浏览器图标  系统图标 【评论达人 LV.6】  @回复

    资源整个的不错! face_36