前端周报
目录
SQL注入问题
本质：利用了特殊的符号产生特殊含义 从而避开正常的业务逻辑
避免问题根本就是 不要手动拼接sql语句
交给 execute 来处理
sql = "select name form userinfo where name=%s and pwd=%s"
cursor.execute(sql,(name,pws))
execute方法会自动过滤用户输入的特殊字符
触发器triger
达到某种条件后自动触发
6中情况
增前 before insert
删前 before delete
改前 before update
增后 after insert
删后 after delete
改前 after update
create trigger tri_after_insert_cmd after insert on cmd
for each row
begin
if new.success = 'no' then
# 新纪录都会被Mysql封装成NEW对象
insert into errlog(err_cmd,err_time)values(new.cmd,new.sub_time);
end
事务
开启事务：start transaction
回滚：rollback
确认结束；commit
四大特性（ACID）
A 原子性
事务中的各项操作是不可分割的整体，要么同时成功要么同时失败
C 一致性
使数据库从一个一致性状态变到另一个 一致性状态
I 隔离性
多个事务之间彼此不干扰
D 持久性
一个事务一旦提交 对数据库中的改变就是永久性的
事务4中隔离级别
未提交读 脏读
事务中的修改没有及时提交 但是其他事务也可以看到互相的数据。事务中事务未确认时数据被其他事务读取就叫 未提交读 脏读
提交读
一个事务开始 直到 提交确认 期间任何的修改 对其他事务不可见
事务未确认前 其他事务不可以使用事务进行中的数据 也叫不可重复读
可重复读 mysql默认隔离级别
可以决解脏读问题，但是无法解决幻读问题，某个事物在读取某个范围内的记录时，另一个事物又改了范围内的事物，之前的事务再次读取该范围内数据 就会产生 幻读 ，innodb储存引擎是通过mvcc 间隙锁策略来解决该问题的
可串行读
强制事物变为串行执行 效率很低
前端知识
浏览器发送请求 HTTP协议 服务端接收请求 服务端再返回响应 服务端把HTML文件内容发送给浏览器 浏览器渲染页面
HTML是超文本标记语言 是用来创建网页的标记语言
<html>
<head>
<title>网页标题</title>
<meta>
</head>
<body>
<div>
网页具体内容
</div>
</body>
</html>
<!--注释-->
常见响应状态码
1xx：服务端已经接受到请求正在处理，客户端可以等待或刷新
2xx: 200 ok 请求成功状态正常
3xx：302 临时 304 网页重定向
4xx：403请求权限不够 404 请求资源不存在
5xx：服务器内部错误
我们自己写文件 也会自定义很多状态码 一般都是以10000起步的
head内常见标签
<title>用来定义网页标题</title>
<meat name='keywords' content='查询关键字' >
设置网站关键字
<meat name='description' content='网页介绍'>
设置网页的简介
<link rel='stylesheet' href='mycss.css'>
引用css文件
<script src='myjs.js'></script>
引用js文件
body内基本标签
<h1>一级标题</h1>
标题系列h1-h6
<p>段落文字展示</p>
<u>下划线文字</u>
<b>加粗文字</b>
<s>删除线文字</s>
p标签和标题标签都是独占一行的
常见符号
空格
> 大于号
< 小于号
& &符号
¥ 人民币符号
div与span区别
div 块级标签
span 行内标签
'''
标签之间可以互相嵌套 并且理论上可以无线套娃
块儿级标签内部可以嵌套 块级标签和行内标签
行内标签只能嵌套行内标签
'''
body内常用标签
<a href="连接网址" target="_blank"></a>
链接标签
href=填写网站的网址地址 可以跳转
target 默认原网页跳转 _blank新建网页跳转
<img src="图片网址地址" alt="图片加载失败提示的信息" width="调整宽度"
height="调整高度" title="鼠标悬浮展示文本">
图片链接
列表标签
无序列表
<ul>
<l1>小标题</l1>
</ul>
页面上所有规则排序 横向或竖向的数据 一般都是使用无序列表
表格标签
<table>信息表
<thead>
# 设置表头字段
<tr>
<th>编号</th>
#添加字段名
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
# 表格内数据
<tr>
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
# 每一行数据就是一个 tr标签 td标签是每一个数据
<tr>
<td>2</td>
<td>moon</td>
<td>18</td>
</tr>
</tbody>
</table>
表单标签
可以获取到用户的数据并发送给服务器
<form action="172.0.0.1" method="get" ></form>
设置发送的地址 和 数据提交的方式 get post
input标签
<input type="text">
type有很多类型
text 普通文本
password 密文展示
date 日期选项
radio 单选
checkbox 多选
file 文件
submit 触发提交动作 提交按钮
reset 重置表单内容 重置按钮
button 无功能 按钮
<select>设置一个下拉框
<option>设置一个个选项</option>
</select>
<textarea>大段文本标签</textarea>
<input type="text" name="数据字典的键" value="数据字典的值">
传输数据时必须要设置 name 这样数据才会组成字典的形式发送
给服务端 这样才具有明确意义
默认用户输入的数据会作为value的值
如果是选择 不需要用户填写数据 那么需要我们手动填写每个选项的value值
<input type="radio" name="gender" value="male">
选择时需要手动设置每个选项的值 name应该都是相同的
<input type="file" multiple>
默认单选 如果需要多选需要加上 multiple 属性
针对选择也可以设置默认值
<input type="radio" name="gender" checked >
checked默认选择
多选也可以设置多个checked
css层叠样式表
css可以主动条件html标签的各种样式
class属性
分门别类 主要用于批量查找
id属性
精确查找 主要用于点对点
css注释语法
/*注释内容*/
编写css样式
1.可以在head标签呢
2.单独写一个css样式文件 通过
head内link标签引入
css选择器
a{
color:red;
}
直接通过标签名 查找 生效与所有该标签
.classname{
color:red;
}
直接通过class名字选择 使用.名字方法 作用于所有拥有这个class属性的标签
#d1{
color:yellow;
}
根据标签设置的id属性 精确查找该标签 只针对这一个元素 因为标签是独一无二的
* {
color:red
}
*面向所有的标签
div span{
color:red;
}
查找所有div标签里面的span标签
div>span{
属性名：属性值；
}
作用于所有div标签内儿子级别的span
div.c1 { 查找class含有c1的div
color: red;
}
伪类选择器
.top_a:hover{
color:orange;
}
当a标签鼠标悬浮样式
input:focus{
background-color: red;
}
当input标签被输入时可以改变的样式
p:before {
content: '嘿嘿嘿';
color: blue;
}
设置一个p标签加载前展示的样式
input:after {
content: '呵呵呵';
color: red;
}
设置一个p标签加载后展示的样式
通过css加载的文本无法被正常选中
选择器生效级别
选择器相同 导入方式不同的
就近原则
内部样式最大 其次是 head内编写的样式 最后是link引用的css文件
选择器不同 导入方式相同
id选择器 最大 其次 类选择器 最后标签选择器
css内常见样式条件
div{
width:20px
设置宽度
heigt:20px
设置高度
/*只有块级标签才可以设置宽度和高度*/
/*内连标签 span无法设置宽度和高度*/
font-family:设置字体样式
font-size；14px
设置文字大小
font-weight:bold
/*设置文字的字重 粗细*/
text-align:left 左 right 右 center 居中对齐 justify 两端对齐
/*设置标签内容的对齐方式*/
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
none可用于删除a标签默认的下划线
/*设置标签的下划线 上划线 删除线* 和删除所有样式*/
color:#333333
color: rgba(22,22,2,0.1);
/*颜色 rgba可以设置颜色和透明度 透明度从0.1-1.0*/
背景
background-color:red
/*设置背景颜色*/
background-image:url('图片地址')
/*设置背景图片 默认是平铺*/
background-repeat: no-repeat;
no-repeat 背景图片不平铺
repeat-x 背景图片只在水平方向平铺
repeat-y 背景图片只在垂直方向平铺
/*改变背景图展示方式 */
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
描边/圆角
border-width: 10px;
设置描边大小
border-style: dashed;
设置边框样式 dashed 断点 solid 实线描边 none无边框
border-color: red;
设置描边颜色
元素描边设置
border-top-style:dotted;
上边框样式
border-top-color: red;
上边框颜色
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
boeder-radius:50%
通过设置圆角得到圆形
boeder-radius:14px
设置圆角
控制元素显示效果display
display:'none'
可以隐藏某个元素
HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:'block'
把元素变成块级标签 但是要设置宽高
display:'inline'
把元素变为行内元素 无法设置宽高边距等
display:'inline-block'
使元素同时具有行内元素和块级元素的特点
css盒子模型
margin：用于控制元素与元素之间的距离 作用控制元素周围空间的间隔 从视觉上达到相互隔开的目的
padding：用于控制内容与边框之间的距离
border:围绕在内边距和内容外的边框
content：盒子的内容
常见居中:
margin: 0 auto;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
上top 下 bottom 左left 右 right
都也可以单独设置。上下左右
浮动float
在css中 任何一个元素都可以浮动起来
浮动元素会生成一个块级框
浮动的两个特点
1.浮动的框可以向左向右移动 直到他的外边缘碰到包含框的另一个浮动边框
2.浮动框 浮动起来以后 原本的框会因为没有内容而从变化 因为没有内容支撑了
float-left:20px 向左浮动
float-right:20px 向右浮动
clear
clear属性规定元素的哪一侧不允许其他浮动元素。
清除浮动的副作用（父标签塌陷问题
overflow:hidden
溢出
overflow: 属性值;
overflow: visible;
默认值 内容不会被裁减 但是会超出显示
overflow:hidden；
内容被修剪 超出内容不可见 多用于头像 banner等图片显示
overflow:scroll
内容会被修剪 但是多余内容会显示滚动条展示
inherit
规定应该从父类元素基础
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
定位 position
position:static
默认值无需设置 无定位
position:relative
相对定位 主要用于绝对定位元素找到参照物
position:absolute
绝对定位 如果父级设置了position:relative 那么元素
就会以父级左上角原始点进行定位，这样就决解自适应网址标签偏离问题，父元素设置了 相对定位 子元素使用绝对定位
position:fixed
固定定位 元素会以浏览器窗口作为一个指定坐标，
无论窗口示范滚钉 都会在固定的位置
z-index层叠顺序
z-index:1 z-index:999
数字大的会压住数字小的显示
opacity元素透明度
opacity: 0.2;
设置元素的透明度
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了