html快捷键使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快捷键使用</title>
</head>
<body>
    <!-- div*3 -->
    <div></div>
    <div></div>
    <div></div>
    <!-- div>p -->
    <div>
        <p></p>
    </div>
    <!-- div>p*3 -->
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <!-- div+p -->
    <div></div>
    <p></p>
    <!-- .red -->
    <div class="red"></div>
    <!-- .red*2 -->
    <div class="red"></div>
    <div class="red"></div>
    <!-- p.red -->
    <p class="red"></p>
    <!-- #red -->
    <div id="red"></div>
    <!-- p#red -->
    <p id="red"></p>
    <!-- div{2.22.3.18} -->
    <div>2022.3.18</div>
    <!-- div{$}*2 -->
    <div>1</div>
    <div>2</div>
    <!-- div{项目$}*3 -->
    <div>项目1</div>
    <div>项目2</div>
    <div>项目3</div>
    <!-- div{$我们}*3 -->
    <div>1我们</div>
    <div>2我们</div>
    <div>3我们</div>
    <!-- ul>li*2>a -->
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
    <!-- 同时按住shift和alt键加鼠标可以同时在同一列的位置书写同样的内容 -->
    <li>我是一样的文本</li>
    <li>我是一样的文本</li>
    <li>我是一样的文本</li>
    <li>我是一样的文本</li>
    <li>我是一样的文本</li>
    <!-- 也可将多行文本剪切后,将内容放进多行标签中(书写不同的文本内容) -->
    <p>我</p>
    <p>爱</p>
    <p>我</p>
    <p>国</p>
    <p>!</p>
</body>
</html>

### VS Code 中 HTML 快捷键的相关说明 在 Visual Studio Code (VS Code) 中,HTML 编辑支持多种快捷键以提高开发效率。以下是与 HTML 相关的一些常用快捷键及其功能: #### 折叠代码段 为了实现类似于 Visual Studio Professional 的折叠操作,在 VS Code 中可以使用以下快捷键: - **Linux**: `Ctrl + K` 随后按 `Ctrl + 0` 可以折叠当前文档的所有区域[^1]。 - 如果仅想折叠特定的方法或标签,则可以直接将光标放置到目标位置并按下 `Ctrl + Shift + [` 来折叠该部分。 #### 自动补全与格式化 对于 HTML 文件的自动补全和快速编辑有如下几个重要组合键: - 使用 Emmet 插件(默认集成于 VS Code),输入缩写形式即可迅速生成复杂的 HTML 结构。例如,输入 `div.container>ul>li*3` 并按下回车会自动生成相应的列表结构。 - 对已编写好的 HTML 进行格式调整时,可以通过快捷方式 `Shift + Alt + F` (适用于 Windows 和 Linux;Mac 上为 `Shift + Option + F`)一键完成代码美化。 #### 导航与选择增强 除了基本的文本移动外,还有些高级导航技巧可以帮助更高效地处理大型项目文件内的 HTML 元素: - 扩展选区:当需要选取多个连续或者不连续相同类型的节点时,“多次点击鼠标左键”配合键盘方向键能够轻松做到这一点。 - 跳转定义处:通过右键菜单选项或是直接敲击 `F12` 即可跳转至某个函数、变量的实际声明地点。 ```javascript // 示例 JavaScript 函数调用场景下如何利用上述提到的功能之一——跳转定义 function myFunction() { console.log('This is an example'); } myFunction(); // 将光标置于此处按 F12 则能立即定位到上面 function 定义的位置 ``` 以上便是关于 Visual Studio Code 下针对 HTML 开发者所设计的部分实用型快捷指令介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值