webstorm自动补全，即HTML标签简写规则

本文主要是介绍webstorm自动补全，即HTML标签简写规则，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

参考文章1
参考文章2

HTML简写，一种是在模板上改，一种是使用简写规则。

简写方法，主要是Emmet（常用项目）和Haml（ruby项目），本文主要介绍使用Emmet简写规则。

Emmet是一个插件，基本用法是简写形式+转化键。

• 转化键，不同IDE不同，MAC OS的是“tab键”，Wins是"<Ctr+y>,"（ctrl键+y键+逗号键）
• 简写形式举例(原理就是类似于css定位形式)：
  标签名（使用p代替举例）
  1.p
  例：输入p 按Tab键，===>   <p></p>
  
  2.p#id
  例：p#addr 按Tab键，===>   <p id="attr"></p>
  
  3.p.class
  例：p.addr 按Tab键，===>   <p class="attr"></p>
  
  4.p[属性]
  例：p[a=attr] 按Tab键，===>   <p a="attr"></p>
  
  5.p{包含的内容}
  例：p{显示的内容} 按Tab键，===>   <p>显示的内容</p>
  
  6.标签>子标签
  例：div>p (代表p是div 的子元素)按Tab键，===>

  <div><p></p>
  </div>

  7.标签+标签
  例：div+p (代表p和div 是同级元素)按Tab键，===>

  <div></div>
  <p></p>

  
  8.重复N个标签（块）*数字
  例：div>p*3   按Tab键，===>

  <div><p></p><p></p><p></p>
  </div>

  
  9.标签属性自动编号，使用符号$
  例：div#id$.class$$*3  按Tab键，===>

  <div id="id1" class="class01"></div>
  <div id="id2" class="class02"></div>
  <div id="id3" class="class03"></div>

  10.以上进行排列组合
  
  例：html:5

  ul.menu>li*6>a[href=#]{显示内容$}

 

这篇关于webstorm自动补全，即HTML标签简写规则的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---