form表单、基本选择器、组合选择器、属性选择器

form表单

"""获取前端用户数据并发送给后端服务器"""
<form action=""></form>  # 需要在form标签内部编写获取用户数据标签

# 1.属性action
	控制数据的提交地址
	方式一：写全路径
		action="http://www.aa7a.cn/user.php"
	方式二：写后缀（自动补全IP和PORT）
		action='user.php'
	方式三：啥也不写（朝王爷所在的地址提交）
		action=""
'''URL:统一资源定位符(网址)'''

# 2.input标签
获取用户各种类型数据的标签
    type属性	        表现形式		
    text		单行普通文本		
    passwod		密码输入框			
    date		日期输入框(日历)		
    radio		单选框		checked设置默认值
    checkbox	        复选框		checked设置默认值
    email		邮箱
    file		文件选择	        multiple设置多选
    submit		提交按钮
    reset		重置按钮	
    button		普通按钮
    
# 能够触发form表单提交数据动作的标签有两个
    1.input的type=submit
    2.button标签   
'''
	input标签中有两个非常重要的属性
	1.name属性
		类似字典的k(前端提前写好k)
	2.value属性	表单提交时对应项的值
		类似字典的v(用户填写上传)
		如果标签是选择类型的 那么还需要前端程序员自己填写value

    type="button", "reset", "submit"时，为按钮上显示的文本内容
    type="text","password"时，为输入框的初始值
    type="checkbox", "radio", "file"，为输入相关联的值
'''    

# 3.select标签
下拉框
<select name="province" id="">
    <option value="BJ">北京</option>
    <option value="ZJ">浙江</option>
    <option value="SH">上海</option>
</select>
'''
	下拉选项时option标签	默认单选 添加multiple多选
'''

# 4.textarea标签
获取大段文本内容
<textarea name="desc" id="" cols="30" rows="10"></textarea>
'''
	clos对应列	rows对应行
'''

# 5.label标签
专门给input标签配文字说明 也可以不使用
  	方式1
    	<label for="d1">用户名:</label>
    	<input type="text" id="d1">
   	方式2
    	<label>用户名:
        <input type="text">
      </label>	

网络请求方式

"""最常见的网络请求方式有两种"""
1.get请求
	朝服务端索要数据
2.post请求
	朝服务端提交数据

# 两种请求都可以携带数据
	get请求是在url后面通过?组织数据
  	url?name=jason&pwd=123&email=123@qq.com
    
  post请求是在请求体中组织数据
  	HTTP协议请求数据格式
    
'''
  get请求虽然可以携带数据 但是一般只用于不重要的数据携带
  并且get请求携带数据的大小有限制 最多只能携带2KB左右
  '''

form表单中有一个method属性 用于控制提交的方式
	有两个选项 get/post 默认是get请求
<form action="" method="post">    

CSS简介

# 1.语法结构
	选择器 {属性名1:属性值1;属性名2:属性值2}
# 2.语法注释
	/*注释内容*/
# 3.多种引入css的方式
	1.head内style标签内部直接编写css代码
	2.head内link标签引入外部css文件(标准)
	3.标签内部通过style属性直接编写(增加了耦合度 不推荐)

CSS查找标签之基本选择器(重要)

# 1.标签选择器(范围查找)
	直接通过'标签名'查找标签
    h1 {
        color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/
        }
 # 2.类选择器(范围查找)
	通过标签的'class'属性查找标签(关键性符号是句点符)
    .c1 {
         color: greenyellow;  /*将所有class属性中含有c1的标签内部字体颜色改为亮绿色*/
        }
 # 3.id选择器(精确查找)
	通过标签的'id'属性查找标签
    #d1 {
         color: orange;
        }
 # 4.通用选择器(了解 几乎不用)
	查找所有的标签
  	* {
      	color: blue;
    }       

CSS查找标签之组合选择器(重要)

"""
补充:标签关系
<div>div1
	<div>div2
		<p>p1</p>
	</div>
	<p>p2
		<span>span1</span>
	</p>
	<span>span2</span>
</div>
通过嵌套层级来表示亲属关系
1.对于div1来说div2、p2、span2都是儿子
2.对于div2、p2、span2来说div1就是父亲
3.对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
4.对于span2来说div2、p2是哥哥 span2是弟弟
5.div1内部所有的标签无论层级都可以称之为是div1的后代
ps:判断的时候一定要看层级关系
"""

# 1.儿子选择器(关键符号是大于号)
	#d1 > span {  查找id是d1标签内部所有的儿子span
            color: red;
        }
# 2.后代选择器(关键符号是空格)
	#d1 span {  查找id是d1标签内部所有的后代span
            color: red;
        }    
# 3.毗邻选择器(关键符号是加号)
  	#d1 + a {  查找id是d1标签同级别下面紧挨着第一个a标签
            color: red;
        }   
# 4.弟弟选择器(关键符号是小波浪号)
	#d1 ~ a {  查找id是d1标签同级别下面所有a标签
            color: red;
        }        

属性选择器

# 根据标签内部的属性名和属性值查找标签(关键符号是中括号)
1.方式1:直接通过属性名查找
	[type] {
            background-color: red;
        }
    
2.方式2:属性名是type并且值是text的标签
  [type='text'] {
            background-color: red;
        }

3.方式3:属性名是type并且值是text的div标签
	div[type='text'] {
            background-color: red;
        }  

分组与嵌套

# 1.分组
div, p, span {  查找div或者p或者span
           color: red;
        }

# 2.嵌套
#d1, .c1, span {  查找id是d1或者class包含c1或者span
					color: red;
		}

"""
综合玩法
玩法1
	div#d1		查找id是d1的div标签
	div.c1		查找class包含c1的div标签
玩法2
	div #d1   查找div内部id是d1的后代标签
	#d1>.c1	  查找id是d1的内部class包含c1的儿子标签
"""

伪类选择器

# 1.鼠标悬浮
  p:hover {  鼠标移动到p标签上方 字体颜色动态修改为橙色
              color: orange;
          }
        
# 2.获取聚点
	input:focus {  输入框被鼠标左键选中(聚焦)
            background-color: black;
        }