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标签都类似,大家可以在日常编码中去多去实践,熟练之后对前端代码的编写速度将有大幅提升