JavaWeb

notes

Publish Date: 2023-04-27

Word Count: 6.7k

Read Count:

前端（一）

Web标准

HTML:负责网页的结构
CSS:负责网页的表现
JS:负责网页的行为

HTML

结构标签

<html>
	<head>
		<title>标题</title>
	</head>
	<body>
		
	</body>
</html>

特点

HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散

常用标签

标题标签
标签：<h1>内容<h1>
注：h1-h6重要程度依次降低，h1只能用一次

水平线标签<hr>

图片标签<img src="..." width="..." height="...">
绝对路径：绝对磁盘路径(d:/xxxx)，绝对网络路径(https://xxxx)
相对路径：从当前文件开始查找(./ : 当前目录，../ : 上级目录)

<span>标签
是一个在无语义的布局标签，一行可显示多个，宽度和高度默认由内容撑开

<a>标签
属性：
href：指定资源访问的url
target：指定在何处打开资源链接
	_self：默认值，在当前页面打开
	_blank：在空白页面打开
	
<audio>标签
audio音频标签,src（必须有的属性）音频的Url,controls显示音频控制面板，loop，循环播放，autoplay自动播放，为了提升用户体验，浏览器一般会禁用自动播放
在h5里面，若属性名和属性值完全一样，可以简写为一个单词，例如:controls="controls"可以简写为controls

<video>标签
src（必须存在的属性）视频URL，control是显示视频控制面板，loop循环播放，muted静音播放，autoplay自动播放，为提升用户体验，浏览器支持视频静音状态自动播放

<br>换行
<p>段落

<b>或<strong>文本加粗

表格标签

<table> 
描述：定义表格整体，可包括多个<tr>
属性：border:规定表格边框的宽度
	 width:规定表格的宽度
	 cellspacing:规定单元之间的空间
<tr>
描述：表格的行，可包括多个<td>
<td>
描述：表格单元格（普通），可包括内容
属性：若是表头单元格，可替换为<th>,<th>具有加粗居中效果

表单标签和表单项

场景：在网页中主要负责数据采集功能，如：注册，登录等数据采集。

标签：<form>
表单项：不同类型的input元素，下拉列表，文本域等。
<input>：定义表单项，通过type属性控制输入形式
	type属性取值text,默认值，定义单行的输入字段
	type属性取值password，定义密码字段
	type属性取值radio，定义单选按钮
	type属性取值checkbox，定义复选框
	type属性取值file，定义文件上传按钮
	type属性取值date/time/datetime-local，定义日期/时间/日期时间
	type属性取值number，定义数字输入框
	type属性取值email，定义邮件输入框
	type属性取值hidden，定义隐藏域
	type属性取值取值submit/reset/button，定义提交按钮/重复按钮/可点击按钮
<select>：定义下拉列表，<option>定义列表项
<textarea>：定义文本域
属性：
action：规定当前提交表单时向何处发表表单数据，URL
method：规定用于发送表单数据的方式。GET,POST
	GET:表单数据拼接在url后面，例如：?username=java，大小有限制
	POST:表单数据在请求体中携带，大小没有限制

注：表单项必须有name属性才可以提交

注意事项

html中。无论输入多少空格，只会显示一个。

1
2

可使用空格占位符:
&nbsp;

CSS

引入样式

1
2
3

行内样式：<标签 style="...">
内嵌样式：<style>...</style>
外联样式：xxx.css	<link href="...">

颜色表示

关键字：red,green…
rgb表示法：rgb(255,0,0)、rgb(134,100,89)
十六进制：#ff0000,#cccccc,#ccc

属性

color:设置文本内容的颜色

font-size:字体大小（加px）

text-decoration:规定添加到文本的修饰，none表示定义标准的文本

line-height：设置行高

text-indent：定义第一个行内容的缩进

text-align：规定元素中的文本的水平对齐方式

选择器

元素选择器：标签名{}
id选择器：#id属性值{}
类选择器：class属性值{}

优先级：id选择器>类选择器>元素选择器

盒子模型

组成：内容(content)，内边距(padding)，边框(border)，外边距(margin)

属性：

width：设置宽度
height：设置高度
border：设置边框的属性，如：1px solid #000
padding：内边距
margin：外边距

注：若只需要设置第一个方位的边框，内边距，外边距，可在属性名后方加上-left/right/top/bottom，

JS

JavaScript简称JS是一门跨平台，面向对象的脚本语言，是用来控制网页行为的，能使网页可交互。

JavaScript和Java是完全不同的语言，不论是概念还是设计，但是基础语法类似。

引入方式

内部脚本

将js代码定义在HTML页面中。

JavaScript代码必须位于script标签之间
在html文档中，可在任意地方，放置任意数量的script
一般会把脚本置于body元素的底部，可改善显示速度

外部脚本

将js代码定义在外部JS文件中，后引入到html页面中。

外部js文件中，只包含js代码，不包含script标签
script标签的不能自闭和

范例

test.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>Document</title>
</head>
<body>
    
</body>
<script>
    alert("内部脚本");
</script>
<script src="./test.js"></script>
</html>

test.js
alert("外部脚本");

书写语法

区分大小写：和java一样，变量名，函数名以及其他一切东西都是区分大小写的。

每行结尾的分号可有可无，不过尽量加上。

注释：

1 2	单行注释：//注释内容多行注释：/注释内容/

大括号表示代码块

输出语句

使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台

范例：

<!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>Document</title>
</head>
<body>
    
</body>
<script>
    window.alert("window.alert");
    document.write("document.write");
    console.log("console.log");
</script>
</html>

变量

JavaScript中用var关键字（variable的缩写），let（ECMAScript6新增），const（ECMAScript6新增）来声明变量。

JavaScript是一门弱类型语言，变量可存放不同类型的值。

变量起名：

组成字符可以是字母，数字，下划线，或美元符号($)
数字不能开头
建议使用驼峰命名

var特点：

作用域比较大，全局变量
可重复定义

let特点：用法类似于var，但其所声明的变量，只在let关键字所在的代码块有效，且不允许重复定义。

const特点：用来声明一个只读的常量，一旦声明，常量值不可变

数据类型

JavaScript中虽然变量不用定义类型，但是数据有类型。

数据类型：原始类型和引用类型。

原始类型

number：数字（整数，小数，NaN(Not a Number)）

String：字符串，单双引皆可

boolean：布尔，true，false

null：对象为空

undefined：当声明的变量未初始化时，该变量的默认值是undefined。

类型转换

字符串转为数字：将字符串字面值转为数字，若字面值不是数字，则转为NaN
其他类型转为boolean
- Number：0和NaN为false，其余转为true
- String：空字符串为false，其余转为true
- null和undefined：均转为false

范例:

alert(parseInt("123"));//123
alert(parseInt("12ab3"));//12
alert(parseInt("sfa"));//NaN
if(0){
    alert("0为true")
}else{
    alert("0为false")
}
if(NaN){
    alert("NaN为true")
}else{
    alert("NaN为false")
}
if(-1){
    alert("-1为true")
}else{
    alert("-1为false")
}
if(""){
    alert("空字符串为true")
}else{
    alert("空字符串为false")
}
if("aa"){
    alert("字符串aa为true")
}else{
    alert("字符串aa为false")
}
if(null){
    alert("null为true")
}else{
    alert("null为false")
}
if(undefined){
    alert("undefined为true")
}else{
    alert("undefined为false")
}

运算符

与java运算符大致相似。

**==和===**：

==会进行类型转换
===不会进行类型转换

范例：

let a=10;
alert(a==10);//true
alert(a=="10");//true
alert(a===10);//true
alert(a==="10");//false

函数

函数（方法）是被设计为执行特定任务的代码块。

定义方式一：

1
2
3

function functionName(参数1,参数2...){
	//要执行的代码
}

定义方式二：

1
2
3

var functionName=function(参数1,参数2...){
	//要执行的代码
}

调用：functionName(实际参数列表)

注：

JavaScript是弱类型语言，形式参数无需类型
返回值也不需定义类型，可在函数内部直接用return返回

范例：

function add1(a,b){
    return a+b;
}
alert(add1(3,5));
let add2=function(a,b){
    return a+b;
} 
alert(add2(4,5));

JS对象

Array

JavaScript中的数组相当于java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可存储任意类型的数据。

定义：

let/var 变量名=new Array{元素列表}
let/var 变量名=[元素列表]

访问：

arr[索引]=值

属性

length：设置或返回数组中元素的数量

方法

**foreach()**：遍历数组中每个有值的元素，并调用一次传入的数据。

**push()**：将新元素添加到数组的末尾，并返回新的长度。

**splice()**：从数组中删除元素

范例

let arr=[1,2,"aaa",4,true,6];
arr[10]=10;
console.log("for遍历");
for (let index = 0; index < arr.length; index++) {
    console.log(arr[index]);
}
console.log("foreach遍历");
arr.forEach(function(e){
    console.log(e);
});
console.log("foreach简化遍历");
arr.forEach((e)=>{
    console.log(e);
});
console.log("push");
arr.push(1,"aa",3);
console.log(arr);
console.log("slice");
arr.splice(2,2);//索引2开始，删除两个
console.log(arr);

String

创建方式：

let/var 变量名=new String(“…”)
let/var 变量名=”…”

属性

length：字符串的长度

方法

charAt()：返回在指定位置的字符。

indexOf()：检索字符串。

trim()：去除字符串两边的空格。

substring()：提取字符串中两个指定的索引号之间的字符

范例

let str=" hello world ";
console.log(str);
console.log(str.length);
console.log(str.charAt(1));
console.log(str.indexOf("llo"));
let s=str.trim();
console.log(s.substring(2,5));

自定义对象

定义格式

var/let 对象名 = {
	属性名1:属性值1,
	属性名2:属性值2,
	属性名3:属性值3,
	...
	函数名称:function(形参列表){
	
	}
	//函数简化版
	函数名称(形参列表){
	
	}
}

调用格式

对象名.属性名;
对象名.函数名();

范例

let student={
	age:19,
	id:8,
	name:"zhangsan",
	study(){
		alert("学习");
	}
}
alert(student.age);
student.study();

JSON

JavaScript Object Notation，JavaScript对象标记法。

JSON是通过JavaScript对象标记法书写的文本。

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

定义格式

var/let 变量名=’{“key1”:value1,”key2”,value2}‘

value的数据类型：

数字，整数或浮点数
字符串，在双引号中。
逻辑值，true或false
数组，在方括号中
对象，在方括号中
null

JSON字符串转换成JS对象：

var/let jsObject=JSON.parse(JSON字符串);

JS对象转换成JSON字符串：

var/let jsonStr=JSON.stringify(jsObject);

范例

let student='{"age":18,"name":"zhangsan","score":[66,19,21]}';
let studentobject=JSON.parse(student);
alert(studentobject.age);
alert(studentobject.name);
alert(studentobject.score);
let studentstr=JSON.stringify(studentobject);
alert(studentstr);

BOM

Brower Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象。

组成：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

Window

介绍：浏览器窗口对象

获取：直接使用Window，其中Window.可以省略。

属性：

history：对History的只读引用
location：用于窗口或框架的Location对象
navigator：对Navigator对象的只读引用

方法：

alert()：显示带有一段消息和一个确认按钮的警告框
confirm()：显示带有一段消息及确认按钮和取消按钮的对话框，若选择确认则会返回true。若选择取消则会返回false
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout()：在指定的毫秒数后调用函数或计算表达式

范例

alert("alert");

let flag=confirm("您确定吗？");
alert(flag);

let i=0;
setInterval(function(){
	i++;
	alert("这是第"+i+"次运行");
},3000);

setTimeout((function(){
	alert("运行");
},3000);

Location

介绍：地址栏对象。

获取：使用window.location获取，其中window.location可省略

window.location.属性;

location.属性;

属性：
href：设置或返回完整的URL

范例：

1 2	alert(location.href); location.href="https://www.baidu.com";//自动跳转到百度

DOM

Document Object Model，文档对象模型。

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

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

JavaScript通过DOM，就能够对html进行操作：

改变html元素的内容
改变html元素的样式
对html DOM事件作出反应
添加和删除html元素

DOM是W3C（万维网联盟）的标准，定义了访问html和xml文档的标准，分为3个不同的部分。

Core DOM：所有文档类型的标准类型
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
XML DOM-XML文档的标准模型
HTML DOM-HTML文档的标准类型
- Image: < img >
- Button:< input type=’button’>

范例:

<!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>Document</title>
</head>
<body>
    <img src="./img/off.gif" id="h1">
    <div class="cls">传智教育</div>
    <div class="cls">黑马程序源</div>
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
</body>
<script>
    let img=document.getElementById("h1");
    alert(img);
    let divs=document.getElementsByTagName("div");
    for (let index = 0; index <divs.length; index++) {
        console.log(divs[index]);        
    }
    let names=document.getElementsByName("hobby");
    for (let index = 0; index <names.length; index++) {
        console.log(names[index]);        
    }
    let classnames=document.getElementsByClassName("cls");
    for (let index = 0; index <classnames.length; index++) {
        console.log(classnames[index]);        
    }
    divs[0].innerHTML="传智教育666" 
</script>
</html>

事件

事件：HTML事件是发生在HTML元素上的”事情”，比如：

按钮被点击
鼠标移动到元素上
按下键盘按键

事件监听：JavaScript可在事件被侦测到时执行代码

事件绑定方式：

通过HTML标签中的事件属性进行绑定
通过DOM元素属性绑定

范例：

方式一
<input type="button" onclick="on()" value="按钮1">
<script>
	function on(){
		alert("我被点击了！");
	}
</script>

方式二
<input type="button" id="btn" value="按钮2">
<script>
	document.getElementById('btn').onclick=function(){
		alert("我被点击了！");
	}
</script>

常见事件

onclick：鼠标单击事件
onblur：元素失去焦点
onfocus：元素获得焦点
onload：某个页面或图像被完成加载
onsubmit：当表单提交时触发该事件
onkeydown：某个键盘的键被按下
onmouseover：鼠标被移到某元素之上
onmouseout：鼠标从某元素移开

范例

<!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>
    <img id="light" src="img/off.gif"> <br>
    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="onAll()">
    <input type="button" value="反选" onclick="offAll()">

</body>
<script>
    function on(){
        let img=document.getElementById("light");
        img.src="img/on.gif";
    }
    function off(){
        let img=document.getElementById("light");
        img.src="img/off.gif";
    }
    function lower(){
        let input=document.getElementById("name");
        input.value = input.value.toLowerCase();
    }
    function upper(){
        let input=document.getElementById("name");
        input.value = input.value.toUpperCase();
    }
    function onAll(){
        let names=document.getElementsByName("hobby");
        for (let index = 0; index < names.length; index++) {
            const element = names[index];
            element.checked=true;
        }
    }
    function offAll(){
        let names=document.getElementsByName("hobby");
        for (let index = 0; index < names.length; index++) {
            const element = names[index];
            element.checked=false;
        }
    }
    </script>
</html>

Vue

Vue是一套用于构建用户界面的渐进式框架。

例：

<!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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"cesgu"
        }
    })
