vscode 快速新建一个HTML文件

最新推荐文章于 2024-07-26 22:13:21 发布
最新推荐文章于 2024-07-26 22:13:21 发布
阅读量5.3w 收藏 73
点赞数 33
分类专栏： HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44308407/article/details/97682569
版权

现在工作中很少会去重新写一个html文件，以致很多简单有效的快捷键都不太会用，写个笔记供以后参考，如有不对，请指正…

1.在代码编辑器（vscode,pycharm,phpstorm）中新建一个xxx.html文件

下面以vscode为示例：
在这里插入图片描述

2.英文模式下输入：! 后按tab键
在这里插入图片描述
在这里插入图片描述

//这样一个简易的html文件就写完了

想要快速打开HTML文件查看编辑效果

1.点击编辑器主界面左上侧第五个小图标——‘扩展’按钮；

2.搜索 open in browser
在这里插入图片描述

3.打开 xxx.html 文件，右键选择“Open In Default Browser”或者快捷键 alt+B 直接运行
在这里插入图片描述在这里插入图片描述

BrickXSC
关注
  • 33
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
在VSCode中自定义文件类型和扩展名关联
SchRHT Blog
07-19 7712
本文介绍了如何在VSCode中自定义文件类型和扩展名的关联，让用户能够在个性化文件中使用语法高亮和自动排版（format）功能。 This article describes how to customize the association of file types and extensions in VSCode, allowing users to use syntax highlighting and automatic formatting features in persona......
vscode调试html文件,vscode调试html文件
weixin_39841136的博客
06-04 1593
1. vscode调试html文件主要说明使用使用Debugger for Chrome插件如何配置，以及Nodejs的方式调试.本文的配置方式是基于deepin系统的，适用于所有debian系的Linux系统1.1. 使用Debugger for Chrome进行调试首先下载对应的插件Ctrl+Shift+x打开插件商店，搜索chrome即可看到该插件，点击安装->重新加载即可该插件的配置...
vscode安装及快速上手写html代码
m0_74284629的博客
12-26 1670
安装vscode，安装所需要的插件，在vscode快速生成代码结构，快速注释，快速取消注释，一次输入多个标签。
使用VScode写一个html页面
10-15
本文给大家分享的是使用vscode编写的第一个html页面的全过程,非常的简单,菜鸟看看就行,高手请略过
VScode快捷键汇总
最新发布
零度°C的博客
07-26 716
【代码】VScode快捷键汇总。
vscode 编写html
m0_52118763的博客
10-30 1483
首先需要安装一个插件open in browser 安装好后重启vscode 右键你要运行的html 可以使用Alt加B快捷键。 vscode中写html有一个快捷方式，输入！ 回车 会自动生成html的骨架结构
教你快速使用VSCode编写HTML文件
半生瓜のblog
05-09 5万+
我的小站——半生瓜のblog 教你快速使用VSCode编写HTML文件1.配置2.更改默认打开浏览器 1.配置 首先在官网下载VSCODE并完成安装，[vscode官网]。(https://code.visualstudio.com/) 汉化——打开软件，左侧工具栏最后一个是插件栏，点击去搜索Chinese,选择第一个安装，如图。 安装相关插件——搜索html,安装如下插件，如图。 选择左上角文件，打开文件夹。 然后新建文件，文件后缀是.html。 打开是一片空白，输入一个.
vscode如何创建并打开html文件（骨灰级新手友好）
m0_65163985的博客
04-12 1万+
open in browser要下载1.1.0版本，但是会发现只能找到2.2.0的，所以我们这样做。填上一个你已经安装好的浏览器， 我这里填的是火狐，你填其它的也可以。(简体中文)，重启后发现就变成中文（对于原来是英文版的小伙伴）1. 先打开Visual Studio Code。最后在空白处点击鼠标右键， 然后选择。2. 下载三个插件 ，点击第五个图标。选择1.1.0版本的安装即可。然后配置你要打开在哪个浏览器。设置放置的位置后就可以得到。然后右击鼠标，点击“右键鼠标 -> 点击。
vscode中创建html
低代码布道师的博客
10-09 2062
打开vscode，选择文件的新建文件按钮 按快捷键ctrl+s输入我们的文件名，点击保存按钮 在光标的位置输入!这样就会自动生成html的骨架标签 切换到扩展菜单，输入open in browser 安装扩展 切回到代码视图，鼠标右键，选择open in default browser就可以在默认浏览器打开网页啦 ...
vscode新建一个最简单的vue项目
09-27
在本文中，我们将深入探讨如何使用Visual Studio Code（VSCode）创建一个最简单的Vue.js项目。Vue.js是一款轻量级的前端JavaScript框架，以其易学易用和强大的功能深受开发者喜爱。VSCode作为一款功能丰富的代码编辑...
vscode快速创建vue/html模板、代码补全（自定义）
weixin_45753961的博客
02-22 4877
1.唤出vsCode控制台 Windows 快捷键 : Ctrl + Shift + P macOS 快捷键 : command + Shift + P 2.输入snippets,点击选择 3.输入vue,点击选择 4.替换文本 { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div></div>", "<
VsCode新建VueJs项目的详细步骤
10-19
本篇文章将详细介绍如何在VsCode环境下快速新建一个Vue.js项目。 首先，我们需要了解几个关键点： 1. Vue-cli是Vue.js官方提供的一个完整的命令行工具，它提供了一种快速生成Vue项目模板的方式，极大地简化了项目...
vscode编写html程序
m0_52592128的博客
07-02 4513
用vscode编写html文件
在vscode中创建html文件的方法
weixin_66958882的博客
01-24 2350
vscode如何创建html文件
【HTML专栏2】VSCode的使用（新建HTML文件）
小黄鸭的博客
09-07 2750
VSCode新建HTML文件，保存，快捷键基础结构代码
vscode怎么新建html文件_不可不知的4个妙招：像高级开发者一样玩转VSCode
weixin_39626586的博客
11-25 685
全文共2980字，预计学习时长8分钟图源：unsplashVSCode是我们最常用的代码编辑器之一，熟练使用VSCode能够让我们很大程度上提升编程效率。本文中笔者就将介绍一些VSCode的进阶使用技巧。多光标操作有时，我们可能需要在不同的位置同时键入相同的内容。例如，在下面的代码中，我们想要先为第一、三、五个标签添加属性class=“odd”，然后为第二、四、六个标签添加属性class="eve...
如何用vscode创建一个html文件
weixin_44324754的博客
09-29 1542
如何用vs创建html页面
在vscode中新建html文件的两种方法
热门推荐
qq_43142545的博客
09-13 5万+
在vscode中新建html文件的两种方法: 第一个方法: 1 点击菜单【文件】，如图所示。 2 点击【新建文件】，如图所示。 3 就会创建一个没有命名的文件，如图所示。 4 点击选择语言开始，会弹出选择语言模式，在自动检测的下拉菜单中选择html，一个没有命名的html文件就创建好了。 5 点击保存或者另存为，给没有命名的html起个名字,可以起字母,数字,中文，起好名字,点击保存，一个html文件就创建好了。 6 我们在html文件上输入【!】叹号(在英文状态下)，然后按键盘的【Tab】键，只
使用vscode编写html代码
贝la的博客
06-11 8811
原文链接：https://www.jianshu.com/p/f8b10f99a0ed
vscode新建一个项目
05-01
要使用Visual Studio Code新建一个项目，首先需要安装Visual Studio Code软件，并确保已经安装好了所需的开发工具和插件。接下来，可以按照以下步骤操作： 1. 打开Visual Studio Code软件，点击左侧的“打开文件夹”图标，在弹出的窗口中选择要新建项目的文件夹。 2. 在新建项目的文件夹中创建所需的文件和文件夹，例如HTML、CSS、JavaScript等文件。 3. 在Visual Studio Code中点击左上角的“文件”菜单，选择“保存工作区为...”并为该项目选择一个名称和路径。 4. 如有需要，可以使用Visual Studio Code内置的版本控制系统Git对项目进行管理。 5. 在Visual Studio Code中使用所需的插件和工具对项目进行开发和调试。 总之，使用Visual Studio Code新建一个项目非常简单，只需要按照上述步骤进行操作即可。请确保选择正确的文件夹并为项目命名，以便更好地管理和使用项目。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值