day44-47

不念不忘少年蓝@ 2023-10-10 08:59 72阅读 0赞

# day44内容回顾 #

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.固定定位