CSS快捷键专题（第二天02-04课）

02、Emmet语法生成html标签

1、简介：Emmet是用来提高html/css的编写速度，CScode内部已经集成了该语法

2、快速生成HTML结构语法：
①生成标签：直接输入标签名，按tab键即可
②如果想要生成多个相同的标签，加上*就可以了，比如div*3可以快速生成3个div标签
③如果有父子级关系的标签，可以用>，比如ul >li就可以快速生成

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

④如果有兄弟关系的标签，用+就可以了，比如div+p

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

⑤如果生成带有类名或者id名字的，直接写.demo或者#twotab键即可
eg：div.demo-><div class="demo"></div>
eg:div#two-><div id="tow"></div>
组合eg：ul>li.demo->

    <ul>
        <li class="demo"></li>
    </ul>

⑥如果生成的div类名是有顺序的，可以用自增符号$
eg：div.demo*5

    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>

而div.demo$*5

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

⑦如果想要在生成的标签内部写内容可以用{}表示
eg：p{这是一个段落}-><p>这是一个段落</p>
eg：p{这是第$个段落}*5->

    <p>这是第1个段落</p>
    <p>这是第2个段落</p>
    <p>这是第3个段落</p>
    <p>这是第4个段落</p>
    <p>这是第5个段落</p>

03、快速生成CSS样式语法

1、CSS基本采取简写形式即可：（最简化方法只能在html中）（其他和lint code的差不多）
eg1：w200按tab->width: 200px;

04、快速格式化代码

1、右键-格式化文档（或者shift+alt+F）:将所有代码的格式，都变成最规范的写法（变得整洁好看了）

2、快速格式化代码的设置（就是设置成：当我们保存页面的时候自动格式化代码）
①文件->首选项->设置
②搜索emmet.include
③在setting.json下的“用户”中添加以下语句：

"editor.formatOnType":true,
"editor.formatOnSave":true

只需要设置一次即可，以后都可以自动保存格式化代码

注意：新版本中直接搜索format，有个保存时自动格式化的选项，勾上即可