Emmet-HTML速写

框架横行的时代，vue和react写多了，你是不是都忘了html基础结构是怎样的了？

一个"!"键就可以解决，输入英文感叹号，然后回车或者tab，即可看到下面的基础html结构

Emmet常用语法

• ! —— 生成Html结构
• # —— 元素id
• . —— 元素class
• > —— 子节点
• + —— 兄弟节点
• ^ —— 父节点
• *n —— 重复n次指令
• $ —— 计数编号
• () —— 分组
• [] —— 属性
• {} —— 文本内容
• 隐式标签：在不输入标签名的时候默认是div

一个例子让你明白所有：

section.box>(ul#ul-$>(li.li-$>(.name{name$}+.desc[data-index=$]>lorem3))*5^div.btn)*1

<section class="box">
  <ul id="ul-1">
    <li class="li-1">
      <div class="name">name1</div>
      <div class="desc" data-index="1">Lorem, ipsum dolor.</div>
    </li>
    <li class="li-2">
      <div class="name">name2</div>
      <div class="desc" data-index="2">Perspiciatis, ea provident?</div>
    </li>
    <li class="li-3">
      <div class="name">name3</div>
      <div class="desc" data-index="3">Quasi, asperiores a!</div>
    </li>
    <li class="li-4">
      <div class="name">name4</div>
      <div class="desc" data-index="4">Necessitatibus, provident accusamus!</div>
    </li>
    <li class="li-5">
      <div class="name">name5</div>
      <div class="desc" data-index="5">Fugit, vitae cumque.</div>
    </li>
  </ul>
  <div class="btn"></div>
</section>

【注】lorem：乱数假文