前端——form表单、网络请求方式、css

---

一、form表单

获取前端用户数据并发送给后端服务器

1.属性action

控制数据的提交地址
方式1:写全路径
action=“http://www.aa7a.cn/user.php”
方式2:写后缀(自动补全IP和PORT)
action=“user.php”
方式3:不写(朝网页所在的地址提交)
action=“”
‘’‘URL:统一资源定位符(网址)’‘’

2.input标签

获取用户各中类型数据的标签

type属性	作用
text	正常展示的普通文本
password	密文展示
radio	单选，可以通过添加checked="checked"设置默认值
checkbox	多选，可以通过添加checked="checked"设置默认值
email	邮箱格式数据
file	文件数据，可以通过添加multiple属性控制获取单个还是多个文件
submit	触发form表单提交数据的动作
reset	重置页面填写的数据
button	无特殊作用的按钮，可以通过js获取各种功能

3.select标签

一个个的下拉选项是一个个option标签
默认是单选 也可以添加multiple变成多选

<div>
     <label>居住地：</label>
     <select name="live">
         <option value="bj">毕节</option>
         <option value="gy">贵阳</option>
     </select>
</div>

4.textarea标签

获取大段文本内容

<textarea name="desc"></textarea>

5.lable标签

<label>用户名:</label>

---

二、网络请求方式

<form action="" method="post"> /*通过设置method设置*/

1.get请求

向服务端索要数据
get请求是在url后面通过?组织数据

例如：
formTable.html?username=zxc&password=123&password1=123&email=asd%40123&brithday=2022-04-13&sex=女&interest=on&interest=on&intro=zxcasdasd&live=bj&file=day26.md&files=day25.md&files=day26.md&register=注册

2.post请求

向服务端提交数据

---

三、css

1.语法结构

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

2.语法注释

/*注释内容*/

一个正常的网页css样式是非常多的 就算专门开设css文件存储也很乱
这个时候就可以在css文件中通过注释来辅助辨别与查找
eg:
/博客园样式表/
/导航条样式/
/左侧栏样式/
/右侧栏样式/

3.多种引入css的方式

1. head内style标签内部直接编写css代码
2. head内link标签引入外部css文件
3. 标签内部通过style属性直接编写

4.基本选择器

4.1标签选择器(范围查找)

直接通过标签名查找标签

  	h1 {
        color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/
        }

4.2类选择器(范围查找)

通过标签的class属性查找标签(关键性符号是句点符)

  	.c1 {
         color: greenyellow;  /*将所有class属性中含有c1的标签内部字体颜色改为亮绿色*/
        }

4.3id选择器(精确查找)

通过标签的id属性查找标签

  	#d1 {
         color: orange;
        }

4.4通用选择器

* {
      	color: blue;
    }

4.5组合选择器

4.5.1儿子选择器(关键符号是大于号)

d1 > span { 查找id是d1标签内部所有的儿子span
color: red;
}

4.5.2后代选择器(关键符号是空格)

d1 span { 查找id是d1标签内部所有的后代span
color: red;
}

4.5.3毗邻选择器(关键符号是加号)

d1 + a { 查找id是d1标签同级别下面紧挨着第一个a标签
color: red;
}

4.5.4弟弟选择器(关键符号是小波浪号)

#d1 ~ a {  查找id是d1标签同级别下面所有a标签
        color: red;
    }

4.6属性选择器

根据标签内部的属性名和属性值查找标签(关键符号是中括号)

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;
   }

4.7分组与嵌套

4.7.1分组

div, p, span { 查找div或者p或者span
color: red;
}

4.7.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的儿子标签

4.8伪类选择器

4.8.1鼠标悬浮

p:hover { 鼠标移动到p标签上方 字体颜色动态修改为橙色
color: orange;
}

4.8.2获取聚点

input:focus { 输入框被鼠标左键选中(聚焦)
background-color: black;
}