周总结（10）

周总结（10）

​ 本周我们学习了MySQL的可视化软件安装与多表查询和pycharm操作mysql的方法

​ 前端的HTML 与CSS

MySQL的可视化软件

​ 是第三方编写的操作SQL的客户端，其内的操作简单明了，方便我们继续操作。但是它的底层其实是把我们的操作转换成了MySQL代码。所以掌握MySQL代码的操作才是重中之重。

​ 下载方法就不用多说。百度搜索官网下载后自行找注册方法进行注册。

多表查询操作

​ 在我们遇到一些特殊情况查询的结果涉及到多个表 那么就使用到了多表查询操作。多表查询操作分为连表查询与子查询。

连表查询

方法 功能描述
inner join 内连接 连接两张表中公有的部分数据 不是公有的不展示
left join 左连接 以左边表为准 展示左表所有数据 右边没有对应的数据用NULL表示
right join 右连接 以右边表为准 展示右表所有数据 左边没有对应的数据用NULL表示
union 全连接 以所有表为准 展示所有数据 没有相对应数据则用NULL表示

代码：

select * 表1 方法1 表2 on 表一字段=表二字段;

子查询

​ 子查询就是把我们经过编写代码查询得到一个表，把这个代码当成一个表用括号括起来放到另一个代码中。

select name from dep where id=(select dep_id from emp where name ='jason');

SQL的注释问题

​ 在我们pycharm中利用pymysql基于数据库来进行操作时，编写sql代码获取用户登录时会遇到问题，因为用户在录入用户名的时候遇到一些 特殊符号时会形成特殊含义，导致用户只输入密码或者用户名错误的情况下就可以登录。

​ 解决方法

​ 把我们需要传输给数据库的用户名密码全部交给pymysql的execute来传输。 把占位符放在sql语句里，需要传输的数据放在execute里。

触发器

​ 达成某个条件后自动触发执行。针对表的增，删，改操作 都可以触发执行。

主要是6种情况

增前，增后，删前，删后，改前，改后

语法结构

create trigger 触发器的名字 before(前)/after(后) insert/update/delete on 表名 for each row 
begin
	sql语句
end

事物

指一个业务中进行的操作。主要有四大特性：

简称 ACID

特性 特性描述 具体描述
A 原子性 事务中各项操作是不可分割的整体，要么同时成功要么同时失败
C 一致性 是数据库从一个一致性状态变成另一个一致性状态
I 隔离性 多个事物之间相互彼此不干扰
D 永久性 一个事物一旦提交应当对数据库中数据的改变是永久性的。

事物的几种操作

对数据修改之前开启事务操作
start transaction;
修改数据操作
update
回滚操作
rollback;
数据保存到硬盘操作
commit;

"""事务回滚(返回执行事务操作之前的数据库状态)
    	rollback;  # 执行完回滚之后 事务自动结束
    事务确认(执行完事务的主动操作之后 确认无误之后 需要执行确认命令)
    	commit;  # 执行完确认提交之后 无法回滚 事务自动结束
        """

函数与存储过程

Mysql中也有 函数 对一些数据进行特殊处理。

存储过程就类似于python中的自定义函数。有参函数与无参函数。可以再函数内部添加一些MySQL代码当我们在调用的时候自动执行。

需要注意的是可以在函数内部会使用到分号 但是分号在MySQL中又是结束符，所以需要通过代码把结束符换掉。 编写完函数时在把结束符换回来。

delimiter 符号；

存储过程语法

delimiter $$; # 更改结束符
创建表的语法
begin
      select tname from userinfo where id > m and id < n;
      set res=0;  # 用来标志存储过程是否执行
end $$
delimiter ; # 改回来
调用方法
call 表名+括号;  # 有参则传参

流程控制

就是 if分支ELSEIF 与ELSE 结束时要用end if; 还包括while 循环

索引相关概念

​ 索引就是一种数据结构

​ 类似于书的目录 方便用目录进行快速查找，不需要一页一页的翻。

