Emmet 基本使用
默认快捷键 Tab
1. 子代：>
缩写：nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav
2. 兄弟：+
缩写：div+p+div
<div></div>
<p></p>
<div></div>
3. 上级：^
缩写：div+div>p>h1+a^img
<div></div>
<div>
<p>
<h1></h1>
<a href=""></a>
</p>
<img src="" alt="">
</div>
上两级：^^
4. 分组：()
缩写：div>(header>p>h1+img)+footer>p
<div>
<header>
<p>
<h1></h1>
<img src="" alt="">
</p>
</header>
<footer>
<p></p>
</footer>
</div>
5. 乘法：*
缩写：li*4
<li></li>
<li></li>
<li></li>
<li></li>
6. 自增符号：$
缩写：ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
7. 设置 id 属性的值：#id 值
eg：div#header
<div id="header"></div>
8. 设置 class 属性的值： .class 值
eg1：div.header
<!--设置一个 class-->
<div class="header"></div>
eg2：div.class.a.b.c
<!--设置多个 class>
<div class="header a b c"></div>
9. 自定义属性值：[]
eg1：p[title="hello world"]
<p title="hello world"></p>
eg2：p[title]
<p title=""></p>
eg3：input[type="text" placeholder="please input"]
<input type="text" placeholder="please input">
10. 文本：{}
eg1：a{click me}
<a href="">click me</a>
eg2：p>{click}+a{here}+{to continue}
<p>click<a href="">here</a>to continue</p>
11. 更多缩写
- 缩写：!
生成 HTML 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
- 缩写：link
<link rel="stylesheet" href="">
- 缩写：script
<script></script>
- 缩写：script:src
<script src=""></script>
- 缩写：form:post
<form action="" method="post"></form>
- 缩写：input:submit
<input type="submit" value="">
注：
- 所有未知缩写都会转为标签，如：poo*4
<poo></poo>
<poo></poo>
<poo></poo>
<poo></poo>
内容待添加
网友评论