7.emment语法小结

最新推荐文章于 2024-01-31 10:45:58 发布

qq_47670443

最新推荐文章于 2024-01-31 10:45:58 发布

阅读量567

点赞数 1

分类专栏：重学前端基础冲击高薪文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/qq_47670443/article/details/124502502

版权

重学前端基础冲击高薪专栏收录该内容

18 篇文章 1 订阅

订阅专栏

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

qq_47670443

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
7.emment语法小结

Emment语法小结
复制链接

扫一扫

专栏目录

7.emment语法小结

5 子节点（>），兄弟节点（+），上级节点（^）

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