4.25python
form表单和CSS样式
form表单
表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。
表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。
表单在网页中主要负责数据采集功能，它用< form >标签定义。用户输入的信息都要包含在form标签中，点击提交后，< form >和</ form >里面包含的数据将被提交到服务器或者电子邮件里。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
表单之action属性
#控制数据的提交地址：规定当提交表单时，向何处发送表单数据（默认为当前页面）。
# 方式1：写全路径
action="http://www.aa7a.cn/user.php"
# 方式2：写后缀
action="user.php"
# 方式2：不写（朝网页所在的地址提交）
action=""
"""url:统一资源定位符"""
表单之name属性
#规定表单或标签的名称
<form action="" method="post"> # form表单
<p>
<input type="text" name="name">
</p>
<p>
<input type="password" name="pwd">
</p>
</form>
表单之value
eg:
<input type="radio" name="gender" value="male">
"""
input标签中有两个非常重要的属性:
1.name属性
类似于字典的key(前端程序员写)
2.value属性
类似于字典的value(用户自己传)
如果标签是选择类型的,那么还需要前端程序员自己填写value,
用于区分具体数据含义
ps:我们在编写input标签的时候应该添加name属性
"""
method(网络请求方式)
#form表单中有一个method属性 用于控制提交的方式
有两个选项,默认是get请求
# 最常见的网络请求方式有两种
1.get请求： 朝服务端索要数据
<form action="" method="get"></form>
2.post请求： 朝服务端提交数据
<form action="" method="post"></form>
# 两种请求都可以携带数据
1.get请求是在url后面通过？组织数据：
url?name=jason&pwd=123&email=123@qq.com
'''
get请求虽然可以携带数据,但是一般只用于不重要的数据携带,
并且get请求携带数据的大小有限制 最多只能携带2KB左右
'''
2.post请求是在请求体中组织数据
HTTP请求数据格式
input标签
获取用户各中类型数据的标签(html里面的变形金刚)
#根据其type属性值的不同，呈现不同的状态
# type=""
1. text # 正常展示的普通文本
placeholder：提示文本
value：默认值
name：名称
readonly：只读，布尔属性
required：必须输入，布尔属性
disabled：不可用，布尔属性，input,select,textarea的通用属性
minlength：最小长度，提交时判定
maxlength：最大可输入的长度
pattern：正则匹配
antocomplete ：自动记录输入，以后输入时可以自动选择完成。可选值为on/off，默认on
用户名：
<input type="text" name="name">
2. password # 密文展示
属性和text一样，主要区别是，会自动隐藏输入的内容
密码：
<input type="password" name="pwd">
3. date # 日历展示
生日：
<input type="date" name="birthday">
4. radio # 单选
（1）可以通过添加checked="checked"设置默认值
ps:如果属性名和属性值相同 可以简写checked
（2）name：名称，必须有，相同name的单选会作为一组，会相互排斥
（3）value：选项对应的值
性别：
男<input type="radio" name="gender" value="male">
女<input type="radio" name="gender" checked value="female">
其他<input type="radio" name="gender" value="others">
5. checkbox # 多选
可以产生多选框，也可以通过添加checked="checked"设置默认值
爱好：
篮球<input type="checkbox" name="hobby" value="basketball" checked>
足球<input type="checkbox" name="hobby" value="football">
排球<input type="checkbox" name="hobby" value="volleyball" checked>
6. email # 邮箱格式数据
邮箱：<input type="email" name="email">
7.file # 文件数据
用于添加文件数据，可以通过添加multiple属性控制获取单个还是多个文件
<p>单个文件:
<input type="file" name="single_file">
</p>
<p>多个文件:
<input type="file" multiple name="files_list">
</p>
8. submit # 触发form表单提交数据
<input type="submit" value="注册">
9. reset # 重置页面填写的数据
<input type="reset" value="重置">
10. button # 普通按钮没有任何功能
意味着以后可以给它添加任意的功能(JS事件)
<input type="button" value="普通按钮">
11. image # 图片按钮
作用同提交按钮一样，只是用属性src替换了value，表示图片地址
select标签
# 下拉框：一个个的下拉选项是一个个option标签
# 默认是单选
<p>省市:
<select name="province" id="">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="SZ">深圳</option>
</select>
</p>
# 可以添加multiple变成多选
<p>前女友:
<select name="pre_friend" id="" multiple>
<option value="ZYY">左依依</option>
<option value="YSS">右珊珊</option>
<option value="SYY">双艳艳</option>
</select>
</p>
# 通过size调整界面显示个数
<select name="province" id="" size="2">
CSS简介
#语法结构
选择器 {属性名1:属性值1;属性名2:属性值2}
语法注释
一个正常的网页css样式是非常多的 就算专门开设css文件存储也很乱,这个时候就可以在css文件中通过注释来辅助辨别与查找
#/*注释内容*/
CSS的几种引入方式
#行内样式
head内style标签内部直接编写css代码
ps:建议在小白学习阶段可以使用 方便查看
<p style="color: red">Hello world.</p>
#外部样式
head内link标签引入外部css文件，
ps:工作中一般使用的都是link形式，符合标准
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
#内部样式
即嵌入式：
嵌入式是将CSS样式集中写在网页的<head></head>标签对应的<style></style>标签中。
也称之为"行内式",是最不推荐使用的一种方式,因为它会将HTML和CSS柔和到一起,增加了耦合度
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
CSS选择器
#1.标签选择器：选择器的名字代表html页面上的标签
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
<style type="text/css">
p{
font-size:14px;
}</style>
<body>
<p>css</p>
<p>html</p>
</body>
（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。
（2）无论这个标签藏的多深，一定能够被选择上。
（3）选择的所有，而不是一个。
#2.ID选择器：规定用#来定义
<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
border:3px dashed green;
}
</style>
</head>
<body>
<h2 id="mytitle">你好</h2>
</body>
id选择器的选择符是“#”。
#任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如id不能叫做body、img、a。
（4）大小写严格区分，也就是说aa,和AA是两个不同的ID
#类选择器：规定用圆点.来定义
通过标签的class属性查找标签（关键符号是句点符）
.c1 {
color: greenyellow; /*将所有class属性中含有c1的标签内部字体颜色改为亮绿色*/
}
#通用选择器
查找所有的标签
* {
color: blue;
}
CSS高级选择器
#后代选择器
查找id是d1标签内部所有的后代span
#d1 span {
color: red;
}
#儿子选择器
查找id是d1的标签内部所有的儿子span
#d1>span {
color: red
}
#相邻选择器
查找id是d1标签同级别下面紧挨着第一个a标签
#d1 + a {
color: red;
}
#弟弟选择器
查找id是d1标签同级别下面所有a标签
#d1 ~ a {
color: red;
}
属性选择器
CSS3中共有7种属性选择器
1.E[attr]：只使用了属性名，并没有确定任何属性值。
a[target]{
background: gray;
}
//带有target属性的链接会得到灰色的背景
2.E[attr="value"]：指定了属性名，并指定了该属性的属性值。
a[target=blank]{
background-color: green;
}
//target="_blank"的链接会得到绿色的背景
3.E[attr~="value"]：指定了属性名，并指定了该属性的属性值，此属性值是一个词列表，并且以空格隔开，其中的词列表包含一个value值，而且“~”不可忽略。
[title~=flower]
//选择title属性包含单词“flower”的元素，并设置其样式
4.E[attr^="value"]：指定了属性名，并指定了该属性的属性值，属性值是以value开头的。
div[class^="test"]{
background:#ccc;
}
//设置class属性值以“test”开头的所有div元素的背景颜色
5.E[attr$="value"]：指定了属性名，并指定了该属性的属性值，属性值是以value结束的。
div[class$="test"]{
background: #ccc;
}
//设置class属性值以“test”结尾的所有div元素的背景色
6.E[attr*="value"]：指定了属性名，并指定了该属性的属性值，属性值中包含value。
div[class*="test"]{
background:#fff;
}
//设置class属性值包含“test”的所有div元素的背景颜色
7.E[attr|="value"]：指定了属性名，并且属性值是value或以"value"开头的值，
[lang|=en]
//选择lang属性值以“en”开头的元素并设置其样式
分组与嵌套
#分组
查找div或者p或者span标签
div, p, span {
color: red;
}
#嵌套
查找id是d1或者class包含c1或者span标签
d1, .c1, span {
color: red;
}
伪类选择器
#鼠标悬浮
鼠标移动到p标签上方，字体颜色动态修改为橙色
p:hover {
color: orange;
}
#获取聚点
输入框被鼠标左键选中就会产生聚焦效果
input:focus {
background-color: black;
}
伪元素选择器
# 1.修改首个字体样式
p:first-letter {
color: red;
font-size: 48px;
}
# 2.在文本开头添加内容
p:before {
content:'开头';
color: blue;
}
# 3.在文本结尾添加内容
p:after {
content:'结尾';
color: yellow;
}
使用场景:
(1)用于后面清除浮动带来的负面影响
(2)用于网站的内容防爬
版权声明：本文为槐序八原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。