在VsCode中快捷编写html

最新推荐文章于 2024-05-14 09:38:04 发布

读书人去读书

最新推荐文章于 2024-05-14 09:38:04 发布

阅读量5.8k

点赞数 32

分类专栏：笔记文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_44666972/article/details/107641268

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在VsCode中快捷编写html

常用的快捷键

shift+ctrl+enter 在前面插一个空行
ctrl+enter 在下面插一个空行
按住shift+alt，同时鼠标点击往下拖，可以同时编辑代码
选中要注释的内容，按 ctrl+/ 会用行注释注释选中的内容，按 shift+alt+A 会用块注释注释选中的内容
shift+alt+F，自动格式化文档

Emment简述

Emment 可以极大提高编写代码的效率，很大部分是用在编写html和css中。它有简练的语法规则，vscode中有内置Emment，我们通过在html/css文件中输入缩写，按Tap键（自己试过有的按enter键也可以自动生成）自动生成对应的代码，毕竟在写html时一直要自己敲">","<","/"这些符号很麻烦。

Emment基础用法

Emment的用法很多，我这里简单介绍一些自己在编写html时常用的缩写。

`!`+`Tap`可以快速生成html结构

输入！后按Tap键（这里的感叹号一定要是英文符号 !）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

`html标签`+`Tap` 可以自动生成完整的html标签

p
	-> <p></p>
h2
	-> <h2></h2>
a
	-> <a href=""></a>
link 
	-> <link rel="stylesheet" href="">
link:css
	-> <link rel="stylesheet" href="style.css">
input
	-> <input type="text">
input:button 
    -> <input type="button" value="">
input:email
	-><input type="email" name="" id="">
button /也可以写成btn 
	-><button></button>
button:reset /也可以写成btn:r
	-><button type="reset"></button>

生成父子级标签和兄弟级标签

父级：^（用于生成父级元素的同级元素）
子级：>
兄弟级：+

div>p^h1
    <div>
       <p></p>
    </div>
    <h1></h1>

div>li
    <div>
        <li></li>
    </div>

div>h2+p
    <div>
        <h2></h2>
        <p></p>
    </div>

p>ul>h3+li
    <p>
      <ul>
         <h3></h3>
         <li></li>
      </ul>
    </p>

p+ul>li
    <p></p>
    <ul>
        <li></li>
    </ul>

`#`id 和 `.`class

p.class_one
	-> <p class="class_one"></p>
div#id_one
	-> <div id="id_one"></div>
div#id-one>ul>li
	<div id="id-one">
        <ul>
            <li></li>
        </ul>
    </div>

分组操作符 `()`

div#two>(h1+ul>li)
    <div id="two">
        <h1></h1>
        <ul>
            <li></li>
        </ul>
    </div>

文本操作符 `{}`

p{12345}
	-> <p>12345</p>
#box1{box1}
	-> <div id="box1">box1</div>

乘法 `*`

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

自动计数 `$`

ul>li*3{$} 可以生成3行的列表
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

table>tr*3>td*2{$} 可以自动生成3行2列的表格
    <table>
        <tr>
           <td>1</td>
           <td>2</td>
        </tr>
        <tr>
           <td>1</td>
           <td>2</td>
        </tr>
        <tr>
           <td>1</td>
           <td>2</td>
        </tr>
    </table>

h${h$}*6 可以依次生成h1到h6六个级别的标题
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>

这里我没有把Emment的用法全部写完整，我觉得应该也有人和我一样写的太多的话，就是收藏夹吃灰，所以我只是介绍基础的和我们经常会用到。最前面关于快捷键的欢迎大家补充，谢谢啦

读书人去读书

关注

32
点赞
踩
71

收藏

觉得还不错? 一键收藏
2
评论
在VsCode中快捷编写html

在VsCode中快捷编写html常用的快捷键shift+ctrl+enter 在前面插一个空行ctrl+enter 在下面插一个空行按住shift+alt，同时鼠标点击往下拖，可以同时编辑代码选中要注释的内容，按 ctrl+/ 会用行注释注释选中的内容，按 shift+alt+A 会用块注释注释选中的内容shift+alt+F，自动格式化文档Emment简述 Emment 可以极大提高编写代码的效率，很大部分是用在编写html和css中。它有简练的语法规则，vscode中有内置Emme
复制链接

扫一扫