一.Emmet的简介
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML、CSS 的快速编写。
- 官网地址:emmet.io/
- 官方文档:docs.emmet.io/cheat-sheet…
使用Emmet的好处
通过使用Emmet的精简语法,可以加速前端的页面书写布局,提高前端的开发效率。
二. 基本语法
1.使用 Emmet 生成 HTML 的语法详解
生成 HTML 文档初始结构: !+ Tab键
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- code... -->
</body>
</html>
简单总结一下常用的 HTML 结构指令:
- html:5 或者 ! 生成 HTML5 结构
- html:xt 生成 HTML4 过渡型
- html:4s 生成 HTML4 严格型
2.生成标签
#aaa生成 id 为 aaa 的 div 标签span.bbb生成class 为 bbb 的 span 标签ul#ccc.ddd生成id 为 ccc 的 class 为 ddd 的 ul 标签
2.1 后代关系:>
div.aaa>ul>li
可以生成如下的结构:
<div class="aaa">
<ul>
<li></li>
</ul>
</div>
2.2 兄弟关系:+
div+p+bq
可以生成如下的结构:
<div></div>
<p></p>
<blockquote></blockquote>