关于在sublime中搭建并使用Emmet的问题解决

环境:sublime+Emmet
搭建

安装sublime的插件Emmet 实现快速写入html,css代码  ctrl+E或者Tab

1.https://www.jb51.net/softjc/121265.html
2.https://jingyan.baidu.com/article/ce43664935b90c3772afd377.html

教程: https://www.php.cn/code/18340.html

常用头引用标签

1 新建保存html文件
输入 html:5
按tab
下面同理
2 meta:utf
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
3 meta:vp
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
3 meta:compat  匹配浏览器
<meta http-equiv="X-UA-Compatible" content="ie=edge">
4 link:css 或者link  
5 script 后者 script:src按tab

1 生成带类样式的标签

1.1   p.info 按tab或者Ctrl + E
  效果:
  <p class="info"></p>

1.2 div.red 或者.red 因为div是Emmet默认的标签.可以省略
效果
<div class="red"></div>

2 生成带ID的标签

2.1     h2#header
效果
    <h2 id="header"></h2>

2.2   #header 或者div#header
效果
    <div id="header"></div>

3 a标签

3.1   a:link
效果
       <a href="http://"></a>
 
3.2   a:mail
效果
    <a href="mailto:"></a>

4 根据标签的位置关系生成标签

4.1 同级标签/兄弟标签
 h2.header+p.info        <!--不能有空格-->
效果
<h2 class="header"></h2>
<p class="info"></p>

4.2 后代标签   大于号
ul>li
效果
<ul>
     <li></li>
</ul>

4.3 前辈标签 上级标签 倒V符号
h2>span^p.info        生成一个在span的上级标签,与h2同级
效果
<h2><span></span></h2>
<p class="info"></p>

5 生成标签时生成需要的文本

5.1     a{文本}
效果
<a href="">文本</a>

5.2   p[title="这是中括号"]
效果
<p title="这是中括号"></p>


5.3 a[href="http://www.php.cn"]{php中文网}
效果
<a href="http://www.php.cn">php中文网</a>

6 重复生成的功能 *阿拉伯数字

6.1   ul>li*5
效果
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

7 快速生成一个有8个列表项的导航

7.1  ul.list>li.item*8>a{这是导航列表项}      在li后面有a链接
效果
<ul class="list">
    <li class="item"><a href="">这是导航列表项</a></li>
    <li class="item"><a href="">这是导航列表项</a></li>
    <li class="item"><a href="">这是导航列表项</a></li>
    <li class="item"><a href="">这是导航列表项</a></li>
    <li class="item"><a href="">这是导航列表项</a></li>
    <li class="item"><a href="">这是导航列表项</a></li>
    <li class="item"><a href="">这是导航列表项</a></li>
    <li class="item"><a href="">这是导航列表项</a></li>
</ul>

8 给标签自动添加编号或者排序 $ , @

8.1  使用$符号
ul.list>li.item*8>a{这是导航列表项$}
效果 想要两位数就$$ 同理
<ul class="list">
    <li class="item"><a href="">这是导航列表项1</a></li>
    <li class="item"><a href="">这是导航列表项2</a></li>
    <li class="item"><a href="">这是导航列表项3</a></li>
    <li class="item"><a href="">这是导航列表项4</a></li>
    <li class="item"><a href="">这是导航列表项5</a></li>
    <li class="item"><a href="">这是导航列表项6</a></li>
    <li class="item"><a href="">这是导航列表项7</a></li>
    <li class="item"><a href="">这是导航列表项8</a></li>
</ul>

8.2  使用$$@-符号  倒数
ul.list>li.item*8>a{这是导航列表项$$@-}
效果
<ul class="list">
    <li class="item"><a href="">这是导航列表项08</a></li>
    <li class="item"><a href="">这是导航列表项07</a></li>
    <li class="item"><a href="">这是导航列表项06</a></li>
    <li class="item"><a href="">这是导航列表项05</a></li>
    <li class="item"><a href="">这是导航列表项04</a></li>
    <li class="item"><a href="">这是导航列表项03</a></li>
    <li class="item"><a href="">这是导航列表项02</a></li>
    <li class="item"><a href="">这是导航列表项01</a></li>
</ul>


8.3 从指定数字开始排序
ul.list>li.item*8>a{这是导航列表项$$@100}    两位对应100
效果
<ul class="list">
    <li class="item"><a href="">这是导航列表项100</a></li>
    <li class="item"><a href="">这是导航列表项101</a></li>
    <li class="item"><a href="">这是导航列表项102</a></li>
    <li class="item"><a href="">这是导航列表项103</a></li>
    <li class="item"><a href="">这是导航列表项104</a></li>
    <li class="item"><a href="">这是导航列表项105</a></li>
    <li class="item"><a href="">这是导航列表项106</a></li>
    <li class="item"><a href="">这是导航列表项107</a></li>
</ul>

详细查看Emmet官网
www.emmet.io