2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

今日内容概要

• 初窥后端框架

• css简介

• css选择器

今日内容详细

初次体验前后端交互

# 代码无需掌握 只看效果即可
"""后端框架:可以简单的理解为别人写好的一个非常牛逼的TCP服务端"""
以flask框架为例>>>:第三方框架 pip3 install flask

前端通过标签获取用户数据发送给后端的过程中 标签需要有name属性
	相当于字典的key
 	用户输入的数据会存储到标签的value属性中 相当于字典的value
  	如果是选择型标签需要自行加上name和value

from flask import Flask,request
app = Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form)  # 获取普通数据
    print(request.files)  # 获取文件数据
    # print(request.form.get('name'))
    file_obj = request.files.get('file')  # 获取文件对象
    file_obj.save('xxx.md')  # 保存文件
    return 'flask框架真简单'
app.run()

css简介

# 层叠样式表>>>:就是给HTML标签修改样式
语法结构
	选择器 {
    	属性名1:属性值1;
    	属性名2:属性值2
	}
注释语法
	/*注释内容*/
引入方式
	1.style内部直接编写css代码
  		平时学习、练习的时候推荐使用
	2.link标签引入外部css文件
  		正式工作、实际生产环境推荐使用
	3.标签内直接书写
  		一般情况下不推荐使用 容易造成冗余现象
"""
单独开设的css文件内代码也是非常多的 可以借助于注释管理
	/*导航条样式*/
	/*侧边栏样式*/
"""

基本选择器(重要)

"""
css是用来调节标签样式的 那为什么需要学选择器呢?
	因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式
	所以为了能够区分 我们肯定先需要学习如何查找指定的标签
"""
1.标签选择器>>>:通过标签名直接查找
  	/*查找所有的div标签*/
  	div {
		color: red;
	}
2.类选择器(关键符号为句点符.)>>>:通过class值查找标签
  	/*查找所有含有c1样式类的标签*/
  	.c1 {
		color: red;
	}
3.id选择器(关键符号为警号#)>>>:通过id值查找标签
  	/*查找id为d1的标签*/
  	#d1 {
		color: orange;
	}
4.通用选择器(了解)
    /*body内所有的标签*/
    * {
		color: darkgray;
    }

组合选择器(重点)

"""
为了区分嵌套标签之间的关系 我们发明了一种称呼
	<div>
		<p>
			<span></span>
		</p>
	</div>
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先

即：
	儿子：子标签
	孙子：子标签的子标签
	后代：无限子标签
	父亲：父标签
	爷爷：父标签的父标签
	祖先：无限父标签
"""
1.后代选择器(特征为空格)
	/*查找div内部所有的后代span*/
	div span {
		color: red;
	}

2.儿子选择器(特征>)
 	/*查找div内部所有的儿子span*/
	div > span {
		color: greenyellow;
	}

3.毗邻选择器(特征为+)
	/*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/
	div + span {
		color: pink;
	}

4.弟弟选择器(特征为~)
	/*查找同级别下面所有的span(不需要紧挨着)*/
	div ~ span {
		color: deeppink;
	}

属性选择器

# 标签可以有默认的属性也可以自定义属性
	<p id="d1" class="c1" name="jason" pwd="123">123</p>

1、含有name属性名的标签
    [name] {
        color: red;
    }
2、含有name属性名并且值为jason的标签
    [name='jason'] {
        color: red;
    }
3、p标签中含有name属性名并且值为jason的
    p[name='jason'] {
        color: red;
    }

分组与嵌套

# 1、多个相同选择器并列使用
ag：查找div或者span或者p
    div,span,p {
        color: red;
    }

# 2、多个不同选择器并列使用
ag：标签查找div id查找d1 类查找c1
    div,#d1,.c1 {
        color: red;
    }

# 3、不并列同样可以使用组合选择器
ag：查找class为c1的后代p标签
    .c1 p {
        color: red;
    }

# 4、直接筛选
ag1：查找id为d1的div标签
	div#d1 {
		color: red;
	}
ag2：查找class为c1的div标签
	div.c1 {
		color: red;
	}
"""
练习题
	#d1>div>.c1>span.c2：
        查找id为d1的标签内部的儿子div
        并且在儿子div内部查找class为c1的儿子标签
        并且在该儿子内部查找class为c2的儿子span
"""

伪类选择器

/*鼠标悬浮在上面*/
a:hover {   # 重点掌握 很多网址都在用!!!
            color: orange;
}

"""a标签默认的颜色会变化 第一次是蓝色 后面是紫色"""

input:focus {
            background-color: red;
        }
"""我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态)"""

作业

1.自行随意发挥搭建一个用户注册页面(用上所有的知识点)
2.整理今日内容至博客
3.尝试着使用css给题目1的标签加点样式