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

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

今日内容概要

初窥后端框架
css简介
css选择器

今日内容详细

初次体验前后端交互

# 代码无需掌握只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常牛逼的TCP服务端""" 以flask框架为例>>>:第三方框架 pip3 install flask前端通过标签获取用户数据发送给后端的过程中标签需要有name属性相当于字典的key 用户输入的数据会存储到标签的value属性中相当于字典的value 如果是选择型标签需要自行加上name和valuefrom 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状态(聚焦状态)"""