emmet常用基本语法备忘

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具，能够实现 HTML、CSS 的快速编写。

记住一些常用的emmet基本语法，大大提高前端代码书写速度。

1、html初始结构：！

下图中的结构，偷懒的都会直接一个！=> Tab 解决，这样可以快速生成基础的结构，同时防止手写时忘记某个代码块，输入错误的代码。

2、后代：>

缩写：nav>ul>li

输出：

3、兄弟：+

缩写：div+p+bq

输出：

4、上级：^，上级的上级可以使用两个^^表示

缩写：div+div>p>span+em^bq

输出：

5、分组：()

缩写：div>(header>ul>li*2>a)+footer>p

输出：

6、乘法：*

缩写：ul>li*5

输出：

7、自增符号：$，从1自增，如果需要从01或001自增，可以使用$$和$$$

缩写：ul>li.item$*5

输出：

8、ID和类属性

缩写：#header 和.title

输出：

9、自定义属性

缩写：p[title=”Hello world”]

输出：<p title=”Hello world”></p>

10、文本：{}

缩写：a{Click me}

输出：<a href=””>Click me</a>

11、隐式标签

缩写：table>.row>.col

输出：

12、基本html标签

处上面说的!之外，html的一些常用标签都可以缩写，如下

缩写：a

输出：<a href=””></a>

缩写：input

输出：<input type=”text” />

缩写：img

输出：<img src=”” alt=”” />

缩写：script:src

输出：<script src=””></script>

缩写：form:post

输出：<form action=”” method=”post”></form>

其他基本html标签都类似，大家可以在日常编码中去多去实践，熟练之后对前端代码的编写速度将有大幅提升

甲骨文普通用户

收藏 海报分享