5-前端笔记-CSS-Emmet语法

使用缩写，提高html/css的编写速度

1、快速生成HTML结构语法

（1）生成标签，直接输入标签名，按tab或回车即可
（2）生成多个相同的标签，加上* ，比如div*3

	<div></div>
    <div></div>
    <div></div>

（3）如果有父子级关系的，用>,如ul>li

	<ul>
        <li></li>
    </ul>

（4）如果是兄弟标签，用+,如div+p

	<div></div>
    <p></p>

（5）如果标签带class属性的，可以写标签名.属性名，如p.read，如果不带标签名，就默认是div标签

 <p class="read"></p>

（6）如果标签带id属性的，可以写标签名#id名，如p#red。如果不带标签名，就默认是div标签

<p id="red"></p>

（7）如果希望生成的标签的class属性是多个且按照顺序，使用$符号，不写标签名默认是div标签。如：

.demo$*5
p.demo$*5

<div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

（8）如果想要在生成的标签内部写内容，可以用{},如p{aaaa}

<p>aaa</p>

2、快速生成CSS样式语法

简写：
text-align:center-----tac
width:100----w100
line-height:26px—lh26px

3、vscode快速格式化代码

shift+alt+f