webstorm快速添加手机端适配代码快捷键-代码自动生成指令快捷输入

关于webstorm的实用快捷键,网上很难搜出来,一搜就是一大坨重复的垃圾信息.特设此文,整理常用的代码快捷键在这里.

0.WebStorm代码快捷输入的基本使用方式

输入标签,然后按Tab键,无需输入尖括号<> . 其他指令也类似,用tab键来启动自动生成代码指令.示例:  输入div按tab键,自动出现 <div></div>

1.手机端页面适配快捷键

输入: meta:vp再按tab键就出来了.这行代码,会将HTML5自动适配成手机端页面

2. html5基本结构代码

新建空白html页面输入: ! 再按Tab键,就会自动生成标准的html5的页面结构代码.就是在webstorm上新建一个html看到的那一大块代码

3.输入标签自带类名

输入: 标签名称.类名再按tab键示例: div.main 再按tab键就会自动生成: <div class='main'>

</div>

4.多行重复代码

示例: ul>li*3<ul><li></li><li></li><li></li></ul>

4.1多种指令可以联合使用

示例:ul.haha>li.hehe*3<ul class="haha"><li class="hehe"></li><li class="hehe"></li><li class="hehe"></li></ul>

5.带ID的标签

示例: div#haha<div id="haha"></div>[未完待续...]