前言
本片文章是學習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 分發版均適用])
何進行數據庫安全加密？)
