Html快捷键

编写Html的快捷方式

html格式

!+Tab，生成HTML的初始所需格式；

标签

标签名+Tab键，可自动补全；

div    //<div></div>

标签名*n+Tab键，可快速建立n个相同的同级标签；

`p*3    //<p></p> <p></p> <p></p>`

标签>标签+Tab键，可快速建立父子级标签；

ul>li   //<ul><li></li></ul>

标签+标签+Tab键，可快速建立兄弟级标签；

ul>li   //<ul><li></li></ul>

.类名+Tab键，可快速建立含此类名的盒子标签（类选择器）；

.red      //生成<div class="red"></div>

#id名+Tab键，可快速建立含此id名的盒子标签（id选择器）；

#red     //生成<div id="red"></div>

标签.类名+Tab键，可快速建立含此类名的标签（类选择器）；

p.red    //<p class="red"></p>

#id名+Tab键，可快速建立含此id名的盒子标签（id选择器）；

p#red    //<p id="red"></p>

.类名*n，快速建立n个包含相同类名的盒子标签；

.red*2   //</div><div class="red"></div><div class="red"></div>

.类名$*n,快速建立那个依次递进的类名标签；

.red$*2  //<div class="red1"></div> <div class="red2"></div>

标签{内容}，建立有内容的标签；

div{3月14号}   //<div>3月14号</div>

标签{内容}*n，建立多个相同含内容的标签；

div{3.13}*2   //<div>3.13</div> <div>3.13</div>

标签{$}*2，建立数字递进的盒子,可加内容，但是文字内容相同，就只有尾部的数字是递增，从1开始；

div{$}*2   //<div>1</div> <div>2</div>

标签1>标签2*3>标签3

ul>li*2>a  //<ul> <li> <a></a> </li>  <li> <a></a> </li> </ul>

Shift/Alt键的使用

shift/Alt键加鼠标可以同时在同一列的位置书写同样的内容；
本人的vscode编辑器里需要同时按住shift和alt键才有这个效果；
三种方式都尝试一下，不同编辑器有不同方式。

Alt键的使用1

也可将多行文本剪切后，将内容放进多行标签中（书写不同的文本内容）

Alt键在HTML中的多行操作

注意：一定一定一定要按Alt键！！！