</script>
</html>

插值表达式

形式：

内容：

变量
三元运算符
函数调用
算数运算

常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。

v-bind
- 为HTML标签绑定属性值，如设置href,css样式等
v-model
- 在表单元素上创建双向数据绑定
v-on
- 为HTML标签绑定事件
v-if;v-else-if;v-else
- 条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show
- 根据条件展示某元素，区别在与切换的是display属性的值
v-for
- 列表渲染，遍历容器的元素或对象的属性

范例1

<!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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind -->
        <a v-bind:href="url">连接1</a>
        <!-- v-bind简化版 -->
        <a :href="url">连接2</a>
        <!-- v-model -->
        <input type="text" v-model="url">
        <!-- v-on -->
        <button v-on:click="handle">按钮1</button>
        <!-- v-on简化版 -->
        <button @click="handle">按钮2</button>
        <!-- v-if;v-else-if;v-else -->
        <p v-if="score1<60">不及格</p>
        <p v-else-if="score1>=60&&score1<80">及格</p>
        <p v-else="score1>=80">优秀</p>
        <input type="text" v-model="score1">
        <!-- v-show -->
        <p v-show="score2<60">不及格</p>
        <p v-show="score2>=60">及格</p>
        <input type="text" v-model="score2">
        <!-- v-for -->
        <p v-for="arr in arrs">{{arr}}</p>
        <p v-for="(arr,index) in arrs">{{index}}:{{arr}}</p>
    
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            url:"https://www.baidu.com",
            score1:20,
            score2:80,
            arrs:["红","绿","蓝","橙"]
        },
        methods:{
            handle:function(){
                alert("按钮被点击了");
            }
        }
    })
