emmet常用基本语法备忘

2020-07-07 Jgw、无尘 1726次

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

声明:
1.本站的资源收集于互联网,仅供大家学习交流,请勿用于非法用途,否则后果自负!
2.如转载本站的原创文章,请勿必注明文章来源,对于不尊重原创的行为我们将追究责任