Emmet 插件的使用

Emmet 插件

简单描述

Html:5 或 ！ + Tab 可生成文档结构
meta：utf + Tab 生成字符集
meta：up + Tab
meta： compet + Tab
link:css + Tab 引用 css 文件
Script:src + tab 加载 JS 文件
p.info +Tab \ div.red + Tab \ .red + Tab 带类样式
h2#header + Tab div#header +Tab 生成带 Id 的标签
ul>li + Tab生成下线标签
a{文本} + Tab同时生成文本
p[title=’文本’] + Tab
ul>li*5 + Tab重复生成

具体描述

加Tab键执行语句

带有层级结构的：ul>li

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

代码在同级的：ul+li

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

带有优先级的：(ul>li)+bq

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

对比没有优先级的：ul>li+bq

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

在上级的：ul>li^bq(这个可以多个^一起写)

     <ul>
         <li></li>
     </ul>
     <blockquote></blockquote>
     <!-- 上面代码可以看出来效果是等同于(ul>li)+bq的 -->

乘号批量复制：ul>li*3

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

创建带有指定 class 样式的标签：div.box

 <div class="box"></div>

创建带有指定 id 样式的标签：div#box

 <div id="box"></div>

一个标签创建多个 class：div.box1.box2.box3

 <div class="box1 box2 box3"></div>

一个标签同时创建 class 和 id：div.box#box2

 <div class="box" id="box2"></div>

自定义属性内容：ul>li>a[href=’#’]

 <ul>
     <li>
         <a href="#"></a>
     </li>
 </ul>

也可以自定义属性：ul>li>test[data-content=’this_is_data_value’]

 <ul>
     <li>
         <test data-content="this_is_data_value"></test>
     </li>
 </ul>

文本内容填充：a{首页}

 <a href="">首页</a>

隐式标签：

.class
<div class="class"></div>

(#id)
<div id="id"></div>

ul>.class

     <ul>
         <li class="class"></li>
     </ul>

label[for=’content’]>#content

     <label for="content">
         <span id="content"></span>
     </label>

$符号自增

 ul>li.$*3
 <ul>
     <li class="1"></li>
     <li class="2"></li>
     <li class="3"></li>
  </ul>
 ul>li{第$$条项目}*3
 <ul>
     <li>第01条项目</li>
     <li>第02条项目</li>
     <li>第03条项目</li>
 </ul>

复合式的案例：

 ul>li[id='item$']{第$$$条数据}*10
 <ul>
     <li id="item1">第001条数据</li>
     <li id="item2">第002条数据</li>
     <li id="item3">第003条数据</li>
     <li id="item4">第004条数据</li>
     <li id="item5">第005条数据</li>
     <li id="item6">第006条数据</li>
     <li id="item7">第007条数据</li>
     <li id="item8">第008条数据</li>
     <li id="item9">第009条数据</li>
     <li id="item10">第010条数据</li>
 </ul>