emmet基本语法

来源：互联网发布：淘宝图像识别编辑：程序博客网时间：2024/06/02 12:48

Emmet是一个可以提高前端开发效率的实用插件，你可以通过极短的代码输入来获得你想要的代码结构，而你需要做的前期工作就是花些时间来熟悉emmet本身的语法，其实这些语法看起来并不复杂，下面就向大家分享一下emmet常用的基本语法。

一旦上手熟练emmet的基本语法之后，你会发现写代码是一件无比轻松愉快的事情！

html结构快速输出

输入:ol tab输出:<ol></ol>输入:ol+tab输出:<ol><li></li></ol>输入:p+h2输出:<p></p><h2></h2>输入:p{abc}输出:<p>abc</p>输入:p[class="abc"]{段落文字内容}输出:<p class="abc">段落文字内容</p>输入:ol>li*4输出:<ol><li></li><li></li><li></li><li></li></ol>输入:(ul>li*4)+ol输出:<ul><li></li><li></li><li></li><li></li></ul><ol></ol>输入:a[target="-blank"]输出:<a href="" target="-blank"></a>

输入:div+p+bq输出:<div></div><p></p><blockquote></blockquote>

输入:table>caption{标题}+tr>th*4^tr*4>td{dd}*3输出:<table><caption>标题</caption><tr><th></th><th></th><th></th><th></th></tr><tr><td>dd</td><td>dd</td><td>dd</td></tr><tr><td>dd</td><td>dd</td><td>dd</td></tr><tr><td>dd</td><td>dd</td><td>dd</td></tr><tr><td>dd</td><td>dd</td><td>dd</td></tr></table>

html元素快速输出

输入:html:5或!输出:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body></body></html>输入:a输出:<a href=""></a>输入:a:link输出:<a href="http://"></a>

输入:style输出:<style></style>输入:script输出:<script></script>输入:iframe输出:<iframe src="" frameborder="0"></iframe>输入:img输出:<img src="" alt="">输入:map输出:<map name=""></map>输入:area输出:<area shape="" coords="" href="" alt="">

2 0