Emment语法快速生成HTML标签

最新推荐文章于 2024-03-16 08:05:41 发布

Lhy@@

最新推荐文章于 2024-03-16 08:05:41 发布

阅读量282

点赞数

分类专栏： HTML/CSS/H5/JavaScript 文章标签： html

本文链接：https://blog.csdn.net/Lhy_JL/article/details/113850004

版权

HTML/CSS/H5/JavaScript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

生成标签：直接输入标签名+按tab键

/* div，然后tab键*/
<div></div>

生成多个相同的标签

/*输入：div*5 (*之间不要空格)，然后tab键*/
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

生成父子级关系的标签

/*输入：div>p ，然后tab键*/
  <div>
    <p></p>
  </div>

兄弟关系的标签

/*输入：div+p ，然后tab键*/
  <div></div>
  <p></p>

生成带id属性的标签

/*输入：div#mynames，然后tab键*/
<div id="mynames"></div>

生成带class属性的标签

/*输入：div.myclass，然后tab键*/
  <div class="myclass"></div>

生成带部分内容的标签,{}

/*输入：div{hello}*5，然后tab键,内容写在{}里*/
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>

若想要自增顺序的可以用自增符号 $

/*输入：div{hello$}*5，然后tab键,*/
  <div>hello1</div>
  <div>hello2</div>
  <div>hello3</div>
  <div>hello4</div>
  <div>hello5</div>

其他例子

/*div.myclass$*5>span，然后tab键 */
  <div class="myclass1"><span></span></div>
  <div class="myclass2"><span></span></div>
  <div class="myclass3"><span></span></div>
  <div class="myclass4"><span></span></div>
  <div class="myclass5"><span></span></div>
  
/*(div.myclass$>span{内容$})*5，然后tab键*/
  <div class="myclass1"><span>内容1</span></div>
  <div class="myclass2"><span>内容2</span></div>
  <div class="myclass3"><span>内容3</span></div>
  <div class="myclass4"><span>内容4</span></div>
  <div class="myclass5"><span>内容5</span></div>