7.emment语法小结

emmet是一种介于标记性语言(如html、xml)和规范之外的逻辑输入方法,是一种能大幅提高前端开发效率的工具。

1.类选择器的快捷写法

<body>
  
  <!--标签名 + . + 对应类名 -->
div.test
生成
  <div class="test"></div>
  
</body>
</html>

2.id选择器的快捷写法

<body>

  <!--对应标签  + # + 对应类名 -->
  div + # + test
  <div id="test"> </div>
  div + # + test
  <a href="" id="test"></a>
</body>

</html>

3标签内属性设置的快捷写法  使用方括号

<body>
  <!-- a[href=name class=2] -->
  <a href="1" class="2"></a>
  <!-- a[class=name] -->
 <a href="" class="name"></a>
</body>

</html>

4标签内容的快捷写法

<body>

<!-- div+{name} -->
<div>name</div>
<!-- div+{computer}.name -->
<div class="name">computer</div>
</html>

5 子节点(>),兄弟节点(+),上级节点(^)


<!-- 子节点   >  -->
<!-- din>ul>li -->
<div>
  <ul>
    <li></li>
  </ul>
</div>

<!-- 兄弟节点   +-->
<!-- div+header -->
<div></div>
<header></header>

<!-- 上级节点   ^-->
<!-- div>ul>li^^div -->
<div>
  <ul>
    <li></li>
  </ul>
</div>
<div></div>

</body>

</html>

快速写一个表格

<body>
<!-- 利用了子节点和上级节点 -->
  <!-- table>tr>th*3^tr>td*3 -->
<table>
  
  <tr>
    <th>1</th>
    <th>1</th>
    <th>1</th>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

 

6重复 *number

<style>
  /* 重复多个div */
  /* div*3 */

  <div></div>
<div></div>
<div></div>

/* 重复多个a链接 */
/* a[href='' class=name$]*3 */
<a href="" class="name1"></a>
<a href="" class="name2"></a>
<a href="" class="name3"></a>

</body>
</html>

7分组(())

比如:div>(ul>li>a)+div>p,括号里面的内容Wie一个代码块,表示与括号内部嵌套和外面的层级无关。

<div>
   <ul>
     <li><a href=""></a></li>
   </ul>
   <div>
     <p></p>
   </div>
 </div>

这里如果不加括号的话,猜想下,a+div这样div就是和a是兄弟关系了,会包含在li里面。

 <div>
   <ul>
     <li>
       <a href=""></a>
       <div>
         <p></p>
       </div>
     </li>
   </ul

8自动加数字编号$

<!-- 类名$*num -->
<!-- ul>li.name$*3 -->
<ul>
  <li class="name1"></li>
  <li class="name2"></li>
  <li class="name3"></li>
</ul>

一个$代表一个数字,

<!-- 一个$代表一个数字,比如类名$$$*num -->
<!-- ul>li.name$$$*3 -->
<ul>
  <li class="name001"></li>
  <li class="name002"></li>
  <li class="name003"></li>
</ul>

如果想自定义开始数字,则使用  类名$@开始数字*重复次数

<!-- 定义开始数字 @开始数字*重复次数 -->
<!-- ul>li.name$@4*3 -->
<ul>
  <li class="name4"></li>
  <li class="name5"></li>
  <li class="name6"></li>
</ul>

9文本指令

标签名{文本}

<!-- 标签 {文字}  -->

<div>我的</div>

结合编号$一起使用

<!-- ul>li>test*3{名字$} -->
<ul>
  <li class="test">名字1</li>
  <li class="test">名字2</li>
  <li class="test">名字3</li>
</ul>

10隐式标签

常见的如ul和li,option和select

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值