前端-HTML+CSS+JavaScript+Vue+Ajax概述

HTML（超文本標記語言）常見標簽

<html><head>
<title>這是標題的內容，顯示在瀏覽器的頭部</title></head><body><!-- 這里面的內容在瀏覽器顯示給用戶看  --><!-- h1 -> h6 : 標題從大到小 --><!-- 圖片標簽 img src  --><img src = ""><!-- 超鏈接標簽  a  href --><a href = "">baidu</a><!-- 橫線標簽--><hr><!-- 換行標簽--><br><!-- 段落標簽--><p>段落標簽測試</p><!-- 表格標簽-->//border邊框<table  border = "1" style = "width:80%"><tr><td>姓名</td><td>性別</td><td>年齡</td></tr><tr><td>張三</td><td>男</td><td>18</td></tr></table><!-- 表單標簽--><form  action = ""  method = ""><input  type = "text"></br>//文本輸入框<input  type = "password"></br>//密碼輸入框<input  type = "radio"></br>//單選框，一般用在男女選項<input  type = "checkbox"></br>//復選框，例如愛好<input  type = "file"></br>//選擇文件<input  type = "button"  value = "按鈕"></br>//按鈕<input  type = "submit"></br>//提交按鈕<input  type = "reset"></br>//重置按鈕//下拉框<select><option>請選擇</option><option>排球</option><option>籃球</option><option>足球</option><select>//文本輸入框,可輸入多行多列<textarea><textarea></form><!-- --><!-- --><!-- --></body>
</html>

CSS（負責網頁的表現，頁面元素的外觀，位置，顏色，大小等）

名稱	語法描述	示例
行內樣式	在標簽內使用style屬性，屬性值是css屬性鍵值對。	<h1 style="xxx:xxx;">中國新聞網</h1>
內部樣式	定義<style>標簽，在標簽內部定義css樣式。	<style> h1 {...} </style>
外部樣式	定義<link>標簽，通過href屬性引入外部css文件	<link rel="stylesheet" href="css/news.css">

對于上述3種引入方式，企業開發的使用情況如下：

行內樣式：會出現大量的代碼冗余，不方便后期的維護，所以不常用（常配合JS使用）。
內部樣式：通過定義css選擇器，讓樣式作用于當前頁面的指定的標簽上。（可以寫在頁面任何位置，但通常約定寫在head標簽中）
外部樣式：html和css實現了完全的分離，企業開發常用方式。

CSS選擇器

代碼格式

選擇器名   {css樣式名：css樣式值;css樣式名：css樣式值;
}

常用選擇器

選擇器	寫法	示例	示例說明
元素選擇器	元素名稱 {...}	h1 {...}	選擇頁面上所有的<h1>標簽
類選擇器	.class屬性值 {...}	.cls {...}	選擇頁面上所有class屬性為cls的標簽
id選擇器	#id屬性值 {...}	#hid {...}	選擇頁面上id屬性為hid的標簽
分組選擇器	選擇器1,選擇器2{...}	h1,h2 {...}	選擇頁面上所有的<h1>和<h2>標簽
屬性選擇器	元素名稱[屬性] {...}	input[type] {...}	選擇頁面上有type屬性的<input>標簽
屬性選擇器	元素名稱[屬性名="值"] {...}	input[type="text"] {...}	選擇頁面上type屬性為text的<input>標簽
后代選擇器	元素1元素2{...}	form input {...}	選擇<form>標簽內的所有<input>標簽

JavaScript （負責網頁的交互）

是一門跨平臺，面向對象的腳本語言（不用編譯的語言）

組成：

ECMAScript: 規定了JS基礎語法核心知識，包括變量、數據類型、流程控制、函數、對象等。
BOM：瀏覽器對象模型，用于操作瀏覽器本身，如：頁面彈窗、地址欄操作、關閉窗口等。
DOM：文檔對象模型，用于操作HTML文檔，如：改變標簽內的內容、改變標簽內字體樣式等。

