form表单、CSS
![日常微信聊天表情包[我背锅还不行嘛]](https://wx2.sinaimg.cn/mw690/006HJgYYgy1h1b16xgzqjj30fu0fx74l.jpg)
form表单
form表单是一个包含表单元素的区域，允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。是前后端交互的重要标签。(把用户在前端输入的数据发送给后端服务器)
表单属性
action属性
'''action属性里面写的是URL链接，就是表单提交的地址'''
# 书写格式：
<form action = ""></form>
使用方式1：写全路径
action="http://www.aa7a.cn/user.php"
使用方式2：写后缀(自动补全IP和PORT)
action = "user.php"
使用方式3：啥也不写(朝网页所在的地址提交)
action = ""
'''URL：统一资源定位符(网址)'''
input标签
获取用户各种类型数据的标签(HTML里面的变形金刚)
很多表单元素都是由一个个的 input 元素组成的。它是自闭合标
签，根据其 type 属性值的不同分为很多种，例如单行文本框、密
码框、单选按钮、复选框、隐藏域、文件上传域、普通按钮、提交按
钮以及重置按钮等。我们先来看一下它的语法格式：
<input type="表单类型" />
| 常用属性值 | 说明 |
|---|---|
| text | 表示单行文本框 |
| password | 表示密码框 |
| data | 日历展示 |
| radio | 表示单选按钮 |
| checkbox | 表示复选框 |
| 邮箱格式数据 | |
| file | 表示文件上传域 |
| submit | 表示带提交功能的按钮 |
| reset | 重置页面填写的数据 |
| button | 表示普通按钮 |
ps:
radio
可以通过添加checked="checked"设置默认值,如果属性名和属性值相同 可以简写checked
checkbox
可以通过添加checked="checked"设置默认值,如果属性名和属性值相同 可以简写checked
select标签
语法结构
<select name="" id="">
<option value=""></option>
</select>
一个个的下拉选项是一个个option标签
默认是单选 也可以添加multiple变成多选
textarea标签
获取大段文本内容
语法结构：
<textarea name="desc"></textarea>
lable标签
专门给input标签配文字说明 也可以不使用
方式1
<label for="d1">用户名:</label>
<input type="text" id="d1">
方式2
<label>用户名:
<input type="text">
</label>
input标签中的name和value属性
"""
input标签中有两个非常重要的属性
1.name属性
类似于字典的key(前端程序员写)
2.value属性
类似于字典的value(用户自己传)
如果标签是选择类型的 那么还需要前端程序员自己填写value
用于区分具体数据含义
ps:我们在编写input标签的时候应该添加name属性
"""
代码一览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<!-- input方法-->
<div>
<lable>用户名:
<input type="text" name="username">
</lable>
</div>
<div>密码:
<input type="password" name="password">
</div>
<div>
生日：
<input type="date" name="birthday">
</div>
<div>性别:
男<input type="radio" name="gender" value="male" checked=checked>
女<input type="radio" name="gender" value="female">
其他<input type="radio" name="gender" value="others">
</div>
<div>爱好：
篮球<input type="checkbox" name="bobby" value="basketball">
足球<input type="checkbox" name="bobby" value="football">
排球<input type="checkbox" name="bobby" value="valleyball">
</div>
<div>邮箱：
<input type="email" name="email">
</div>
<div>上传文件：
<input type="file" name="sing_file">
</div>
<div>多个文件：
<input type="file" multiple name="files_list">
</div>
<!-- 下拉框-->
<div>省市
<select name="brovince" id="">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="SZ">深圳</option>
</select>
</div>
<div>多选框：
<select name="jiangli" id="" multiple>
<option value="QQ">亲亲</option>
<option value="BB">抱抱</option>
<option value="JGG">举高高</option>
</select>
</div>
<!-- textarea便签-->
<div>个人介绍
<textarea name="desc" id="" cols="30" rows="10"></textarea>
</div>
<div>
<input type="submit" value="提交">
<button>点我也可以提交</button>
<input type="reset" value="重置">
<input type="button" value="普通按钮(默认没任何功能)">
</div>
</form>
</body>
</html>
实际运行效果：
![日常微信聊天表情包[我背锅还不行嘛]](https://wx2.sinaimg.cn/mw690/006HJgYYgy1h1b15nqbscj30u00u0dh1.jpg)
网络请求方式
最常见的两种网络请求方式
1.get请求
朝服务端索要数据
2.post请求
朝服务端提交数据
GET和POST区别
# 两种请求都可以携带数据
get请求是在url后面通过?组织数据
那刚才的例子来举例，在点击前提交按钮之后，网址'''http://localhost:63342/day39/from%E8%A1%A8%E5%8D%95.html?username=tuzi&password=321321&birthday=2022-04-13&gender=male&bobby=basketball&bobby=football&bobby=valleyball&email=1831853664%40qq.com&sing_file=&files_list=&brovince=BJ&desc=asddfjlkhgvkjdfng.%2Cmvndf.glhbn'''
post请求是在请求体中组织数据
HTTP协议请求数据格式
'''
get请求虽然可以携带数据 但是一般只用于不重要的数据携带
并且get请求携带数据的大小有限制 最多只能携带2KB左右
'''
form表单中有一个method属性 用于控制提交的方式
有两个选项 默认是get请求
选择GET和POST的建议
1.如果要传递大量数据，比如文件上传，只能用POST请求
2.GET的安全性比POST要差些，如果包含机密\敏感信息，建议用POST
3.如果仅仅是索取数据（数据查询），建议使用GET
4.如果是增加、修改、删除数据，建议使用POST
![日常微信聊天表情包[我背锅还不行嘛]](https://wx2.sinaimg.cn/mw690/006HJgYYgy1h1b15y9sfij309q09it8n.jpg)
CSS简介
'''
CSS是层叠样式表(Cascading Style Sheets)的简称。有时我们也会称之为CSS样式表或级联样式表。
CSS也是一种标记性语言。
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。
HTML主要做结构，显示元素内容。
CSS美化HTML布局网页。
CSS最大价值：由HTML专注做结构呈现，样式交给CSS，即 结构（HTML）与样式（CSS）相分离。'''
CSS语法结构
选择器 {属性名1:属性值1;属性名2:属性值2}
'''
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文":"分开'''
语法注释
/*注释内容*/
一个正常的网页css样式是非常多的 就算专门开设css文件存储也很乱
这个时候就可以在css文件中通过注释来辅助辨别与查找
eg:
/*博客园样式表*/
/*导航条样式*/
/*左侧栏样式*/
/*右侧栏样式*/
多种引入css的方式
1.head内style标签内部直接编写css代码
'''<style>CSS代码</style>'''
建议在小白学习阶段可以使用 方便查看
2.head内link标签引入外部css文件
'''<link rel="stylesheet" href="文件路径">'''
工作中一般使用的都是link形式 符合标准
3.标签内部通过style属性直接编写
第三种也称之为"行内式"是最不推荐使用的一种方式
因为它会将HTML和CSS柔和到一起 增加了耦合度
eg:'''<h1 style="color: red">这是几个字</h1>'''
CSS查找标签之基本选择器(重要)
# 1.标签选择器(范围查找)
直接通过标签名查找标签
h1 {
color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/
}
# 2.类选择器(范围查找)
通过标签的class属性查找标签(关键性符号是句点符)
.c1 {
color: greenyellow; /*将所有class属性中含有c1的标签内部字体颜色改为亮绿色*/
}
'''
优点：可以为元素对象定义单独或相同的样式，可以选择一个或多个标签
注意：
类选择器使用"."(英文点号)进行标识，后面紧跟类名(自定义)
长名称或词组可以使用中横线来为选择器命名
不要纯数字、中文等命名，尽量使用英文字母来表示
'''
# 3.id选择器(精确查找)
通过标签的id属性查找标签
#d1 {
color: orange;
}
'''
注意：
元素的id值是唯一的，只能对应于文档中的某一个具体的元素
用法基本和类选择器相同
'''
# 4.通用选择器(了解 几乎不用)
通配符选择器用*号表示，*就是所有的，是所有选择器中作用范围最广的，能匹配页面中的所有元素
查找所有的标签
* {
color: blue;
}
css基础选择器总结
| 选择器 | 作用 | 缺点 | 用法 |
|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签 | 不能差异化选择 | div |
| 类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | .nav |
| id选择器 | 一次只能选择一个标签 | 只能使用一次 | #nav |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | * |
![日常微信聊天表情包[我背锅还不行嘛]](https://wx2.sinaimg.cn/mw690/006HJgYYgy1h1b17phi5aj30u00ts76b.jpg)
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:判断的时候一定要看层级关系
![日常微信聊天表情包[我背锅还不行嘛]](https://wx2.sinaimg.cn/mw690/006HJgYYgy1h1b181ct0cj30qo0qo75x.jpg)
四大组合选择器类型
儿子选择器
/*关键符号是大于号*/
#d1 > span { 查找id是d1标签内部所有的儿子span
color: red;
}
后代选择器
/*关键符号是空格*/
#d1 span { /*查找id是d1标签内部所有的后代span*/
color: red;
}
毗邻选择器
/*关键符号是加号*/
#d1 + a { /*查找id是d1标签同级别下面紧挨着第一个a标签*/
color: red;
}
弟弟选择器
/*关键符号是小波浪号*/
#d1 ~ a { /*查找id是d1标签同级别下面所有a标签*/
color: red;
}
代码一览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*儿子选择器 查找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;
}
</style>
</head>
<body>
<div id=d1>div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
<a href="">11</a>
<a href="">22</a>
<a href="">33</a>
</body>
</html>
属性选择器
# 根据标签内部的属性名和属性值查找标签(关键符号是中括号)
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;
}
鼠标放上去后：
![日常微信聊天表情包[我背锅还不行嘛]](https://wx2.sinaimg.cn/mw690/006HJgYYgy1h1b183nhjqj30j60jjq3n.jpg)
