HTML常用快捷键都在这了 看完之后效率暴涨

news2025/7/10 7:58:31

是这么回事;
我今天上网页课的时候,发现好多同学在敲标签的时候敲得很慢,我再仔细一看,好家伙,他们的标签竟然都是一个一个的敲出来的!
那效率能高吗?

加粗样式
这是当时让敲的代码,很简单,对不对?

这是运行结果:
在这里插入图片描述
其实就是标签的嵌套嘛!

可是我看到好多同学都是一个ol标签,一个li标签,一个ol标签,一个li标签的敲的,这效率能高嘛?

所以说楼主不是标题党,如果你学会了这些快捷键,将会帮你省下很多的时间

好了,废话不多说,我们来介绍一下HTML中那些常用的快捷键:

1.** 注释的快捷键**
HTML中的注释格式是
在这里插入图片描述
这样的,中间是注释的内容(CSDN的编辑器也是这样的,所以打不出来。当然你可以使用转义字符打出来,这里不再演示)

而添加注释的快捷键是Ctrl+/或者叫Ctrl+?,(反正都是一个键)这个键就在你右手边的那个Shift键旁边

在使用这组快捷键的时候,你会发现,即使你没有选中整行代码,编译器也会帮你把整行注释掉,实际上,这个Ctrl+/键的功能是注释掉整行的内容,只要你的光标在这一行,不用选中任何内容,按了这组快捷键之后就会把整行的内容注释掉

那么,如何在一行代码的后边添加一行注释呢(行内注释)?
这时候就要用到Ctrl+Shift+/

在这里插入图片描述

在这里插入图片描述

  1. 快速录入标签(补齐代码)的快捷键:Tab
    (它在键盘左上方ESC键的下面的下面、字母Q的左边)

我们写标签的时候,写到一半不想写了,怎么办?
在这里插入图片描述
Tab键啊!(当编译器弹出快捷菜单是,按回车键有同样的效果)
在这里插入图片描述
当需要插入好几个相同的标签时,怎么办?

比如上图中连续的五个li标签

这时,我们只需敲出一个标签名,然后再*n即可
在这里插入图片描述
按一下Tab键,即可成功插入
在这里插入图片描述

  1. 关系选择器相关快捷键

父元素与子元素

如果你了解关系选择器,那么用Tab键将会大大提高你的效率
如果你不了解,也没有关系

下面我简单的讲一下,一听你就会明白

网页中不同元素之间是存在关系的,比如上图中ul标签和li标签的关系:

ul标签时li的父标签
li标签时ul的子标签

就是这么简单

直接包含子标签的标签叫父标签
直接被父标签包含的标签叫子标签

注意:互为子标签和父标签的标签一定是直接包含被直接包含的标签
间接包含或被间接包含的标签我们叫做后代元素或祖先元素,这个我们以后会提到

那么怎么用快捷键敲出两组互为父子元素的标签呢?
在这里插入图片描述
(父元素>子元素)
按Tab键

在这里插入图片描述
当然,你也可以用前面讲的*n的方法套娃使用

在这里插入图片描述
在这里插入图片描述

兄弟元素

拥有相同父类的元素是兄弟元素(即同级的元素),比如上图中的五个li标签,它们都属于兄弟元素
兄弟元素选择器的语法为:兄+弟
在这里插入图片描述
在这里插入图片描述
你可能会说了,这不是脱裤子放屁吗?
能用*2解决的事为什么要这么麻烦?

确实,如果兄弟元素选择器的功能只有这一点的话,它的确没有什么出现的必要,但它具有一个*n无法替代的功能:插入不同类型的兄弟元素
在这里插入图片描述
在这里插入图片描述

  1. 类选择器相关快捷键

    类选择器的作用:根据元素的class属性值来选中一组元素
    类选择器的语法:.class属性值
    class是标签的一个属性,和id属性类似,不同的是class可以重复使用

我们可以在程序中直接键入.class属性值,在按Tab键,编译器会自动帮我们插入一个class为你输入的属性值的div元素
在这里插入图片描述
在这里插入图片描述
当然,类选择器也可以配合关系选择器使用
在这里插入图片描述
在这里插入图片描述

  1. 其他快捷键

1、在设置某元素的宽度和高度时,不必把width:200px;全部键入
只需要敲出首字母,再按Tab键即可
在这里插入图片描述

在这里插入图片描述
2、对于某些较长的属性,我们也不需要全部敲出来,下面以background-color(背景颜色为例)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
按Tab键和Enter(回车)键有些许区别,大家自己总结
还有很多较长的属性可以用这种首字母的方法快速插入,这里不再一一列举,大家要善于发现和总结

  1. 生成HTML初始格式
    !+Tab键
    在这里插入图片描述
    在这里插入图片描述
    首先键入一个!(shift+1),再按Tab键即可快速生成HTML的初始格式

好,就先总结这么多,以后在遇到的话会给大家更新,大家也可以在评论区中补充我没有提到的快捷键,大家一起学习,一起进步!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406073.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

css实现元素居中的5种方法

目录 1.最简单的方法 2.利用定位 3.定位配合css3位移 4.弹性盒模型 5.网格布局Grid 相信大家在面试的时候也会经常碰到css实现元素居中的方法,下面我介绍5中方法给大家,欢迎大家评论区交流 需求: 给定两个元素,这两个元素是…

vue项目设置打包后的静态文件访问路径

vue项目设置打包后的静态文件访问路径 **啰嗦一下:**相同域名下可能会存在两份相关或不相关的代码,需要通过切换文件夹路径进入不同项目时,需要在项目打包输出代码时设置静态文件的访问路径(vue、react都要)。这种方式…

