这是我参与 第五届青训营 笔记创作活动的第1天
一、前端技术栈
我们可以简要的认为前端主要是以HTML、JavaScript、CSS三大基础部件组成，通过Http协议在客户端（浏览器）与服务端进行交互，以呈现给用户可交互的页面形式；
在此基础上仍需要在设计时关注 整体美观度、无障碍化、实现主要功能、用户隐私保障
前端开发可以简单的通过 vscode、webstorm 等IDE进行
二、开发环境配置&vscode
考虑到开发效率以及经济因素，免费且轻量的vscode显然是前端开发的首选IDE，借助其中丰富的插件扩展能极大地提升我们在某一特定场景下的开发效率；
vscode官方下载地址：code.visualstudio.com/
2.1 插件安装
注意：安装插件绝对不可贪多！若一次性安装过多插件有小概率会导致vscode无法识别当前文件类型而使得代码高亮功能失效！
选中左侧倒数第二个图标，在搜索框内输入插件名称即可下载你想要的插件
这里介绍几个我认为比较实用的插件：
- code runner 支持多种编程语言即时运行
- chinese 简体中文包
- live server 本地服务器快捷驱动（很实用，右键点击html文件即可开启本地服务器）
- image preview 缩略图浏览，可以在我们使用img标签插入图片时在代码块左侧显示预览图
2.2 代码编写
新建一个空的html文件，我们这里就暂且命名为 demo.html 并打开它
vscode提供了快捷生成html模板的功能，触发方式就是输入一个感叹号 !
三、HTML默认模板分析
一般的，直接上手学习单个标签的作用大概率会忘掉，如果能联合成整体直接记忆可能会效果好一些；
我在下方展示了HTML初始模板的完整内容，我在代码内对所有标签都进行了注释，便于大家快速理解对应标签的内容；
<!-- DTD文档类型定义，对对于现在的HTML5来说可以直接省略掉这个标签 -->
<!DOCTYPE html>
<!-- 网站所使用的语言，默认为英文 -->
<html lang="en">
<!-- 网站head，在这里引入外部样式表或者其他文件 -->
<head>
<!-- meta代表该网页的元数据，具体类型及其作用可以自行前往MDN查看 -->
<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，在这里写主要内容以及编写js -->
<body>
<!-- 这是一个最简单的div标签 -->
<div>123</div>
</body>
</html>
