【前端学习】快速生成html和css语法

Emmet语法

快速生成html结构语法

1. 生成标签 直接输入标签名 按tab即可
2. 如果想要生成多个相同标签 加上就可以了 eg：div3
3. 如果有父子级关系的标签，可以用> eg：ul>li*5
4. 如果有兄弟关系的标签，用+就可以了 eg：div+p
5. 如果生成带有类名或者id名字的，直接写 .demo 或者#two tab键即可 eg: p.one
6. 如果生成的div类名是由顺序的，可以用自增符号$
7. 如果想要在生成的标签里面写文字 可以用{文字}表示 eg：div{nihao}

快速生成CSS样式语法

CSS采取简写形式即可

1. 比如 w200 按tab 可以生成 width:200px;
2. 比如 lh26 按tab 可以生成 line-height:26px;

    <style>
      .one {
          /* tac       */
          text-align: center;
          /* text-align: center; */
          /* ti tab 2em */
          text-indent: 2em;
          /* w100 tab */
          width: 100px;
          /* h200 */
          height: 200px;
          /* lh2em */
          text-indent: 2em;
          line-height: 26px;
          /* tdn */
          text-decoration: none;
      }
    </style>

格式化代码

右键 格式化代码
或者是 shift+alt+f

新版直接搜fomat 然后勾选两个就好了