form表单, css1

目录

• form表单
  • form标签
  • input标签
  • button标签
  • select标签---下拉框选择
  • textarea标签---多行普通文本
• CSS简介
  • CSS: 层叠样式表
  • 基本选择器
    • 元素选择器
    • id选择器
    • 类选择器
    • 通用选择器
    • 组合选择器
    • 属性选择器
    • 分组与嵌套
    • 伪类选择器
  • 选择器优先级

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>
  

伪类选择器

• 标签有四种状态

  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选择器 > 类选择器 >元素选择器(标签选择器)