前端-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里面