webStorm里，有个超好用的快捷键，就是把不想看到的那行代码往上搬，只用把那行选上，再按`Ctrl+Shift+上箭头`，它就飞上去了；要是想往下，就按`Ctrl+Shift+下箭头`。这招儿特实用，尤其是在整理代码或排版的时候，能让你事半功倍！
想象一下，当你在处理一堆如同大山般的代码时，想要移动一些代码的位置，假如只能用鼠标慢慢拖，那真的太慢、太费劲！但现在，有了这个神奇的快捷键，一切就变得简单多了。只需短短几秒钟，你就能将代码挪到你想要的地方，这不就是拥有了超能力吗？
快速合并和展开代码(合并或展开的是某一个标签)
在WebStorm里，像合并和展开这样的操作也很实用。设想一下，你有个特别长的HTML标签，中间塞了N个子标签。这时要合并它，就只要将光标移到标签内，按Ctrl+.组合键，再点击”合并标签”，瞬间搞定！代码立马清爽不少。
往上移动: Ctrl + shift + ⬆️ (方向键上) 往下移动: Ctrl + shift + ⬇️ (方向键下)
同样，想展开合并不了的标签，只要按`Ctrl+.`，选“展开标签”，代码立马还原！这在看代码、改代码时挺管用的，能迅速看清代码结构，省得一行一行找。
把鼠标光标放在需要合并或展开的位置
踩对点儿很关键！比方说，要是想合并标签，就得把光标放到标签里面去，可不能放外面咯~只有这样，WebStorm才知道你要处理哪个标签，然后照办不误！
其实就是，点哪儿就剪切复制哪儿呗！用快捷键前记得先选好位置不然会手忙脚乱喔~记住这点儿小技巧，你就能更轻松地搞定任务。
快速合并和展开代码(合并或展开选中的所有标签)
合并: Ctrl + ➖ 展开: Ctrl + ➕
对了，WebStorm不仅能让你一个一个地合并和展开标签，更可以抓准时机进行批量处理！要是你觉得多选几个标签合并或者展开比较方便，那么你只需要选中它们，然后按下快捷键`Ctrl+.`，接着挑选“合并选中的标签”或者“展开选中的标签”，WebStorm就能帮你一口气搞定！
这功能对处理繁琐代码超好用，举个例子，如果你在搞前端项目，有好多类似的标签要合并或者展开，用这个快捷键就能迅速搞定，省时又省力。
用鼠标把需要合并的多个标签选中
批量合并或展开标签的时候，重要的一点就是要选对标签在WebStorm里，你既能用鼠标拖拽选中多个标签，也能按着Shift键再点鼠标，这样就能选中一串连续的标签。
选好的标签会变亮，让你一眼就能看出哪些需要合并或者展开。其实这步挺简单的，但是很重要！所以，在开始批量处理前，一定要看清你选的标签对不对。
快速新起一行
合并: Ctrl + shift + ➖ 展开: Ctrl + shift + ➕
编程时老是要在原代码上加一行，WebStorm里这个超容易。找好你想换行的地方，按一下`Enter`键，新行直接出来了！
这个功能尤其适合列长长的代码段！比如说，你正在敲一个超难的函数，突然发现要换行了。这时候，只要按下这个快捷键，就能轻松搞定，不用再费劲儿去找那个小小的新行按钮~
给选中的文字添加标签
webStorm这个编辑器真的很厉害，选中内容轻松加标签。就像你有一段文字要用特殊的HTML标签包装，只要拖动鼠标选中，然后按键盘上的`Alt+Enter`组合键，接着选“Wrapwithtag”，搞定后输入名字，文字立马套上标签了！
当鼠标的光标在某一行的中间时,shift + enter 快速新起一行shift + enter
这个功能挺方便的，尤其是用来看HTML文档。比如说，你做网页的时候，想把某个字加修饰，用这招儿就能迅速搞定，不用再找标签来输入了。
放大/缩小网页比例
在WebStorm这款编辑器里，调节代码大小很轻松！嫌代码字小眼花的话，就按Ctrl+鼠标滚轮往上滑呗；要是代码占屏太宽，分心不好看，那就试试按下Ctrl+鼠标滚轮往下滑。
这个功能非常实用，无论你在哪个屏幕分辨率或什么样的显示器上都能派得上用场。是不是有时候在电脑前换来换去？比如用笔记本，又换成了台式机，这时候就需要根据不同的显示器调整代码显示比例。别担心，这个快捷键就能帮到你，让你轻松应对各种工作环境。
Ctrl + alt + t mac电脑:option + command + t
input标签快捷写法
写HTML时，input标签挺常用的。在WebStorm里，你只要输’inp’再按个’tab’，它就能帮你把剩下的都搞定了。
用这种快捷方法，填表格超快的！比如，你可能要用用户登陆页，那就得输好多input标签？有了它，就是一键搞定，省下不少时间。
给标签设置类名
WebStorm里放个tag加个类名简直超好用！想给某个HTML图标加点班，选中后按住`Alt+Enter`or点击工具栏的”个性设定”（Setattribute），敲入你心仪的名字看看，立马就能帮你把新类安上去。
Ctrl + alt + 滚轮(上下)
这个功能在做css样式的时候很便利！举个例子，如果你正在做网页，要给某个标签加特别的样式，用这个快捷键搞定，就不用单独输类名那么麻烦！
生成多个相同类型不同类名的标签
WebStorm里头很轻松就能搞出一堆同种标签但是名字不一样的东西来。举个例子，要给一串标签加点不同的名字，你只要写下最开始那个标签，然后按个`Ctrl+D`键，WebStorm就会帮你把这标签复制下来，还能让你改改名字。
这个功能在弄复杂HTML架构时挺给力的！比如说你在搞网页背景项目，需要给好多长得差不多的标签加不同类名。用这个快捷方式就能轻松搞定，省去不少麻烦~
input:password + tab >>> input:radio + tab >>>
带内容的标签
写HTML时，有时候得搞点带有内容的标签来用。在WebStorm里，这事儿特轻松，只要输入标签大名儿后按个’Enter’，立马能帮忙搞定一个填充好内容的标签，还会将光标移到内容区，方便你直接敲字！
比如咱们要搞一个网页，得做点带字儿的标签，用这个快捷键就能帮我们搞定，不用手打标签和字。
firework快捷键
div.header + tab >>>
我告诉你，WebStorm里有几个特别实用的快捷键能让你工作起来更快！比如说，按个`Ctrl+Alt+L`就能让你看到的代码变得好看又整齐；再比如，按住`Ctrl+Shift+F`，你就可以在整个项目里搜寻某一段字符串，这样找起代码来就方便多了。
这些快捷键真是实用极了！比如说，你正忙着弄个大规模项目，代码太多了，但有了它们，就能迅速找到所需的那部分，或是立马把代码弄得更加易读。
多行代码注释
写代码时，注释很关键！在WebStorm里给多行代码加注也超级简单。只要选好那几行想注释的码，按下`Ctrl+Shift+/`，自动帮你搞定注释。
这个按键特别好用，尤其是在查错的时候。像你在处理一个麻烦的函数时，想要把某些部分暂时屏蔽起来，用这个按键就能飞快地搞定，比手动打记号快多了。
div.box$*2 >>>
登录后复制
在WebStorm里，有些快速按钮能帮你处理登陆相关的事情。比如说，摁下”`Ctrl+C”会把你选好的代码给复制下来，然后再按”`Ctrl+V”就能把刚才那部分东西贴到别处了。
比方说，你正在搞个超大的工程，代码多得数不清。那么这些快捷键就能帮你飞快地复制黏贴代码，让编程变得更高效！
看这篇文章，你应该能搞定。想找更多好玩的？关注php中文网！
看了这篇文章后，你会发现WebStorm里用H5的快捷键简直就是神器！它们能帮你提升编程速度，让你的工作更轻松。
span.box${我是内容}*3 >>> 生成如下代码: 我是内容我是内容我是内容
如果你对这些快捷键还有不明白的地方，或者想学点高级操作，就去看看php中文网其他相关的文章。那边有好多实用小秘籍和丰富实战经验，肯定能帮你提高编程能力！
总结
本文给大家科普了如何巧妙利用WebStorm中的H5快捷键来提高编程效率~希望这些小技巧能帮到你们，让你们编程之路更加顺畅！
向读者提出一个问题
WebStorm里有什么好用到爆的快捷键吗？你用得最多的是哪个呀？快来分享下，让咱们互相学点新招儿，一起进步！
Ctrl + alt + 滚轮 : 放大/缩小图片 Ctrl + 滚轮: 也可以放大/小图片
评论0