html学习之vscode

最新推荐文章于 2024-09-12 19:38:05 发布

啊温呐~

最新推荐文章于 2024-09-12 19:38:05 发布

阅读量1k

点赞数 2

分类专栏： html 文章标签： html 学习 vscode

本文链接：https://blog.csdn.net/QJYY1/article/details/129985949

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.下载vscode

工欲善其事必先利其器.

记事本
notepad++
webstorm
vscode

大佬都是直接拿记事本😏记事本没有提示信息,所有的代码都是纯手打,且没有很好的缩进,不建议使用.我个人推荐的是vscode,因为企业大部分用的都是vscode.(框架除外,现在市场需求是pc端,移动端和小程序之间相互满足)

vscode官网下载地址

vscode小巧好用,所有的系统都可以使用;下载自己需要的版本,选择好安装路径一路下一步即可,安装方便.

2.vscode新建html文件

2.1新建文件夹

在任何项目开始之前,我们需要养成良好的习惯,创建项目的文件夹,将项目的文件全部放在这个文件夹中管理

首先打开vscode,在欢迎界面中可以看到新建文件夹
下图中的Open Folder
在弹出的选择框中新建文件夹,然后点击(双击也可)刚才新建的文件夹,最后单击选择框最下面的选择文件夹即可
选择文件夹后在vscode中新建文件
新建文件的时候需要指定文件的名字和文件的类型(需要加上后缀)
新增html文件时=>test.html
新增css文件时=>test.css等等
编写代码,保存即可

<!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>20230407测试</title>
    <meta name="description" content="描述测试">
    <meta name="keywords" content="关键词,测试">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="">
</head>
<body>
    <div></div>
</body>
</html>

code

3.vscode安装插件"open in browser"

vscode是一个编辑工具,本身是无法运行html文件的;我们需要在浏览器中打开我们编写好的html文件;刚安装好的vscode是无法满足跳转浏览器打开我们编写好的项目文件的,需要安装"open in browser"插件

第一步:点击vscode最左边的最下面那个图标
然后在搜索框中搜索"open in browser"插件
选择自己喜欢的插件安装即可
推荐两款:见上图中第一个(open in browser)和打开默认浏览器(open in default browser)
可以同时安装上面两款插件
安装成功之后,在自己的html文件上(标签区或着代码区都可)右键=>就可以看到两个插件;点击即可