JS引入方式

第一種：內部引用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS 引入方式</title>
</head>
<body><!-- 內部腳本--><script>alert('Hello JS')</script>
</body>
</html>

第二種：外部腳本

?1.在js目錄下，定義一個js文件demo.js，在文件中編寫js代碼，如下：

alert('Hello JS')

2.在html文件中，通過<script></script>引入js文件demo.js，如下：

<script src="js/demo.js"></script>

注意1：demo.js中只有js代碼，沒有<script>標簽
注意2：通過<script></script>標簽引入外部JS文件時，標簽不能自閉合，如：<script src="js/demo.js" />

JS基礎語法

1.變量

是弱類型語言，用let聲明即可

<script>//變量let a = 20;a = "Hello";alert(a);
</script>

2.常量

在JS中，如果聲明一個場景，需要使用const關鍵字。一旦聲明，常量的值就不能改變（不可以重新賦值）。

<body><script>//常量const PI = 3.14;PI = 3.15;alert(PI);</script>
</body>

3.數據類型

<!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>JS-數據類型</title>
</head>
<body><script>//原始數據類型alert(typeof 3); //numberalert(typeof 3.14); //numberalert(typeof "A"); //stringalert(typeof 'Hello');//stringalert(typeof true); //booleanalert(typeof false);//booleanalert(typeof null); //object var a ;alert(typeof a); //undefined</script>
</body>
</html>

4.函數

方式一

<!-- 格式 -->
function 函數名(參數1,參數2..){要執行的代碼
}<!-- 示例-->
function add(a, b){return a + b;
}
<!--如果要調用上述的函數add，可以使用：函數名稱(實際參數列表)-->
let result = add(10,20);
alert(result);
<!--我們在調用add函數時，再添加2個參數，修改代碼如下：-->
var result = add(10,20,30,40);
alert(result);

方式二

<!--  示例一（函數表達式）-->
<!--  是被設計用來執行特定任務的代碼塊，方便程序的封裝復用-->
let add = function (a,b){    //參數可以有多個return a + b;            //要執行的代碼
}<!--  示例二（箭頭函數）-->
let add = (a,b) => {return a + b;
}<!--上述匿名函數聲明好了之后，是將這個函數賦值給了add變量。 那我們就可以直接通過add函數直接調用，調用代碼如下：-->
let result = add(10,20);
alert(result);

5.流程控制

和Java一樣

- if ... else if ... else ...
- switch
- for
- while
- do ... while

JS DOM

將標記語言的各個組成部分封裝成為對象

- Document：整個文檔對象
- Element：元素對象
- Attribute：屬性對象
- Text：文本對象
- Comment：注釋對象

作用

- 改變 HTML 元素的內容
- 改變 HTML 元素的樣式（CSS）
- 對 HTML DOM 事件作出反應
- 添加和刪除 HTML 元素

示例

<body>
<h1  id = "title1">1111</h1>
<h1>22222</h1>
<h1>333333</h1><script>
<!--  修改第一個標簽中的內容-->
<!--  1.獲取DOM對象-->let h1 =  document.querySelect('#title1') <!--  2.調用DOM中的對象或者方法-->h1.innerHTML = '修改后的文本內容';</script>
</body>

JS事件監聽

<!--  語法-->
事件源.addEventListener('事件類型', 要執行的函數);<!--  示例-->
<!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>JS-事件-事件綁定</title>
</head><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>
</html>

在上述的語法中包含三個要素:

事件源: 哪個dom元素觸發了事件, 要獲取dom元素
事件類型: 用什么方式觸發, 比如: 鼠標單擊 click, 鼠標經過 mouseover
要執行的函數: 要做什么事

常見事件

