1. 技术文章
  2. day43总结

day43总结

由 こ雲淡風輕ζ 提交于 2019-12-04 19:35:48

目录

form表单

  • 能够获取用户输入的信息(文本信息, 选择信息, 上传的文件信息), 并将用户输入的信息全部发送给后端

form标签

  • 参数:

    • action, 控制数据提交的地址, 三种书写格式:
      • 不写, 默认朝当前页面所在的地址提交数据
      • 写全路径 (https://www.baidu.com)
      • 只写路径后缀 (/index/), 前面地址固定, 会自动根据后缀识别并添加前面地址
    • method, 控制数据提交的方式
      • get, form表单默认是get请求
      • post
    • enctype: encodetype, 编码类型
      • multipart/form-data是指表单数据有多部分构成，既有文本数据，又有文件等二进制数据
      • enctype的默认值不能用于文件上传
    <form action="" method="post" enctype="multipart/form-data">
    <!--...-->
</form>

input标签

  • 通常情况下input需要结合label一起使用

        <p>
        <label for="1">
            注册名:<input type="text" name="user_name" value="json" disabled id="1">
        </label>
    </p>
    • 绑定id值之后点击label标签内的任何位置都可以自动选中input框
    • value: 设置默认值
    • disable: 使输入框不可选取

  • input标签中的type参数, 根据type参数的不同值展示不同的input方式:

    • text: 单行普通文本

    • password: 输入的内容会变成密文

    • date: 日期

    • radio: 单选圆圈

          <p>
        性别:
        男 <input type="radio" name=gender value=male>
        女 <input type="radio" name=gender value=female>
    </p>
      • 所有获取用户输入的标签, 都应该有name属性, 类似于字典的key
      • 用户的输入信息会放到对应标签中的value属性中
      • type = "radio" 指定name属性后, 只可点选一个, 否则可点选两个
      • type = "radio" 默认value为on

    • checkbox: 打钩多选

          <p>
        爱好:
        篮球 <input type="checkbox">
        足球 <input type="checkbox">
    </p>
      • 标签默认选中checked = "checked"
      • 当属性名和属性值相同的时候, 可以只写属性名checked

    • hidden: 隐藏

    • file: 传文件

    • button: 普通按钮, 没有任何意义, 但是用的最多, 可以绑定js事件

          <p><input type="button" value="蔡启龙的普通按钮"></p>

    • reset: 重置按钮

          <p><input type="reset" value="重置按钮"></p>

    • submit: 提交按钮, 能够触发form表单提交数据的动作

          <p><input type="submit"></p>

    • file: 上传文件

          <p>个人简历: <input type="file" name="user_resume"></p>

    • hidden: 隐藏输入框

          <p>猜猜我在哪: <input type="hidden"></p>

button标签

  • 和input标签中的type = "submit"效果一样, 能够触发表单提交数据

select标签---下拉框选择

单选:

    <p>
        省份:
        <select>
            <option>上海</option>
            <option>北京</option>
        </select>
    </p>

多选:

    <p>
        前女友:
        <select multiple>
            <option>小苍</option>
            <option>小波</option>
        </select>
    </p>

textarea标签---多行普通文本

    <p>自我介绍: <textarea name="多行文本" cols="30" rows="10"></textarea></p>

CSS简介

CSS: 层叠样式表

  • 用来控制html标签样式的

  • 注释, 通常在写css代码的时候, 都会

    /*单行注释*/

/*
多行注释1
多行注释2
*/

/*这是小米网站首页的css样式文件*/

/*通用样式*/

/*导航条样式*/

  • css的语法结构: 选择器 {属性1: 属性值1}

  • css的三种引入方式:

    1. 在head内通过link标签引入外部的css文件(最正规的引入方式)

          <link rel="stylesheet" href="我的第一个CSS文件.css">

    2. 在html页面上的head内通过style标签直接书写css代码

          <style>
           h1 {
               color: green;
           }
    </style>

    3. 行内式, 在标签内部通过style属性直接书写(不推荐)

      <h1 style="color: yellow">我是奥斯卡影帝</h1>

    先学习如何查找标签, 再学习如何修改样式, 后面的js, jQuery的标签查找原理都是一样

基本选择器

  • 使用选择器, 标签中的id命名不能以数字开头

元素选择器

    <style>
        /*让页面上所有的span标签变成红色, 标签选择器直接写标签名字即可*/
        span {
            color: red;
        }
    </style>

<span>span标签</span>
<div>div标签
    <span>div中的span标签</span>
</div>
<p>p标签
    <span>p中的span标签</span>
</p>

id选择器

  • 语法: #id {}

  • 作用于对应id值标签内的全部内容

        <style>
        #d1 {
            color: blue;
        }
    </style>

