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

HTML（超文本标记语言）常见标签

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选择器

代码格式

html 复制代码

选择器名   {
    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引入方式

第一种：内部引用

html 复制代码

<!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代码，如下：

javascript 复制代码

alert('Hello JS')

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

javascript 复制代码

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

注意1：demo.js中只有js代码，没有<script>标签
注意2：通过<script></script>标签引入外部JS文件时，标签不能自闭合，如：<script src="js/demo.js" />

JS基础语法

1.变量

是弱类型语言，用let声明即可

html 复制代码

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

2.常量

在JS中，如果声明一个场景，需要使用const关键字。一旦声明，常量的值就不能改变（不可以重新赋值）。

html 复制代码

<body>

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

3.数据类型

html 复制代码

<!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); //number
        alert(typeof 3.14); //number

        alert(typeof "A"); //string
        alert(typeof 'Hello');//string

        alert(typeof true); //boolean
        alert(typeof false);//boolean

        alert(typeof null); //object 

        var a ;
        alert(typeof a); //undefined

    </script>
</body>
</html>

4.函数

方式一

javascript 复制代码

<!-- 格式 -->
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);

方式二

javascript 复制代码

<!--  示例一（函数表达式）-->
<!--  是被设计用来执行特定任务的代码块，方便程序的封装复用-->
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一样

javascript 复制代码

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

JS DOM

将标记语言的各个组成部分封装成为对象

javascript 复制代码

- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象

作用

javascript 复制代码

- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素

示例

javascript 复制代码

<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事件监听

html 复制代码

<!--  语法-->
事件源.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
要执行的函数: 要做什么事

常见事件

html 复制代码

<!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文件（参照官网）

html 复制代码

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

使用Axios发送请求，并获取响应结果

html 复制代码

<!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是用来等待异步任务执行。

修改前：

javascript 复制代码

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
    })
  },

修改后

javascript 复制代码

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