HTML表单、CSS

今日内容

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


注意：

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

今日内容

1 HTML表单

1.1 表单标签

1.2 表单项

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

添加新评论

微主页

最新文章

最新回复

标签

归档

其他