使用vscode创建web项目

爱分享的代码君

已于 2023-09-23 15:50:11 修改

阅读量2.8k

点赞数 9

分类专栏：开发工具文章标签： vscode 前端 ide

于 2023-09-21 14:47:32 首次发布

本文链接：https://blog.csdn.net/ouyangqing/article/details/133134190

版权

开发工具专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1、创建Web项目

此处的Web项目是指vscode 用于统一管理项目中所有资源、文档、配置的目录。

1）在指定目录中创建项目文件夹html-ch01

2）选择菜单“文件”—“将文件夹添加到工作区”，在弹出的对话框中选择创建的项目文件夹

3）选择文件夹后会弹出以下对话框，点击“是”

4）创建后的项目如下图所示

2、创建项目资源目录

1）在项目上右建选择“新建文件夹”。依次创建js、css、img目录。

2）创建后的目录结构

3、创建网页

网页是构成网站的基本元素，是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，文件扩展名为.html或.htm。

1）在项目上右键选择“新建文件 ”

2）输入文件名为index.html

4、开启tab键自动生成代码功能

1）在vscode的左侧工具栏中点击“管理“，在展开的菜单中点击”设置“

2、在右侧“设置”网页的顶部搜索中输入“trigger”，在下方列表中选择“Emmet”，勾选右侧的复选框。

5、添加内容

1）在网页中输入感叹号“!”，再按“tab”键，生成HTML模板

2）在网页的title标签和body标签处编写内容

3）并保存（按ctrl+S）。

<!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>我的第一个HTML程序</title>
</head>
<body>
    欢迎来到HTML奇幻世界
</body>
</html>

6、运行

1）在左侧工具栏点击”运行和调试“按钮，

2）在打开的面板中点击“运行和调试”按钮，

3）在右侧上方展开的列表中选择运行的浏览器