<span>span标签</span>
<div id="d1">div标签
    <span>div中的span标签</span>
</div>
<p>p标签
    <span>p中的span标签</span>
</p>

类选择器

  • 语法: .类值 {}

  • 一个标签中可以有多个类

        <style>
        .c1 {
        color: aqua;
        }
    </style>

<div id="d1" class = "c1 c2 c3">div标签
    <span>div中的span标签</span>
</div>

通用选择器

* {color: yellow;}

组合选择器

  • 后代选择器, 只要在标签内都算作该标签的后代, 语法: div span {}, 空格表示后代
  • 儿子选择器, 语法: div > span {}, 大于号表示儿子(即内部第一层)
  • 弟弟选择器, 同级别下面所有的, 语法: div ~ span {}
  • 毗邻选择器: 同级别下面紧挨着的, 语法: div + span {}
    <style>
        div span {
            color: red;
        }
    </style>

    <style>
        div > span {
            color: red;
        }
    </style>

    <style>
        div ~ span {
            color: red
        }
    </style>

    <style>
        div + span {
            color: red;
        }
    </style>

<span>span标签</span>
<span>span标签</span>
<div>div标签
    <span>div中的span标签</span>
    <p>div中的p标签
        <span>div中的p中的span标签</span>
    </p>
    <span>div中最下面的span标签</span>
</div>
<span>span标签</span>
<span>span标签</span>

属性选择器

  • 任何标签都有自己默认的属性, 例如: id, class

  • 标签还支持自定义任何多的属性, 也就意味着标签可以携带一些额外的数据

    1. 含有某个属性名的标签
    2. 含有某个属性名兴趣属性值是...的标签
    3. 找p标签并且含有某个属性名并且属性值是...的标签
        <style>
        [user_pwd] {
            color: pink;
        }
    </style>

    <style>
        [user_name = 'jason'] {
            color: blue;
        }
    </style>

    <style>
        span[user_name = 'jason'] {  /*span和中括号之间不能有空格*/
            color: green;
        }
    </style>

<p user_name='jason'>p_user_name_jason</p>
<p user_name='Oscar'>p_user_name_Oscar</p>
<span user_name="jason">span_user_name_jason</span>
<span user_pwd="123">span_user_pwd_123</span>

分组与嵌套

  • 逗号表示同级并列关系

        <style>
        div, span, p {  /*分组*/
            color: blue;
        }
    </style>

    <style>
        #d1, span, .c2 {  /*嵌套*/
            color: purple;
        }
    </style>

<div id="d1">div标签</div>
<span calss="c1">span标签</span>
<p class="c2">p标签</p>

伪类选择器

  • a标签有四种状态

    1. 没有被点击过
    2. 鼠标悬浮上去
    3. 点击之后不松手
    4. 点击之后再回去
        <style>
        a:link {  /*a与link之间不能有空格*/
            color: red;
        }

        a:hover {
            color: deeppink;
        }

        a:active {
            color: blue;
        }

        a:visited {
            color: aqua;
        }
    </style>

<a href="https://www.qq.com">点我点我</a>
    1. 我们将input框鼠标点进去之后的状态叫做input框获取焦点, 也叫聚焦(focus)
    2. 鼠标一出去之后的状态, 叫做input框失去焦点
        <style>
        input:focus {  /*input和focus之间不能有空格*/
            background-color: aqua;
        }
    </style>

<input type="text">

选择器优先级

  1. 选择器相同的情况下, 引入方式不同
    • 遵循就近原则, 离标签近的优先级高
  2. 选择器不同的情况下
    • 行内选择器 > id选择器 > 类选择器 >元素选择器(标签选择器)
标签
input
jquery name选择器
span标签
css第一个元素
css选择器
css样式
css
span
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!