使用vscode创建web项目

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)在右侧上方展开的列表中选择运行的浏览器

4)运行后的效果如下


5、结束运行

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

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

 文章来源于哔站《使用vscode创建web项目

更多学习视频和专栏文章请到哔站个人空间: 布道师学院的个人空间-布道师学院个人主页-哔哩哔哩视频

更多资源和项目下载请到:”开源吧(找实战项目和毕设项目的好网站)“ ​ :https://www.ossbar.com/

  • 9
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱分享的代码君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值