第九周总结-MySQL、前端

多表查询的两种方式

1.连表操作:
	1.1: inner join:内连接,将两张表共同的部分连接在一起生成一张新表。凭借顺序是把后面的表拼在前面表的后面,如果颠倒位置结果不同。
	select * from course inner join teacher on course.teacher_id=teacher.id;

	1.2: left join:左连接,以左表为基础,展示左表所有的数据,如果没有对应的项则用NULL填充,如果左边的表格中的一项对应多个其他表格的哪位欧诺个,那么左边的表格可以重复。

	1.3:right join:右连接,以右表为准,展示右表所有的数据,如果没有对应的项则用NULL连接。

	1.4:union:全连接,以左右表为基准,展示所有的数据,相当于把所有表的数据都合成在一列上,各自没有的全部用NULL填充。
select * from course left join teacher on        	course.teacher_id=teacher.tid
union
select * from teacher right join course on teacher.tid=course.teacher_id;
"""
学习了多表查询之后可以连接多张表,思路是将拼接之后的表起别名当成一张新表再去和其他表拼接,再起别名继续拼接其他的表。
"""
2.子查询:将第一条SQL语句用括号括起来当成另外一条SQL语句的查询条件。

其他相关SQL语句

改表明:alter table 旧表名 rename 新表名;
添加字段:alter table 表名add 字段名 字段类型(数字) 约束条件
指定位置添加字段:alter table 表名 add 字段名 字段类型(数字) 约束条件 after 已有字段
修改字段:alter table 表名 add 字段名 字段类型(数字) 约束条件 first;

python操作MySQL

需要模块:pymysql

以查询数据为例:
import pymysql

# 1.连接mysql服务器,生成连接对象
conn = mypysql.connect(
	host='127.0.0.1',
	post=3306，
	user='root',
	password='123',
	db='db9',
	charset='utf8mb4'
)

# 2.产生游标对象
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
# 3.编写sql语句
sql = 'select * from teacher;'
# 4.发送sql语句,execute有返回值,接收的是表内数据的行数(数据个数)
affect_rows = cursor.execute(sql)
print(attevt_rows)
# 获取表中的数据
res = cursor.fetchall()
print(res)

python操作MySQL补充说明

1.当我们连续获取三次数据会发现一个现象:第一次打印了全部结果,第二次和第三次什么都没打印,类似于文件操作中的光标移动。

2.这是因为cursor.fetchall()是一次性获取了表中所有的数据,cursor.fetchone()一次性只拿一条数据,类似于光标移动到第一条数据的后面,下次再接收会从下一条数据开始拿。

3.cursor.fetchmany()一次性可以拿多条,括号内指定参数,就会一次性拿到几条数据。

4.cursor.scroll(1,'relative')是指从当前位置向下移动一条数据,从下一条数据开始拿,如果把参数换成'absolute'则是回到开始,再向前移动指定的数据(第一个参数)。

SQL注入问题

简单实现利用数据库实现注册登录功能:
import pymysql

conn = pymysql.connect(
    host='127.0.0.1',
    user='root',
    password='123',
    database='db11',
    charset='utf8mb4',
    autocommit=True
)
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)

username = input('请输入您的用户名>>>:').strip()
userpwd = input('请输入您的密码>>>:').strip()
sql = "select * from userinfo where username=%s and password=%s"
cursor.execute(sql,(username, userpwd))
'''
为了防止随意输入在mysql中产生注释导致登陆成功的行为,数据处理交给软件来做
'''
res = cursor.fetchall()
# print(res)  # [{'username': 'max', 'password': '123'}]
if res:
    print('登陆成功', res)
else:
    print('用户名或密码错误')

视图

1.视图就是通过查询得到一张虚拟表,然后保存下来,下次直接使用。
语法结构:
create view teacher2course as select * from teacher inner join course on teacher.tid=course.teacher_id;
"""
1.视图的表只能用来查询不能用作其他增删改操作
2.在终端中添加视图之后可以看到视图被当做一个表新增在了库当中,而在Navicat中库中无法显示视图
3.视图尽量少用,会跟真正的表产生混淆,从而干扰操作者
"""

触发器

达到某个条件之后自动触发执行,在MySQL中更加详细的说明是触发器,针对表的增添、删、该操作能够自动触发主要有六种情况:增前、增后、删前、删后、改前、改后。
"""
主要是针对增删改做一些附加的操作,提醒修改的人达到这些门槛才能去增删改这个表。
"""
1.触发器语法结构:
	create trigger 触发器名字 before/after insert/update/delete on 表名 each row