架构之软件负载均衡LVS、Nginx、Haproxy、Keepalived

目前市面上最常见的负载均衡技术方案主要有三种: 基于DNS负载均衡, DNS负载均衡主要适用于的场景是多地集群的方式,也就是可能北京有一个数据中心,在其中部署了一整套的集群提供服务,在上海有一个数据中心&#xff0c…

图片的美白与美化

博主简介 博主是一名大二学生,主攻人工智能研究。感谢让我们在CSDN相遇,博主致力于在这里分享关于人工智能,c,Python,爬虫等方面知识的分享。 如果有需要的小伙伴可以关注博主,博主会继续更新的&#xff0c…

Error: Can‘t find Python executable “python“, you can set the PYTHON env variable.解决办法

😦电脑磕坏了 最近把公司给的mac屏幕给磕坏了,换成自己的macbookpro,本来想用时间机器做个无缝衔接,结果发现不能用了,跟客服沟通被告知macos版本在11以上不支持时间机器系统迁移,只能使用迁移助理做数据备…

HTML实现简单的贪吃蛇小游戏(附完整源码)

基于HTML5技术的贪吃蛇小游戏的设计与实现 项目简介: 贪吃蛇作为我们儿时经典的游戏之一,它是一款单机而又好玩的小游戏。今天,就让我们用html5技术实现一个简单的贪吃蛇小游戏! 项目核心技术: html5的canvasJS技术 …

Typora如何设置字体的颜色

作者:虚坏叔叔 博客:https://xuhss.com 早餐店不会开到晚上,想吃的人早就来了!😄 Typora如何设置字体的颜色 Typora没有直接设置字体颜色的功能,不能像word一样,选中字体直接设置想要的颜色。 …

uniapp使用高德地图

uniapp使用高德地图 1、项目前准备 1.1、首先你需要去申请一个属于自己的高德地图key,怎么申请暂不多说需要的去官网看 1.2、链接: 高德地图申请key直通车,点击前往。 有一个uniapp项目。 2、页面创建引入 新建一个uniapp的空白页 使用web-view 渲染…

Postman下载与安装操作步骤【超详细】

👨‍🎓 博主介绍:大家好,我是超梦梦梦梦,很高兴认识大家~🍗关注➕点赞➕评论➕收藏 😄🙏博主水平有限,如有错误,欢迎各位大佬纠正 Postman下载与安装&#x1…

vue的指令和插值总结

文章目录一、安装vue二、Vue模板案例步骤三、基础模板(记住)四、vue的指令和插值1、{{}}:插值表达式的语法2、v-text:填充纯文本内容(data中的值)3、v-html:填充html(data中的值&…

蓝桥杯刷题第九天

题目描述本题为填空题,只需要算出结果后,在代码中使用输出语句将所填结果输出即可。素数就是不能再进行等分的整数。比如7,11。而 9 不是素数,因为它可以平分为 3 等份。一般认为最小的素数是2,接着是 3,5&…

el-upload 超详细-(附件,图片,多类型文件)玩转上传upload--new FormData()

代码(我的项目代码:注解在下面)代码复制直接用,可以实现所有文件上传,更改接口即可(如需详细注解,学习,下面的详解完全够用,从0到学会这一片加官方文档就够了&#xff09…

Electron 分享(入门,安装,打包)

Electron Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架 安装 在使用 Electron 进行开发之前,需要安装Node.js,可以在终端输入以下命令输出了 Node.js 和 npm 的版本信息: node -v npm -v没有安装的话&#xff0c…

css 100vw、100vh出现滚动条怎么解决

要搞清楚这个问题首先要知道这两个单位(vw、vh)是什么意思。vw(vh)是相对于浏览器的视口宽度(高度)的,100vh等于浏览器的视口宽度,设置vw和vh会在视口发生变化时重新计算宽度和高度。…

【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件

文章目录[TOC](文章目录)方法一、 Luckysheet 预览方法二、 Office Web 查看器(微软的开发接口)方法三、 XDOC文档预览云服务(预览pdf、word、xls、ppt)方法一、 Luckysheet 预览 Luckysheet 是一个类似于 excel 的在线电子表格,功能强大、配…

超详细纯前端导出excel并完成各种样式的修改(xlsx-style)

超详细纯前端导出excel并完成各种样式的修改(xlsx-style) 一杠正在上传…重新上传取消 2020年12月08日 17:53 阅读 6247 一、前言 最近做的项目涉及到了excel的导出,在这块真的花了很多的时间,起初需求是不需要样式层面的修改…

【css】svg修改图标颜色

项目中使用了大量的svg图标,一开始只是导入直接使用,直到产品提出要根据条件修改图标的颜色 svg教程||菜鸟教程 可以简单看下教程了解下svg SVG 意为可缩放矢量图形,SVG 使用 XML 格式定义图像。 导入项目的svg图标大概是这样 有个path路…

怎样在应用中实现自助报表功能

前言:大家好,我是小威,24届毕业生,在一家满意的公司实习。本篇将记录几次面试中经常被问到的知识点以及对学习的知识点总结。 本篇文章记录的基础知识,适合在学Java的小白,也适合复习中,面试中的…

后台管理系统前端模板(html + CSS + JavaScript)

这是为大家准备的资源链接🤐🤐🤐: 提取码:0000 bootstrap_htmb.zip_免费高速下载|百度网盘-分享无限制百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固,支持教育网加速&#…

实现Vue按钮(button)绑定回车(enter)事件

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、页面展示二、实现步骤1.在删除对话框的取消与确定按钮之间添加input输入框2.写个监听器,监听弹窗打开时,给input框自动聚焦&#xff…