Emmet语法及配合vscode使用
emmet语法能帮助我们快速的编写html,是我们的工作事半功倍。以下将介绍emmet的语法及如何配合VScode编辑使用。希望对你有所帮助。
- emmet语法
-
快速生成html初始结构
输入英文! 点击tab生成html初始结构
-
生成带有id和class的标签
div#id =><div id="id"></div> div.class div#class =><div class="class"></div>
-
生成具有层级的标签结构
div>ul>li <div><ul><li></li></ul></div> div>ul>li <div></div> <ul></ul> <li></li> div>ul>li+div <div> <ul> <li></li> </ul> <div></div> </div>
-
生成重复的标签
div*3 <div></div> <div></div> <div></div>
-
对标签进行分组
div>(ul>li>a)+div>p <div> <ul> <li><a></a></li> </ul> <div> <p></p> </div> </div>
-
生成带有属性的标签
a[href=’XXX’ name=‘uuu’] <a href='XXX' name='uuu'></a>
- vscode使用
-
现在下载插件Mithril Emmet
-
配置setting.json
"liveServer.settings.donotShowInfoMsg": true,
// "editor.quickSuggestions": true,
"emmet.showSuggestionsAsSnippets": true,
"emmet.triggerExpansionOnTab": true