今日内容

  • 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:下拉列表


注意事项:

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

##### 3.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代码
如:

hello css

##### 3.外部样式

1.定义css资源文件。

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

div{

color:green;

}

hello css
hello css

注意:

- 1,2,3种方式 css作用范围越来越大

- 1方式不常用,后期常用2,3

- 3种格式可以写为:


##### 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:清除右侧浮动,即前一个元素如果是右浮动,则不受影响