登陆界面
1.auto
水平方向 —— 占据尽量多的空间
margin:auto —— 水平居中
2.块状：block
main、div、p
特点：
独占一行
水平方向占满父元素可用空间（所以得设置宽度）
垂直方向占据空间由其内容大小决定
行内：inline
span、input、img
一行显示多个
宽高由内容决定
不可设置宽高
行内块：inline-block
一行显示多个
可设宽高
元素转换：display
3.vw和vh 和浏览器窗口大小有关的单位
动态的；随着浏览器窗口大小的变化而动态计算宽高值
假设浏览器宽度1000px，则1vw = 浏览器窗口宽度的1% = 10px
浏览器高度1000px，则1vh = 浏览器窗口高度的1% = 10px
rem 相对长度单位；用来修饰 元素的 宽度、高度 ，是相对于 根元素 html 的字体大小
浏览器的默认字体大小是16px，所以1rem等于16px
4.文本内容对齐 text-align :center
5.字体大小 font-size6.
6.<p></p>段落标签；块状
<span></span>一块内容；行内
7.<input> placeholder属性：提供可描述输入字段预期值的提示信息
inline类型
8.<br>换行
9.边框边角弧度：border-radius
修饰长方形，50%就是一个正圆
10.flex box
主轴对齐：justify-content: center;
从轴对齐： align-content: center;
---------------------------------------------------------------------------------------------------------------------------
登录功能
11.事件处理
先获取元素对象：document.querySelector('tag标签名/id属性值/css选择器/class属性值')
或
document.getElementByTagName("")
documrnt.getElementByClassName("")
document.getElementById("")
addEventListener:
// 鼠标点击事件
element.addEventListener("click", handleFunc )// 键盘事件
element.addEventListener("keydown", handleFunc )
DOM对象事件属性:
// 键盘事件
element.onkeydown = handleFunc// 鼠标点击事件
element.onclick = handleFunc
12. 浏览器没渲染，就找元素 => <script>放body后面
页面加载后才执行
window.addEventListener('load', () => {
})
或
window.onload = () => {
}
13.和服务端进行通讯：jquery库
jQuery库里面的 ajax()方法 可以和服务端进行HTTP消息的收放
jquery库引入到页面里：<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>；放代码前面
jQuery构建请求消息
请求方法为GET、POST
$.ajax({
type: 'GET',
url : '/api/mgr/signin',
})$.ajax({
type: 'POST',
url : '/api/mgr/signin',
data: {
username:'byhy',
password:'abc',
}
})或
$.get('/api/mgr/signin')
$.post('/api/mgr/signin', {
username:'byhy',
password:'abc' }
)
url参数都是urlencode格式：https://www.baidu.com/s?wd=iphone&rsv_spt=1
拼接较为麻烦，可以使用浏览器内置的 URLSearchParams 类型，URLSearchParams对象的方法 toString ,可以将对象序列化为 urlencoded 格式
var queryStr = new URLSearchParams({code:'6000001', time:'2022-02-23' }).toString()
$.get(`http://localhost/api/stock?${queryStr}`)
或
使用jQuery 的 param 方法
var queryStr = $.param({code:'6000001', time:'2022-02-23' })
$.get(`http://localhost/api/stock?${queryStr}`)
data消息体一般为urlencode格式和json格式
urlencode格式：data参数如果是 Object，缺省行为就是转化为 urlencode格式
json格式：JSON 的stringify方法 ，可以序列化js对象为JSON格式的字符串
$.ajax({
url: '/api/mgr/signin',
type: 'POST',
contentType（消息头) : 'application/json',
data: JSON.stringify({ username: 'byhy', password:'88888888'}),
})
jQuery解析响应消息
$.ajax({
url: '/api/mgr/signin',
type: 'POST',
data: 'username=byhy&password=88888888',// 正确返回；回调函数被传入3个参数：data 从服务端返回的数据 ，textStatus 返回的状态文本描述，xhr XMLHttpRequest的扩展类型jqXHR的对象
success: function(data, textStatus, xhr) {
// 获取状态码
console.log(textStatus);
// 获取所有消息头
console.log(xhr.getAllResponseHeaders());
// 获取某个消息头
console.log(xhr.getResponseHeader("content-length"));//获取响应消息体的数据
console.log(data)
console.log(data.ret)
console.log(data.msg)
},// 错误
error:function (xhr, textStatus, errorThrown ){
console.error(`${xhr.status} \n${textStatus} \n${errorThrown }`)
}
})
// 响应消息格式 预设为 json,
dataType: 'json'
//重定向网址
location.href = 'hyms.html'
