html,表格和表单

表格

表格标签

表格标签 描述
表格的最外层容器
定义表格行
定义表头
定义表格单元
定义表格表题

代码:

天气情况
日期 天气情况 出行情况
2020/1/1 天气晴朗,适合出行
2020/1/2 有小雨,出门请带伞

输出:

天气情况
日期 天气情况 出行情况
2020/1/1 天气晴朗,适合出行
2020/1/2 有小雨,出门请带伞

语义化标签

不会产生效果,更会符合html规范

语义化标签 描述
表格头部
表格主题
表格结束

代码:

天气情况
日期 天气情况 出行情况
2020/1/1 天气晴朗,适合出行
2020/1/2 有小雨,出门请带伞

其中tbody是可以出现多次的,thead和tfoot只能出现一次

表格属性:边框和单元格的大小

属性 含义
border 表格边框
cellpadding 单元格内的空间
cellspacing 单元格之间的空间

代码:

天气情况
日期 天气情况 出行情况
2020/1/1 天气晴朗,适合出行
2020/1/2 有小雨,出门请带伞

输出:

天气情况
日期 天气情况 出行情况
2020/1/1 天气晴朗,适合出行
2020/1/2 有小雨,出门请带伞

表格属性:单元格的合并

行合并

代码:

天气情况
日期 天气情况 出行情况
2020/1/1 白天 天气晴朗,适合出行
2020/1/2 白天 有小雨,出门请带伞

输出:

天气情况
日期 天气情况 出行情况
2020/1/1 白天 天气晴朗,适合出行
2020/1/2 白天 有小雨,出门请带伞
合并列

代码

天气情况
日期 天气情况 出行情况
2020/1/1 白天 天气晴朗,适合出行
夜晚 天气晴朗,适合出行
2020/1/2 白天 有小雨,出门请带伞
夜晚 有小雨,出门请带伞

输出:

天气情况
日期 天气情况 出行情况
2020/1/1 白天 天气晴朗,适合出行
夜晚 天气晴朗,适合出行
2020/1/2 白天 有小雨,出门请带伞
夜晚 有小雨,出门请带伞

表格属性:单元格对齐方式

align 属性值
left
center
right
valign 属性值
top
middle
bottom

这些属性,放在不同的标签上,所影响的范围不同

代码:

天气情况
日期 天气情况 出行情况
2020/1/1 白天 天气晴朗,适合出行
夜晚 天气晴朗,适合出行
2020/1/2 白天 有小雨,出门请带伞
夜晚 有小雨,出门请带伞

输出:

天气情况
日期 天气情况 出行情况
2020/1/1 白天 天气晴朗,适合出行
夜晚 天气晴朗,适合出行
2020/1/2 白天 有小雨,出门请带伞
夜晚 有小雨,出门请带伞

表单

表单标签

form标签: 表单的最外层容器
input标签: 用于搜集用户信息,根据不同的type属性值,展示不同的控件

type属性 含义
text 普通的文本输入框
password 密码输入框
checkbox 复选框
radio 单选框
file 上传文件
submit 提交按钮
reset 重置按钮

代码


输入框:
密码框:
复选框: 苹果 香蕉 葡萄
单选框:
上传文件:
提交按钮: 重置按钮:

输出:

输入框:
密码框:
复选框: 苹果 香蕉 葡萄
单选框: 男 女
上传文件:
提交按钮: 重置按钮:

表单属性

action 提交的位置

action属性 点击提交按钮后,数据的提交位置

checked 设置默认值

代码


    复选框: 
    苹果
    香蕉
    葡萄 
单选框:

输出:

复选框: 苹果 香蕉 葡萄
单选框: 男 女

disabled 禁止选择某一项

代码:

复选框: 苹果 香蕉 葡萄
单选框:

输出:


复选框:
苹果
香蕉
葡萄

单选框:



placeholder在数据框中添加提示信息

代码:

用户名:
密码框:

输出:

用户名:
密码框:

表单相关标签

textarea 多行文本框

textarea属性 描述
cols
rows

代码:


输出


select下拉菜单

默认选择第一行,selected属性设置默认值
代码:

下拉菜单

输出:


下拉菜单
北京 上海 广州

通过selected 和disabled实现提示信息,且不可选择

代码:

下拉菜单

输出


下拉菜单
请选择 北京 上海 广州

size属性设置下拉菜单展示的行数,默认为1
代码:

下拉菜单

输出

下拉菜单 北京 上海 广州

multiple多选属性
代码:

下拉菜单

输出:


下拉菜单
北京 上海 广州

multiple属性还支持在上传文件中使用
代码

    

输出

label辅助表单

通过label标签可以实现单选框或复选框中,符号和文字是一个整体

代码:

单选框:
复选框:

输出:


单选框:






复选框:

苹果

香蕉

葡萄

你可能感兴趣的:(html,表格和表单)