什么是前端
用于Web显示即可称为前端。一般泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web网页结构、视觉效果、前后端web交互等。
web前端（语言）
HTML，超文本 标记 语言（Hyper Text Markup Language）用来描述网页的一种语言标签形式展示，用于定义基本的样式框架，标签类型——1 1 对应。
<!-- 向浏览器声明文档类型——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></body>
</html>
<body>
<h1>Hello World</h1>
<p>Goodbye World</p>
<button>Click Me!</button>
</body>
CSS (Cascading Style Sheets) ，指层叠样式表(级联样式表、样式表)，⼀种标记语⾔，对于框架内部样式展示，颜色、大小等。
语法： 选择器 { 属性名： 需要进行的操作 }
基础操作：
- color——改变内容颜色
- border-radius——圆角设置
- padding——内边距设置
- ......
<style>
body {
background-color: black;
}
h1 {
color: aquamarine;
}
p {
color: antiquewhite;
}
button {
border-radius: 30%;
background-color: lightgreen;
color: white;
padding: 10px;
}
</style>
JavaScript , 运行在客户端的脚本语言,进行框架内交互效果，鼠标事件、键盘事件等。
组成：
ECMAScript——ECMAScript规定了JS编程语法和基础核⼼知识，是所有浏览器⼚商共同遵守的⼀套语法⼯业标准。
DOM：⻚⾯⽂档对象模型，是W 3 C组织推荐的处理可扩展标记语⾔的标准编程接⼝。
BOM：浏览器对象模型，它提供了独⽴于内容的、可以与浏览器窗⼝进⾏互动的对象结构。
<script>
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
alert("You just clicked on me ! 😊");
});
</script>
代码编辑器
VsCode——免费开源的现代化轻量级代码编辑器，代码高亮，自定义快捷键、多种插件下载
插件推荐：
- Live Server—— 保存代码即可自动刷新浏览器
- Prettier——更好的代码美化
- ......
下载链接：Download Visual Studio Code - Mac, Linux, Windows