<!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>JS-事件-常見事件</title>
</head><body><form action="" style="text-align: center;"><input type="text" name="username" id="username"><input type="text" name="age" id="age"><input id="b1" type="submit" value="提交"><input id="b2" type="button" value="單擊事件"></form><br><br><br><table width="800px" border="1" cellspacing="0" align="center"><tr><th>學號</th><th>姓名</th><th>分數</th><th>評語</th></tr><tr align="center"><td>001</td><td>張三</td><td>90</td><td>很優秀</td></tr><tr align="center" id="last"><td>002</td><td>李四</td><td>92</td><td>優秀</td></tr></table><script>//click: 鼠標點擊事件document.querySelector('#b2').addEventListener('click', () => {console.log("我被點擊了...");})//mouseenter: 鼠標移入document.querySelector('#last').addEventListener('mouseenter', () => {console.log("鼠標移入了...");})//mouseleave: 鼠標移出document.querySelector('#last').addEventListener('mouseleave', () => {console.log("鼠標移出了...");})//keydown: 某個鍵盤的鍵被按下document.querySelector('#username').addEventListener('keydown', () => {console.log("鍵盤被按下了...");})//keydown: 某個鍵盤的鍵被抬起document.querySelector('#username').addEventListener('keyup', () => {console.log("鍵盤被抬起了...");})//blur: 失去焦點事件document.querySelector('#age').addEventListener('blur', () => {console.log("失去焦點...");})//focus: 元素獲得焦點document.querySelector('#age').addEventListener('focus', () => {console.log("獲得焦點...");})//input: 用戶輸入時觸發document.querySelector('#age').addEventListener('input', () => {console.log("用戶輸入時觸發...");})//submit: 提交表單事件document.querySelector('form').addEventListener('submit', () => {alert("表單被提交了...");})</script>
</body></html>

?Ajax

與服務器進行數據交換：通過Ajax可以給服務器發送請求，并獲取服務器響應的數據。
異步交互：可以在不重新加載整個頁面的情況下，與服務器交換數據并更新部分網頁的技術，如：搜索聯想、用戶名是否可用的校驗等等。

步驟：

引入Axios的js文件（參照官網）

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用Axios發送請求，并獲取響應結果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios入門程序</title>
</head>
<body><button id="getData">GET</button><button id="postData">POST</button><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>//GET請求document.querySelector('#getData').onclick = function() {axios({
<!--  請求路徑 -->url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
<!--  請求方式 -->method:'get'}).then(function(res) {  //.then成功回調函數（就是前端發送給服務器，服務器返回給前端后執行的函數）console.log(res.data);}).catch(function(err) {  //.catch失敗回調函數console.log(err);})}//POST請求document.querySelector('#postData').onclick = function() {axios({url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',method:'post'}).then(function(res) {console.log(res.data);}).catch(function(err) {console.log(err);})}</script>
</body>
</html>

請求方法別名

方法	描述
axios.get(url [, config])	發送get請求
axios.delete(url [, config])	發送delete請求
axios.post(url [, data[, config]])	發送post請求
axios.put(url [, data[, config]])	發送put請求

如果使用axios中提供的.then(function(){....}).catch(function(){....})，這種回調函數的寫法，會使得代碼的可讀性和維護性變差。而為了解決這個問題，我們可以使用兩個關鍵字，分別是：async、await。

可以通過async、await可以讓異步變為同步操作。async就是來聲明一個異步方法，await是用來等待異步任務執行。

修改前：

search() {//基于axios發送異步請求，請求https://web-server.itheima.net/emps/list，根據條件查詢員工列表axios.get('https://web-server.itheima.net/emps/list', {params: this.searchEmp}).then(res => {this.empList = res.data.data})},

?修改后

  async search() {//基于axios發送異步請求，請求https://web-server.itheima.net/emps/list，根據條件查詢員工列表const result = await axios.get('https://web-server.itheima.net/emps/list', {params: this.searchEmp});this.empList = result.data.data;},

注意：

await只能出現在async里面