Emmet使用
1、创建H5页面 html:5 TAB键 或者直接!+TAB
效果<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
2、CSS
link[href]+TAB
效果link rel="stylesheet" href="">
3、JS
script:src+TAB
效果<script src=""></script>
4、内容创建是标签+样式
p.col-md-5+TAB
效果<p class="col-md-5"></p>
也可以直接.样式+Tab 默认的是DIV标签
.col-md-5+TAB
效果<div class="col-md-5"></div>
子元素使用 >符号
.container>.row+TAB
效果<div class="container">
<div class="row"></div>
</div>
同时创建多个子元素用号
.container>.row>p5
效果
<div class="container">
<div class="row">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
同级之间可以使用+号
.container>.row>p3+span2
效果
<div class="container">
<div class="row">
<p></p>
<p></p>
<p></p>
<span></span>
<span></span>
</div>
</div>
如果想要使用上一级 可使用符号^ shift+6
.container>.row>p3+span2^p*2
效果
<div class="container">
<div class="row">
<p></p>
<p></p>
<p></p>
<span></span>
<span></span>
</div>
<p></p>
<p></p>
</div>
image.png
图中的P标签就是使用^符号 后面的元素就和span的父级同级了
如何给标签里面默认显示的文字呢
使用{}
.container>.row>span{文字}+TAB
image.png
这时候我们发现文字都是一样的 怎么使用不一样的呢文字里加个
image.png
在此
 使用@- 这种.container>.row>span{文字](https://math.jianshu.com/math?formula=%E7%AC%A6%E5%8F%B7%E5%8F%AA%E6%98%AF%E4%B8%80%E4%B8%AA%E5%8D%A0%E4%BD%8D%E5%9B%BE2%E4%B8%AA%E7%AC%A6%E5%8F%B7%E5%B0%B1%E6%98%AF2%E4%BD%8D3%E4%B8%AA%E7%AC%A6%E5%8F%B7%E5%B0%B1%E6%98%AF3%E4%BD%8D%20.container%3E.row%3Espan%7B%E6%96%87%E5%AD%97%24%24%24%7D*3%20!%5Bimage.png%5D(https%3A%2F%2Fupload-images.jianshu.io%2Fupload_images%2F2291490-aeff5c1e69854c5d.png%3FimageMogr2%2Fauto-orient%2Fstrip%257CimageView2%2F2%2Fw%2F1240)%20%E4%BD%BF%E7%94%A8%40-%20%E8%BF%99%E7%A7%8D.container%3E.row%3Espan%7B%E6%96%87%E5%AD%97)
3
image.png
使用@-
这种.container>.row>span{文字$$$@-}*3
image.png
就是倒序的
id p#ccc
image.png
image.png
image.png
