一、表格元素table
HTML中,表格由 table 元素来定义.还有一些用于表格的其他标签,如 caption、thead、tbody、tfoot、th 等。
表格元素标签:
- table:定义一个表格。
- tr:定义表格中的一行。
- td:定义表格中的一个单元格。
- th:定义表格中的表头单元格。th 通常用于表格的第一行或第一列,通常会加粗显示。
- caption:定义表格的标题,显示在表格的顶部。,默认加粗显示
- thead:定义表格的表头部分。
- tbody:定义表格的主体部分。
- tfoot:定义表格的页脚部分。
注意
- table创造初始是用来进行布局,可以设置display:table模拟表格;对外显示块级,默认由内部元素撑开。
- th、td必须写在tr标签内,有默认的padding。
- table支持margin:0 auto;
table其他设置css属性
-
border-spacing,设置单元格之间的缝隙。支持两个值,水平x,垂直y
-
border-collapse , 可取值:collapse(单元格合并),separate(默认,单元格分开)
-
text-align /vercial-align:可以用来进行调节宽高
-
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>
-
form:表单的容器(表单域),用于将表单元素组织在一起。
相关属性:
- action:表单提交的URL地址。
- method:表单提交的HTTP方法,可取值为"get"或"post"。
- target:表单提交后打开的窗口,可取值为"_self"、“_blank”、“_parent"或”_top"。
-
input:用于接受用户输入的文本框、单选框、复选框等元素。
相关联CSS设置属性
-
outline ,input表单聚焦之后会存在一层边框的效果。
outline-color:(颜色)、outline-offest(轮廓线距离input元素的距离)
outline-style(样式)\outline-width
-
input属性会有默认padding属性
padding:0;取消
相关属性:
-
**type:**输入框类型,可取值
- text,默认值,用于接收单行文本输入,比如用户名、邮件地址等。
- password ,用于接收密码输入,输入的字符会被隐藏,以保证输入的安全性。
- checkbox,用于接收单个复选框的选中状态,可以设置 checked 属性来指定默认选中状态。
- radio,用于接收单个单选框的选中状态,需要将相同的单选框用相同的 name 属性来分组。
- file,用于上传文件,允许用户选择本地的文件上传到服务器。
- submit,用于提交表单数据到服务器,比如用户点击“提交”按钮后,会将表单中的数据发送到指定的 URL。
- reset,用于重置表单中的数据,比如用户点击“重置”按钮后,表单中的所有输入框的值都会被清空。
- button,用于创建一个自定义按钮,可以使用 JavaScript 绑定点击事件,实现自定义功能。
- hidden,用于创建一个隐藏的输入框,通常用于存储不需要用户编辑的数据,比如 session id。
- date,用于接收日期输入,允许用户选择日期。
- time,用于接收时间输入,允许用户选择时间。
- datetime-local,用于接收日期和时间输入,允许用户选择日期和时间。
- month,用于接收月份输入,允许用户选择月份。
- week,用于接收周数输入,允许用户选择周数
- search ,搜索框
- number,数字输入框
- email,邮箱格式
- image,图片提交按钮
- 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,与输入框关联,提供输入建议。
-
-
select:用于创建下拉框。
<select name="xxx" id="" size="列表可见选项数"> <optgroup label="xxxxx"></optgroup> //下拉表单的分组 <option value="a">aaa</option> <option value="b">bbb</option> </select>
相关属性:
- name:下拉框的名称,用于后台获取表单数据。
-
<option>
:用于定义下拉框中的选项。相关属性:
- value:选项的值。
- selected:选项默认是否选中。
-
<textarea>
:用于创建多行文本框。相关属性:
- name:文本框的名称,用于后台获取表单数据。
- rows:文本框的行数。
- cols:文本框的列数。
-
fieldset: 定义 一块区域
<fieldset> <legend> </legend> <legend> </legend> </fieldset>
-
<button>
:用于创建按钮。相关属性:
-
type:按钮类型,可取值为"submit"、“reset”、"button"等。
-
name:按钮的名称,用于后台获取表单数据。
-
value:按钮的值。
-