Css form form with the distal end

form表单(******)
        能够获取用户输入(输入,选择,上传的文件)
        并且将用户输入的内容全部发送给后端
        
        参数
            action  控制数据提交的地址
                三种书写方式
                    1.不写  默认就是朝当前这个页面所在的地址提交数据
                    2.写全路径(https://www.baidu.com)
                    3.只写路径后缀(/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就类似于是前端的变形金刚
            根据typy参数的不同 展示不同的功能
                text        普通文本
                password    输入的内容 会变成密文
                date        日期
                radis       单选圆圈
                checkbox    多选 打钩
                hidden      隐藏
                file        传文件
                
                button      普通按钮 没有任何意义 然后却是用的最多的 你可以给它绑定js事件
                reset       重置按钮
                submit      提交按钮 能够自动触发form表单提交数据的动作
            
            
        select标签 下拉框
            一个个的option标签就是一个个的选项
            
            默认是单选
            你可以给select标签加一个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的时候 都会单独写一个css文件 里面只有css代码
        /*这是小米网站首页的css样式文件*/

        /*通用样式*/


        /*导航条样式*/


        /*轮播图样式*/
        
    css的语法结构
        选择器 {属性1:属性值1}
        
    
    css的三种引入方式
        1.通过link标签引入外部的css文件(最正规用法)
            <link rel="stylesheet" href="02%20小米css样式.css">
        2.直接在html页面上的head内通过style标签直接书写css代码
            <style>
                h1 {
                    color: green;
                }
            </style>
        3.行内式(直接在标签内部通过style属性直接书写)  不推荐使用
            <h1 style="color: orange">我是Oscar</h1>
        
    
    我们需要先学习 如何查找标签
    然后在学习如何修改样式
    
    
    css查找 很重要 只要你学会了css的查找  后面js jQuery的标签查找都是一个原理
    
    基本选择器
        元素选择器
        
        id选择器
        
        类选择器
        
        通用选择器
    
    组合选择器
        div span
        
        div>span
        
        div+span
        
        div~span
    
    属性选择器
        补充
            任何的标签都有自己的默认的属性 id  class
            标签还支持你自定义任何多的属性(也就意味着可以让标签帮你携带一些额外的数据)(******)
        
    
    伪类选择器
        a标签有四种状态
            1.没有被点击过
            2.鼠标悬浮上面
            3.点击之后不松手
            4.点击之后 再回去
    
        我们将input框鼠标点进去之后的那个状态叫做 input获取焦点   聚焦 focus
        鼠标移出去之后的状态 叫做input框失去焦点 
        
    伪元素选择器  (清除浮动带来的负面影响)
        可以通过css添加文本内容
        
    
    选择器优先级
        1.选择器相同的情况下 引入方式不同
            遵循就近原则 谁离标签更近 就听谁的
        
            
        2.选择器不同的情况下 
            行内选择器  >   id选择器(其次)  >    类选择器(使用最频繁)  >  元素选择器

Guess you like

Origin www.cnblogs.com/jinhongquan/p/11850385.html