begin
	sql 语句
end

2.触发器命名规则有一定规律:
tri_before_insert_t1
tri_after_delete_t2
tri_after_update_t2

3.临时修改SQL语句的结束符:
delimiter 其他符号  # 修改过之后;就失效,需要采用其他符号代码才执行
delimiter ;  # 使用完成之后要改回成;

4.触发器实际应用:
CREATE TABLE cmd (
    id INT PRIMARY KEY auto_increment,
    USER CHAR (32),
    priv CHAR (10),
    cmd CHAR (64),
    sub_time datetime, #提交时间
    success enum ('yes', 'no') #0代表执行失败
);

CREATE TABLE errlog (
    id INT PRIMARY KEY auto_increment,
    err_cmd CHAR (64),
    err_time datetime
);

delimiter $$  # 将mysql默认的结束符由;换成$$
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 if;
end $$
delimiter ;  # 结束之后记得再改回来，不然后面结束符就都是$$了

#往表cmd中插入记录，触发触发器，根据IF的条件决定是否插入错误日志
INSERT INTO cmd (
    USER,
    priv,
    cmd,
    sub_time,
    success
)
VALUES
    ('kevin','0755','ls -l /etc',NOW(),'yes'),
    ('kevin','0755','cat /etc/passwd',NOW(),'no'),
    ('kevin','0755','useradd xxx',NOW(),'no'),
    ('kevin','0755','ps aux',NOW(),'yes');

# 查询errlog表记录
select * from errlog;
# 查看所有的触发器
show triggers;
# 删除触发器
drop trigger tri_after_insert_cmd;

事务

1.事务:多个操作同时进行,要么同事成功,要么同事失败。

2.事务的特征:
	2.1原子性:事务中的各项操作是不可分割的整体,要么同时成功,要么同事失败
	2.2一致性:使数据库从一个一致性状态变到另一个一致性状态
	2.3隔离性:多个事务之间彼此不干扰
	2.4持久性:也称永久性,指一个失误一旦提交,他对数据库中的数据改变就是永久的。

"""
事务相关关键字
	start transaction;
	rollback
	commit
	savepoint:普通的事务rollback回退是撤销整步操作,如果是想在中间做几个标记,让事务撤回到指定的点就需要用到savepoint,也叫部分支持事务。但是savepoint不是完整的事务。
"""
在SQL标准中定义了四种隔离级别，每一种级别都规定了一个事务中所做的修改
InnoDB支持所有隔离级别
	set transaction isolation level 级别
1.read uncommitted(未提交读)
	事务中的修改即使没有提交，对其他事务也都是可见的，事务可以读取未提交的数据，这一现象也称之为"脏读"
2.read committed(提交读)
	大多数数据库系统默认的隔离级别
  一个事务从开始直到提交之前所作的任何修改对其他事务都是不可见的，这种级别也叫做"不可重复读"
3.repeatable read(可重复读)		# MySQL默认隔离级别
	能够解决"脏读"问题，但是无法解决"幻读"
  所谓幻读指的是当某个事务在读取某个范围内的记录时另外一个事务又在该范围内插入了新的记录，当之前的事务再次读取该范围的记录会产生幻行，InnoDB和XtraDB通过多版本并发控制(MVCC)及间隙锁策略解决该问题
4.serializable(可串行读)
	强制事务串行执行，很少使用该级别

MVCC只能在read committed(提交读)、repeatable read(可重复读)两种隔离级别下工作，其他两个不兼容(read uncommitted:总是读取最新  serializable:所有的行都加锁)

InnoDB的MVCC通过在每行记录后面保存两个隐藏的列来实现MVCC
	一个列保存了行的创建时间
  一个列保存了行的过期时间(或删除时间)  # 本质是系统版本号
每开始一个新的事务版本号都会自动递增，事务开始时刻的系统版本号会作为事务的版本号用来和查询到的每行记录版本号进行比较

例如
刚插入第一条数据的时候，我们默认事务id为1，实际是这样存储的
    username		create_version		delete_version
    jason						1
可以看到，我们在content列插入了kobe这条数据，在create_version这列存储了1，1是这次插入操作的事务id。
然后我们将jason修改为jason01，实际存储是这样的
    username		create_version		delete_version
    jason						1									2
    jason01					2
