目录
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
发布评论