使用vscode创建web项目
使用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/
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
17
0- 0
已为社区贡献6条内容
所有评论(0)