from表单.css选择器、样式操作md

• from表单

• CSS简介

• CSS选择器

• CSS样式操作

• from表单

"""
 用于获取前端用户数据并发送给后端服务器
"""
<from action=" "></from>  <!--控制提交的地址 -->
# 1、属性action
  控制数据的提交地址
    方式一: 写全路径
       action="http://www.aa7a.cn/user.php"
    方式二: 写后缀(会自动补全IP和PORT)
        action= "user.php"
    方式三: 不写(朝网页所在的地址提交)
        action=""

• input标签

获取用户各种类型数据的标签(HTML里面的变形金刚)
  type属性
    text ———— 正常展示的普通文本
    
    password ———— 密文展示(密码)
    
    date ———— 日历展示
    
    radio ———— 单选(可以通过添加checked="checked"设置默认值)， 属性相同简写checked
    checked ———— 多选(可以通过checked="checked"设置默认值)，属性相同简写checked
    
    email ————— 邮箱格式数据
    
    file ———— 文件数据(可以通过添加multiple属性控制获取单个还是多个文件)
    
    submit ———— 触发form表单提交数据的操作
    """
     能够触发form表单提交提交数据动作的标签有两个
      1、input的type=submit
      2、button标签
    """
    
    reset ———— 重置页面填写的数据
    button ———— 普通按钮默认没有任何的功能(意味着可以给它添加任意的功能(JS事件))

• select标签

下拉框
       <select name="province" id="">
            <option value="">北京</option>
            <option value="">安徽</option>
            <option value="">南京</option>
            <option value="">杭州</option>
        </select>
   一个下拉选型是一个option标签(默认是单选， 也可以通过添加multiple变成多选)

• textarea标签

获取大段文本内容
  <textarea name="desc"></textarea>
"""
 input标签中有两个非常重要的属性
 1、name属性
     类似于字典中的key(这个主要是前端程序员来写)
 2、value属性
      类似于字典的value(主要是用户自己传)
      如果这个标签是选择类型，那么还需要程序员自己填写value
       主要用于区分具体数据含义
       (我们在编写input标签的时候应该添加name属性)
"""

• lable标签

专门给input标签配文字说明， 也可以不使用
    方法一:
        <lable for="d1">用户名:</lable>
        <input type="text" id="d1">
     方法二:
        <lable>用户名:
        <input type="text">
        </lable>

• 网络请求方式

# 最常见的网络请求方式有两种
1、get请求
   意思为向服务端索要数据
2、post请求
   意思为向服务端提交数据
form表单中有一个method属性，用来控制提交的方式，默认是get请求 

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

• CSS简介

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

# 语法注释
  /*注释内容*/
"""
一个正常的网页css样式是非常多，所以就可以在css文件中通过注释来辅助辨别与查找
  		/*导航条样式*/
  		/*左侧栏样式*/
  		/*右侧栏样式*/
"""

# 多种引入css的方式
1、head内style标签内部直接编写css代码
     <style>
        h1{
            color: midnightblue;
        }
    </style>
    
2、head内link标签引入外部css文件
<link rel="stylesheet" href="mycss.css">
     一般都是使用link标签
    
3、标签内部通过style属性直接编写
  也称之为'行内式'， 不推荐使用，应为这样会增加耦合度
    
# css是用来调整HTML标签样式的
  同一个页面上有很多相同的标签并且需要不同的样式

• css查找标签之基本选择器*

# 1、标签选择器
  直接通过标签名查找标签
    <style>
        h1 {color: blue; /*让所有h1标签内部所有的字体颜色变为蓝色*/}
    </style>
 
# 2、类选择器(范围内查找)
    通过标签的class属性查找标签(关键字加句点符)
        <style>
        .c1 {color: }
    </style>
 
# 3、id选择器(精确查找)
    通过标签的ID属性查找标签
    #d1 {
            color: cornsilk;
        }
    <h1 id="d1">近代云开见月明</h1>
   
# 4、通用选择器
   查找所有的标签
  	* {
      	color: cornsilk;
    }

• 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是爷爷
4.对于span2来说div2、p2是哥哥 span2是弟弟
5.div1内部所有的标签无论层级都可以称之为是div1的后代

• 儿子选择器

#查找ID是d1标签内所有儿子span, 关键字为大于号
<style>
        /* 儿子选择器， 关键字为大于号 */
        #d1>span {
            color: blueviolet;
        }
    </style>

• 后代选择器

# 查找id是d1标签内部所有的后代span,关键字为空格
    <style>
        /* 后代选择器， 关键字为空格 */
        #d1 span {
            color: blueviolet;
        }
    </style>

• 毗邻选择器

 # 查找id是d1标签同级别下第一个紧挨着的a标签， 关键字为 +
    <style>
    /* 毗邻选择器， 关键字为 + a */
        #d1 + a {
            color: chartreuse;
        }
    </style>

• 弟弟选择器

# 查找id是d1标签同级别下所有a标签， 关键字~
<style>
    /* 毗邻选择器， 关键字为 ~ */
        #d1 ~ a {
            color: chartreuse;
        }
    </style>

• 属性选择器

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

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

• 分组与嵌套

# 分组
# 查找div或者p或者span
div, p, span {  
           color: blueviolet;
        }
# 2.嵌套
# 查找id是d1或者class包含c1或者span
#d1, .c1, span { 
			color: blueviolet;
        }
"""

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

• 伪类选择器

# 鼠标悬浮——鼠标移动到p标签上方 字体颜色动态修改为选定的颜色
  p:hover {  
              color: mediumblue;
          }
# 获取聚点
# 鼠标选中之后，选中框变成指定的颜色
  input:focus {
            background-color: blueviolet;
        }