</script>
</html>

范例2

<!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>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">  
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender==1">男</span>
                    <span v-else>女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>=85">优秀</span>
                    <span v-else-if="user.score>=60">及格</span>
                    <span v-else style="color: red;">不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

生命周期

生命周期：指一个对象从创建到销毁的整个过程。

生命周期分为八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

beforeCreate
- 创建前
created
- 创建后
beforeMount
- 挂在前
mounted
- 挂载完成
beforeUpdate
- 更新前
updated
- 更新后
beforeDestroy
- 销毁前
destroyed
- 销毁后

范例

<!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>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">  
    </div>

</body>

<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{

        },
        mounted(){
            alert("挂载完成")
        }
    })
</script>
</html>

Axios

Ajax:Asynchronous Javascript And XML，异步的JavaScript和XML。

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，例如：搜索联想，用户名是否可用的校验等等

Axios：对原生的Ajax进行封装，简化书写，快速开发。

Axios请求方式别名：

axios.get(url,[,config])
axios.delete(url,[,config])
axios.post(url [,data[,config]])
axios,put(url [,data[,config]])

范例

<!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>axios</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            emps:[]
        },
        mounted(){
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>(
                this.emps=result.data.data
            ))
        }
    })
</script>
</html>

ljs

http://example.com/2023/04/27/jw1/

All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source ljs !

JavaWeb

MySQL(二)

MySQL

2023-05-05 notes

JavaWeb MySQL

反射和动态管理（二十一-完）

反射和动态管理

2023-04-08 notes

JAVA

前端(一)

前端（一）

Web标准

HTML

结构标签

特点

常用标签

表格标签

表单标签和表单项

注意事项

CSS

引入样式

颜色表示

属性

选择器

盒子模型

JS

引入方式

内部脚本

外部脚本

范例

书写语法

输出语句

变量

数据类型

原始类型

类型转换

运算符

函数

JS对象

Array

属性

方法

范例

String

属性

方法

范例

自定义对象

定义格式

调用格式

范例

JSON

定义格式

范例

BOM

Window

Location

DOM

事件

常见事件

范例

Vue

插值表达式

常用指令

范例1

范例2

生命周期

范例

Axios

范例

你的赏识是我前进的动力