前言
本片文章是学习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(…) 写入浏览器控制台
3.函数
函数表达方式有两种：
第一种：
先看代码：
<body><script>function add(a, b){return a + b;}let result = add(10,20);alert(result);</script>
</body>
就好像我们平时学习的编程语言一样，用名称来声明一个函数，并调用
第二种：
那我们也可以不为函数指定名字，那这一类的函数，我们称之为匿名函数。
<script>// function add(a, b){// return a + b;// }// let result = add(10,20);// alert(result);var add = function (a,b){return a + b;}var add = (a,b) => {return a + b;}let result = add(10,20);alert(result);</script>
3.自定义对象
在学习这部分的时候，可以把它看作Java中的对象来学，先来看代码：
<script>//自定义对象let user = {name: "Tom",age: 10,gender: "男",sing: function(){console.log("悠悠的唱着最炫的民族风~");}}console.log(user.name);user.eat();
<script>
4.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中的数据。
![WSL - Linux 安装 Anaconda3-2025.06-0 详细教程 [WSL 分发版均适用]](http://pic.xiahunao.cn/WSL - Linux 安装 Anaconda3-2025.06-0 详细教程 [WSL 分发版均适用])
何进行数据库安全加密？)
