day51
form表单
能够获取用户输入（输入，选择上传的文件）
并且将用户输入的内容全部发送给后端
参数
action
控制数据提交的地址
三种书写方式
- 不写 默认就是朝当前这个页面所在的地址提交数据
- 写全路径 （https://www.baidu.com)
- 只写路径后缀 (/index/)
method
控制数据提交的方式
get form表单默认是get请求
post 提交数据
通常情况下input需要结合label一起使用
<label for = "d1">用户名:<input type="text" id="d1"></label>
绑定id值 之后点击label标签内任何的位置都可以自动选中input框
<label for ="d2">用户名:</label>
<input type ="text" id="d2">
form表单中的input就类似于前端的变形金刚
根据type参数的不同 展示不同的功能
text：普通文本
password：输入的 容会变成密文
date：日期
radio：单选圆圈
checkbox:多选打钩
hidden:隐藏
file:转文件
button：普通按钮 没有任何意义，然后却是用的最多的，你可以给他绑定js事件
reset:重置按钮
submit：提交按钮，能够自动触发form表单提交数据的动作
select标签 下拉框
一个个的option标签就是一个个的选项
默认是单选，可以给加一个multiple参数就可以变成多选
textarea标签 获取大段文本
input标签可以加disable属性 禁用该input框
input标签可以加value属性 设置默认值
选择的标签 如何默认选中
radio
checkbox
checked='checked'当属姓名和属性值相同的时候，可以只写属性名
能够触发form表单提交数据的动作有两个标签可以
input标签 type = submit
button标签
所有获取用户输入的标签 都应该有name属性
name属性就类似于字典的 key
input框获取的用户输入都会放到input框的value属性中
针对选择框 传到后端的数据 由value属性决定
form表单如果要提交文件数据 必须修改以下参数
enctype="multipart/form-data"
CSS
层叠样式表
用来控制html标签样式的
注释
/*单行注释*/
/*
多行注释1
多行注释2
*/
css的语法结构
选择器{属性1：属性值1}
css的三种引入方式
-
通过
link标签引入外部的css文件（最正规用法）<link rel = "stylesheet" href="02%20小米css样式.css"> -
直接在html页面上的head内通过
style标签直接书写css代码<style> h1{ color:green; } </style> -
行内式（直接在标签内部同style属性直接书写） 不推荐使用
<h1 style ="color:orange">我是Oscar</h1>基本选择器
元素选择器
id选择器
类选择器
通用选择器
组合选择器
div span div>span div+span div~span属性选择器
补充
任何的标签都有自己默认的属性
id,class标签还支持自定义任何多的属性
伪类选择器
a标签有四种状态
- 没有被点击过
- 鼠标悬浮上面
- 点击之后不松手
- 点击之后，再返回查看
我们将input框鼠标点进去之后的状态叫做 input获取焦点 或 聚焦 focus
鼠标移出去之后的状态 叫做 input框失去焦点
伪元素选择器（清除浮动带来的负面影响）
可以通过css添加文本内容
选择器优先级
-
选择器相同的情况下 引入方式不同
遵循就近原则 谁离标签更近 就听谁的
-
选择器不同的情况下
行内选择权 > id选择器（其次）> 类选择器（使用最频繁）> 元素选择器
