教你快速使用VSCode编写HTML文件

简介: 教你快速使用VSCode编写HTML文件

我的小站——半生瓜のblog


@TOC

1.配置

  1. 首先在官网下载VSCODE并完成安装,[vscode官网]。(https://code.visualstudio.com/)
  2. 汉化——打开软件,左侧工具栏最后一个是插件栏,点击去搜索Chinese,选择第一个安装,如图。

在这里插入图片描述

  1. 安装相关插件——搜索html,安装如下插件,如图。

在这里插入图片描述

  1. 选择左上角文件,打开文件夹。
  2. 然后新建文件,文件后缀是.html。

在这里插入图片描述

  1. 打开是一片空白,输入一个!,单击回车,补全基本结构,如图。

在这里插入图片描述
在这里插入图片描述

  1. 再次打开插件商店,搜索open in browser,安装如下插件。如图。

在这里插入图片描述

  1. 回到你的html文件,ctrl+s保存文件,然后shift+ctrl+b,在弹出的窗口中输入open in ,选择open in Other Browsers,如图(或者右键文件空白处,如图二红箭头所指向的两个,一个是用默认浏览器,一个是用其他浏览器。)。

在这里插入图片描述
在这里插入图片描述

  1. 点击,相关浏览器进行查看。(其实ALT+B一键就可以打开默认浏览器。)在这里插入图片描述
  2. 成功。

2.更改默认打开浏览器

依次点击-文件-首选项-设置
在这里插入图片描述
搜索open-in-browser,在红线标记处,修改你要是用的浏览器名称。
在这里插入图片描述

相关文章
|
1月前
|
前端开发
【HTML专栏2】VSCode的使用(新建HTML文件)
【HTML专栏2】VSCode的使用(新建HTML文件)
35 0
|
1月前
|
XML 前端开发 数据格式
BeautifulSoup 是一个 Python 库,用于从 HTML 和 XML 文件中提取数据
【5月更文挑战第10天】BeautifulSoup 是 Python 的一个库,用于解析 HTML 和 XML 文件,即使在格式不规范的情况下也能有效工作。通过创建 BeautifulSoup 对象并使用方法如 find_all 和 get,可以方便地提取和查找文档中的信息。以下是一段示例代码,展示如何安装库、解析 HTML 数据以及打印段落、链接和特定类名的元素。BeautifulSoup 还支持更复杂的查询和文档修改功能。
35 1
|
1月前
|
缓存 JavaScript 前端开发
html文件压缩
【4月更文挑战第28天】html文件压缩
43 5
|
1月前
|
JSON JavaScript 数据格式
python遍历目录文件_结合vue获取所有的html文件并且展示
python遍历目录文件_结合vue获取所有的html文件并且展示
14 0
|
1月前
【代码片段】【HTML】弹出对话框点选加载文件
【代码片段】【HTML】弹出对话框点选加载文件
18 1
|
1月前
|
Java 索引
vscode + springboot + HTML 搭建服务端(二)
vscode + springboot + HTML 搭建服务端(二)
35 1
|
1月前
|
Java
vscode + springboot + HTML 搭建服务端(一)
vscode + springboot + HTML 搭建服务端(一)
30 1
|
1月前
|
Python
python html(文件/url/html字符串)转pdf
python html(文件/url/html字符串)转pdf
15 0
|
1月前
vscode快捷HTML结构 | Emmet
vscode快捷HTML结构 | Emmet
14 1
|
1月前
|
Windows
vscode 终端无法执行npm、cnpm命令的解决办法,npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试
vscode 终端无法执行npm、cnpm命令的解决办法,npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试
181 0