标签：ict   sub   嵌套   方便   word   ora   multi   链接   标签   

今日内容概要

• 表格标签(只要是展示数据 一般都可以使用表格标签)
• 表单标签(重要:获取前端用户数据发送给后端)
• 偷窥一下后端框架的基本使用(flask)
• css层贴样式表(选择器)

表格标签

jason 123 read
egon	123 dbj
tank  123 hecha
...
  一个tr就表示一行
                  加粗文本
                  正常文本
              表头(字段信息)
        	 表单(数据信息)

username
username

jason
                
123
                
read
            
  加外边宽
  水平方向占多行
   垂直方向占多行

# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看

表单标签
"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
  在该form标签内部书写的获取用户的数据都会被form标签提交到后端

action:控制数据提交的后端路径(给哪个服务端提交数据)
  	1.什么都不写  默认就是朝当前页面所在的url提交数据
    2.写全路径:https://www.baidu.com  朝百度服务端提交
    3.只写路径后缀action=‘/index/‘  
    	自动识别出当前服务端的ip和port拼接到前面
      host:port/index/

  第一种 直接讲input框写在label内
            username:					第二种 通过id链接即可 无需嵌套
password:

ps:input不跟label关联也没有问题
  
"""
label 和 input都是行内标签
"""



input标签 就类似于前端的变形金刚  通过type属性变形
	text:普通文本
  password:密文
	date:日期	
  submit:用来触发form表单提交数据的动作
  button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
  reset:重置内容
  radio:单选
    	默认选中要加checked=‘checked‘
      男
      当标签的属性名和属性值一样的时候可以简写
      女
	checkbox:多选
  		DBJ
  
  file:获取文件  也可以一次性获取多个
    	
  hidden:隐藏当前input框
    	钓鱼网站
      	
  


select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
						新垣结衣
斯佳丽
明老师

textarea标签  获取大段文本
	  

# 能够触发form表单提交数据的按钮有哪些(一定要记住)
		1、
		2、点我
    
# 所有获取用户输入的标签 都应该有name属性
	name就类似于字典的key
  用户的数据就类似于字典的value
  
gender:
            男
            女
            其他
  
验证form表单提交数据
# 接下来的框架代码无需掌握  看一下效果即可
pip3 install FLASK

form表单默认提交数据的方式 是get请求  数据是直接放在url后面的
	http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式
	

  
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
gender:
            男
            女
            其他

hobby:
            篮球
            足球
            双色球

province：
            上海
北京
深圳



"""
form表单提交文件需要注意
	1.method必须是post
	2.enctype="multipart/form-data"
		enctype类似于数据提交的编码格式
			默认是urlencoded 只能够提交普通的文本数据
			formdata 就可以支持提交文件数据
"""




"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, request


app = Flask(__name__)


# 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求
@app.route(‘/index/‘,methods=[‘GET‘,‘POST‘])
def index():
    print(request.form)  # 获取form表单提交过来的非文件数据
    # ImmutableMultiDict([(‘username‘, ‘jason‘), (‘password‘, ‘123132131231233‘), (‘gender‘, ‘on‘)])
    print(request.files)  # 获取文件数据
    file_obj = request.files.get(‘myfile.png‘)
    file_obj.save(file_obj.name)
    return ‘OK‘

app.run()


# 针对用户输入的标签。如果你加了value 那就是默认值
username:
disable 禁用
readonly只读
CSS
层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...


# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

# css的三种引入方式
	1.style标签内部直接书写(为了教学演示方便我们用第一种)
  	
  2.link标签引入外部css文件(最正规的方式 解耦合)
      
	3.行内式(一般不用)
  		
老板好 要上课吗?
"""
css的学习流程
	1.先学如何查找标签
		css查找标签的方式你一定要学会
		因为后面所有的框架封装的查找语句都是基于css来的
		css选择器很简单很好学不要有压力!!!
	
	2.之后再学如何添加样式
"""
CSS选择器
基本选择器
# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器
组合选择器
"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
	
div
        
div p
        
div p
            div p span
        
        span
        span
  
  div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
  ...
"""

# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器

				/*后代选择器*/
        /*div span {*/
        /*    color: red;*/
        /*}*/

        /*儿子选择器*/
        /*div>span {*/
        /*    color: red;*/
        /*}*/

        /*毗邻选择器*/
        /*div+span {  !*同级别紧挨着的下面的第一个*!*/
        /*    color: aqua;*/
        /*}*/

        /*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
        }
属性选择器
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

/*[username] {  !*将所有含有属性名是username的标签背景色改为红色*!*/
        /*    background-color: red;*/
        /*}*/

        /*[username=‘jason‘] {  !*找到所有属性名是username并且属性值是jason的标签*!*/
        /*    background-color: orange;*/
        /*}*/

        /*input[username=‘jason‘] {  !*找到所有属性名是username并且属性值是jason的input标签*!*/
        /*    background-color: wheat;*/
        /*}*/
前端——表格标签，表单标签，css
标签：ict   sub   嵌套   方便   word   ora   multi   链接   标签   
原文地址：https://www.cnblogs.com/pythonwl/p/12878113.html
egon
DBJ