目录

VsCode界面介绍

安装中文包（看你自身的情况）

安装Live Server 

设置代码实时保存

建立文件夹保存你的前端实践文件

建立第一个html

认识网页的基本结构

VsCode界面介绍

下图是VsCoda的应用界面

 简要介绍以下几个功能

资源管理器    搜索引擎    源代码管理    拓展

安装中文包（看你自身的情况）

打开拓展，搜索Chinese

选择你需要的安装（我这里是已经安装好了）

安装Live Server 

它可以仿真环境进行编译

 设置代码实时保存

在设置中找到以下选项，选择afterDelay，

 则你就可以进行实时保存，防止文件丢失。

建立文件夹保存你的前端实践文件

 当你要实践你的代码时，用VsCode打开所见文件夹，可以方便保存你的代码实践。

建立第一个html

代码如下：

<!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>Document</title>
</head>
<body>
    <h1>这是我第一个网页</h1>
</body>
</html>

 认识网页的基本结构

<!--文档说明-->
<!doctype html>

<!-- html是网页的根标签，网页所有元素写在根元素里面-->
<html>

    <!-- head是网页的头部，帮助浏览器或搜索引擎来解析网页，它里面的内容不会直接出现在网页里面 -->
    <head>
        
        <!-- meta标签是用来设置网页的元素据，这里是设置字符集，避免乱码问题-->
        <meta charset="utf-8">

        <!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->

    </head>

    <!-- body是html的子元素，他里面的内容网页都可见，是网页的主体 -->
    <body>

        <!-- 网页的标题 -->
        <h1> 标题1</h1>
        <h2> 标题2</h2>
        <h3> 标题3</h3>

    </body>

</html>

更多推荐

Web前端零基础入门HTML5+CSS3基础教程——应用VsCode