day44-47

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
    
    &           &
               空格
    ¥           ¥
    >            >
    &lt;            <
    &reg;           ®
    &copy;          ©

​
​ 常用标签
​ 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

流程控制

函数

内置对象

转载于:https://www.cnblogs.com/PowerTips/p/11470524.html