前端微讲解(二)
前端微讲解(二)
form表单
获取前端用户数据并发给后端服务器
<form action = ""></form> # 需要在form标签内部编写获取用户数据标签
1.action属性
action属性控制数据的提交地址
# 方式1:写全路径
action = "http://www.aa7a.cn/user.php"
# 方式2:只写后缀，action属性能够自动补全IP和PORT
action = "user.php"
# 方式3:什么都不写，action属性能够自动朝网页所在的地址提交
action = ""
2.input标签
获取用户各种类型数据的标签
# type属性
text:文本
password:密文展示
date:日历展示
redio:单选，可以通过添加checked = "checked"设置默认值，如果属性名与属性值相同，可以简写成checked
checkbox:多选,可以通过添加checked = "checked"设置默认值，如果属性名与属性值相同，可以简写成checked
email:邮箱格式
file:文件数据,可以通过添加multiple属性控制获取单个文件还是多个文件
submit:触发form表单提交数据
resrt:充值页面填写的数据
button:普通按钮，没有任何的功能，但是我们可以添加很多的和功能
3.input标签的两个重要属性
# 1.name属性
类似于字典中的key(前端程序员设置)
# 2.value属性
类似于字典中的value(用户自己传值)
'''如果标签是选择类型的，那么还需要前端程序员自己填写value，用于区分具体数据含义，我们在编写input标签的时候应该添加name属性'''
4.select标签
select是下拉框的标签
<select name="" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
下拉框的一个选项就是一个option标签，默认是单选，也可以添加multiple变成多选。
5.textarea标签
textarea标签可以获取大段文本内容
<textarse name = ""></textarse>
6.lable标签
给input标签添加文字说明，也可以不使用lable标签
# 方式一:
<lable for = "a1">用户名:</lable>
<input type="text" id="a1">
# 方式二:
<lable>
用户名:
<input type="text">
</lable>
7.代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<p>用户名:
<input type="text" name="name">
</p>
<p>
<lable>密码:
<input type="password" name="pwd">
</lable>
</p>
<p>性别:
男<input type="radio" name="gender" value="male"></input>
女<input type="radio" name="gender" value="female" checked></input>
其他<input type="radio" name="gender" value="others"></input>
</p>
<p>爱好:
篮球<input type="checkbox" name="hobay" value="basketball" checked>
足球<input type="checkbox" name="hobay" value="football" checked>
排球<input type="checkbox" name="hobay" value="volleyball">
</p>
<p>生日:
<input type="date" name="birthday">
</p>
<p>邮箱:
<input type="email" name="email">
</p>
<p>单个文件:
<input type="file" name="one_file">
</p>
<p>多个文件:
<input type="file" multiple name="file">
</p>
<p>地址:
<select name="addr" id="">
<option value="78">M78星云</option>
<option value="mo">魔法学院</option>
<option value="bo">伯克利学院</option>
<option value="meng">萌学园</option>
</select>
</p>
<p>个人经历:
<textarea name="desc" id="" cols="30" rows="10"></textarea>
</p>
<p>
<input type="submit" value="注册">
<button>我是一个按钮</button>
<input type="reset" value="点击重置">
<input type="button" value="普通按钮">
</p>
</form>
</body>
</html>
网络请求方式
# 1.get请求
朝服务端索要数据
# 2.post请求
朝服务端提交信息
# 两种请求都可以携带数据
get请求是在url后面通过?组织数据，post请求是在请求体中组织数据，get请求虽然可以携带数据，但是一般只用于不重要的数据携带，并且get请求携带数据的大小有限，最多只能携带2KB左右。
CSS简介
# 1.语法结构
选择器 {属性名: 属性值}
# 2.语法注释
/*注释内容*/
# 3.css的引用方式
1.head内style标签内部直接编写css代码
2.head内link标签引入外部css文件
3.标签内部通过style属性直接编写
CSS查找标签之基本选择器
# 1.标签选择器
直接通过标签名查找标签:
标签名 {属性名: 属性值;}
# 2.类选择器
通过标签的class属性查找标签(关键字符号'局点符'):
.标签名 {属性名: 属性值;}
# 3.id选择器
通过标签的id属性查找标签(关键字符'#'):
# 标签名 {属性名: 属性值;}
# 4.通用选择器
查找所有标签:
* {属性名: 属性值;}
CSS查找标签之组合选择器
# 1.标签关系
<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的后代
# 2.儿子选择器(关键符号是大于号)
# 标签名1 > 标签名2 {属性名: 属性值}
查找id是标签名1内部所有的儿子标签名2
# 3.后代选择器(关键符号是空格)
# 标签名1 标签名2 {属性名: 属性值}
查找id是标签名1内部所有的后代标签名2
# 4.毗邻选择器(关键符号是加号)
# 标签名 + a {属性名: 属性值}
查找id是标签名同级别下紧挨着的第一个a标签
# 5.弟弟选择器(关键符号是小波浪号)
# 标签名 ~ a {属性名: 属性值}
查找id是标签名同级别下的所有a标签
属性选择器
根据标签内部的属性名和属性值查找标签(关键符号是中括号)
# 1.直接通过属性名查找
[type] {属性名: 属性值}
# 2.属性名是type并且值是text的标签
[type = 'text'] {属性名: 属性值}
# 3.属性名是type并且值是text的div标签
div[type = 'text'] {属性名: 属性值}
分组与嵌套
# 1.分组
div,p,span {属性名: 属性值}
查找div或p或span
# 2.嵌套
#标签名1,.标签名2，标签名3 {属性名: 属性值}
查找id是标签名1或者class包含标签名2和标签名3
# 组合
div#标签名:查找id是标签名的div标签
div.标签名:查找class包含标签名的div标签
div #标签名:查找div内部id是标签名的后代标签
# 标签名1 > .标签名2:查找id是标签名1的内部class包含标签名2的儿子标签
伪装选择器
# 1.鼠标悬浮
p:hover {鼠标移动到p标签上方，字体颜色动态修改为橙色
color: orange;
}
# 2.获取焦点
input:focus { 输入框被鼠标左键选中(聚焦)
background-color: black;
}
这里是IT小白陆禄绯，欢迎各位大佬的指点！！！
浙公网安备 33010602011771号