-
开发工具的选择
- 轻量级——Sublime Text(编辑器)
- 重量级——WebStorm(IDE)
webstrom是jetbrains公司旗下一款JavaScript 开发工具,对JavaScript有较好的支持,被称为Web前端开发神器。除此两款软件外还有Adobe Dreamweaver(IDE)也是不错的选择
-
WebStorm下载安装(具体操作百度搜索关键词)
该软件需要JDK(Java的开发环境和运行环境)的支持,注意添加JDK的系统环境
JDK
WebStorm
-
WebStorm标签输入快捷键
- 注释:光标所在行 ctrl+/ 可以自动注释和撤销注释
- 标签补齐:
- 不加修饰的标签(如单独的h1标签):完整的h1标签,只需要敲h1,按tab键<h1></h1>
- 具有id的标签:div#abc,按Tab键<div id="abc"></div>
- 具有class的标签:div.abc,按Tab键<div class="abc"></div>
- 输入的标签内部还有标签的可以用>号包裹子标签(仅仅以div和p标签举例,下同),div>p,按 Tab键:
<div><p></p></div>- 输入多个相同的标签用p*3,按 Tab键:
<p></p>
<p></p>
<p></p>- 特定属性标签补齐:a[href=#],按Tab键:
<a href="#"></a>(#是代表你所指定具体的属性)- 写下标签时顺便写入标签的内容:a{p},按Tab键::
<a href="">s</a>
多个相同的带有顺序序列的标签:
带序号测试
这些快捷标签输入形式可嵌套使用:
ul>li*3>div.img>img[src=images/$.jpg]
<ul>
<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>
</ul>
-
其他快捷键
*(经过筛选)*
- 代码格式进行自动对齐
选中需要对其的的代码,然后CTRL+ALT+L- 打开工程中的文件:
ctrl + shift + n- 剪切(删除)行:
ctrl+x- 替换:
ctrl + r- 查找:
ctrl+f- 块移动:
ctrl + shift + up- 行移动:
shift + alt + up- 行复制:
ctrl + d- 单行注释:
ctrl + /- 可填注释:
ctrl + shift+/- 展开/折叠代码:
ctrl+shift+ +/-- 高亮所选文本:
Ctrl+Shift+F7 (Esc取消)- 逐个往下查找相同文本:
Alt+F3- 选中所有查找的内容:
ctrl + shift + alt + j
网友评论