day38

今日总结

form表单

form表单能允许用户将数据提交到后台再由后台提交到数据库，实现前后端交互

1.action属性		# 控制数据提交的地址
    1.全路径
    action = "http://www.aa7a.cn/user.php"
    2.写后缀(自动补全IP和PORT)
    action = "user.php"
    3.朝网页所在的地址提交(不写)
    action = ""

2.input标签		# 获取用户中各类型数据
    text			展示文本
    password		密文
    date			日历
    radio			单选
    checkbox		多选
    '''
        radio和checkbox可以通过checked='checked'设置默认值
        如果属性名与属性的值相同，可以简写为checked
    '''
    email			邮箱格式数据
    file			文件数据
    # 可以通过mutiple属性控制获取单个或者多个文件
    submit			表单提交数据
    reset			重置填写的数据
    button			按钮(可以添加功能)
    
3.select标签		# 扩展框
    <select name="province" id="">
        <option value="BJ">北京</option>
        <option value="SH">上海</option>
        <option value="SZ">深圳</option>
    </select>
    # 默认是单选，也可以通过multiple控制多选

4.textarea标签		# 获取文本内容
    <textarea rows="10" cols="30">我是一个文本框。
    </textarea>
    # 可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小

5.label标签		# 对input标签说明，不是必需的
	第一种
	<label for="username">用户名:</label>
    <input type="text" id="username">
    第二种
    <label>用户名:
        <input type="text">
    </label>

网络请求方式

form表单中的method属性可以用于控制提交的方式
	有两个选项，默认是get请求
1.get请求
	向服务端索要数据
        可以通过URl后的?组织数据
        url?name=xxxxx&pwd=xxx&email=xxxxx@xxx.com
    # get请求索然能够携带数据，但一般用于不重要的数据携带，大小限制在2kb左右
2.post请求
	向服务端提交数据
    	HTTP协议请求数据格式

CSS

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

# 注释
	/*'内容'*/
    # 一个网页css样式非常多且杂乱，可以通过注释来查找与辨认
    
# 引入css的方式
	1.在style标签内编写css代码
    2.通过link标签链接外部css文件
    3.行内通过style标签编写(最不推荐)

css查找标签——基本选择器

# 标签选择器(范围查找)	通过标签名查找标签
    h1 {
        color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/
    }
# 类选择器(范围查找)	通过标签class属性查找
	.c1 {
         color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/
        }
    
# id选择器(精准查找)	通过标签id属性查找
	#d1 {
         color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/
        }
        
# 通用选择器		查找所有的标签
	* {
      	color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/
    }

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.直接通过属性名查找
    [type] {
       		 background-color: red;
  	  }

2.属性名是type,值是text的标签
    [type='text'] {
       		 background-color: red;
   		 }

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

分组与嵌套

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

# 记忆一下
div #d1   查找div内部id是d1的后代标签
#d1>.c1	  查找id是d1的内部class包含c1的儿子标签

伪类选择器

# 1.鼠标悬停后效果
	p:hover {  
           	   color: orange;
          	}  # 鼠标移动到p标签上方 字体颜色动态修改为橙色
        
# 2.获取聚点
	input:focus {  
            background-color: black;
        }  # 输入框被选中是将颜色改为黑色

前段好多要记的，有些以前记得的都有点忘了，不能松懈啊

: