html代码编写快捷键（HTML常用快捷键都在这了 看完之后效率暴涨）

是这么回事;

我今天上网页课的时候 
  
  
  
  
  ，发现好多同学在敲标签的时候敲得很慢
  
  
  
  
  
 ，我再仔细一看
 


 


 


 


 


，好家伙 
 
 
 
 
 ，他们的标签竟然都是一个一个的敲出来的！

那效率能高吗？

这是当时让敲的代码
   
   
   
   
   
 ，很简单
 

 

 

 

 

，对不对？

这是运行结果：

其实就是标签的嵌套嘛！

可是我看到好多同学都是一个ol标签 

 

 

 

 

 ，一个li标签           ，一个ol标签

 
 

 
 

 
 

 
 

 
 

，一个li标签的敲的









，这效率能高嘛？

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

好了















，废话不多说           ，我们来介绍一下HTML中那些常用的快捷键：

1.** 注释的快捷键**

HTML中的注释格式是

这样的
  
 
  
 
  
 
  
 
  
 
 ，中间是注释的内容（CSDN的编辑器也是这样的










，所以打不出来           。当然你可以使用转义字符打出来 
  
  
  
  
  ，这里不再演示）

而添加注释的快捷键是Ctrl+/或者叫Ctrl+？
  
  
  
  
  
 ，（反正都是一个键）这个键就在你右手边的那个Shift键旁边

在使用这组快捷键的时候
 


 


 


 


 


，你会发现 
 
 
 
 
 ，即使你没有选中整行代码
   
   
   
   
   
 ，编译器也会帮你把整行注释掉
 

 

 

 

 

，实际上 

 

 

 

 

 ，这个Ctrl+/键的功能是注释掉整行的内容           ，只要你的光标在这一行

 
 

 
 

 
 

 
 

 
 

，不用选中任何内容









，按了这组快捷键之后就会把整行的内容注释掉

那么                 ，如何在一行代码的后边添加一行注释呢（行内注释）？

这时候就要用到Ctrl+Shift+/ 快速录入标签（补齐代码）的快捷键：Tab （它在键盘左上方ESC键的下面的下面 
  
  
  
  
  、字母Q的左边）

我们写标签的时候
 
 
 
 
 
 
 
 
 
 
，写到一半不想写了















，怎么办？

摁Tab

键啊！（当编译器弹出快捷菜单是           ，按回车键有同样的效果）

当需要插入好几个相同的标签时
  
 
  
 
  
 
  
 
  
 
 ，怎么办？

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

这时










，我们只需敲出一个标签名 
  
  
  
  
  ，然后再*n

即可

按一下Tab键
  
  
  
  
  
 ，即可成功插入

关系选择器相关快捷键

父元素与子元素

如果你了解关系选择器
 


 


 


 


 


，那么用Tab键将会大大提高你的效率

如果你不了解 
 
 
 
 
 ，也没有关系

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

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

ul标签时li的父标签

li标签时ul的子标签

就是这么简单

直接

包含子标签的标签叫父标签

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

注意：互为子标签和父标签的标签一定是直接包含或被直接包含

的标签

间接包含或被间接包含的标签我们叫做后代元素或祖先元素 

 

 

 

 

 ，这个我们以后会提到

那么怎么用快捷键敲出两组互为父子元素的标签呢？

（父元素>子元素）

按Tab键

当然           ，你也可以用前面讲的*n的方法套娃使用

兄弟元素

拥有相同父类的元素是兄弟元素（即同级的元素）

 
 

 
 

 
 

 
 

 
 

，比如上图中的五个li标签









，它们都属于兄弟元素

兄弟元素选择器的语法为：兄+弟

你可能会说了                 ，这不是脱裤子放屁吗？

能用*2解决的事为什么要这么麻烦？

确实
 
 
 
 
 
 
 
 
 
 
，如果兄弟元素选择器的功能只有这一点的话















，它的确没有什么出现的必要           ，但它具有一个*n

无法替代的功能：插入不同类型的兄弟元素

类选择器相关快捷键

类选择器的作用：根据元素的class属性值来选中一组元素

类选择器的语法：.class属性值

class是标签的一个属性
  
 
  
 
  
 
  
 
  
 
 ，和id属性类似










，不同的是class可以重复使用

我们可以在程序中直接键入.class属性值 
  
  
  
  
  ，在按Tab键
  
  
  
  
  
 ，编译器会自动帮我们插入一个class为你输入的属性值的div元素

当然
 


 


 


 


 


，类选择器也可以配合关系选择器使用

其他快捷键

1
  
  
  
  
  
 、在设置某元素的宽度和高度时 
 
 
 
 
 ，不必把width：200px；全部键入

只需要敲出首字母
   
   
   
   
   
 ，再按Tab键即可

2
 


 


 


 


 


、对于某些较长的属性
 

 

 

 

 

，我们也不需要全部敲出来 

 

 

 

 

 ，下面以background-color（背景颜色为例）

按Tab键和Enter（回车）键有些许区别           ，大家自己总结

还有很多较长的属性可以用这种首字母的方法快速插入

 
 

 
 

 
 

 
 

 
 

，这里不再一一列举









，大家要善于发现和总结

生成HTML初始格式

！+Tab键 首先键入一个！（shift+1）                 ，再按Tab键即可快速生成HTML的初始格式

好
 
 
 
 
 
 
 
 
 
 
，就先总结这么多















，以后在遇到的话会给大家更新           ，大家也可以在评论区中补充我没有提到的快捷键
  
 
  
 
  
 
  
 
  
 
 ，大家一起学习










，一起进步！