索引在Mysql中也称为 “ 键”

代码 功能名
primary key 主键
unique key 唯一键
index key 索引建

primary key与unique key 除了有加速查询的效果还有别的约束功能。(非空且唯一)与（唯一）。

index key没有任何约束功能，只有加速查询。

索引也分为：

聚集索引(primary key)
	主键、主键索引
辅助索引(unique,index)
	除主键以外的都是辅助索引
覆盖索引   
	select name from user where name='jason'; 
非覆盖索引
	select age from user where name='jason';

索引的数据结构

索引底层其实是树结构。
树 是计算机的底层的数据结构

树有很多种类型
	二叉树，b树，b+树，b*树
树的关键字：
	根节点，枝节点，叶子节点 


二叉树
    每个节点最多只能分两个子节点。

b树
    所有节点都可以存放完整的数据

b+树与b*树
    根节点与枝节点只存放索引
    叶子节点用来存放完整的数据
    b+树在叶节点添加了指向其他叶子节点的指针
    b*树在叶节点与枝节点都添加了指向其他叶节点与枝节点的指针
    
通过学习这些 数据结构 得知：
辅助索引在查询数据的时候 因 辅助索引的叶子节点存放的是数据的主键 最后还是要利用主键做聚集索引
"""
有时候就算采用索引字段查询数据 也可能不会走索引!!!
函数运算  count
模糊查询  like "%_" 
成员运算符 not in 
数学运算
"""

添加索引的方法

创建index索引：
    alter table 表名 add index index_name(字段名);  # 注意 添加索引的字段类型长度不能过长
    create index indexname on 表名(字段名);  
查询索引：
	desc 表名;
	show index from 表名;
删除index索引：
	alter table 表名 drop key index_name;  # 注意两种创建办法 一个是index_name 另一个是indexname
添加唯一性主键；
	alter table 表名 add unique key uni_键名可以自己起(字段名);

前端

前端的概念

​ 与用户打交道的界面

后端的概念

​ 不直接与用户打交道，负责内部的业务逻辑的执行。

前端三剑客

​ HTML CSS JavaScript (JQuery框架)

HTTP协议

​ 规定了浏览器与服务端之间数据交互的格式

四大特性

特性 描述
1.基于请求响应 客户端发送请求，服务端回应响应
2.基于tcp ip作用于应用层之上的协议 HTTP,HTTPS,FTP...
3.无状态 服务端不会保存客户端的状态
4.无连接 服务端与客户端不会保存持久链接

数据格式

请求首行(请求方法,协议版本) 响应首行(状态码，协议版本)
请求头(一大串K:V键值对) 响应头(一大串K:V键值对)
换行 换行
请求体(存放敏感信息)不是所有请求方法都有 响应体(存放给浏览器展示的数据)

常见响应码

1xx 服务端成功接收到数据，等待处理
2xx 200 ok 表示请求成功，服务端发送响应
3xx 302(临时) 304(持久) 表示重定向 想访问A网站自动跳转到B网址
4xx 403 表示访问权限不足  404 表示 资源不存在
10000以后 工作时自定义响应码

HTML概览

HTML 的注释语法
<!--注释内容-->

    
HTML 文档结构
<html>  固定格式 html包裹	
	<head>  存放跟浏览器交互的配  </head>
	<body>  给用户查看的内容     </body>
</html>

HTML标签分类
	单标签(自闭和标签)
    <img/>
    双标签
    <h1> 内容 </h1>

head常见标签

# title 网页的标题
	<title>性感美女在线发牌</title>
    
# meta定义网页源信息 功能非常多
	keywords:搜索引擎查询关键字
	<meta name ="keywords" content="查询的关键字"> 
	description:用于展示页面搜索结果的文本描述
	<meta name =“description” content="网页的描述简介"> 

# style 内部支持编写css代码
	<style>h1{color: hotpink}</style>

# link 引入外部的css文件
	<link rel="stylesheet" href=""> 在herf后面写

