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->

eg:div#two->

组合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{这是一个段落}->

这是一个段落

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，有个保存时自动格式化的选项，勾上即可