可以看到，update的时候，会先将之前的数据delete_version标记为当前新的事务id，也就是2，然后将新数据写入，将新数据的create_version标记为新的事务id
当我们删除数据的时候，实际存储是这样的
		username		create_version		delete_version
    jason01					2									 3
"""
由此当我们查询一条记录的时候，只有满足以下两个条件的记录才会被显示出来：
   1.当前事务id要大于或者等于当前行的create_version值，这表示在事务开始前这行数据已经存在了。
   2.当前事务id要小于delete_version值，这表示在事务开始之后这行记录才被删除。
"""

数据库三大范式

第一范式:属性不可分割，即每个属性都是不可分割的原子项。
'''
比如表中手机号和地址存在于一个列,手机号和住址可以分开,这样不符合第一范式。
'''
第二范式:满足第一范式；且不存在部分依赖，即非主属性必须完全依赖于主属性。(主属性即主键；完全依赖是针对于联合主键的情况，非主键列不能只依赖于主键的一部分)
'''
如果两个字段名建立联合索引,其中一个字段名只依赖于建立索引中其中一个字段名就可以查找得到,这样不符合第二范式
'''
第三范式:满足第二范式,且不存在传递依赖,即非主属性之间不能存在依赖关系,非主属性必须依赖与主属性。

存储过程

可以看成是python中的自定义函数

# 无参函数
'''因为存储过程中需要用到分号,所以事先改结束符'''
delimiter $$
create procedure p1()
begin
	select * from cmd;  # 函数体代码,封装成一个函数
end $$
delimiter ;

# 调用
call p1();

# 有参函数
delimiter $$
create procedure p2(
    in m int,  # in表示这个参数必须只能是传入不能被返回出去
    in n int,
    out res int  # out表示这个参数可以被返回出去，还有一个inout表示即可以传入也可以被返回出去
)
begin
    select * from cmd where id > m and id < n;
    set res=0;  # 用来标志存储过程是否执行
end $$
delimiter ;

# 针对res需要先提前定义
set @res=10;  定义  # 针对可以被返回来的数据,不能直接传数字,需要传一个变量名进去
select @res;  查看
call p2(1,5,@res)  调用
select @res  查看

"""
查看存储过程具体信息
	show create procedure pro1;
查看所有存储过程
	show procedure status;
删除存储过程
	drop procedure pro1;
"""

# 大前提:存储过程在哪个库下面创建的只能在对应的库下面才能使用！！！

# 1、直接在mysql中调用
set @res=10  # res的值是用来判断存储过程是否被执行成功的依据，所以需要先定义一个变量@res存储10
call p1(2,4,10);  # 报错
call p1(2,4,@res);  

# 查看结果
select @res;  # 执行成功，@res变量值发生了变化

# 2、在python程序中调用
pymysql链接mysql
产生的游表cursor.callproc('p1',(2,4,10))  # 内部原理：@_p1_0=2,@_p1_1=4,@_p1_2=10;
cursor.excute('select @_p1_2;')

函数

可以看成是python中的内置函数
"""
ps:可以通过help 函数名查看帮助信息
"""
1.移除指定字符
Trim、LTrim、RTrim
Trim用法1:去掉左边的指定字符
select trim(leading 'x' from 'xxxbbbxxx');  # bbbxxx

Trim用法2:去掉左右边的指定字符
select trim(trailing 'x' from 'xxxbbbxxx');  # xxxbbb

Trim用法3:去掉两边的指定字符
select trim(both 'x' from 'xxxbbbxxx');  # bbb

RTrim:去掉字符当中左边的空格:
select rtrim('aaa    ');  # aaa

LTrim:去掉字符当中右边的空格:
mysql> select rtrim('aaa    ');

2.Soundex:匹配谐音字符(只适用于英文)
"""
eg:客户表中有一个顾客登记的用户名为J.Lee
		但如果这是输入错误真名其实叫J.Lie,可以使用soundex匹配发音类似的
		where Soundex(name)=Soundex('J.Lie')
"""

3.upper/lower:转化为大小写:
select upper/lower(字段名) from 表名;