# script 支持内部编写js代码也可以引入外部js文件
    <script> prompt('prompt就是html的print') </script>
    <script src = “外部js文件路径”></script>
    
"""正常的业务逻辑 HTML CSS JS都会分不同的文件存储"""

body内基本标签

# 标题系列
h1~h6  1级标题~6级标题
# 段落系列
<p>
# 其他标签
u下划线  i斜体  s删除线  B 加粗
# 换行与分割线
<br> 换行  <hr> 分割线
# 标签分类
行内标签      ' u i s b'
	文本多大就站多大
块儿级标签     'h系列 p'
	独占一行
# 常见符号
&nbsp；  空格
&gt；   大于
&lt；   小于
&amp;   &符号
&yen;   ¥
&copy;  © 版权
&reg;   ® 商标

body内布局标签

div --块儿级标签
span --行内标签
"""
标签之间支持嵌套
	块儿级标签可以嵌套任意标签
		不属于布局标签的块儿级标签不建议嵌套块儿级标签
		p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
	行内标签只能嵌套行内标签
"""

body常用标签

"标签括号内  href = '' 称之为标签的属性"
标签的属性有两种:
    1.默认属性 标签自带的
    2.自定义属性  编写不会提示会飘黄
    
a标签  # 链接标签
1. 填写网址 点击跳转
	 <a href="https://www.baidu.com/">点我啊 </a>  
使用target 设置
    _blank 新建网页跳转
    _self 原网页跳转
	<a href="http://www.qyle2.com/" target="_self">点我啊 </a>

    
2. 填写其他标签的id值 具备锚点功能
<a href="" id = 'd1'> 赛利亚房间</a>   # 设置一个锚点
<div style="background-color: hotpink; height: 1000px; widows: 100%"></div>
<a href="" id = 'd2'> 哥布林森林</a>		
<div style="background-color: hotpink; height: 1000px; widows: 100%"></div>
<a href="#d1"> 回到赛利亚房间 </a>   # 点击文字跳转到 ID = d1 的锚点
<a href="#d2"> 回到哥布林森林</a>

img标签 # 图片标签
src    填写图片地址
title  鼠标悬浮图片上自动展示的文本
alt    图片加载失败提示的信息
width\height  (px单位)图片的尺寸
<img src="https://img0.baidu.com/it/u=3586850093,1666138624&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" alt="" width="300px" height="400px">

列表标签

无序列表
<ul>
    <li></li>
    <li></li>
</ul>
有序标题
<ol type="1">
    <li></li>
</ol>

标题系列
<d1>
    <dt></dt>
    <dd></dd>
</d1>

表格标签

1.需要提前写好骨架
<talbe>
	<thead></thead>
   <tbody></tbody>
</table>
2.在写表头字段与数据
<table>   # 添加border 属性设置边框数字越大边框越粗 基本不用，用CSS 
    <thead>
        <tr>  #  tr表示一行  就是下列数据在一行
            <th></th>   # th 用于表头字段
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tboday>
        <tr>
            <td></td>  # tb 用于数据
            <td></td>
            <td></td>
        </tr>
        "可以添加多条数据 "
         <tr>
            <td></td>  # tb 用于数据
            <td></td>
            <td></td>
        </tr>
    </tboday>

</table>

from表单标签

可以获取到用户输入的数据并发给服务端

form标签 
	action 控制数据提交的地址
   method 控制数据的提交方法

input标签

input标签 与python 中一样 用于获取用户数据
	type属性
    text 	  普通文本
    password   密文
    date     日期选项
    email    邮箱格式
    radio    单选  # 可以通过添加checked="checked"设置默认值
    checkbox   多选
    file      文件
    submit    提交动作
    reset     重置表单
    button    空功能可以自定义
