python前端2
目录
一.form表单
'获取前端用户数据并发送给后端服务器'
代码演示 <form action=""></form>
需要在form标签内部编写获取用户数据标签
1.属性action
控制数据的提交地址
方式1:写全路径
action="http://www.aa7a.cn/user.php"
方式2:写后缀(自动补全IP和PORT)
action="user.php"
方式3:不写(朝网页所在的地址提交)
action=""
'URL:统一资源定位符(网址)'
2.input标签
代码演示
获取用户各中类型数据的标签,type属性
# 1.text 正常展示的普通文本
# 2.password 密文展示
# 3.date 日历展示
# 4.radio 单选
# 5.checke 可以通过添加checked="checked"设置默认值 如果属性名和属性值相同可以简写checke
# 6.checkbox 多选 可以通过checked="checked"设置默认值
# 7.email 邮箱格式数据
# 8.rile 文件数据 可以添加multiple属性控制获取单个还是多个文件
3.input按钮
# 9.submit 触发form提交数据
'能够触发form表单提交数据的标签有两个'
'input type=submit 和 button标签'
# 10.reset 重置页面填写的数据
# 11.button 没有任何功能，可以通过js添加任意功能
4.select标签
'下拉框' 下拉框选项是一个个option标签，默认是单选，也可以添加multiple变为多选
5.textarea标签
获取大文本内容 <textarea name="desc" id="" cols="35" rows="10"></textarea>
6.input标签中的两个重要属性
# 1.name属性 ：类似与字典里的key 需前端程序员编写 name里的属性是给后端查看的
# 2.value属性：类似与字典里的value 需要用户自己传
'如果标签是选择类型 那么需要前端程序员自己填写value'
主要用于区分具体的数据含义
7.lable标签
专门给input标签配文字说明 也可以不使用
方式1
<label for="d1">用户名:</label>
<input type="text" id="d1">
方式2
<label>用户名:
<input type="text">
</label>
关于上述点引出代码
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小作业</title>
</head>
<body>
<form action="">
<p>请输入你注册的账号:
<input type="text" name="name">
</p>
<p>请输入你要注册的密码:
<input type="password" name="pwd">
</p>
<p>您的性别:
男<input type="radio" name="gender" value="male">
女<input type="radio" name="gender" checked value="female">
</p>
<p>您的爱好:
篮球<input type="checkbox" name="hobby" value="basketball" checked>
足球<input type="checkbox" name="hobby" value="football">
</p>
<p>您的生日是:
<input type="date" name="birthday">
</p>
<p>您的邮箱:
<input type="email" name="email">
</p>
<p>一个文件:
<input type="file" multiple name="file_list">
</p>
<p>多个文件:
<input type="file" name="file_list">
</p>
<p>
<input type="text">
</p>
<p>你在哪个省份:
<select name="province" id="">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="gz">广州1</option>
</select>
</p>
<p>前任:
<select name="ptr_friend" id="" multiple>
<option value="zz">有个毛球</option>
<option value="za">没</option>
<option value="aa">阿克斯</option>
</select>
</p>
<p>个人介绍:
<textarea name="desc" id="" cols="35" rows="10"></textarea>
</p>
<p>
<input type="submit" value="注册功能">
<button>我和注册一致</button>
<input type="reset" value="重置">
<input type="button" value="我就是一个普通按钮">
</p>
</form>
</body>
</html>
小作业
二.网络请求方式
'get请求方式' 向服务端索要数据 打开网站
'post' 想服务端提交数据 登陆等
两种请求都可以携带数据
get请求是在url后面通过?组织数据
url?name=jason&pwd=123&email=123@qq.com
post请求是在请求体中组织数据
HTTP协议请求数据格式 输入账号密码
get请求虽然可以携带数据 但是一般只用于不重要的数据携带
并且get请求携带数据的大小有限制 最多只能携带2KB左右
1.form表单metod属性
form表单也有一个metod属用于控制提交的方式
有两个选项 默认是get请求
三.CSS简介
## 1.CSS：是对HTML的标签添加样式，调整，修饰，也叫层叠样式表
## 2.语法结构：
选择器 {属性名1:属性值1;属性名2:属性值2}
## 3.语法注释
/*注释内容*/
因网页CSS样式非常多 需要通过CSS文件中的注释用来辨别与查找
## 4.多种引入CSS方式
head内style标签内部直接编写css代码
<style>h1 {color: deeppink;}</style> # 方便查看
head内link标签引入外部css文件 # 方便区分
<link rel="stylesheet" href="tb.css">
标签内部通过style属性直接编写 # 不常用
<h1 style="color: cyan">天若有情天亦老</h1>
'也成为行内式'会将HTML和CSS 融合到一起 增加耦合度
四.CSS基本选择器 查找标签
## 1.标签选择器：通过标签名来查找标签
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
color: coral;
}
</style>
</head>
<body>
<h1>天若有情天亦老</h1>
<h2>地若无情苦作尘</h2>
<h1>古人言</h1>
<h2>吃亏是福</h2>
</body>
</html>
<style>通过查找 id h1 的方式修改了颜色</style>
# 2.类选择器：通过标签的class属性查找标签
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.q1 {
color: coral;
}
</style>
</head>
<body>
<h1 class="q1 q2 q3 q4">天若有情天亦老</h1>
<h2 class="q1">地若无情苦作尘</h2>
<h1 class="q2">古人言</h1>
<h2 class="q1">吃亏是福</h2>
<p class="q3">能吃也是福</p>
<span class="q4">span标签</span>
</body>
</html>
将所有class属性中含有q1的标签内部字体颜色修改
范围更广 其他标签也可以通过class方法修改
id选择器：通过id直接查找
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#q1 {
color: coral;
}
</style>
</head>
<body>
<h1>天若有情天亦老</h1>
<h2>地若无情苦作尘</h2>
<h1 id="q1">古人言</h1>
<h2 id="q1">吃亏是福</h2>
<p>能吃也是福</p>
<span>span标签</span>
</body>
</html>
直接通过id值去查找求改 id=""
通用选择器： 通过 * 修改全局的颜色 不常用
五.CSS组合选择器 查找标签
点击查看代码
<div>div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>3</span>
<p>
<span>4</span>
</p>
</div>
标签的层级 也就是缩进量 依次排序
大小层级 从左到右依次排列
同一层级 也就是同一缩进量是相同的
通过代码来说
div1 属于'辈分'最高的
然后依次进行'其的都是后代'
div2 p2 span 属于第二级
p1 span1 属于第三级
1.查找修改层级下的属性
# 1.修改二级(关键符号是大于号)
通过查找第一级'辈分最高的'id 修改比他辈分低的 属性
#d1>span {查找id是d1标签内部所有的二级span}
# 2.修改所有等级(关键符号是空格)
#d1 span {查找id是d1标签内部所有的span}
# 3.修改同缩进等级(关键符号是加号)
#d1 + p {查找id是d1标签同级别下面紧挨着第一个p标签}
上图有两个P 标签 修改的是第一个P标签
同一缩进量也有层级之分 1~2~3~4
# 4.修改不同缩进等级(关键符号是小波浪号)
#d1 ~ p {查找id是d1标签同级别下面所有p标签}
六.属性选择器
根据标签内部的属性名和属性值查找标签
1.方式1直接通过属性名查找(关键符号是中括号)
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[type] {
color: crimson;
}
</style>
</head>
<body>
<input type="text" name="name">
<input type="password" name="pwd">
<input type="text" name="name">
<input type="file" name="file">
<p type="haha">ppp</p>
<a type="heihei">aaa</a>
</body>
</html>
2.方式二：属性名是type并且值是text的标签
点击查看代码
<style>
[type='text'] {
color: crimson;
}
</style>
3.方式3:属性名是type并且值是text的div标签
点击查看代码
<style>
div[type='text'] {
color: crimson;
}
</style>
<body>
<div type="text">该睡了</div>
</body>
七.分组查询寻修改 嵌套查询修改
# 1.分组
div, p, span 为例子
逗号 隔开 可以修改 这三个标签的属性
# 2.嵌套
#d1, .c1, span 为例子
通过查找 id d1 class中的c1 修改 span 属性
# 3.综合用法
用法1
div#d1 查找id是d1的div标签
div.c1 查找class包含c1的div标签
用法2
div #d1 查找div内部id是d1的后代标签
#d1>.c1 查找id是d1的内部class包含c1的儿子标签
八.伪类选择器
# 1.鼠标悬浮
hover 鼠标移动到被修改属性的标签上方 通过hover做一个动态修改
# 2.获取聚点
input:focus 输入框被鼠标左键选中获取焦点(聚焦) 然后修改其属性
'以上都是通过CSS 修改属性的方式进行操作'
'被修改的就是标签 <a></a> <h1></h1>等'
浙公网安备 33010602011771号