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-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
流程控制
函数
内置对象