"""input标签应当有name属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值

select标签

select标签  # 下拉框
option标签  # 选项
<select name="province" id="">   # 可以在内部 + multiple 变成多选 按住Ctrl
    <option value="">北京</option>
    <option value="">安徽</option>
    <option value="">江苏</option>
    </select>

textarea标签

获取大段文本 文本框可 拉
eg：  发表贴吧 发表微博 发表评论


	<p>关于我们的建议：</p>
    <textarea name="" id="" cols="30" rows="10"></textarea>

表单标签补充

name与value属性

  • 基于form表达发送数据，用于获取用户数据的标签至少应该含有name属性

name属性相当于字典的键

获取到的用户输入数据会保存到标签的value 属性

value属性相当于字典的

  • 但是也有几种特殊情况，比如我们在使用input 获取性别的时候 只需要选择，这种情况就需要我们自己手动输入value
  <input type="radio" name="gender" value="male">男

注意： 没有name属性的标签 form 默认不会发送。

label标签

  • 针对input标签应该配上一个label标签绑定，起作用就是给该标签标配文字说明。

方法1

<label for = "d1">username:
    <input type="text" id="d1">
</lable>

方法2

<label for="d1">username:</lable>
	<input type="text" id="d1">

虽然提供了label标签，但是我们也可以不写

multiple属性与option标签

该属性可以设置多选。在下拉框中配合option标签使用

# 文件多选
<input type="file" multiple="multiple">
# 也可简写
<input type="file" multiple>
# select 下拉框多选
<select name="province" id=""> 
    <option value="">北京</option>
    <option value="">安徽</option>
    <option value="">江苏</option>
    </select>

checked默认选项

针对如性别之类的选择标签 可以提前设置好默认值

<input type="radio" name="性别" checked="checked">男
	当然也可以简写 checked
<input type="radio" name="性别">女

CSS层叠样式表

  • CSS主要用来调节HTML标签的各种样式。

页面都是HTML构成的，页面上有相同的HTML标签，标签在不同的位置需要有不同的样式。怎么更改样式？ CSS就是专门干这个的。

但是 前提是我们可以分辨出标签，学会区分标签

区分标签的两大重要属性

1. 标签内含有class 属性

该属性用来分类，便于批量查询

2. 标签内含有 id 属性

该属性用于精确定位 方便精确查找

学习css的方法

需要掌握如何去查找标签，学习查找标签后学习调整样式才能进行调整样式的操作。

CSS常识

想掌握一门技术必须先了解它的构造。

1. css的注释语法

/*注释内容*/

2. CSS的语法结构

选择器 {
    样式名:样式值;
    样式名1:样式值1
}

3.引入css的多种方式

1.head内的 style 标签可以内部填写
<style> css语法 </style>

2.head内的 link 标签可以引入css文件
<link rel="stylesheet" href="css文件">

3.标签内部通过style属性
<lable style="样式名:样式值">性别:</lable>

CSS选择器

CSS选择器可以帮助我们快速找到标签修改样式

css基本标签

1.标签选择器
# 按照标签名直接查找标签
div {
    color:rod;
}

2.类选择器
# 按照标签的ckass 值查找标签
.就是class的意思
 .c1{
     color:green;
 }
 类选择器可以批量查找相同class值的标签

3. id选择器 
# 根据标签的id值精确查找标签
  前面+井号d1 {
      color:样式值;
  }
    
4.通用选择器
# 直接选择页面所有的标签
* {
    color:样式值:
}

CSS组合选择器

想要使用组合选择器先要理清楚选择器之前的关系与嵌套选择器中的关系

<div>div1
	<div>div2
		<p>p1</p>
	</div>
	<p>p2
		<span>span1</span>
	</p>
	<span>span2</span>
</div>
1.对于div1来说 div2、p2、span2都是儿子
2.对于div2、p2、span2来说div1就是父亲
3.对于p1来说div2是父亲 div1是爷爷
4.对于span2来说div2、p2是哥哥  
5.对于div2来说 p2、span2是弟弟  p1是儿子
6.对于p2来说 div2 是哥哥  span2 是弟弟 span1 是儿子
7.div1内部所有的标签无论层级都可以称之为是div1的后代

后代选择器

# 查找div标签的所有后代
div span {
    样式名:样式值;
}

儿子选择器

# 查找div标签的所有名为span的儿子标签
"关键字 > 号"
div>span {
    样式名:样式值;
}

毗邻选择器

# 查找div标签附近的span
"紧挨着的 不是紧挨的不行"
div+span {
    样式名:样式值;
}

弟弟选择器

# 查找div标签的弟弟
div~span {
    样式名:样式值;
}

组合使用

# 查找多个选择器
div,p,span {   
    样式名:样式值;
}

# 查找id值是d1的 或者class值是c1的，或者是span的
#d1,.c1,span{  
     样式名:样式值;
}

# 查找class值含有 c1 的div 
div.c1 {
     样式名:样式值;
}

# 查找id是d1的div
div#d1 {
     样式名:样式值;
}

# 查找class c1类后代里面 含有c2 样式值的p标签
"注意空格 代表后代"
.c1 p.c2 {
    样式名:样式值;
}

属性选择器

按照属性名查找

[username] {
    样式名:样式值;
}

[username='jason'] {
    样式名:样式值;
}

# 查找div标签内含有属性的
div[username='jason'] {  
        样式名:样式值;
    }

伪类选择器

鼠标移动到标签上方，字体颜色修改成我们设定的颜色

a:hover {
    样式名:样式值;
}
注意: a标签 点击过的为紫色，没点击过的默认是蓝色
a:visited   修改跳转字符颜色
a:active    修改点击瞬间的颜色



# 修改 input 输入框的颜色
input:focus {
    background-color:样式值;
}

伪元素选择器

# 修改文本首个字符的大小
p:first-letter {
    font-size: 48px;
    color: red;
}
    
# 在文本开头添加内容 添加的内容无法被选中
p:before {
    content:'思念';
    color;blue;
}

# 在文本结尾添加内容
p:after {
    content:'家乡';
    color: red;
}

选择器之间的优先级

选择器之间是有优先级的。 
# 选择器相同 导入方式不同
	按照就近原则
# 选择器不同 导入方式相同
标签内部样式 > id选择器 > 类选择器 > 标签选择器

CSS样式调节

# 字体修改
font-family
p {
    font-family:华文楷体；
}


# 字体大小
font-size
p {
    font-size:30px;
}

# 字体粗细
font-weight: lighter;  变细
font-weight: bolder;   加粗

# 字体颜色
方式一: color
p {
    color:brown;
}
------------------------------------------------------------------------------------
方式二： rgb 
p {
    color:rgb(128,0,128);
}
可以在128后面+ 0.1~1.0 代表颜色深度
# 可以根据色卡自行查看
------------------------------------------------------------------------------------
方式三: 
p {
    color:#bd961a;   十六进制
}
# 可以根据色卡自行查看

pycharm 有提供的取色器
截图也有

CSS修改文字的属性

# 文字对齐
text-align: center;   居中
text-align: left;    左对齐
text-align: right;   右对齐
text-indent: 20px;   首行缩进

# 文字装饰(重点)
"""
 a标签默认带下划线， 并且还有颜色(没有点击时为蓝色， 点击之后为紫色)
