当前位置: 首页 > news >正文

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>

image-20241125212940940

5.标签补全快捷键

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

image-20241125213232590

<div></div>
6.同时输入多个标签

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

image-20241125213215009

image-20241125213146571

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

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

输完之后,按tab键

image-20241125213503961

<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键

image-20241125214101525

父子类的输入方法

image-20241125214127509

10.Css快捷键

直接输入w300然后tab键

image-20241125214907691

11.Css快捷键

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

bc之后可以选择

image-20241125220044047

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像素 */bcbackground-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像素 */
}
http://www.lryc.cn/news/494187.html

相关文章:

  • 【Vue3】【Naive UI】<NDropdown>标签
  • 技术总结(四十一)
  • Android布局
  • k8s集成skywalking
  • 如何写一份优质技术文档
  • LeetCode:206.反转链表
  • 详解高斯消元
  • Maven - 优雅的管理多模块应用的统一版本号
  • 国际网络安全趋势
  • 基于米尔全志T527开发板的FacenetPytorch人脸识别方案
  • Altium Designer脚本工具定制
  • 贝锐自研智慧网关系统OrayOS升级,适配Banana PI开发板BPI-R3 Mini
  • 搭建环境-PHP简介及环境搭建教程
  • Maven 配置
  • js常见函数实现
  • 点云3DHarris角点检测算法推导
  • mysql-binlog的三种模式
  • 自动类型推导(auto 和 decltype);右值引用和移动语义
  • (Linux 系统)进程控制
  • 【Nativeshell】flutter的pc跨平台框架学习记录<二> 窗口间通信
  • 今日codeforces刷题(1)
  • 【C++算法】20.二分查找算法_x 的平方根
  • 图像显示的是矩阵的行和列,修改为坐标范围。
  • 通义灵码走进北京大学创新课堂丨阿里云云原生 10 月产品月报
  • LeetCode Hot100 1~10
  • npm 最新国内淘宝镜像地址源 (旧版已不能用)
  • DepthAI 2.29版本 发布
  • C#反序列化XML时提示XML 文档(1, 1)中有错误
  • C# 中的接口:定义行为契约与实现多态性
  • Redis的基础知识·