表单标签、选择器进阶、背景属性

表单标签、选择器进阶、背景属性

表单标签

注册和登录
目的：收集用户信息,能够输入内容

• input标签

  • text

    • 文本输入类型

    • <input type="text" name="username">
      

  • password

    • 密码类型

    • <input type="password" name="password">
      

  • radio

    • 单选按钮
    • 同一组单选框 name 必须相同

    • <input type="radio" name="sex" value="boy">男
      <input type="radio" name="sex" value="girl">女
      

  • checkbox

    • 复选框

    • <input type="checkbox" name="course" value="HTML">HTML
      <input type="checkbox" name="course" value="CSS">CSS
      

  • button

    • 普通按钮

    • <input type="button" value="按钮">
      

  • submit

    • 提交按钮

    • <input type="submit" value="提交">
      

  • reset

    • 重置按钮

    • <input type="reset" value="重置">
      

  • file

    • 文件上传

    • <input type="file" name="file">
      

  • image

    • 图像形式的提交按钮

    • <input type="image" src="submit.jpg" alt="submit">
      

  • hidden

    • 隐藏域

    • <input type="hidden" value="111" name="hidden">
      

• select

  • 下拉框

  • <select name="area">
        <option value="HTML">html</option>
        <option value="JS">js</option>
        <option value="CSS">css</option>
    </select>
    

• textarea

  • 文本域

  • <!-- 设置css属性 resize:none; 防止改变大小 -->
    <textarea name="info" cols="30" rows="10" style="resize: none;"></textarea>
    

• label

  • <!-- label的for属性要对应相应表单的id -->
            <input type="radio" name="sex" value="boy" id="boy"><label for="boy">男</label>
            <input type="radio" name="sex" value="gril" id="gril"><label for="gril">女</label>
    

常用表单的属性

action

• action属性定义提交表单时执行的动作。通常表单会提交到web服务器网页，如果省略会被提交到当前页面

  • <!-- action 如果为空，是提交到当前页面，还可以提交到其他页面 -->
    <form action="./demo.html">
        <input type="text" name="username">
        <input type="submit">
    </form>
    

method

• get

  • 从服务器获取数据, 数据量小， 不安全的
  • get是默认方法

• post

  • 向服务器传递数据，相对安全
  • 数据量大

  • <form action="" method="POST">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit">
    </form>
    

• checked

  • 应用到单选框，复选框,表示默认选中

  • <input type="checkbox" checked>
    <input type="checkbox" name="hobby" value="game" checked>
    

• selected

  • 下拉框

  •  <!-- selected 默认选中，用于下拉框
        size 显示下拉框显示的个数，默认为1 -->
    <select name="area" size="2">
        <option value="HTML">html</option>
        <option value="JS" selected>js</option>
        <option value="CSS">css</option>
    </select>
    

• value

  • <input type="text" name="name" value="html5">
    

• readonly 只读，可以提交

  • <input type="text" name="name" value="html5" readonly>
    

• disabled 禁用，用于输入框不可以提交，还可以禁用按钮

  • <input type="text" name="name" value="html5" disabled>
    

• maxlength 限定输入的最大长度

  • <input type="text" name="username" maxlength="6">
    

• size 显示下拉框显示的个数

  •  <!-- size 显示下拉框显示的个数，默认为1 -->
    <select name="area" size="2">
        <option value="HTML">html</option>
        <option value="JS" selected>js</option>
        <option value="CSS">css</option>
    </select>
    

• style=“resize: none;” 设置为不能改变文本域大小

  • <!-- resize: none 设置为不能改变尺寸 -->
    <textarea name="" cols="30" rows="10" style="resize: none;"></textarea>
    

• placeholder 输入框提示

  •     <input type="text" maxlength="11" name="phone" placeholder="请输入手机号">
    

选择器进阶

• 群组选择器

  • h1, h2, h3 {
                background-color: red;
            }
    

  • 选择器之间用逗号分隔

• 交集选择器

  • div.red {
                background-color: yellow;
            } 
    <div class="box1">1</div>
    <span class="box1">3</span>
    

  • 由两个以上单一选择器组成

• 子代选择器

  • ul li > a {
                color: red;
            }
    

  • 子代选择器 ,子 指的是 亲儿子 大于号分割 此时的a 一定是 li 的亲 儿子

• 后代选择器

  • ul li a {  
                color: red;
            }
    

  • ul里面所有的a标签

• 伪类链接选择器

  • a:link 正常，未访问过的链接
  • a:visited 访问过后
  • a:hover 鼠标悬停
  • a:active 鼠标点击那一刻

盒模型的概念

• 概念：css盒模型本质是一个盒子，封装周围的html标签，它包括：外边距，边框，填充（内边距）和实际内容
• 内容 content
  • width: 设置宽度
  • height: 设置高度 auto 10px 2em 50%
• 内边距（填充区域）padding ：
  • 单边内边距：padding-top padding-bottom padding-left padding-right
  • 简写
    • 一个值：表示四个方向的内边距值。
    • 两个值：分别表示上下，左右的内边距值
    • 三个值：分别表示上，左右，下的内边距值
    • 四个值：分别表示上，右，下，左的内边距值
• 边框 border
  • border-width
  • border-style
    • none 定义无边框
    • dotted 定义点状边框
    • dashed 定义虚线边框
    • solid 定义实现边框
    • double 定义双线。双线的高度等于border-width的值
  • border-color
• 边框简写方式：border: 1px solid red;
• 外边距 margin :
  • 单边外边距 ： margin-top margin-bottom margin-left margin-right
  • 简写：
    • 一个值：表示四个方向的外边距值。
    • 两个值：分别表示上下，左右的外边距值
    • 三个值：分别表示上，左右，下的外边距值
    • 四个值：分别表示上，右，下，左的外边距值
• 外边距传递和塌陷
  • 给父级设置边框或内边距
  • 给父级设置 overflow属性的属性值不为默认的visible,实际上是触发BFC
• max-width和min-width:
  • 用来设置元素的最大宽度和最小宽度
• max-height和min-height:
  • 用来设置元素的最大高度和最小高度

边框运用

• 四个三角形拼成的正方形

  •     .box4 {
            width: 100px;
            height: 100px;
            border-width: 50px;
            border-style: solid;
            border-color: red yellow green blue;
        }
    

• 三个三角形拼成的正方形

  •     .box3 {
           width: 0;
           height: 0;
           border-width: 100px 200px 100px 0px;
           border-style: solid;
           border-color: red yellow green;
       }
    

• 两个三角形拼成的正方形

  •     .box2{
            width: 0;
            height: 0;
            border-width: 200px 200px 0 0;
            border-style: solid;
            border-color: red yellow green;
        }
    

• 一个三角形

  •   .box1{
           width: 0;
           height: 0;
           border-width: 100px;
           border-style: solid;
           border-color: red transparent transparent transparent;
       }
    

背景属性

• background-color : red
• background-image: url(./img/bg.jpg)
• background-repeat: no-repeat
  • no-repeat 不平铺
  • repeat 默认，平铺
• background-size: 50% 50%
  • 100px 100px 数值
  • 50% 50% 百分比
• background-position: 50% 50%
  • 100px 100px 数值
  • 50% 50% 百分比
  • top right 英文单词
  • 默认在左上角显示，当只设置一个值时，另一个默认为auto。
• background:red url(./img/bg.jpg) no-repeat top