CSS笔记——表格元素table单元格合并和妙用（利用table-cell实现块级、多行文本元素水平垂直居中）、表单元素form

一、表格元素table

HTML中，表格由 table 元素来定义.还有一些用于表格的其他标签，如 caption、thead、tbody、tfoot、th 等。

表格元素标签：

1. table：定义一个表格。
2. tr：定义表格中的一行。
3. td：定义表格中的一个单元格。
4. th：定义表格中的表头单元格。th 通常用于表格的第一行或第一列，通常会加粗显示。
5. caption：定义表格的标题，显示在表格的顶部。，默认加粗显示
6. thead：定义表格的表头部分。
7. tbody：定义表格的主体部分。
8. tfoot：定义表格的页脚部分。

注意

• table创造初始是用来进行布局，可以设置display：table模拟表格；对外显示块级，默认由内部元素撑开。
• th、td必须写在tr标签内，有默认的padding。
• table支持margin：0 auto；

table其他设置css属性

1. border–spacing，设置单元格之间的缝隙。支持两个值，水平x,垂直y

2. border–collapse , 可取值：collapse(单元格合并)，separate（默认，单元格分开）

3. text–align /vercial-align：可以用来进行调节宽高

4. table单元格合并

   在th / td 元素标签上设置：

   跨行合并 rowspan = ‘n’

   跨列合并 colspan = ‘n’

   单元格合并，将html当中的多余标签删除

表格妙用

• 块元素水平和垂直居中

  {
      display：table-cell;
  	Vertical-align: middle;
  	margin :0 auto ;
  }
  

• 文本元素水平垂直居中

  单行文本

  {
      text-align :center ;
  	height:line-height;
  }
  

  多段文字水平垂直居中（实现）

  {
  	text-align：center
  	display：table-cell;
  	vertical:middle;
  }
  

二、表单元素form

HTML表单是用于收集用户信息的一组元素。以下是常见的HTML表单元素及其相关属性和属性可取值：

<form action = "url地址" method="get/post请求方式" target="_self/_blank"  >
  /*label针对表单元素，扩大鼠标触发范围，提升用户体验*/
  显式：for值和id对应
  <label for="xxx"> </label>男<input  type="radio" id="xxx"/>
  隐式：
    <label> 男<input  type="radio"/></label>
    /*label可以应用做轮播图*/
</form>

1. form：表单的容器(表单域），用于将表单元素组织在一起。

   相关属性：

   • action：表单提交的URL地址。
   • method：表单提交的HTTP方法，可取值为”get“或”post“。
   • target：表单提交后打开的窗口，可取值为”_self“、“_blank”、“_parent“或”_top“。

2. input：用于接受用户输入的文本框、单选框、复选框等元素。

   相关联CSS设置属性

   • outline ,input表单聚焦之后会存在一层边框的效果。

     outline–color:(颜色)、outline-offest(轮廓线距离input元素的距离)

     outline–style（样式）outline–width

   • input属性会有默认padding属性
     padding：0；取消

   相关属性：

   • **type：**输入框类型，可取值

     1. text，默认值，用于接收单行文本输入，比如用户名、邮件地址等。
     2. password ，用于接收密码输入，输入的字符会被隐藏，以保证输入的安全性。
     3. checkbox，用于接收单个复选框的选中状态，可以设置 checked 属性来指定默认选中状态。
     4. radio，用于接收单个单选框的选中状态，需要将相同的单选框用相同的 name 属性来分组。
     5. file，用于上传文件，允许用户选择本地的文件上传到服务器。
     6. submit，用于提交表单数据到服务器，比如用户点击“提交”按钮后，会将表单中的数据发送到指定的 URL。
     7. reset，用于重置表单中的数据，比如用户点击“重置”按钮后，表单中的所有输入框的值都会被清空。
     8. button，用于创建一个自定义按钮，可以使用 JavaScript 绑定点击事件，实现自定义功能。
     9. hidden，用于创建一个隐藏的输入框，通常用于存储不需要用户编辑的数据，比如 session id。
     10. date，用于接收日期输入，允许用户选择日期。
     11. time，用于接收时间输入，允许用户选择时间。
     12. datetime-local，用于接收日期和时间输入，允许用户选择日期和时间。
     13. month，用于接收月份输入，允许用户选择月份。
     14. week，用于接收周数输入，允许用户选择周数
     15. search ,搜索框
     16. number，数字输入框
     17. email,邮箱格式
     18. image，图片提交按钮
     19. hiddle ,影藏与，提交但是不会显示

   • name: 定义表单元素的名称，用于后台程序处理表单数据。

   • value: 定义表单元素的值，例如文本框中的默认文本、默认选中的单选框或复选框等。

   • disabled: 禁用表单元素，使其无法接收用户输入，通常用于表单元素不可用的情况。

   • readonly: 表单元素只读，用户无法修改其值，通常用于展示数据或只读状态的表单元素。

   • checked: 表示单选框或复选框是否默认被选中。

   • placeholder: 提示用户在表单元素中输入什么，通常在输入框中显示浅灰色的字体。

   • size: 定义输入框的显示宽度，以字符为单位。

   • maxlength: 定义输入框中允许输入的最大字符数。

   • required: 设置为必填项，用户必须填写。

   • pattern: 定义一个正则表达式，用于验证输入框中的值是否合法。

   • autocomplete: 自动补全 ,可取值on/off。

   • autofocus: 表示该表单元素是否应该自动获取焦点。

   • form: 定义表单元素所属的表单 ID。

   • formaction: 定义提交表单数据时使用的 URL。

   • formenctype: 定义提交表单数据时使用的编码类型。

   • formmethod: 定义提交表单数据时使用的 HTTP 方法。

   • formnovalidate: 定义提交表单数据时是否要忽略表单元素的验证。

   • formtarget: 定义在何处打开提交表单数据的结果。

   • accept: 定义用户可以上传的文件类型。

   • multiple: 表示用户是否可以上传多个文件。

   • step: 定义用户可以选择的数字的增量。

   • min: 定义输入框中允许输入的最小值。

   • max: 定义输入框中允许输入的最大值。

   • list: 定义一个 datalist 元素的 ID，与输入框关联，提供输入建议。

3. select：用于创建下拉框。

   <select name="xxx" id=""  size="列表可见选项数">
       <optgroup label="xxxxx"></optgroup> //下拉表单的分组
   	<option value="a">aaa</option>
   	<option value="b">bbb</option>
   </select>
   

   相关属性：

   • name：下拉框的名称，用于后台获取表单数据。

4. <option>：用于定义下拉框中的选项。

   相关属性：

   • value：选项的值。
   • selected：选项默认是否选中。

5. <textarea>：用于创建多行文本框。

   相关属性：

   • name：文本框的名称，用于后台获取表单数据。
   • rows：文本框的行数。
   • cols：文本框的列数。

6. fieldset: 定义 一块区域

   <fieldset>
       <legend> </legend>
       <legend> </legend>
   </fieldset>
   

7. <button>：用于创建按钮。

   相关属性：

   • type：按钮类型，可取值为”submit”、“reset”、”button”等。

   • name：按钮的名称，用于后台获取表单数据。

   • value：按钮的值。

代码007普通

打赏 收藏 海报 链接