Emmet语法

快速生成html5的文档格式

第一种方式：! 然后按Tab键
第二种方式：html:5

通过以上两种方式都可以快速生成html5的文档格式，省去了大量的代码书写，然后就会快速得到如下代码：

<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

快速生成容器

div#box 或 #box就可以快速生成id容器，如下

<div id="box"></div>

div.class1 或 .class1 就可以快速生成class容器，如下

<div class="class1"></div>

多行代码快速生成

上下级生成 div>p>a

<div>
        <p><a href=""></a></p>
    </div>

平级生成 div+p+a

<div></div>
    <p></p>
    <a href=""></a>

父级生成 div>p^a

<div>
        <p></p>
    </div>
    <a href=""></a>

多行导航或列表生成 ul.list>li.item*6>a{item$}

<ul class="list">
        <li class="item"><a href="">item1</a></li>
        <li class="item"><a href="">item2</a></li>
        <li class="item"><a href="">item3</a></li>
        <li class="item"><a href="">item4</a></li>
        <li class="item"><a href="">item5</a></li>
        <li class="item"><a href="">item6</a></li>
    </ul>

链接生成 a[https://www.php.cn]{php.cn}

<a href="" https://www.php.cn="">php.cn</a>

通过emmet 语法可以快速生成需要的代码，大大简化了书写代码的数量，可以快速帮助编写html代码。

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

重温emmet让代码写作提升10倍

2021-09-24 12:41:48