html代码快速生成

html代码快速生成的写法(也称Emmet语法)

在敲代码的过程中，工作量非常的大，代码也不能一点点的写，非常影响效率，所以我们有快速的方法来编写代码的框架，节省了我们大量的时间，下面就来看看Emmet语法(这里我使用的是前端流行开发工具Visual Studio Code)！

Emmet语法

1. .+类名——快速生成类选择器

输入.nav
出现<div class="nav"></div>

2. #+id名——快速生成id选择器

   输入#two
   出现<div id="two"></div>
   

3. 标签+标签——快速生成兄弟级标签

   输入div+p
   出现<div></div>
   	<p></p>
   

4. 标签>标签——快速生成父子级标签

   输入ul>li
   出现<ul>
       <li></li>
   </ul>
   

5. 标签*number——快速生成number个标签

   输入p*4
   出现<p></p>
       <p></p>
       <p></p>
       <p></p>
   

6. $——自增符号

   输入ul>li*3{$}
   出现<ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
   

7. 标签+{内容}——快速生成内容

   输入div{你好吖}
   出现<div>
       你好吖
   </div>
   

8. shift+Alt+F——格式化文档(主要是对编写不规范的代码进行格式化，比如没对齐，没缩进等)

以上语法知识只是最基础的用法，他们之间可以互相使用和一起使用，对代码的编写效率有极大的提高，下面我就稍微举几个结合使用的例子！！！

输入.left+#one
出现<div class="left"></div>
	<div id="one"></div>
以此类推^_^!

输入ul>li>a*3{$}
出现<ul>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
</ul>
是不是很神奇^v^!

还有很多结合使用的语法，都是用基础的语法搭建，使用比较灵活，大家都可以去试试哦！~