废话不多说,直接硬货,在使用Sublime写Html时那些常用的快捷键:
- 一、新建文件快速生成HTML头部信息的方法:!+tab
先建立一个文件,命名以html为后缀进行保存(如:test.html)
输入!或html:5,然后按 Tab 键(注意,这里的!必须是英文的叹号)
这是快速补全结果:
- 二、快速注释:Ctrl+/(win)、 command+/(mac)
HTML中的注释格式是这样的 <!-- -->,中间是注释的内容
而添加注释的快捷键是Ctrl+/(win)、 command+/(mac),只要鼠标在该行,无论是行首,中间,还是行尾,都直接注释鼠标所在行的整行
(如果要注释多行,直接选中要注释的行,按Ctrl+/(win)、 command+/(mac))
注意:取消注释相同操作,如果当前行(或者所选行)是注释状态,使用此快捷键会进行反注释
- 三、快速补全单个标签:tab
我们写标签的时候, 要写左括号,但左右尖括号(<>),这需要组合输入,比较烦,tab标签补全解决了你的烦恼。
比如你想写个p标签,直接写个p,然后按下tab即快速的完成了p标签的基本结构,我们只要填充内容即可
- 四、快速插入多个相同标签:标签名*n+tab
当需要插入好几个相同的标签时,怎么办?
比如想插入中五个连续的p标签
这时,我们只需敲出一个标签名p,然后再*5,即:p*5 然后按下tab
- 五、快速插入父子元素(主要用于列表操作):ul>li*5 +tab
在写列表时,我们经常要插入多个列表选项,一个个写很麻烦,没问题,快捷键帮你,如下图所示:
- 六、快速插入兄弟元素:h2+p + tab
如果想快速插入多个兄弟元素,比如一个2级标题和一个段落,那么只需要将2个元素名用“+”号连起来,然后补全即可
- 七、快速使用link标签选择样式:link:css +tab
可能有人会说,直接link+tab不就好了吗?你错了,这样的link如下图所示
但使用link:css +tab补全,如下图所示,我们只要补全路径与文件名即可,系统已经自动补全了文件后缀
- 八、快速选择当前行/此后多行:ctrl+l(win) 、command+l(mac)
选择当前行:ctrl+l
选择多行:连续ctrl+l
- 九:批量选中重复内容:Control+Command+G
选中要修改的文案,如p标签的具体内容,那么所有具有该内容的地方,都会被选中,进行同步修改,若果为空,那么将同步为该标签添加内容
其实sublime在写html/css时还有很多的快捷键,比如在设置某元素的宽度和高度时,不必把“width:200px;”全部键入,只需要敲出首字母,再按Tab键即可
再比如对于某些较长的属性,我们也不需要全部敲出来,下面以background-color(背景颜色为例)
这里就不一一讲述了,在工作使用的过程中,你可能会发现更多或者更好用的快捷键,您可以在下方留言补全,以帮助小伙伴们避坑,共同进步