IDEA敲Web前端快捷键

1.html基础格式

英文符号+TAB键

复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>
2.单行注释

让输入光标在任意位置,Ctrl+/,将会将光标所在行全部注释掉

复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--    <title>Document</title>-->
</head>
<body>

</body>
</html>
3.多行注释

选中,ctrl+/

复制代码
<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport"-->
<!--          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
<!--    <meta http-equiv="X-UA-Compatible" content="ie=edge">-->
<!--&lt;!&ndash;    <title>Document</title>&ndash;&gt;-->
<!--</head>-->
<!--<body>-->

<!--</body>-->
<!--</html>-->

注意:CSS与html的注释不一样

4.同时编辑

就是同时输入一样的字

AIT+鼠标点击

复制代码
</head>
<body>yanxao
yanxao
yanxao
yanxao
yanxao
yanxao
</body>yanxao
</html>
5.标签补全快捷键

先打标签div,然后在div的任意位置按TAB键

复制代码
<div></div>
6.同时输入多个标签

现写标签,然后*x,然后tab键

7.父标签同时输入多个子标签

++(无序列表和有序列表的可以)++

输完之后,按tab键

复制代码
<ul>
    <ol></ol>
    <ol></ol>
    <ol></ol>
    <ol></ol>
    <ol></ol>
    <ol></ol>
</ul>
8.前后输入兄弟标签

直接输入div+p,然后tab键

复制代码
<div></div>
<p></p>
9.类选择快捷键

输入.xx之后,然后tab键

父子类的输入方法

10.Css快捷键

直接输入w300然后tab键

11.Css快捷键

将-前后的首字母打出来之后,可以选择

bc之后可以选择

Html代码总结
复制代码
<!doctype html>             <!--1.html代码基础格式的快速填写(英文的感叹号+tab键)-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--    <title>Document</title>-->   <!--2.单行注释(在行的任意位置,ctrl+/)-->
                                     <!--3.多行注释(选中,然后ctrl+/)-->
</head>
<body>
yanxiao                               <!--4.同时编辑(Ait+鼠标点击)-->
yanxiao                               <!--4.同时编辑(Ait+鼠标点击)-->
yanxiao                               <!--4.同时编辑(Ait+鼠标点击)-->
yanxiao                               <!--4.同时编辑(Ait+鼠标点击)-->

div                                   <!--5. 标签补全快捷键(输入好标签之后,tab键)-->
<div></div>
div*4                                  <!--6.同时编辑多个标签(输入好标签之后*次数之后,tab键)-->
<div></div>
<div></div>
<div></div>
<div></div>
                                      <!--7.父标签同时输入多个子标签(输入父子关系之后*儿子个数,tab键)-->
ul>ol*5
<ul>
    <ol></ol>
    <ol></ol>
    <ol></ol>
    <ol></ol>
    <ol></ol>
    <ol></ol>
</ul>
                                            <!--8.输入前后兄弟(输入好关系之后,tab键)-->
div+p
<div></div>
<p></p>



.xx                                    <!--9.类选择器的快捷键(输入点+类名之后tab键)-->
<div class="xx"></div>

.xx>.yy                                <!--9.父子类选择器的快捷键(输入父子关系之后tab键)-->
<div class="xx">
    <div class="yy"></div>
</div>


</body>
</html>
Css代码总结
复制代码
/* 定义 .xx 类的样式 */
.xx {

    w300                      /*10.直接输入首字母+数值,然后tab键  */

    width: 300px;        /* 设置宽度为300像素 */
    height: 200px;       /* 设置高度为200像素 */

    bc
    background-color: lightblue; /* 设置背景颜色为浅蓝色 */
    padding: 20px;       /* 内边距为20像素 */
    border: 1px solid black; /* 边框为1像素实线黑色 */
}

/* 定义 .yy 类的样式 */
.yy {
    width: 100%;         /* 设置宽度为100%,即父元素的宽度 */
    height: 50%;         /* 设置高度为50%,即父元素高度的一半 */
    background-color: lightgreen; /* 设置背景颜色为浅绿色 */
    margin-top: 10px;    /* 上边距为10像素 */
}
相关推荐
练习时长两年半的Java练习生(升级中)7 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
科技树支点1 天前
无GC的Java创新设计思路:作用域引用式自动内存管理
java·python·go·web·编程语言·编译器
OEC小胖胖2 天前
React学习之路永无止境:下一步,去向何方?
前端·javascript·学习·react.js·前端框架·react·web
OEC小胖胖2 天前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web
OEC小胖胖3 天前
代码质量保障:使用Jest和React Testing Library进行单元测试
前端·react.js·单元测试·前端框架·web
AI@独行侠4 天前
01 - 网页和web标准
前端·web
诗人不说梦^4 天前
[SWPUCTF 2018]SimplePHP
web·ctf
茫忙然4 天前
【WEB】[BUUCTF] <GXYCTF2019禁止套娃>《php函数的运用》
php·web·rce
带刺的坐椅4 天前
Solon 权限认证之 Sa-Token 的使用与详解
java·sa-token·web·solon
OEC小胖胖4 天前
构建单页应用:React Router v6 核心概念与实战
前端·react.js·前端框架·web