今日内容

  • HTML表单标签
  • CSS

1 HTML表单

1.1 表单标签

  • 表单:用于采集用户输入的数据的。用于和服务器进行交互。
  • form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
  • 作用
    1.规定了用户可以操作的,用来给服务器传递数据的区域
    2.其中可以包含input元素,比如文本字段、复选框、单选框、提交按钮等等
    3.表单和表单元素用于向服务器传输数据
  • 格式

    <form action="路径" method="post">
        <input type="submit"  value="提交"/>
    </form>
  • 常用属性

    • action:规定当提交表单时向何处发送表单数据
    • method:规定用于发送表单数据的 HTTP 方法,一共有7种,其中有2种比较常用,分别为get和post ,默认是get
    • enctype:规定在发送表单数据之前如何对其进行编码
  • get 和 post 的区别

    • get:

      1.请求参数会在地址栏中显示。会封装到请求行中。

      2.请求参数大小是有限制的。

      3.不太安全。

    • post:

      1.请求参数不会再地址栏中显示。会封装在请求体中。

      2.请求参数的大小没有限制。

      3.较为安全。

  • 补充

    1、表单元素标签必须放在表单form中才有效

    2、所有的表单元素都有name属性,后台接收表单元素的值时,就是根据其name属性来接收的

    3、所有的表单元素都有value属性:提交到后台的值

    4、单选按钮和复选按钮必须要有的属性:value属性

    5、单选和复选按钮默认被选中的属性:checked属性

1.2 表单项

1.input:可以通过type属性值,改变元素展示的样式
  • type属性

    • text:文本输入框

      <input type="text" name="fname" value="asdf" size="20" />

      常用属性

      • name:表单元素的名称,必须有name属性,然后后台才可以接收数据
      • value:文本框的默认值,可以不写
      • size:文本框的长度,可以不写
      • maxlength:文本框输入的最大长度,可以不写
      • placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
    • password:密码输入框

      <input type="password" name="psd"  value="123456"/>

      常用属性

      • name:表单元素的名称.必须有name属性,然后后台才可以接收数据
      • value:默认值,可以不写
      • size:长度,可以不写
      • maxlength:最大长度,可以不写
    • radio:单选按钮

      <input type="radio" name="sex" value="男" checked>男

      常用属性

      • name:表单元素的名称.必须有name属性,然后后台才可以接收数据
      • value:默认值
      • checked:单选按钮默认被选中
      • 注意事项:

        //如果想让一组单选按钮只能选中一个,则要求该组单选按钮必须拥有相同的name
        <input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女
    • PS:
      1.要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
      2.一般会给每一个单选框提供value属性,指定其被选中后提交的值
      3.checked属性,可以指定默认值
    • checkbox:复选框

      <input type="checkbox" name="hobby" value="篮球" checked>篮球

      常用属性

      • name:表单元素的名称.必须有name属性,然后后台才可以接收数据
      • value:默认值
      • checked:复选框默认被选中
      • 注意:

        1.一般会给每一个单选框提供value属性,指定其被选中后提交的值

        2.checked属性,可以指定默认值

        3.如果想让多个复选框为一组,则要求该组单选按钮必须拥有相同的name

    • file:文件选择框

      <input type="file" name="file" />
    • hidden:隐藏域,用于提交一些信息。
    •  <input type="hidden" name="capture" value="hidden"/>
    • 按钮:

      • submit:提交按钮。可以提交表单

        <input type="submit"  value="提交表单"/>
      • button:普通按钮

        <input type="button" name="button" value="我是普通按钮"/>
      • image:图片提交按钮

        <input type="image" src="img/regbtn.jpg">
        //  src属性指定图片的路径
    • label:指定输入项的文字描述信息
    • 注意:

      - label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
      

2.select:下拉列表

<select name="from">
    <option value="">---请选择---</option>
    <option value="BEIJNG" >北京</option>
    <option value="TIANJ" selected="selected">天津</option>
</select>

注意事项:

1.<select>标签的name属性:规定下拉列表的名称,必须要有,与表单输入元素一样,后台接收值需要根据该属性来接收;
2.<option>标签的value属性:表单提交时向后台传入的值;
3.下拉列表默认被选中的属性:option标签的selected属性;
4.实际开发中,下拉列表的<option>都是从后台查询出来然后循环出来的

3.textarea:文本域
<textarea name="province" rows="3" cols="20">
//内容。
</textarea>
  • cols:指定列数,每一行有多少个字符
  • rows:默认多少行。
  • 注意事项
    1.name属性必须要有,后台接收值根据该属性来接收;
    2.开始标签和结束标签内的内容即为默认值

