4.25python

form表单和CSS样式

form表单

 表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。
    表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。
    表单在网页中主要负责数据采集功能，它用< form >标签定义。用户输入的信息都要包含在form标签中，点击提交后，< form >和里面包含的数据将被提交到服务器或者电子邮件里。
    所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

表单之action属性

#控制数据的提交地址：规定当提交表单时，向何处发送表单数据（默认为当前页面）。
# 方式1：写全路径
action="http://www.aa7a.cn/user.php"
# 方式2：写后缀
action="user.php"
# 方式2：不写（朝网页所在的地址提交）
action=""
"""url:统一资源定位符"""

表单之name属性

#规定表单或标签的名称
  # form表单

表单之value

eg:


  """
  input标签中有两个非常重要的属性:
  	1.name属性
  		类似于字典的key(前端程序员写)
  	2.value属性
  		类似于字典的value(用户自己传)
  		
  	如果标签是选择类型的,那么还需要前端程序员自己填写value,
  	用于区分具体数据含义
  ps:我们在编写input标签的时候应该添加name属性
  """

method(网络请求方式)

#form表单中有一个method属性 用于控制提交的方式
	有两个选项,默认是get请求
# 最常见的网络请求方式有两种
1.get请求：   朝服务端索要数据
	

2.post请求：  朝服务端提交数据
	


# 两种请求都可以携带数据
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
    
    用户名：
    
    
2. password	 # 密文展示
属性和text一样，主要区别是，会自动隐藏输入的内容
	密码：
	
    
3. date       # 日历展示
	生日：
    
    
4. radio      # 单选
	（1）可以通过添加checked="checked"设置默认值
    	ps:如果属性名和属性值相同 可以简写checked
    （2）name：名称，必须有，相同name的单选会作为一组，会相互排斥
    （3）value：选项对应的值
    
     性别：
     男
     女
     其他
    
5. checkbox    # 多选
	可以产生多选框，也可以通过添加checked="checked"设置默认值
    爱好：
    篮球
    足球
    排球
    
6. email    # 邮箱格式数据
	邮箱：
    
7.file    # 文件数据
	用于添加文件数据，可以通过添加multiple属性控制获取单个还是多个文件
    
单个文件:
        
    
    
多个文件:
        
    
    
8. submit    # 触发form表单提交数据
	
    
9. reset    # 重置页面填写的数据
	
    
10. button    # 普通按钮没有任何功能
	意味着以后可以给它添加任意的功能(JS事件)
    
    
11. image    # 图片按钮
	作用同提交按钮一样，只是用属性src替换了value，表示图片地址

select标签

# 下拉框：一个个的下拉选项是一个个option标签

# 默认是单选
省市:
	
     	北京
        上海
        深圳
	


# 可以添加multiple变成多选
前女友:
    
        左依依
        右珊珊
        双艳艳
    


# 通过size调整界面显示个数


CSS简介
#语法结构
选择器 {属性名1:属性值1;属性名2:属性值2}

语法注释
一个正常的网页css样式是非常多的 就算专门开设css文件存储也很乱,这个时候就可以在css文件中通过注释来辅助辨别与查找
#/*注释内容*/

CSS的几种引入方式
#行内样式
	head内style标签内部直接编写css代码
	ps:建议在小白学习阶段可以使用 方便查看
Hello world.

#外部样式
	head内link标签引入外部css文件，
	ps:工作中一般使用的都是link形式，符合标准


#内部样式
	即嵌入式：
嵌入式是将CSS样式集中写在网页的标签对应的标签中。
也称之为"行内式",是最不推荐使用的一种方式,因为它会将HTML和CSS柔和到一起,增加了耦合度


    
    
    


CSS选择器
#1.标签选择器：选择器的名字代表html页面上的标签
	标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
    
    
    
css
    
html
    
（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

#2.ID选择器：规定用#来定义
    
      
      
    
    
      
你好
    
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)用于网站的内容防爬

						  
					  
						
							


						

							
							
			python笔记							
						



						
						
						


						

						
					
					

					
					

						
相关
						
				
						
			

																
								

										
python笔记(来源:尚硅谷)
									
									

								 

        
								
							
							

																
								

										
python笔记-迭代器、生成器、装饰器
									
									

								 

        
								
							
							

																
								

										
Python笔记
									
									

								 

        
								
							
							

																
								

										
Python笔记——json数据的读写笔记
									
									

								 

        
								
							
							

																
								

										
python笔记72 - 使用pathlib替代os.path
									
									

								 

        
								
							
							

																
								

										
Python笔记之 - 一张截图诠释"文件读写" !
									
									

								 

        
								
							
							

																
								

										
3.23python笔记
									
									

								 

        
								
							
							

																
								

										
【Python】python笔记：时间函数
									
									

								 

        
								
							
							

																
								

										
python笔记20-yaml文件写入(ruamel.yaml)
									
									

								 

        
								
							
							

																
								

										
python笔记四
									
									

								 

        
								
							
							
            
            
            
                                    
           
  			
						

					
					
				

				

														
					
					

					
									

					
									   
标签