使用vscode创建web项目
布道师学院
编辑于 2022年10月17日 09:07
收录于文集
共34篇

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）。

代码块
JavaScript
自动换行
复制代码
<!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）在右侧上方展开的列表中选择运行的浏览器，

4）运行后的效果如下

5、结束运行

1）关闭当前浏览器可以结束运行

2）在vscode的上方的控制面板上可以点击“方框”结束运行

教程 前端工具 前端开发 vscode 创建网页 开发工具的使用 vscode的使用 vscode创建web项目
本文为我原创，未经授权禁止转载
cv19111842