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

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

Emmet语法

  1. .+类名——快速生成类选择器
输入.nav
出现<div class="nav"></div>

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

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

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

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

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

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

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

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

  5. $——自增符号

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

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

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

  7. 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^!

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

更多推荐

html代码快速生成