"""
# 去除下划线
text-decoration: none;

# 删除线
 text-decoration: line-through;

# 上边线
text-decoration: overline;

# 下边线 
text-decoration: underline;



"""
 可以使用浏览器做样式的动态调整
  查找标签的css， 然后左键选中，通过方向键上下动态修改数值
"""

CSS修改背景样式

# 背景颜色
background-color: 颜色;

#背景图片
background-image:url("图片地址");
background-repeat:no-repeat; 不填充
background-repeat-x;       横向填充
background-repeat-y;       纵向填充

# 图片位置设置
background-position: top;  朝上
background-position; bottom; 最下
background-position: center center; 在浏览器中手动输入 px 方向键上下操作
left 左   right右


# 控制背景附着
background-attachment: fixed;  背景附着
"""
 当多个属性名具有相同的后缀，我们就可以整合在一起， 写一个前缀名就可以
 background: darkslategray url('1.png') no-repeat left top;
"""

边框

  • 标签都有边框，我们可以通过css来调整边框。
# 左边框
border-left-width: 3px;   边框粗细
可以配颜色 color 样式style 粗细width

上下左右只需要在border后面加上方向
left 左  top 上  right右  bottom 底部

# 缩写方法
方法一
border-left; 边框粗细 边框样式 颜色;

方法二
border: 10px solid orang; 上下左右根据我们给的样式 相同
  • 边框样式
值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。

  • 画圆

    针对边框属性还可以画圆 首先要设置好标签边框的长宽，在进行代码设置圆形

    要点： 长宽必须一样 不然画不了圆形

# 画圆
border-redius: 50%
    width 宽 hight 高

  • display属性

    行内标签无法设置长宽. 他的大小取决于文本。

display:none;    隐藏标签 页面上没有显示

盒子模型

理论：

标签可以看成是一个盒子(举个例子)

快递盒里面的物体 content(内容）
物体与盒子之间的距离 padding(边框与内部文本的距离)
快递盒的厚度 border(边框)
快递盒与快递盒的距离 margin(外边距)
  • padding 边框与内部文本的距离
padding  # 边框与内部文本的距离
left 左  top 上  right右  bottom 底部
padding-left: px;
# 简写
padding: 20px;      # 上下左右全部20px
padding: 20px,40px;   # 第一个参数控制上下，第二个参数控制左右
"三个参数控制 上 左右 下   四个参数  上 右 下 左"

  • margin 控制 标签与标签之间的距离

    上和下的margin 宽度不会叠加，取最长的

    标签的嵌套情况下 使用margin 与 padding 都可以，根据实际情况选择。

margin: 3px；   
# 水平居中
margin: 0 auto;

浮动*

浮动是用来做页面布局的，美化页面 DIY

float: left;  左浮动
float: right;  右浮动
# 浮动带来的影响
	造成父标签塌陷 
解决方法：
	推导
	1.在建一个标签 设置高度撑起
   2.使用 'clear: 方向；'设置   不用调整高度
   """clear  不允许有浮动 如果设置的 方向 有浮动的标签 就移到下面去，正好能撑起来"""
   3.最终方案 
# 提前写好样式类
	谁塌陷了就给谁添加这个样式类
.clearfix:after{
    content:'';
    display:block;  # 行级标签变成块级标签特性 独占一行
    clear: both;    # 左右都不允许有浮动
}
   需要时 只需要在塌陷的标签内+上 class 属性 = clearfix:after

ps:浏览器特性 会优先展示文本内容，如果被浮动挡住 也会想办法展示出。

溢出

文本内容如果超出 边框设置的长宽，便会溢出。

使用overflow 属性设置

主要用在边框 比如头像 的图片超出边框，进行填充

overflow: aotu; 设置侧面滚动条 上下翻滚查看
       scroll; 设置底部滚动条
       hidden; 超出部分不显示
# 头像实操
 div {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            border: 5px solid white;
            overflow: hidden;
        }
div img {
    max=widht: 100%  # 把图片全填充 框内
}

定位

标签在默认情况下无法通过定位的参数移动

定位四种状态

定位 描述
static静态 标签默认的状态
relative相对定位 基于标签原来的位置
absolute绝对定位 基于某个定位过的父标签做定位
fixed固定定位 相对于浏览器窗口做定位 
关键字：
position : 定位参数；

z-index

前端的页面可以看成三维坐标系， Z轴指向用户

动态弹出的分层界面， 我们称之为模态框 比如登录窗口

数值大的压住数值小的

z-index: 数值;

快速编写html的方法

ul>li*3>a.c1{heihei}   {$} 从1开始往下

补充

box-shadow: 20px 20px 20px rgba(187, 87, 87, 0.8); 设置框体阴影
max-width: 100%;   /*图片百分百填充*/
list-style-type: none;  /*取消列表标签前的点*/
posted @ 2022-12-04 20:27  李阿鸡  阅读(79)  评论(0)    收藏  举报
Title