2 CSS:页面美化和布局控制

2.1 概念

  • CSS:Cascading Style Sheets 层叠样式表,是用来美化页面用的,以后,所有关于html中长相部分,统统使用css来描述.
  • 层叠:多个样式可以作用在同一个html的元素上,同时生效

2.2 好处

  1. 功能强大
  2. 将内容展示和样式控制分离

    • 降低耦合度,解耦
    • 让分工协作更加容易
    • 提高开发效率

2.3 CSS的使用:CSS与html结合方式

1.内联样式
  • 在标签内使用style属性指定css代码
  • 如:<div style="color:red;">hello css</div>
2.内部样式

在head标签内,定义style标签,style标签的标签体内容就是css代码
如:

<style>
div{
    color:blue;
}
</style>
<div>hello css</div>
3.外部样式

1.定义css资源文件。

2.在head标签内,定义link标签,引入外部的资源文件
如:
a.css文件:

div{
    color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

注意:

  • 1,2,3种方式 css作用范围越来越大
  • 1方式不常用,后期常用2,3
  • 3种格式可以写为:

    <style>
    @import "css/a.css";
    </style>
4.css语法:

格式:

选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    ...
}
// 选择器:筛选具有相似特征的元素

注意:

  • 每一对属性需要使用;隔开,最后一对属性可以不加;
  • 三种方式的权重:外部=内部<行内,外部和内部之间,以先后顺序为准,后书写>前书写。

2.4 CSS选择器

  • 概述: 用来找html标签的.筛选具有相似特征的元素

分类:

  • 基本选择器

    1.元素(标签)选择器:

    语法:标签名{} --> 以标签名作为依据
    例如:

    //要求,所有的h1标签,背景颜色修改为绿色
    h1 {
        background-color: green;
    }
    2.ID选择器:

    语法:#id属性值{} --> 以标签的ID属性为依据
    例如:

    //要求,id属性为aaa的标签,背景颜色修改为红色
    #aaa {
        background-color: red;
    }
    3.类选择器:

    语法:.class属性值{} --> 以标签的class属性为依据
    例如:

    //要求,所有class属性为aclass的标签,背景颜色修改为蓝色。
    .aclass{
        background-color: blue;
    }

    注意:id选择器 > 类选择器 > 元素选择器

  • 扩展选择器:

    4.并列选择器:

    语法:选择器1,选择器2{} --> 多个选择器同时使用,
    例如:

    //要求,把id为aaa的标签,和class为aclass的标签,背景颜色都改为灰色
    .aclass, #aaa {
        background-color: gray;
    }
    5.后代选择器:

    语法:选择器1 选择器2{} --> 选择器1下边的所有选择器2(选择器中间为“空格”)
    例如:

    //要求:所有在div中的h2标签,背景颜色修改为红色
    div h2 {
        background-color: red;
    }    
    6.子元素选择器:

    语法:选择器 > 选择器2 --> 选择器1下边的子辈选择器2(只要儿子不要孙子)
    例如:

    //要求:所有在div中的子辈的h2标签,背景颜色修改为蓝色
    div > h2 {
        background-color: blue;
    }
    7.属性选择器:

    语法:选择器1[属性名=属性值] --> 以标签的属性名和值为依据
    例如:

    //要求:获取input标签,并且要求input标签必须有type属性,而且要求type属性的值必须为text:修改期背景颜色为红色
    input[type='text'] {
        background-color: red;
    }

2.5 属性

1.字体、文本
  • font-size:字体大小

    • color:文本颜色
    • text-align:对其方式
    • line-height:行高
2.背景
  • background:
3.边框
  • border:设置边框,符合属性
4.尺寸
  • width:宽度
  • height:高度
5.盒子模型:控制布局
  • margin:外边距
  • padding:内边距
  • border:边框

    • 默认情况下内边距会影响整个盒子的大小
    • box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
  • 内外边距简写时,要遵从“上右下左”的顺序
6.CSS浮动
  • 浮动指的是脱离当前文档流,可以理解为上升到另外一层
  • 设置浮动:float

    left:向左浮动

    right:向右浮动

  • 清除浮动:clear

    释义:指的是“前一个元素”浮动脱离文档流之后,当前元素不受上一个元素的影响

    取值:

    • left:清除左侧浮动,即前一个元素如果是左浮动,则不受影响
    • right:清除右侧浮动,即前一个元素如果是右浮动,则不受影响
    • both:清除左右两侧的浮动,不管前一个元素是左浮动还是右浮动,均不受影响