框架横行的时代,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:乱数假文