前言
本片文章是学习B站黑马程序员苍穹外卖的学习笔记。因为最近期末周，一直在应付考试所以就学的很少，恰好视频中在讲Nginx反向代理和负载均衡（写着对前端的内容做一个复习）
概述：
1.web前端主要由三部分组成：
- HTML：负责网页的结构（页面元素和内容）。
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
- JavaScript：负责网页的行为（交互效果）。
2.其中还有前端开发中的高级技术Vue、ElementPlus、Axios需要掌握。
如果感兴趣想更深入了解可以到官网：链接: 学习Web开发
一 组成部分：
HTML:
HTML: HyperText Markup Language，超文本标记语言。
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
- 标记语言：由标签 “<标签名>” 构成的语言
- HTML代码直接在浏览器中运行，HTML标签由浏览器解析 。
总的来说：HTML 是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
CSS:
是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
使用方式：
具体有3种引入方式，如下：
1.行内样式：在标签内使用style属性，属性值是css键值对
例如：
2.内部样式：定义style标签，在标签中定义style样式
例如：
3.外部样式：定义link 标签，通过href属性，引入外部CSS文件
其中外部样式企业开发常用方式
定义在内部样式中的CSS选择器：
格式：
选择器名 {
css样式名：css样式值;
css样式名：css样式值;
}
JS
JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等——JavaScript 就在其中。
JS引入方式：
具体有两种引入方式：
第一种方式：
内部脚本，将JS代码定义在HTML页面中
示例代码如下：
....
<body>
<script>
alert('Hello JS')
</script>
</body>
</html>
第二种方式：
外部脚本， 将JS代码定义在外部 JS文件中，然后引入到 HTML页面中
引入方式如下：
<script src="js/demo.js"></script>
JS基础语法：
1.js输出语句：
window.alert(…) 警告框
document.write(…) 在HTML 输出内容
console.log(…) 写入浏览器控制台
2.DOM：
DOM的核心思想：将网页的内容当做对象来处理，标签的所有属性在该对象上都可以找到，并且修改这个对象的属性，就会自动映射到标签身上。
DOM操作步骤:
- 获取DOM元素对象
- 操作DOM对象的属性或方法 (查阅文档)
常见操作：
<script>
//1. 修改第一个h1标签中的文本内容
//1.1 获取DOM对象
let h1 = document.querySelector('#title1');
let h1 = document.querySelector('h1'); // 获取第一个h1标签
let hs = document.querySelectorAll('h1');
//1.2 调用DOM对象中属性或方法
hs[0].innerHTML = '修改后的文本内容';
</script>
JS事件监听语法
形式： 事件源.addEventListener(‘事件类型’, 要执行的函数);
常见事件源：
<body>
<input type="button" id="btn1" value="点我一下试试1">
<input type="button" id="btn2" value="点我一下试试2">
<script>
document.querySelector("#btn1").addEventListener('click', ()=>{
alert("按钮1被点击了...");
})
</script>
</body>
二 Vue框架（入门）：
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建
管网地址：链接: Vue渐进式JavaScript
操作：先来看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-快速入门</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
message: 'Hello Vue'
}
}
}).mount('#app')
</script>
</body>
</html>
- 准备一个html文件，并在其中引入Vue模块 （Vue框架利用要从网站引入）
- 准备元素（div），交给Vue控制，通过插值表达式 {{…}}渲染页面。
- 准备数据。 在创建Vue应用实例的时候，传入了一个js对象，在这个js对象中，我们要定义一个data方法，这个data方法的返回值就是Vue中的数据。