1. 创建项目
2.基本操作
1.快速查找 ctrl+ r
2.代码补全 tab
3.版本控制
4.本地历史 local history
5.即时模板 setting editor code tpl
6 多个光标 alt + 鼠标左键 竖向选择
7 代码格式化 ctrl + alt +L
新建文件,webstorm windows下新建文件不是 ctrl +n 是alt+insert 坑
放大缩小也面代码
1.点击左上角的File,再点击setting;
2.Editor->General,选择Change font size (Zoom) with Ctrl+Mouse Wheel;
3.点击OK即可。代码格式化 ctrl + alt +L
eidtor code tpl 设置模板
crtl + r 查找替换
alt + 鼠标左键 多行游标
Keymap 快捷键的名称找快捷键,也可以用快捷键找快捷键名称,也可以设置快捷键
光标移动上去 ctrl + 鼠标左键单击,实现代码提示
ctrtl + / 注释
ctrl + shift + v 调出剪切板
shift + delete 删除光标所在行
ctrl + alt + enter 当前行光标跳到新的上一行
shift + enter 当前行光标跳到 新的下一行
ctrl + 减号 折叠当前行代码
ctrl + 加号 展开当前行代码
-ctrl + shift + 减号 折叠所有代码ctrl + shift + 加号 展开所有代码
ctrl + shift + ↑ 或 alt + shift + ↑ 当前代码移动到上一行
ctrl + shift + ↓ 或 alt + shift +↓当前代码移动到下一行
ctrl + shift + m 光标在闭合标签尾部跳到头部来回跳动,光标要放在闭合标签之前或之后
ctrl + e 查看最近使用的文件
ctrl + shift + backspace 回到上一次编辑的地方
ctrl + 单击 图片的src 实现预览
光标移动到img 的src 上 ,按住 shift 键可实现预览
css 中选择颜色,如 background ,输入 bg 按 tab, 再去点击background 前的色块可调出调色板,选择颜色
shift + f6 重命名强大,同时可以点击 preview 实现预览 改变
webstorm 自带错误提示,如 代码下波浪线 或 黄色的下划线块按 alt + enter 可以看到 错误修改提示 ,按 F2 可以 在错误处来回跳动
ctrl + shift + s 调出 设置面板 ,输入 inspection 可以 查看 错误提示的设置和自定义错误设置
3.ememt 快捷操作
-
> + ^ * ()
嵌套字符
1.后代嵌套 >
div> ul > li
<div>
<ul>
<li></li>
</ul>
</div>
2.同级 +
div+ul+li
<div></div>
<ul></ul>
<a href=""></a>
3.上一级 ^
div>div^p
<div>
<div></div>
</div>
<p></p>
4.多个元素 *
div>ul>li*3
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
5.保证优先级 ()
ul>(li>a)*5
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
- 属性,类 、id
# . []
1.id #
div#ct.ct
<div id="ct" class="ct"></div>
2.class .
div.item.item2
<div class="item item2"></div>
3.atrr []
div#ct.ct[data-value]
<div id="ct" class="ct" data-value=""></div>
- 变量
{} $
1.{}
p{click me}
<p>click me</p>
2.$
p{变量$}*5
<p>变量1</p>
<p>变量2</p>
<p>变量3</p>
<p>变量4</p>
<p>变量5</p>
- 生成无意义文本测试排版
lorem+数字
生成多少个随机单词
lorem10
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, sapiente.
- 今年最后一篇博客,祝大家新年快乐,鸡年大吉。