4.切片操作
select left('jason',3);  # jas  # 从左往右拿到'jason'的前三个字符
select left(字段名,拿到的字符数）from 表名;  # 拿到表里该字段下所有数据的前指定位数个字符

5.日期操作:data_format:日期格式化
实现博客园上面具体日期发布的文章数量
CREATE TABLE blog (
    id INT PRIMARY KEY auto_increment,
    NAME CHAR (32),
    sub_time datetime
);
INSERT INTO blog (NAME, sub_time)
VALUES
    ('第1篇','2015-03-01 11:31:21'),
    ('第2篇','2015-03-11 16:31:21'),
    ('第3篇','2016-07-01 10:21:31'),
    ('第4篇','2016-07-22 09:23:21'),
    ('第5篇','2016-07-23 10:11:11'),
    ('第6篇','2016-07-25 11:21:31'),
    ('第7篇','2017-03-01 15:33:21'),
    ('第8篇','2017-03-01 17:32:21'),
    ('第9篇','2017-03-01 18:31:21');
select date_format(sub_time,'%Y-%m'),count(id) from blog group by date_format(sub_time,'%Y-%m');  # 查询所有发布月份及发布篇数

1.select date_format(sub_time,'%Y-%m'),count(id) from blog where Date(sub_time) = '2015-03-01' group by date_format(sub_time,'%Y-%m');  # 查询2015年3月1日发布的篇数
2.where Year(sub_time)=2016 AND Month(sub_time)=07;  # 查询2016年7月发布的篇数

# 更多日期处理相关函数
	adddate	增加一个日期
	addtime	增加一个时间
	datediff计算两个日期差值

流程控制

1.分支结构:
declare i int default 0;
IF i = 1 THEN
	SELECT 1;
ELSEIF i = 2 THEN
	SELECT 2;
ELSE
	SELECT 7;
END IF;

2.循环结构:
DECLARE num INT ;
SET num = 0 ;
WHILE num < 10 DO
	SELECT num ;
	SET num = num + 1 ;
END WHILE ;

索引相关概念

1）索引就好比一本书的目录，它能让你更快的找到自己想要的内容
2）让获取的数据更有目的性，从而提高数据库检索数据的性能

索引在MySQL中也叫做“键”，是存储引擎用于快速找到记录的一种数据结构
	* primary key
	* unique key
	* index key
1.上述的三个key都可以加快数据查询
2.primary key和unique key除了可以加快查询本身还自带限制条件而index key很单一就是用来加快数据查询
3.外键不属于索引键的范围 是用来建立关系的 与加快查询无关

索引加快查询的本质
	id int primary key auto_increment,
 	name varchar(32) unique,
  	province varchar(32)
 	age int
 	phone bigint

	select name from userinfo where phone=18818888888;  # 一页页的翻
	select name from userinfo where id=99999;  # 按照目录确定页数找

索引可以加快数据查询 但是会降低增删的速度
通常情况下我们频繁使用某些字段查询数据
	为了提升查询的速度可以将该字段建立索引

聚集索引(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*叶子节点和枝节点都有指向其他节点的指针

辅助索引在查询数据的时候最会还是需要借助于聚集索引
	辅助索引叶子节点存放的是数据的主键值

有时候就算采用索引字段查询数据 也可能不会走索引!!!
	最好能记三个左右的特殊情况

慢查询优化

explain + sql语句,进行模拟优化器来执行分析。

从上往下依次从差变好:
all
index		尽量避免
range
ref
eq_ref
const
system
null

索引相关概念

1）索引就好比一本书的目录，它能让你更快的找到自己想要的内容
2）让获取的数据更有目的性，从而提高数据库检索数据的性能

索引在MySQL中也叫做“键”，是存储引擎用于快速找到记录的一种数据结构
	* primary key
	* unique key
	* index key
1.上述的三个key都可以加快数据查询
2.primary key和unique key除了可以加快查询本身还自带限制条件而index key很单一就是用来加快数据查询
3.外键不属于索引键的范围 是用来建立关系的 与加快查询无关

索引加快查询的本质
	id int primary key auto_increment,
 	name varchar(32) unique,
  	province varchar(32)
 	age int
 	phone bigint

	select name from userinfo where phone=18818888888;  # 一页页的翻
	select name from userinfo where id=99999;  # 按照目录确定页数找

索引可以加快数据查询 但是会降低增删的速度
通常情况下我们频繁使用某些字段查询数据
	为了提升查询的速度可以将该字段建立索引

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

前端与后端的概念

1.前端:任何与用户直接打交道的界面,都可以称之为前端(类似于前台接待的角色)。

2.后端:不直接与用户打交道,主要负责内部真正的业务逻辑的执行(类似于幕后操作者)。

3.前端三剑客:
	HTML:网页的骨架
	CSS:网页的样式
	JavaScript:网页的动态效果

前端前戏

1.编写服务器(处理客户端的请求)
2.浏览器充当客户端访问服务器
3.浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)
4.HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式
"""
我们之前学习socket模块,可以连接客户端和服务端。我们可以使用浏览器充当客户端,来访问服务端。但是我们我们用浏览器(IP地址+端口号)访问提示'127.0.0.1 发送的响应无效',说明服务端没有遵循浏览器的格式。只要是使用B/S架构使用浏览器与服务端交互就必须遵循该协议。
"""

HTTP协议

规定了服务端和浏览器数据交互的格式
1.四大特性:
	1.1基于请求响应,客户端发送请求,服务端回应响应。
	1.2基于TCP、IP作用于应用层之上的协议,该协议作用于应用层。
	1.3无状态:服务端不会保存客户端的状态以及任何信息。
	1.4无\短连接:客户端与服务端不会存在长久地连接。

2.数据格式:
	2.1请求格式:
		1.请求首行:填写请求版本,请求方式
      2.请求头:一大堆K:V键值对
		3.换行
      4.请求体:存放敏感信息(不是所有的请求方式都有请求体)

	2.2响应格式:
		1.响应首行:响应版本,响应方式
      2.响应头:一大堆K:V键值对
      3.换行
    	4.响应体:(存放给浏览器展示的数据)

	2.3响应状态码:
		用数字来表达一些文字意义(类似于暗号):
      1XX:服务端已经接受到了请求正在处理,可以继续给服务端发送请求
      2XX:200 OK:请求成功,服务端发送了对应的响应
      3XX:302:临时重定向;304永久重定向
		4XX:403:无权访问;404:请求资源不存在
      5XX:服务器内部错误
'''在公司中还会见到更多的响应状态码,通常以10000起步'''

HTML简介

1.直接发送手写的数据:HTML协议固定的格式首先是向服务端发送b'HTTP/1.1 200 OK\r\n\r\n',然后直接在后面手动编写数据,由于TCP协议是流式协议,所以可以将自己编写的内容和固定的格式分开发送
import socket

server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
while True:
    sock,addr = server.accept()
    data = sock.recv(1024)
    print(data)
    sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
    sock.send(b'hello world\n')
    sock.send(b'hello client')

HTML概览

1.什么是HTML:HTML是一种创建网页的超文本标记语言(不是编程语言),它包含一系列标签,用过这些标签可以让网络上的文档格式变得统一。

2.HTML使用标签来描述网页。

3.HTML注释语法:</*--注释内容--*/>

4.HTML文档结构:
	4.1<html>:固定格式,html是文档开始和文档结束的标记,是HYML里面的根元素,在他们之间嘚是文档的头部(head)和主体(body)。
	4.2<head>:定义了HTML文档的开头部分,之间的内容不会再浏览器的文档窗口显示,包含了文档的元(meta)数据。
	4.3<body>:之间的文本是可见的网页主体内容。
"""
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
"""
5.HTML标签属性:
	5.1HTML的标签是由尖括号包含的关键字,如<html>,<div>等
	5.2HTML标签通常是成对出现的,比如<div>和</div>,第一个标签是开始,第二个标签是结束,结束标签会有斜线。

6.标签的分类:
	1.单标签:<img/>;双标签<h1>,</h1>
	2.行内标签、块级标签:
	行内标签:两边没有换行符,大小完全取决于内部的内容长短(span,img,a,label,input)
	块级标签:内容独占一行(div、p、h1-h6,form),两边没有换行符

head常见标签

"""
1.网页信息数据一般也会存放于文件中,文件名后缀是.html
2.pycharm支持前端所有类型的文件编写
3.html文件的打开内只有自动调用浏览器的功能
"""
1.<tittle></tittle>:定义网页标签;
2.<meta name='description' content='网页简介'>:定义描述信息(百度搜索时的内容描述)
3.<meta name='keywords' content='关键字查询'>:定义搜索的关键字
4.style:支持内部编写css代码,对字体颜色等会属性做修改。
5.link:引入外部css文件(可以将style标签中的内容放在css文件当中,类似于导入模块)
6.script:网页进入时的提示,支持内部编码写js代码。
<script>
	prompt('好好学习','不要荒废光阴')
</script>

body内基本标签

1.标题标签:h1-h6:分别表示一级标题至六级标题
2.段落标签:标签p会把正文分成一个个段落
3.其他标签:u:下划线;i:斜体;s:删除线;b:加粗
4.换行与分割线:
	换行:<br>;分割线:<hr>

body内常见符号

1.&nbsp:空格
2.&lt:小于
3.&gt:大于
4.&amp:&符
5.&yen:¥符
6.&copy:
7.&reg:

body内布局标签

布局标签主要用于前期布局,主要有两个:div和span
div:div标签用来定义块级元素,一行只能定义一个div标签
span:span标签用来定义行内标签,一行可以定义多个span标签
"""
块级标签可以相互嵌套,并且理论上可以无限套娃,块级标签内部可以嵌套块级标签和行内标签,行内标签只能嵌套行内标签。p标签虽然是块级标签,但是它内部也不能嵌套块级标签。
"""

body内常用标签

1.a标签,链接标签,<a href=""></a>中href=""称为默认属性,<a href=""xyz=111></a>称为自定义属性。
	1.1:链接标签:<a href="地址">链接的提示信息</a>
      eg:<a href="https://i.cnblogs.com/posts">郑凯泽的博客园</a>

	1.2:目标属性target:
      	在地址后面填写target参数,target="_self"指咋爱本页跳转目标地址,target="_black"指在新的页面跳转目标地址。
<p><a href="https://i.cnblogs.com/posts"target="_self">郑凯泽的博客园</a></p>
    <p><a href="https://www.baidu.com"target="_blank">百度的链接</a></p>
    1.3填写其他标签的id值,具备锚点功能: href='#id'。

列表标签

1.无序标签:u标签套li标签。
2.有序标签:ol标签套li标签。
3.标题标签:用dl标签套dt(大标题)标签再嵌套dd标签(小标题)

表格标签

1.基本框架:
<table>
	<thead></thead>
	<tbody></tbody>
</table>
2.添加数据:thead套tr套th标签表示表头,tbody标签套tr标签套td标签添加表内数据。

表单标签

表单标签可以获取到用户的数据并且发送给服务端,表单标签代码也放在body标签当中。
form标签:
	action标签:控制数据的提交方式
	method:控制数据的提交方法
input标签下文本类型:
	text:正常文本输入
	password:密码,输入时无法展示内容
	email:用户必须输入@才可以
	data:用户可以直接从日历上选取日期
	file:文件类型,后面跟multiple参数可以选取多个文件
	radio:单选
	submit:提交信息发送给服务端
	reset:重置内容,会清空当前内容
	button:暂无用处,value需要指定按钮
"""
input标签应该有name属性
	name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
	点击发送就会组织成字典的形式发送给服务端 这样才具有明确意义
"""

CSS层叠样式表

1.CSS层叠样式表主要用来调节html标签的各种样式
标签的重要属性:
	1.class属性:分门别类,类似于面向对象中的类,主要用于批量查找(一个标签可以有多个class属性)。
	2.id属性:主要用于点对点的精确查找(一个标签只能有一个属性,id不能重复,重复会飘红)。

2.css语法结构
	选择器 {
        样式名:样式值1;
        样式名:样式值2
    }

3.css注释语法:/*注释内容*/

4.引入css的多种方式:
	4.1在head标签中的style标签中填写
	4.2head内link标签引入(最正规)
	4.3标签内通过style属性直接编写(不推荐)

CSS选择器

1.CSS基本选择器:
	1.1标签选择器:直接按照标签名查找
	1.2类选择器:用.类名的方式查找
	1.3id选择器,用#id的方式查找
	1.4通用选择器:用*空格加大括号的方式查找

2.CSS组合选择器:
"""
之前我们学习了块级标签(p标签,div标签)和行内标签(span标签,img标签,a标签),块级标签可以嵌套块级标签和行内标签,而行内标签只能嵌套行内标签。现在我们对标签嵌套又有一个新的分类:
<p>ppp</p>
<p>ppp</p>
   <div>div  #1
      <div>divdiv  #2
         <p>divdivp  # 5
             <span>divdivpspan</span>  # 6
          </p>
      </div>
      <p>divp</p>  # 3
      <span>divspan</span>  # 4
   </div>
   <p>ppp</p>
   <span>spanspan</span>
针对标签的上下级以及嵌套另外的说法:
父标签(1号标签是2、3、4号标签父标签)
子标签(2、3、4号标签父标签是1号标签的子标签)
弟弟标签(3、4号标签是2号标签的弟弟标签)
哥哥标签(2号标签是3、4号标签的哥哥标签)
爷爷标签(2号标签是6号标签的爷爷标签)
孙子标签(6号标签是2号标签的爷爷标签)
"""
后代选择器:
	2.1后代选择器:用标签名空格标签名的方式来进行查找,只要后一个标签是前一个标签的后代(不管是儿子还是孙子)就可以找到。
	2.2儿子选择器:两个标签之间用大于号连接,后面一个标签是前一个标签的子标签才可以找得到。
	2.3毗邻选择器:两个标签用加号连接,后面标签和前面标签同级并且紧挨着前面标签的 ,就会查找并且修改属性。
	2.4弟弟选择器(小波浪号):两个标签用小波浪号连接,后面标签是前面标签的弟弟标签。
"""
3.分组与嵌套:
	3.1多个选择器合并查找:个标签用逗号隔开
div,span {
    color:red;
}
	3.2选择器可以混合使用:标签选择器,类选择器,id选择器可以混合查找。
.c1,span,#d1 {
    color: cornflowerblue;
}
	3.3查找选择器指定类的标签
span.c1 {
    color: green;
}
	3.4查找选择器指定id标签
span#d1 {
    color: red;
} 

4.属性选择器:根据标签的属性来查找标签
	4.1按照属性名查找:属性名用中括号括起来,带有属性名的标签会被查找到。
<style>
    [username] {
        color:red
    }
</style>
	4.2按属性名查找可以增加更多限制条件:在中括号前面添加标签名中括号内指定属性名等于某个属性值。
<style>
    h1[username='max'] {
    color: deeppink;
    }
 </style>

5.伪类选择器:当我们看到某些网页上有的链接(通过昨天的a标签来实现)就光标悬浮在上面之后会变颜色,通过伪类选择器我们也可以实现这样的效果。修改本身的颜色用 a {}在中括号内修改属性,光标悬浮状态用 a:hover{}来修改。
<head>
    <style>

        a {
            color: black;
        }  # 链接没有被点时呈现的颜色
        a:hover {
            color: deeppink;
        }  # 链接在鼠标悬浮在上面时呈现的颜色
        a:visited {
            color: saddlebrown;
        }  # 链接被点击过后呈现的颜色
    </style>
<head>

当我们获取用户输入时,可以给文本框北京添加指定的颜色
<style>
	input:focus {
    background-color: red;
}
</style>

5.伪元素选择器:修改一个标签之后所有该标签产生的内容都会改变
<style>
	p:first-letter {
    font-size:48px;
    color:blue;
}
</style>

还可以在某些字段前后加一些指定字符:
<style>
	p:brfore {
	content:'前面增加的指定内容';
  	color:blue;
}
    p:after {
	content:'后面增加的指定内容';
  	color:blue;
            }
</style>

选择器优先级

1.选择器相同,导入方式不同,遵循就近原则。代码从上往下执行,执行到距离body标签最近的选择器才可以修改成功,否则修改成功之后又会被其他选择器修改。

2.选择器不同,导入方式相同:
内联样式>id选择器>类选择器>标签选择器
"""
由于类与标签的查找范围较大,指向性没有内联以及id选择器强,内联选择器最强,所以优先级较弱,我们可以利用他们优先级不同特别的做修改。
"""

CSS样式调节

1.字体样式:
	font-family:字体样式
	font-size:字体大小:14px 24px 36px
	font-weight:字体粗细;lighter(变细);border(变粗)
	color:有三种模式:
		1.直接利用颜色的单词;
		2.颜色编码:每个单词都由6位16进制的字符组成
		3.rgb三基色;raga()可以提哦啊哦接饱和度
		text-align:文本调整:center:居中;end:右对齐;justify:左对齐
		text-decoration:字体样式:underline下划线
		text-indent:首行缩进

背景属性

背景大小:width;height
背景颜色:background-color
插入图片:background-image:url(图片地址)
字体颜色:color
重复属性:repeat:xy向都重复;repeat-x:横向重复,竖向不重复;repeat-y:竖向重复横向不重复;no-repeat:不重复。
背景图片位置:background-position:

边框

1.边框样式设置:
边框在head中的style标签中设置
边框粗细:border-left-width
边框样式:border-left-style
边框颜色:border-left-color

2.单边缩写:单边可以直接缩写为:粗细、样式、颜色
div {
    border-left:5px solid black
}

3.多边缩写:如果四个边边框类型都一致,可以直接省去位置缩写:
div {
    border:5px solid black
}

4.给边框设设置尺寸:
"""
行内标签无法设置尺寸,块级标签才可以设置尺寸
"""
div {
    width:400px;
    height:400px;
    border:5px solid pink;
}

5.画圆:可以用border-radius属性,改属性控制矩形角的圆润程度
div {
    border:5px solid black;
    border-radius:50%
}

display属性

1.display属性主要用来控制HTML显示效果。
2.inline,onblock使用:
	inline可以将两个块级标签放在同一行,不过调整之后他们也拥有行内标签的属性,大小跟随内部的文字
3.display:none可以将标签隐藏起来,而且隐藏之后位置会自动被后面的标签补齐。visibility:hiddem也可以占位,但是位置无法被后面的标签补齐。
<p><input type="text" style="display: none" name="max" value="male"></p>

盒子模型

1.我们可以将标签看做是一个快递盒:
	快递盒里面的实际物体:内容content;
	物体与快递盒内部的距离:内边距:padding;
	快递盒的厚度:边框:border;
	快递盒与快递盒之间的距离:外边距margin;
2.padding调节:padding-left:内容与做边框的距离;padding-top:内容和上边框的距离

3.padding的参数有以下几种填写方式:
	padding:20px 上下左右
	padding:20px 40px 上下 左右
	padding:10px 20px 10px 上 左右 下
	padding:10px 10px 20px 20px 上 右 下 左

4.maigin的参数数值边框外边线距离其他外边框(或屏幕距离)外边线的距离
margin设置标签水平居中:
.c1 {
    margin: 0 auto
}
"""
当两个标签在相接的部分margin值不一样时,采用两个标签中较大的margin值。
"""

浮动

1.浮动可以使标签按照顺序一次排在左边或者右边,float:left;
2.解决浮动问题的方法:谁塌陷就给谁添加此标签:clearfix
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

溢出

1.溢出现象:当我们给标签添加边框并且设置了尺寸之后,文字很多时候写不下会超过边框。
2.解决方案:
	2.1overeflow:hidden:直接将多出来的文字砍掉
	2.2overflow:auto:增加一个滚动条,可以竖向滑动查看
	2.3overflow:scroll:上下左右都有一个滚动条可以滑动查看
"""
照片尺寸按照标签尺寸设置:
img {
    max-width:100%
}
"""

定位和标签

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

2.针对定位有四种状态:
	1.stastic:静态(标签默认的状态)
	2.relative:基于标签原来的位置移动
	3.absolute:绝对定位
	4.fixed:固定定位
3.我们在设置标签时,可以用相对定位指定标签距离边框的距离
<style>
        div {
            height: 200px;
            width: 200px;
            background-color: red;
            left: 100px;
            position: relative;
        }
</style>
4.绝对定位:当我们定义一个标签时想通过其他标签来定义本标签的位置时,我们需要采用下面的方法:
	<style>
        .c1 {
            height: 200px;
            width: 200px;
            border: 5px solid black;
            top: 100px;
            left:100px;  # 相对定位根据尺寸定义出在页面上的位置
            position: relative;
        }
        .c2 {
            height: 100px;
            width: 100px;
            border: 5px solid gray;
            position: absolute;
            top: 0;  # 绝对定位的参数指的是距离相对定位标签左上角的距离
            left: 0
        }
    </style>

    <body>  # 根据相对定位的标签先定义,将需要绝对定位的标签嵌套起来
		<div class="c1">
			<div class="c2"></div>
		</div>
    </body>

5.当我们需要使一个窗口固定悬浮在页面上,即使网页上下移动该窗口位置固定,我们需要用到固定定位:position:fixed;fixed固定的;

z-index

模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应,为了制作出这种效果,我们需要用到z-index,类似于xyz的z轴。
    <style>
        .cover {
            background-color: rgba(124,124,124,0.7);
            position: fixed;
            top: 0;
            right:0;
            bottom: 0;
            left:0;
            z-index: 20;
        }
        .modal {
            background-color: aliceblue;
            width: 400px;
            height: 200px;
            position: fixed;
            left:50%;
            top:50%;
            z-index: 21;
            margin-left: -200px;
            margin-top: -100px;
        }
    </style>
    <body>
        <div>我是最下面的div</div>
        <div class="cover"></div>
        <div class="modal"></div>
    </body>

阴影

给标签加阴影的方法:box-shadow
box-shadow有四个参数分别是:h-shadow v-shadow blur color
1.h-shadow:水平方向阴影开始的长度
2.v-shadow:阴影的宽度
3.blur:模糊距离(数值越大模糊距离也越长,阴影颜色也更淡)
4.color:颜色,可用rgba格式来选