-
2020-09-14 10:33:30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webstorm快键键</title> <!--引入 link 加tab键--> <link rel="stylesheet" href=""> <!--引入css link:css 加tab键 --> <link rel="stylesheet" href="css/mycss.css"> <!--引入js script:src 加tab键--> <script src=""></script> <!--html中插入js script 加tab键--> <script></script> </head> <body> <!-- 正常情况: 先输入:<h1 再输入:> --> <h1></h1> <!-- >:下一个子标签 *:多少个标签 $:标签的名称序号 {}:标签的内容 --> <!--输入:h1,按tab键--> <h1></h1> <!--输入:div#abc,按Tab键--> <div id="abc"></div> <!--输入:div.abc,按Tab键--> <div class="abc"></div> <!--输入: div>p*6 ,按Tab键--> <div> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <!--输入 a[href=#] 按tab键--> <a href="#"></a> <!--输入:ul.menu>li*6>a[href=#]{HTML} 按tab键--> <ul class="menu"> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> </ul> <!--输入 ul>li*5>a[href=#]{我是第$个} 再按tab键--> <ul> <li><a href="#">我是第1个</a></li> <li><a href="#">我是第2个</a></li> <li><a href="#">我是第3个</a></li> <li><a href="#">我是第4个</a></li> <li><a href="#">我是第5个</a></li> </ul> <!--ul及1个li ul+ --> <ul> <li></li> </ul> <!--ul及3个li ul>li*3 --> <ul> <li></li> <li></li> <li></li> </ul> <!--输入 img[src='images/$.jpg']*3 再按tab键--> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> <!--输入 li*3>div.img>img[src='images/$.jpg'] 再按tab键--> <li> <div class="img"><img src="images/1.jpg" alt=""></div> </li> <li> <div class="img"><img src="images/2.jpg" alt=""></div> </li> <li> <div class="img"><img src="images/3.jpg" alt=""></div> </li> + : 并列的标签 <!--div#tab1+div#tab2--> <div id="tab1"></div> <div id="tab2"></div> <!-- a:link --> <a href="http://"></a> <!--input:button 加tab键--> <input type="button" value=""> <!--div.one.two--> <div class="one two"></div> <!--form:get--> <form action="" method="get"></form> <!--form:post--> <form action="" method="post"></form> <script> /* for循环:输入itar,再点击tab键*/ for (var i = 0; i < array.length; i++) { var obj = array[i]; } </script> </body> </html> </body> </html>
更多相关内容 -
WebStorm快速输入
2020-04-06 10:23:21WebStorm快速输入 下文+tab表示光标输入内容后按tab键,每个示例可以相互组合使用 一、快速输入标签 1.1、快速输入基本标签 div+tab <div></div> 1.2、快速输入带内容标签 p{这是内容} <p>这是...WebStorm快速输入
下文+tab表示光标输入内容后按tab键,每个示例可以相互组合使用
一、快速输入标签
(一)快速输入基本标签
div+tab
<div></div>
(二)快速输入带内容标签
p{这是内容}
<p>这是内容</p>
(三)快速输入多个标签
span+p+tab
<span></span> <p></p>
(四)快速输入嵌套标签
ul>li+tab
<ul> <li></li> </ul>
二、快速输入标签带属性
(一)快速输入带类名标签
div.class_name+tab
<div class="class_name"></div>
(二)快速输入带ID标签
div#id_name+tab
<div id="id_name"></div>
(三)快速输入带属性标签
img[src=“logo.png”,alt=""]+tab
<img src="logo.png" alt="">
三、批量生成
(一)批量生成标签
div*2+tab
<div></div> <div></div>
(二)批量生成嵌套标签
ul*2>li*2
<ul> <li></li> <li></li> </ul> <ul> <li></li> <li></li> </ul>
-
webstorm快捷输入html代码
2021-03-06 14:07:54webstorm快捷输入html代码 使用webstorm时,使用以下方法可以更高效的码代码,来自搬运,作为一个成长记录,希望对你们有用,一起来看看吧。 <!DOCTYPE html> <html lang="en"> <head> <meta ...webstorm快捷输入html代码
使用webstorm时,使用以下方法可以更高效的码代码,来自搬运,作为一个成长记录,希望对你们有用,一起来看看吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webstorm快键键</title> </head> <body> <!-- 正常情况: 先输入:<h1 再输入:> --> <h1></h1> <!-- >:下一个子标签 *:多少个标签 $:标签的名称序号 {}:标签的内容 --> <!--输入:h1,按tab键--> <h1></h1> <!--输入:div#abc,按Tab键--> <div id="abc"></div> <!--输入:div.abc,按Tab键--> <div class="abc"></div> <!--输入: div>p*6 ,按Tab键--> <div> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <!--输入 a[href=#] 按tab键--> <a href="#"></a> <!--输入:ul.menu>li*6>a[href=#]{HTML} 按tab键--> <ul class="menu"> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> </ul> <!--输入 ul>li*5>a[href=#]{我是第$个} 再按tab键--> <ul> <li><a href="#">我是第1个</a></li> <li><a href="#">我是第2个</a></li> <li><a href="#">我是第3个</a></li> <li><a href="#">我是第4个</a></li> <li><a href="#">我是第5个</a></li> </ul> <!--输入 img[src='images/$.jpg']*3 再按tab键--> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> <!--输入 li*3>div.img>img[src='images/$.jpg'] 再按tab键--> <li> <div class="img"><img src="images/1.jpg" alt=""></div> </li> <li> <div class="img"><img src="images/2.jpg" alt=""></div> </li> <li> <div class="img"><img src="images/3.jpg" alt=""></div> </li> </body> </html>
-
webstorm 快捷输入自定义模板总结
2018-12-24 19:51:00修改方法 打开"设置"(Ctrl + Alt + S) 模板 console.log() 插入式 console.log($PARAN$); 包围式 选中被包围的内容按 Ctrl + Alt + J console.log($SELECTION$); function() {} ......修改方法
打开"设置"(Ctrl + Alt + S)
模板
console.log()
- 插入式
console.log($PARAN$);
- 包围式
选中被包围的内容按 Ctrl + Alt + J
console.log($SELECTION$);
function() {}
function($MODULE_VAR$) { $END$ });
alert()
alert($PARAN$);
ajax
$.ajax({ url: '$PARAN$', data:{}, type: 'post', dataType: 'JSON', success:function(res) {} });
axios
axios.get(``, {}).then(res => { console.log(res); }, rej => { console.log(rej); }).catch(err => { console.log(err); });
-
webstorm快捷键 webstorm快速输入标签 tab快速构建页面 使用技巧
2018-12-23 11:05:27webstorm快速输入标签 Webstorm的一些常用快捷键 Shift + Enter 另起一行(无论光标在哪个位置) Ctrl+Enter 在下一行插入新行。只能是光标在末尾的时候。才对。否则就是换行 shift+alt 出现光标,往下拉可以选中... -
Webstorm快捷输入Emmet简单语法
2021-02-05 11:29:24意思就是打完快捷输入后按tab键 例子: 语法五:最后来个嵌套多的。(细品,你细品就会发现很多时候都会用到。) #page>div.logo+ul#nav>li*5>a{Item $} <div id="page"> <div class=... -
webstorm中常用的快速输入标签
2018-10-12 19:04:25参考: 前端学习总结(二十)那些你可能不知道却强大方便的WebStorm快捷键 webstorm批量编辑快捷键【跳转到指定行,批量输入】 Intellij idea 快捷键(1)–生成for循环代码块 WebStorm快捷键收集 <!... -
webstorm&vs code快速输入标签快捷键快速生成class id等
2019-08-02 09:53:59参考: ... 正常情况: 先输入标签名,然后按tab即可 比如: div+tab ==》生成:<div></div> 如果想生成多个div: div*3+tab==> <div></div> <div... -
webstorm快捷键
2021-12-15 11:27:56下面是Webstorm的一些常用快捷键: 1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文件。 2. ctrl + j: 输出模板 3. ctrl + b: 跳到变量申明处 4. ctrl + alt + T: 围绕包裹代码(包括zen... -
HTML-webstorm添加快捷键
2021-06-12 17:08:20快速输入标签:先输入标签p,按Tab键变成输入内容后按end键快速复制粘贴光标所在的一整行内容Ctrl+D快速删除光标所在的行 Ctrl + X快速用标签包裹一段内容:选中文本后按Ctrl + Alt + T,在弹出的选项中选择标签包裹让... -
WebStorm自定义快捷注释
2021-03-19 10:26:44WebStorm自定义快捷注释 一.点击File,找到Settings,搜索Live Templates,选中需要在那个模块下生成,然后点击加号,添加快捷生成代码 二.Abbreviation填写你要生成的快捷代码,如下图都选择Enter(输入//,按Enter生成... -
fedora下idea,eclips,webstorm快捷方式*.desktop
2018-03-10 09:59:27将.tar.gz解压,将其里边的***.desktop移动至/usr/share/applications/ 例如eclipse的快捷方式mv eclipse.desktop /usr/share/applications/ -
Webstorm10 快速插入当前时间
2019-02-01 15:29:11在Webstorm中通过自定义Live Template可以快速插入当前时间 首先在设置中,Editor → Live Template,点击添加模板 填写如下信息: Abbreviation,在编辑器中输入的可以出发插入模板的缩写字符,这里填写datetime ... -
webstorm模板快速生成
2021-01-07 16:44:37前言 我们在使用webstorm开发项目的时候,有时会重复写多个很相似的代码块,经常要从别的代码处复制粘贴后修修改改。那么能不能将这些重复经常写的代码块抽象...3、添加模板,输入你要取的快捷名,模板介绍等等。... -
WebStorm代码快捷《控制代码输入》
2019-02-18 11:44:43输入标签,然后按Tab键,无需输入尖括号<> . 其他指令也类似,用tab键来启动自动生成代码指令. 示例: 输入div按tab键,自动出现 <div></div> 一、手机端页面适配快捷键 输入: meta:vp 再按tab键就... -
webstorm快速创建react模板快捷键
2019-10-07 00:28:50https://blog.csdn.net/weixin_43606158/article/details/90900061 转载于:https://www.cnblogs.com/cazj/p/11287447.html -
webstorm 如何自定义代码的补全提示,快捷输入?
2021-05-21 18:21:53非常方便,对于常用的代码进行补齐 操作步骤链接:here
收藏数
3,853
精华内容
1,541