VScode中安装Emmet扩展属性运算符用于修改输出元素的属性. 嵌套操作符用于将缩写元素放置在生成的树中,是否应放置

元素

div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成html5标准的包含body为空基本dom
html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
a:mail          => <a href="mailto:"></a>
a:link          => <a href="http://"></a>
base            => <base href="">
br              => <br>
link            => <link rel="stylesheet" href="">
script:src      => <script src=""></script>
form:get        => <form action="" method="get"></form>
label           => <label for=""></label>
input           => <input type="text">
inp             => <input type="text" name="" id="">
input:hidden    => <input type="hidden" name=""> input:h亦可
input:email     => <input type="email" name="" id="">
input:password  => <input type="password" name="" id="">
input:checkbox  => <input type="checkbox" name="" id="">
input:radio     => <input type="radio" name="" id="">
select          => <select name="" id=""></select>
option          => <option value=""></option>
bq              => <blockquote></blockquote>
btn             => <button></button>
btn:s           => <button type="submit"></button>
btn:r           => <button type="reset"></button>

文本操作符(Text) 如果想在生成元素的同时添加文本内容可以使用{}

div{这是一段文本}
<div>这是一段文本</div>
a{点我点我}
<a href="">点我点我</a>

属性操作符(Attribute operators) 属性运算符用于修改输出元素的属性. Id和Class (elem#id and elem.class )

div.test  => <div class="test"></div>
div#pageId => <div id="pageId"></div>

嵌套操作符(Nesting operators) 嵌套操作符用于将缩写元素放置在生成的树中,是否应放置在上下文元素的内部或附近.

子级:> 通过>标识元素可以生成嵌套子级元素,可以配合元素属性进行连写

div#pageId>ul>li => <div id="pageId"> <ul> <li></li> </ul> </div>

同级:+ +字符表示生成兄弟级元素.

div#pageId+div.child => <div id="pageId"></div> <div class="child"></div>

父级:^ ^用于生成父级元素的同级元素,从这个^字符所在位置开始,查找左侧最近的元素的父级元素并生成其兄弟级元素.

div>p.parent>span.child^ul.brother>li => <div> <p class="parent"><span class="child"></span></p> <ul class="brother"> <li></li> </ul> </div>

VScode中安装Emmet扩展

参考文章