form表单
能够获取用户输入输出,并且能将用户输入的内容发给后端
<form action="" method="">
参数:
- action 控制数据提交的地址
不写默认就是朝当前页面所在的地址发送请求,写全路径就是向路径地址发送,也可以只写路径的后缀
- method 控制提交的提交方式,默认是以get方式提交,还可以post方式提交
input
通常情况下,input需要结合label表签一起使用
<label for="d1">用户名:<input type="text" id="d1"></label>
form表单中的input 的参数是可以改变的,可选的参数如下
type功能 | 功能 |
---|---|
password | 输入的内容会变成密文 |
text | 普通文本 |
date | 日期,会自动生成一个日历供选择 |
radio | 出现一个单选的圆圈 |
checkbox | 多选的勾选框 |
hidden | 可以隐藏内容 |
file | 可以上传文件 |
button | 生成一个普通的按钮 |
reset | 生成一个重置按钮 |
submit | 生成一个提交按钮 |
input标签里面可以加上disable参数,禁用input框
还可以添加value 设置默认值
<button>我也可以提交</button>
这个标签也可以代替 <input type="submit" value="提交">
进行提交
form表单如果要提交文件数据 必须修改以下参数
enctype="multipart/form-data"
select
下拉框标签
` `
option 标签就是一个个的选项
默认是单选,可以在select标签里面给一个multiple参数,这样他就可以多选
textarea
获取大文本框的标签
<textarea name="" id="" cols="30" rows="10"></textarea>
**所有用户输入的标签都应该带有name属性,因为在前台给后台传数据时是通过字典传输,而name就是字典的key
css
css的三种引入方式
1.通过link标签引入外部的css文件(最正规用法)
<link rel="stylesheet" href="css样式.css">
2.直接在html页面上的head内通过style标签直接书写css代码
<style>
h1 {
color: green;
}
</style>
3.行内式(直接在标签内部通过style属性直接书写) 不推荐使用
<h1 style="color: orange">这是一个标题</h1>
基本选择器
- 元素选择器
- id选择器
- 类选择器
- 通用选择器
组合选择器
div span
div>span
div+span
div~span
属性选择器
任何的标签都有自己的默认的属性 id class
标签还支持你自定义任何多的属性(也就意味着可以让标签帮你携带一些额外的数据)(******)
伪类选择器
a标签有四种状态
- 没有被点击过
- 鼠标悬浮上面
- 点击之后不松手
- 点击之后 再回去
我们将input框鼠标点进去之后的那个状态叫做 input获取焦点 聚焦 focus
鼠标移出去之后的状态 叫做input框失去焦点
伪元素选择器 (清除浮动带来的负面影响)
可以通过css添加文本内容
选择器优先级
- 选择器相同的情况下 引入方式不同,遵循就近原则 谁离标签更近 就听谁的
- 选择器不同的情况下
行内选择器 > id选择器(其次) > 类选择器(使用最频繁) >