HTTP协议 补充补充
review
HTTP协议
四大特性
1.基于TCP/IP作用于应用层之上的协议
2.基于请求响应
3.无状态
4.无连接
长连接websocket
数据格式
请求首行(HTTP/1.1 GET/POST)
请求头(一大堆的k,v键值对)
请求体(post请求携带的数据)
响应状态码
1XX:服务端已经接受到你的数据 正在处理 你可以继续提交相应数据
2XX:请求成功(200 OK)
3XX:重定向
4XX:请求错误(404请求资源不存在 403请求错误携带的数据不够 不符合相应规定)
5XX:服务器内部错误(500)
请求方式
1.get 获取资源
2.post 提交数据
HTML
超文本标记语言 构建网页的基本骨架
XML也可以搭建前端页面 在odoo框架中使用较多
注释
标签分类1:
1.双标签
2.单标签(自闭和标签)
标签分类2:
1.块儿级标签 div p h
独占一行 可以设置长宽
1.块儿级标签能够嵌套任意类型的标签
2.但是p标签不能嵌套块儿级级标签 只能嵌套行内标签
2.行内标签 span a img
自身文本多大 就占多大 无法设置长宽
h1~h6标题标签
b,i,u,s
br,hr
& &
空格
¥ ¥
> >
< <
® ®
© ©
常用标签
div
span
这哥俩主要用来做网页骨架搭建 页面布局
a标签
href
1.可以写url(统一资源定位符 网址),点击跳转
2.锚点 还可以写另一个a标签id值 点击跳转到对应标签所在的位置(回到顶部)
target 默认是_self 当前页跳转 也可以换成_blank 新建窗口打开
如果url是首次点击的话 初始是蓝色
只要点过一次 浏览器会机制 之后a标签全是紫色
img标签
src
1.图片路径(本地或者网上的)
2.url(自动访问该url获取结果)
3.直接放图片二进制数据
alt 当图片加载不出来的时候展示的提示信息
title 鼠标悬浮上去 提示的信息
height,width 两者挑一个就可以实现等比例缩放
列表标签
ul>li 无序列表
ol>li 有序列表
dl>dt,dd 标题列表
表格标签
<table>
<thead>
<tr>一个tr就是一行
<td>普通文本</td>
<th>加粗文本</th>
</tr>
</thead>
<tbody></tbody>
</table>
form表单
获取用户信息 提交给后端
input标签
type
text 普通文本
password 密文
date 日期
radio 单选 checked="checked" 可以简写 checked
checkbox 多选 checked="checked" 可以简写 checked
file 上传文件
按钮组
submit 触发form表单提交动作
button 没有任何效果 只是普通的按钮
reset 重置按钮
hidden 隐藏(用户看不到 但是你打开浏览器检查 文档是有的)
disabled 禁用
readonly 只读
select标签 下拉框
默认是单选 一个个的选项 用的是option标签
可以指定multiple变成多选
默认选中 selected="selected" 简写为selected
<optgroup label='一级标题'>
<option></option>
</optgroup>
textarea 大段文本
button标签 放在form表单内 也可以触发提交动作
label标签 通常与input结合使用 for后面跟input标签的id值
获取用户信息的标签都应该有name属性
name类似于字典的key 用来标签input框获取到的信息到底是什么
用户输入的信息都会被标签的value属性接收
你也可以直接写value值 作为标签的默认值
form标签 几个比较重要的参数
action 控制数据提交的地址
1.不写 默认往当前页面所在的地址提交
2.全写 https://www.baidu.com
3.就写路径后缀/index/
method 控制提交方式
默认是get请求
get请求携带的参数 会直接展示占地址栏
get前期一般只能携带一些不重要的信息,get请求携带的数据 大小是有限制
大概在4KB左右
也可以指定成post请求
如果form表达要上传文件 那么需要修改enctype参数
由原来默认的urlencoded变成form-data
flask框架
三行式
from flask import Flask
app = Flask(__name__)
app.run()
day45内容回顾
1.css
层叠样式表
2.css学习思路
1.如何查找标签
2.如何调节样式
3.css注释
HTML注释:
CSS注释:/**/
前端语言的注释在使用的时候通常遵循成双成对出现
/*导航条样式开始*/
/*导航条样式结束*/
web框架也有针对html页面的注释
该注释浏览器检查也是看不到的
称之为模板语法的注释
jinja2模块: {#模板语法注释#}
CSS语法结构
选择器 {属性1:值;属性2:值;属性3:值}
重要
1.基本选择器
元素/标签选择器 直接写标签名
类选择器 点 + 类名
id选择器 # + id值
通用选择器 *
2.组合选择器
后代选择器 空格
儿子选择器 >
毗邻选择器 +
弟弟选择器 ~
3.属性选择器
标签都可以设置自定义属性
[]
[hobby]
[hobby="jdb"]
input[hobby='xxx']
4.分组和嵌套
div,span,p {color:red}
#id,.cl,span {color:red}
5.伪类选择器
a:link
a:hover 鼠标悬浮
a:active
a:visited
input:focus input框获取焦点(被点击选中)
6.伪元素选择器
p:first-letter
p:before
p:after
Day46内容
选择器优先级
一.选择器相同的情况下:就近原则
二.选择器不同的情况下:
行内>id选择器>类选择器>标签选择器
2.如何调节样式
两个快递盒之间的距离(标签与标签之间的距离) 称之为 外边距(margin)纸盒的厚度(边框) 称之为边框(border)内部的物品到盒子的距离(内部文本与边框的距离) 称之为 内边距(padding)物品本身的大小(文本大小) 称之为内容(content)
浮动的元素 是脱离正常文档流的 也就意味着没有独占一行一说
也不再占用原来的位置
浮动的元素 会造成父标签塌陷
clear 清除浮动带来的负面影响(父标签塌陷)
定位:
所有的标签默认都是静态的 无法直接调节位置
你需要先将其设置成可定位状态
1.相对定位
相对于标签自身原来的位置
2.绝对定位
相对于已经定位过的父标签
但只给你一个父标签的长宽 让你做定位
3.固定定位
相对于浏览器窗口 固定在某个位置
浏览器会优先展示文本内容
脱离文档流
脱离文档流
1.浮动的元素都是脱离文档流的
2.绝对定位是脱离文档流的
3.固定定位也是脱离文档流的
不脱离文档流
1.相对定位不脱离文档流
模态框
opacity 即可以调节颜色透明度也可以调文本透明度
day46内容完善版
CSS
属性操作
字体属性
color 字体颜色
font-size 字体大小(24px)
font-weight 字重
font-family 字体样式
文字属性
text-align:center/left/right/justify
text-decoration:none/underline/overline/line-through
text-indent:32px
背景属性
颜色:
red
'#4e4e4e'
rgb(128,128,128)
rgba(128,128,128,0.5)
backgroud-color
backgroud-image
默认是平铺满这个区域
浏览器窗口可以把它当成一个三维坐标系
横X
竖Y
指向用户的Z
backgroud-repeat:no-repeat/repeat-x/repeat-y
backgroud-position:center center 第一个上下 第二个左右
支持简写
backgroud:red url('') no-repeat center center
背景图片应用场景
所有浏览器你能够看到的都是走网路请求传输过来的
当你的网站需要用到很多小图标的时候,可以将所有的小图片放在一张
图片上,然后通过背景图片的位置来控制显示哪一个小图片
从而节省加载资源
边框属性
border-style:solid/dotted/dashed
border-color:red
border-width:5px
支持简写
border:3px solid red;
border-top/left/right/bottom
盒子模型
以快递盒为例
margin:外边距(标签与标签之间的距离)
border:边框
padding:内填充 内边距
content:文本内容
margin-top/left/right/bottom
margin:1 2 3 4
padding:1 2 3 4
浮动
float
浮动是脱离文档流的 也不再遵循块儿级独占一行的特点
浮动主要用于页面布局
浮动会带来父标签塌陷的问题
clear 清除浮动带来的影响
clear:left/right/both
.clearfix:after{
content:''
display:block;
clear:both
}
哪里塌陷 就给谁加一个clearfix类属性即可
如果给当前标签加没有效果 那么你可以考虑给目标标签外层
再套一个div 然后给这个新的div加
是否脱离文档流
脱离
1.浮动
2.绝对定位
3.固定定位
不脱离
1.相对定位
定位
所有的标签默认都是静态的static 没有定位一说
要想改变标签位置 需要先改变标签位置状态
position:static
1.相对定位 relative
2.绝对定位 absolute
3.固定定位 fixed
溢出属性
overflow:hidden,scroll,auto
z-index
模态框(百度登录页面)
opacity
透明度
day47内容
JavaScript(JS) 前端编程语言
JS跟Java没有半毛钱关系,纯粹是为了蹭当时红极一时java的热度
引入js的两种方式
script标签内直接写
script src属性导入外部文件
js注释
单行注释 //
多行注释 /**/
js语言是以分号(;)作为语句的结束符
一般情况下不加分号也不会报错
变量
在js中声明变量需要使用关键字声明
var name = 'jason'
ECMA6最新语法
let name = 'jason'
var与let的区别
var作用的是全局
let作业的是局部,可以保证变量的不被随意的修改
在js中 是有真正意义上的常量
声明常量关键字
const pi = 3.1415926
js中变量的命名
数字 字母 下划线 $
数字不能开头,关键字不能作为变量名
变量的命名规范
js中推荐你使用驼峰式命名
userName
dataOfDb
ageOfJason
python中推荐使用下划线
age_of_jason
数据类型
数值类型(整型和浮点型)
js中将整型和浮点型统称为数值类型
NaN:是数值类型但是表示的意思是不是一个数字
字符类型(字符串)
js中字符串的拼接推荐你使用加号(python不推荐使用加号因为效率极低)
undefined
对象
null
数组 []
自定义对象 {}
布尔值
js中的布尔值都是全小写
true
false
布尔值为flase的有
""(空字符串)、0、null、undefined、NaN
Symbol
流程控制
函数
内置对象