• 前端02 form表单和css查找


    form表单

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

    <form action="" method="">

    参数:

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

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

    1. 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选择器(其次) > 类选择器(使用最频繁) >

  • 相关阅读:
    3B1B微分方程系列笔记(一)
    洛谷P1127 【词链】欧拉通路,欧拉回路+dfs
    龟速乘,快速乘法
    单调队列优化O(N)建BST P1377 [TJOI2011]树的序
    洛谷 p4302的dp中的细节讨论
    manacher(马拉车算法)
    博弈论(入门,持续更新)
    洛谷P1295 [TJOI2011]书架 线段树优化dp,单调栈
    洛谷P1712 [NOI2016]区间 尺取法+线段树+离散化
    洛谷 P1131 [ZJOI2007]时态同步
  • 原文地址:https://www.cnblogs.com/lyyblog0715/p/11853679.html
Copyright © 2020-2023  润新知