HTML表单元素及CSS

表单

一、介绍

<form> 标签表示为表单，表单元素是允许用户在表单中输入内容。
属性：action-提交表单的地址
Method-提交表单的方式。属性值：get/post
      Enctype-被提交表单的MIME类型

二、表单组件

组件一般被定义在表单中（<form>标签中）
<input>标签表示输入框，为空标签。
<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。
属性1：type，type 属性规定要显示的 <input> 元素的类型。
属性值：text-表示输入框类型
- value - 表示输入框的值
         * 输入框所输入的文本内容
         * type - 表示输入框的类型
           * text - 表示文本输入框
           * password - 表示密码框
           * button - 表示按钮
           * reset - 表示重置按钮
             - 将表单内组件内容清除效果
           * submit - 表示提交按钮
             - 将当前的表单提交给指定的地址（action）
           * radio - 表示单选框
             -表示一组单选框（name属性）中只能选择一个
           * checkbox - 表示多选框
             -表示一组多选框，允许选择多个
           * file - 表示文件域
             -作用 - 允许选择本地的文件（默认不限制类型）
             -用途 - 多用于文件上传
           -hidden - 表示隐藏域
             -不会被显示在页面中（用户看不到）
             -作用 - 用于存储一些不希望被用户看到的数据

三、下拉列表

<select>标签表示下拉列表
         - 默认 - 表示下拉单选框
         - 属性
           -id - 表示标识
           - name - 表示名称
<option>标签表示下拉列表的选项
             - value - 表示值
<select>标签 - 下拉多选框
         -属性
           - size - 表示下拉列表默认显示选项的个数
           -multiple - 表示多选

四、文本域

<textarea>标签表示文本域
         - 属性
           - cols - 表示列
           - rows - 表示行

五、提交表单

1.实现提交表单的功能
     -定义<form>标签，并且定义表单组件
     -必须定义提交按钮(submit)
     - 必须配合<form>标签的action属性使用
2.method - 表示提交表单的方式
     - get - 默认方式，表单的所有请求数据被添加在请求地址中
       - 请求地址（在标准规范中是有限制的）
         -大小限制 - 无法添加数据量较大的内容
         -未加密(明文)
    - post - 一般建议使用这种
3.提交表单的方式至少两种，分别是get和post
     - 提交表单的方式常用是七种
     -RESTFul API（标准式API）
       - get - 获取
       - post - 修改
       - put - 新增
       - delete - 删除

六、文件上传

1.提交表单方式
- get - 只是将文件名称发送给服务器端
      - 没有实现文件上传功能
- - post - 只是将文件名称发送给服务器端
- enctype属性
  - application/x-www-form-urlencoded - 是<form>标签的默认值
  - 专门用于提交表单组件的内容（数据）为：
     - multipart/form-data - 用于文件上传
2.<input type=file>
     -默认 - 只能选择一个文件
     -选择多个文件 - multiple 属性

CSS

一、内联样式

1.内联样式 - 通过HTML的标准属性 style 实现
  -style="CSS的内容"
  - 问题
    -设置的样式只针对当前HTML元素有效
    -相同样式设定无法被重复使用
    - 并没有将结构与样式有效分离
2.<style></style>标签 -
  1) 内嵌样式表
    -用法 - 该标签中定义CSS的内容
    -好处
     -HTML的结构与样式分离（相对于内联样式）
     -定义的样式可以被重复使用
     -不是针对某个指定HTML元素
    -坏处
     - CSS的内容依旧被定义在HTML页面中
  2) 外联样式表
      <style>既是标签名，也是属性名。

二、MIME类型：

-作用 - 规定当前文档的具体使用类型是什么
-值：
   -html页面 - text/html
   -css文件 - text/css
   -JavaScript文件 - text/javascript
-1.与表单相关的
   - application/x-www-form-urlencoded
   - multipart/form-data
-2.与图片相关的
   - image/png
   - image/jpg
   - image/jpeg
   - image/gif
-3.与文本相关的
   - text/plain

三、CSS选择器

作用：定位HTML页面中的标签
举例：
     h1,h2 {
                color: lightsalmon;
                font-size: 84px;
            }
1.{}-表示声明块/组
2.CSS声明包含：  样式属性：值
3.注意：  :（冒号）和;（分号）都是英文状态下的。
          冒号表示分隔符，分号表示结束符。