前端02 form表单和css查找

目录

• form表单
  • input
  • select
  • textarea
• css
  • css的三种引入方式
  • 基本选择器
  • 组合选择器
  • 属性选择器
  • 伪类选择器
  • 伪元素选择器 (清除浮动带来的负面影响)

form表单

能够获取用户输入输出，并且能将用户输入的内容发给后端

<form action="" method="">

参数：

1. action 控制数据提交的地址

不写默认就是朝当前页面所在的地址发送请求，写全路径就是向路径地址发送，也可以只写路径的后缀

2. 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>

基本选择器

1. 元素选择器
2. id选择器
3. 类选择器
4. 通用选择器

组合选择器

div span

div>span

div+span

div~span

属性选择器

任何的标签都有自己的默认的属性 id class

标签还支持你自定义任何多的属性(也就意味着可以让标签帮你携带一些额外的数据)(******)

伪类选择器

a标签有四种状态

1. 没有被点击过
2. 鼠标悬浮上面
3. 点击之后不松手
4. 点击之后 再回去

我们将input框鼠标点进去之后的那个状态叫做 input获取焦点 聚焦 focus
鼠标移出去之后的状态 叫做input框失去焦点

伪元素选择器 (清除浮动带来的负面影响)

可以通过css添加文本内容

选择器优先级

1. 选择器相同的情况下 引入方式不同,遵循就近原则 谁离标签更近 就听谁的
2. 选择器不同的情况下

行内选择器 > id选择器(其次) > 类选择器(使用最频繁) >