使用vscode编写第一个Hello World程序页面详细步骤

Love The Way You Lie 2023-09-23 15:13 76阅读 0赞

## 前言必读 ##

> [读者手册（必读）\_云边的快乐猫的博客-CSDN博客][-CSDN]

**前言：**

对于编程人员来说，第一个程序几乎必写的都是Hello World，也是代表进入了新的学习篇章吧

**一、操作步骤**

**1.**打开vscode（[如果没有这个软件，可以从我的文章里面看下载教程][Link 1]） ，文件---->新建文本文件或者使用快捷键：CTRL+N打开

![bebedd8c03b240af9d1429bedfcb73b9.png][]**2.**文件-->保存

![23ae5141601943768fe86b5668398497.png][]

**3.**选择文件保存位置后，文件的后缀名txt更改为html，然后点击保存

![961fe0ac1bb5433389e9cc0b041ac19c.png][]

**4.**vscode里面第一行输入!

注意：这个!一定是**英文输入法**的才会显示。如果是中文的！这两个感叹号不会显示出来的

![4a3981774e3e46bfbb7b253a6e66fd1f.png][]

**5.**然后选择第一个!，鼠标点击或者回车键都可以。就自动帮我们生成了一个这样的代码

![9253a2fcd9794cd8a7aed86f1b91fa3f.png][]

**6.**把代码第7行的title中间夹着的Document改为我要开始学习前端啦

然后再把被body中间夹着第10行填入Hello World

![2ae0641c61704d0583e5274f93ae2e73.png][]

**7.**选择运行---->启动调试

注意：有安装运行插件的右键open in Default Browser(有这个插件运行会**更方便快捷一点**，直接右键点击这个就可以运行了，这是我教下载[这个插件的超链接][Link 2])

![f4d588f855104b04a9a068760e511fa3.png][] **8.**任意选择一个浏览器打开（我是选择这个Web App Chrome）

![60628f02ad0349d2b25ca2d631545238.png][]

**9.****运行成功页面**

![7a8557104f5c44d48925291284783380.png][]

**10.**把这个网页关闭，避免电脑资源浪费

![9bdf93207c724bdcba74a1f155442f67.png][]

**二、代码**

<!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>
        Hello World
    </body>
    </html>

**如果你觉得本篇文章对你有所帮助的，给个一键三连吧！！！**

**点赞关注收藏，抱拳了！**

[-CSDN]: https://blog.csdn.net/m0_52861000/article/details/128148568?spm=1001.2014.3001.5501
[Link 1]: https://blog.csdn.net/m0_52861000/article/details/127874437?spm=1001.2014.3001.5501
[bebedd8c03b240af9d1429bedfcb73b9.png]: https://img-blog.csdnimg.cn/bebedd8c03b240af9d1429bedfcb73b9.png
[23ae5141601943768fe86b5668398497.png]: https://img-blog.csdnimg.cn/23ae5141601943768fe86b5668398497.png
[961fe0ac1bb5433389e9cc0b041ac19c.png]: https://img-blog.csdnimg.cn/961fe0ac1bb5433389e9cc0b041ac19c.png
[4a3981774e3e46bfbb7b253a6e66fd1f.png]: https://img-blog.csdnimg.cn/4a3981774e3e46bfbb7b253a6e66fd1f.png
[9253a2fcd9794cd8a7aed86f1b91fa3f.png]: https://img-blog.csdnimg.cn/9253a2fcd9794cd8a7aed86f1b91fa3f.png
[2ae0641c61704d0583e5274f93ae2e73.png]: https://img-blog.csdnimg.cn/2ae0641c61704d0583e5274f93ae2e73.png
[Link 2]: https://blog.csdn.net/m0_52861000/article/details/127877138?spm=1001.2014.3001.5502
[f4d588f855104b04a9a068760e511fa3.png]: https://img-blog.csdnimg.cn/f4d588f855104b04a9a068760e511fa3.png
[60628f02ad0349d2b25ca2d631545238.png]: https://img-blog.csdnimg.cn/60628f02ad0349d2b25ca2d631545238.png
[7a8557104f5c44d48925291284783380.png]: https://img-blog.csdnimg.cn/7a8557104f5c44d48925291284783380.png
[9bdf93207c724bdcba74a1f155442f67.png]: https://img-blog.csdnimg.cn/9bdf93207c724bdcba74a1f155442f67.png