标签

表格标签(只要是展示数据 一般都可以使用表格标签)

表单标签(重要:获取前端用户数据发送给后端)

偷窥一下后端框架的基本使用(flask)

css层贴样式表(选择器)

表格标签

jason 123 read

egon123 dbj

tank 123 hecha

…

username 加粗文本

username 正常文本

表头(字段信息)

jason

123

read

表单(数据信息)

egon 水平方向占多行

DBJ 垂直方向占多行

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

表单标签

“””

能够获取前端用户数据(用户输入的、用户选择、用户上传…)基于网络发送给后端服务器

“””

# 写一个注册功能

在该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标签内部直接书写(为了教学演示方便我们用第一种)

h1 {

color: burlywood;

}

2.link标签引入外部css文件(最正规的方式 解耦合)

3.行内式(一般不用)

老板好 要上课吗?

“””

css的学习流程

1.先学如何查找标签

css查找标签的方式你一定要学会

因为后面所有的框架封装的查找语句都是基于css来的

css选择器很简单很好学不要有压力!!!

2.之后再学如何添加样式

“””

CSS选择器

基本选择器

# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器

/*id选择器*/

/*#d1 { !*找到id是d1的标签 将文本颜色变成绿黄色*!*/

/* color: greenyellow;*/

/*}*/

/*类选择器*/

/*.c1 { !*找到class值里面包含c1的标签*!*/

/* color: red;*/

/*}*/

/*元素(标签)选择器*/

/*span { !*找到所有的span标签*!*/

/* color: red;*/

/*}*/

/*通用选择器*/

/** { !*将html页面上所有的标签全部找到*!*/

/* color: green;*/

/*}*/

组合选择器

“””

在前端 我们将标签的嵌套用亲戚关系来表述层级

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;*/

/*}*/