1、创建Web项目

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

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

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

vscode创建maven项目_vscode创建maven项目


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

vscode创建maven项目_前端_02


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

vscode创建maven项目_ide_03


2、创建项目资源目录

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

vscode创建maven项目_vscode创建maven项目_04


2）创建后的目录结构

vscode创建maven项目_vscode创建maven项目_05


3、创建网页

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

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

vscode创建maven项目_ide_06


2）输入文件名为index.html

vscode创建maven项目_html_07


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

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

vscode创建maven项目_ide_08


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

vscode创建maven项目_html_09


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

vscode创建maven项目_html_10

4）运行后的效果如下

vscode创建maven项目_vscode_11


5、结束运行

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

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

vscode创建maven项目_前端_12