文章目录
前端
什么是前端
任何与用户直接打交道的操作界面都可以称为前端
比如：电脑界面，手机界面 平板界面
什么是后端
后端类似于幕后操作者，不直接与用户打交道
前端学习历程
HTML：网页的骨架，没有任何样式
css：给骨架添加各种样式，变得好看
前端框架：提前封装好的操作
软件开发架构
cs 客户端 服务端
bs 浏览器 服务端
ps：bs 本质是cs
浏览器窗口输入网址回车发生了几件事
<--
1 浏览器向服务端发送请求
2 服务端接收请求
-->
案例：
import socket
sercer = socket.socket()
server.binf(('127.0.0.1', 8080))
server.listen(5)
while True:
conn,addr = server.accept()
data = conn,recv(1024)
print(fata)
conn.send(b'HTTP/1.1 200 ok'\r\n\r\n)
conn.send(b'<h1>hello</h1>')
conn.close()
HTTP协议
<--
超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式。。
-->
<--四大特性-->
1、基于请求响应
2、基于TCP/IP作用于应用层之上的协议
3、无状态
不保存用户的信息
由于Http协议无状态，后续出现一些专门来记录用户状态的技术
4、无/短链接
请求一次，响应一次 之后无任何联系
长链接 ：双方建立连接之后默认不断开
请求数据格式
请求首行(标识HTTP协议版本，当前请求方式)
请求头(一大堆k，v键值对)
\r\n
请求体(并不是所有的请求方式都是get没有，post有，存放的是post请求提交的铭感数据)
响应数据格式
请求首行(标识HTTP协议版本，当前请求方式)
请求头(一大堆k，v键值对)
\r\n
请求体(返回给浏览器展示给用户看数据)
响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息
1xx：服务端已经接收到数据，可以继续提交
2xx：服务端成功响应想要的数据（200 ok请求成功）
3xx：重定向（永久定向）
4xx：请求错误（404 请求资源不存在，403:当前请求不合法或者不符合访问资源的条件）
5xx：服务器内部错误（500
请求方式
1、get请求
向服务端要数据
eg：输入网址获取内容
2、post请求
向服务端提交数据
eg：登录传向服务端发送请求，在后端进行身份校验
URL：统一资源定位符（网址）
HTML简介
超文本标记语言
遵循HTML语法
注释
<!--单行注释-->
<!--
多行注释
-->
HTML文档结构
<html>
<head>
标签不是给用户看的，定义配置给浏览器看
</head>
<body>
写什么，浏览器渲染什么，用户都能看到
</body>
</html>
文件的后缀名给用户看，只不过对应不同的 文件后缀名有不同的软件来出来并添加很多功能
HTML代码没有格式，可以全部现在一行，
打开HTML文件的两种方式
- 找到文件所在位置，右键浏览器打开
- 在pycharm内部，集成了自动调用浏览器的功能，使用电脑上安装的浏览器
标签的分类
1、双标签
2、单标签（自闭合标签）
Hend中常用标签
在写html标签是直接写标签名按tab自动补全
<title></title>网页标题
<style>用来写css代码</style>
<script>用来写js代码</script>
<scrip src = "myjs.js"></scrip>可以引入外部js文件
<link >软连接
<mate http-equiv="refresh" content ="">告诉浏览器对应的网址，主要引号</mate>
BODY内的常用标签
基本标签
<h1>
一级标签
</h1>
<h2> 二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<br>换行</br>
<hr>水平分割线</hr>
<b>加粗</b>
<i>斜体标签</i>
<s>下划线标签</s>
<p>
段落标签
</p>
块及标签
块及标签 独占一行
h1-h6
div p
1、块级标签可以修改长宽 行内标签不可以 修改了也不会有变化
2、块级标签内部可以嵌套任意的块级标签和行内标签
但是p标签虽然是块级标签 但是它只能嵌套行内标签 不能嵌套块级标签
如果使用了 浏览器会自动解开（浏览器是面向用户的 不会轻易报错）
前端基本上不会报错
总结：
只要是块级标签都可以嵌套任意的块级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）
行内标签，自身文本多大就占多大
i u s b
行内标签不能嵌套块级标签 可以嵌套行内比标签
特殊符号
空格
> >
< <
& &
¥ ¥
© ©️ 版权
® ®️ 注册
常用标签
div标签
块级标签
span标签
行内标签
上述两个标签是构造页面最初期最常使用的 页面布局一般先用div和span占位之后再去调整样式 尤其div标签用的最为频繁
div可以看成一块区域，div用来提前规定区域
而普通的文本先用span标签
<div>
块级标签
</div>
<span>行内标签</span>
img标签
图片标签
<img src= "" alt="" title="" height= "" width = "">
src:
1、图片路径
2、url 自动发送get请求获取数据
alt= " "
当图片加在不出来时，给图片的描述信息
title=""
当鼠标悬浮到图片上之后 自动展示的信息
height= "" width = ""
高度和宽度只修改一个时，另一个参数会等比例缩小
如果修改了两个参数 并且没有考虑比例问题，那么图片就会失真
a标签
链接标签
<a href = "" ></a>
<!--
当a标签指定的网址从未被点击过，那么a标签的颜色是蓝色，如果点击过就是紫色（浏览器记忆）
-->
href
放url，用户点击就会跳转到该url页面
可以放id值，锚点功能
target
默认a标签是在当前页面完成跳转 _self，
可以修改为新建页跳转 _blank
<!--a标签的锚点功能-->
点击一个文本标题 页面自动跳转到标题对应的内容区域
标签具有的两个重要书写
1、id值
唯一标识类似以标签的身份证号，在一个页面上不能重复
2、class值
该值点类似于面向对象的继承 一个标签可以继承多个class值
标签可以有自定义属性。
列表标签
-
无序列表(常用)
<ul> <li tyep= ""></li> <li></li> <li></li> <li></li> </ul> 虽然很丑 但是在页面布局的时候 只要排版一致的，使用的都是ul标签 -
有序列表
emmet插件 ol>li{$}*3 <!--快速生成--> <ol > <li></li> <li></li> <li></li> </ol> -
标题列表
<dl> <dt></dt> <dt></dt> <dt></dt> </dl>表格标签
<table > <thead> <tr> <th></th> <th></th> <th></th> </tr> </thead> 表头(字段信息) <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> 表单(数据信息) </table> <table border='1' > 加外边框 <td colspan = "2"> 水平方向占多行 <td rowspan = "2"></td> 垂直方向占多行表单标签
<!--能攻获取前端用户数据，基于网络发送给后端服务器--> <!--写一个注册数据--> <form action=""></form>在该form标签内部书写获取用户的数据会被提交到后端 action：控制数据提交后短路径（给那个服务端提交数据） 1、什么都不写，默认就是超当前页面所在的url提交数据 2、写全路径：指名道姓。 3、只写路径后缀action = 'index' 自动识别出当前服务端的ip和port <!-- label和input都是行内标签 --> input标签 通过type属性 text:普通文本 password ：密文 date：日期 submit:用来触发form表提交数据的动作 button：就是一个普通的按钮 本身没有任何功能 reset：重置内容 1、radio:单选 默认选中要加checked="checked" <input type="radio" name="gender" checked="checked"> 当标签的属性名和属性值一样可以简写 <input type="radio" name="gender" > 2、checkbox：多选 <input type="checkbox" > 3、file：获取文件 也可以一次获取多个 <input type="file" multiple> 4、hidden：隐藏当前input框 钓鱼网站 select标签：默认是单选 可以加multiple参数变多选 默认选中selected <select name="" id="" multiple> <option value=" " selected>dfgs</option> <option value = " " selected>dfgdsfg</option> <option value = " " selected>dfgsg</option> </select> textarea标签 获取大段文本，maxlength字数限制，cols、rows大小 <textarea name="" id="" cols="30" rows=" 10" maxlength="20"></textarea> <!--能够触发form表单提交数据的按钮有哪些--> <input type="submit" value="注册"> <button>点我</button> <p> <label> <input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender" >女 <input type="radio" name="gender" >其他 </label> </p> <!--能够获取用户输入的标签 都应该有name属性--> name类似于字典的key值 用户数据类似字典的value 默认三个全选 <select name="" id="" multiple> <option value=" " selected>dfgs</option> <option value =" " selected>dfgdsfg</option> <option value =" " selected>dfgsg</option> </select>验证form表单提交数据
<!--form表单默认提交方式是get请求， 数据直接放在url后面--> http://127.0.0.1:5000/index/?username=admin&gender=on 可以通过method指定提交方式 <form action="http://127.0.0.1:5000/index/" method="post"> <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <p>gender: <label> <input type="radio" name="gender" checked="checked" name = "mail">男 <input type="radio" name="gender" name = "femail">女 <input type="radio" name="gender" name = "others" >其他 </label> </p> <p>hobby: <label for=""> <input type="checkbox" name = "">篮球 <input type="checkbox" name = "">足球 <input type="checkbox" name="">排球 </label> </p> <p> province: <select name="" id=""> <option value=" " >上海</option> <option value = " " selected>北京</option> <option value = " " >深圳</option> </select> </p> from flask import Flask, request app = Flask(__name__) # 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求 @app.route('/index/', methods=['get', 'post']) def index(): print(request.form) # 获取form表单提交过来非文件的数据 print(request.files) # 获取文件数据 file_obj = request.files.get('myfile.png') file_obj.save(file_obj.name) return 'ok' app.run() #针对用户输入的标签。如果加了value 那么就是默认值 <label for="d1"> username:<input id="d1" name="username" value="默认值"> </label> disable 禁用 readonly 只读css
层叠 样式表就是：给HTML标签添加样式的，让它变得更好看
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常在写css样式的时候也会用注释来划定区域
/*css的雨打结构*/
选择器{
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
/*css的三种引入方式*/
style标签内部直接书写
1、<style>
h1 {
color:
}
</style>
2、link标签引入外部css文件（最正规的方式 解耦合）
<link rel="stylesheet" href="mycss.css">
3、行内标签
<h1 style="color: blue">老板好 要上课妈？</h1>
css选择器
基本选择器
1、/*id选择器*/
#
2、/*类选择器*/
.
3、/*元素选择器（标签选择器）*/
标签名
4、/*通用选择器*/
将所有标签都找到
组合选择器
<span>span1</span>
<span>span2</span>
<div>
<p>div p</p>
<p>div p</p>
<span>span3</span>
<span>span4</span>
</div>
<span>span1</span>
<span>span2</span>
1、/*后代选择器*/
div span{
color: aquamarine;
}
2、/*儿子选择器*/
div>span{
color: blue;
}
3、/*毗邻选择器*/
div+span{ /*同级别紧挨着的下面第一个*/
color: blueviolet;
}
4、/*弟弟选择器*/
div~span{ /*同级别下面所有span*/
color: aqua;
}
属性选择器
属性选择器是以[ ]作为标志
有某个属性
[username] {/*将所有包含有属性名是username的标签背景颜色改为红色*/
background-color : red;
}
有某个属性并且有某个值
[username = 'jason'] {/*找到所有属性名是username并且属性值是jason的标签*/
background-color : ;
}
有某个属性并且有某个值的某个标签
input[username]{ /*找到所有属性名是username并且事项值是Jason的input标签*/
background-color : wheat;
}
分组与嵌套
div,p,span{/*逗号表示并类关系*/
color：yellow；
}
d1,.c,span {
color:orange;
}
伪类选择器
a:link{ /*访问之前的状态*/
color: cadetblue;
}
a:hover{ /*鼠标悬浮态*/
color: blueviolet;
}
a:active{ /*鼠标放上不激活*/
color: yellow;
}
a:visited{
color: black;
}
input:focus{ /*input框获取焦点*/
background-color: blueviolet;
}
伪元素选择器
p:first-letter{ /*增大文本第一个字*/
font-size: 48px;
color: blueviolet;
}
p:before{
color: blue;
}
p:after{
content: 'nnnn';
color: cadetblue;
}
before和after通常都是用来清除浮动带来的影响：父不靠前塌陷的问题
选择器优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1 、选择器相同 写顺序不同
就近原则
2、选择器不同 。。。
行内标签 > id 选择器 > 类选择器 >标签选择器
精确度越高越有效
*/
#d1{
color: cadetblue;
}
.c1{
color: blue;
}
p{
color: red;
}
</style>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="d1" class="c1" style="color: black">有趣，有钱途</p>
</body>
</html>
css属性相关
设置长宽
p {
background-color: cadetblue;
height: 200px;
width: 400px;
}
span{
background-color: blueviolet;
height: 0;
width: 09px;
}
设置字体
font-family: Rockwell;
font-size: 24px;
font-weight: bold; font-weight: inherit;/*继承父元素*/
color: rgb(251, 184, 184);
文字属性
p{
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
text-decoration: underline;
text-decoration: overline;
text-decoration: none;
}
display
解决浮动带来的影响
#浮动带来的影响
会造成父标签塌陷的问题，
'''
解决浮点带来的影响推导步骤
1、自己加一个div设置高度
2、设置clear属性
#d4{
/*height: 100px;*/
clear: left;/* 该标签的左边（地面和空中）不能浮动的元素*/
}
3、通用的解决浮动带来的影响方法
在写HTML页面之前，先提前写好浮动带来的影响
.clearfix:after{
content:"" ;
display: block;
clear: both;
}
之后只要标签出现了塌陷的问题就给塌陷的标签加一个clearfix属性即可
'''
溢出属性
p{
height: 100px;
width: 100px;
border: 3px solid black;
/*overflow: visible;!*默认就是可见 溢出还显示*!*/
/*overflow: hidden;!*溢出部分直接隐藏*!*/
overflow: scroll;/*设置上下滚动条的形式*/
/*overflow: auto;!*设置上下和左右都有滚动条*!*/
}
定位
-
相对定位
-
相对于标签原来的位置坐移动，无法改变位置
#d1 { height: 100px; width: 100px; background-color: salmon; left: 50px;/*从左往右 如果负数 方向则相反*/ top: 50px;/*从上往下 如果是负数 方向则相反*/ /*position: static; !*默认是static无法修改位置*!*/ position: relative; /*相对定位 标签由static变为relative它的性质就从原来没有定位的标签改变了一句定位过的标签， 虽然没有动，但性质已经改变 */ }
-
-
绝对定位
-
相对于已经定位过的父标签坐移动
#d2 { height: 100px; width: 200px; background-color: deeppink; position: relative;/*已经定位过了*/ } #d3 { height: 200px; width: 400px; background-color: cadetblue; position: absolute; left: 200px; top: 100px; }
-
-
固定定位
-
相对于浏览器窗口固定在某个位置
#d4{ position: fixed;/*依据浏览器定位窗口*/ bottom: 5px; right: 20px; height: 50px; width: 100px; background-color: white; border: 3px solid black; }
-
-
静态
- 所有的标签默认都是静态的static，无法改变位置
ps
浏览器优先展示文本内容
验证浮点和定位是否脱离文档流（原来的位置是否还在）
'''
浮动
相对定位
绝对定位
固定定位
'''
#不脱落文档流
相对文档流
#脱离文档流
浮动
绝对定位
固定定位
<!--<div style="height: 100px;width: 100px;background-color: deeppink; position: relative;left: 500px" ></div>-->
<!--<div style="height: 100px;width: 100px;background-color:darkgoldenrod"></div>-->
<div style="height: 100px;width: 100px;background-color: darkkhaki;"></div>
<div style="height: 100px;width: 100px;background-color: darkorchid;position: relative;left: 500px"></div>
<!--当没有-->
<div style="height: 100px;width: 100px;background-color: deeppink;"></div>
z-index模态框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .cover{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 99; } .modal{ background-color: white; height: 200px; width: 400px; position: fixed; left: 50%; top: 50%; z-index: 100; margin-left: -200px; margin-top: -100px; } </style></head><body><div>这是最底层</div><div class="cover"></div><div class="modal"> <label><h1 style="">登录页面</h1><p>username:<input type="text"></p><p>password:<input type="text" ></p> </label></div></body></html>
透明度opacity
可以修改颜色的透明度还可以修改字体的透明度
rgba只能影响颜色，而opacity可以修改字体和颜色
4902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
