html,表格和表单
时间:2020-01-09
本文章向大家介绍html,表格和表单,主要包括html,表格和表单使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
表格
表格标签
表格标签 | 描述 |
---|---|
<table> | 表格的最外层容器 |
<tr> | 定义表格行 |
<th> | 定义表头 |
<td> | 定义表格单元 |
<caption> | 定义表格表题 |
代码:
<table>
<caption>天气情况</caption>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
<td>2020/1/1</td>
<td><img src="./p/1.jpg" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
<tr>
<td>2020/1/2</td>
<td><img src="./p/2.jpg" alt=""></td>
<td>有小雨,出门请带伞</td>
</tr>
</table>
输出:
日期 | 天气情况 | 出行情况 |
---|---|---|
2020/1/1 | 天气晴朗,适合出行 | |
2020/1/2 | 有小雨,出门请带伞 |
语义化标签
不会产生效果,更会符合html规范
语义化标签 | 描述 |
---|---|
<thead> | 表格头部 |
<tbody> | 表格主题 |
<tfoot> | 表格结束 |
代码:
<table>
<caption>天气情况</caption>
<thead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020/1/1</td>
<td><img src="./p/1.jpg" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
<tr>
<td>2020/1/2</td>
<td><img src="./p/2.jpg" alt=""></td>
<td>有小雨,出门请带伞</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
其中tbody是可以出现多次的,thead和tfoot只能出现一次
表格属性:边框和单元格的大小
属性 | 含义 |
---|---|
border | 表格边框 |
cellpadding | 单元格内的空间 |
cellspacing | 单元格之间的空间 |
代码:
<table border="20" cellpadding="30" cellspacing="20">
<caption>天气情况</caption>
<thead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020/1/1</td>
<td><img src="./p/1.jpg" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
<tr>
<td>2020/1/2</td>
<td><img src="./p/2.jpg" alt=""></td>
<td>有小雨,出门请带伞</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
输出:
日期 | 天气情况 | 出行情况 |
---|---|---|
2020/1/1 | 天气晴朗,适合出行 | |
2020/1/2 | 有小雨,出门请带伞 |
表格属性:单元格的合并
行合并
代码:
<table border="1" cellpadding="30" cellspacing="1">
<caption>天气情况</caption>
<thead>
<tr>
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020/1/1</td>
<td>白天</td>
<td><img src="./p/1.jpg" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
<tr>
<td>2020/1/2</td>
<td>白天</td>
<td><img src="./p/2.jpg" alt=""></td>
<td>有小雨,出门请带伞</td>
</tr>
</tbody>
</table>
输出:
日期 | 天气情况 | 出行情况 | |
---|---|---|---|
2020/1/1 | 白天 | 天气晴朗,适合出行 | |
2020/1/2 | 白天 | 有小雨,出门请带伞 |
合并列
代码
<table border="1" cellpadding="30" cellspacing="1">
<caption>天气情况</caption>
<thead>
<tr align="right">
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">2020/1/1</td>
<td>白天</td>
<td><img src="./p/1.jpg" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./p/1.jpg" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
<tr>
<td rowspan="2">2020/1/2</td>
<td>白天</td>
<td><img src="./p/2.jpg" alt=""></td>
<td>有小雨,出门请带伞</td>
<tr>
<td>夜晚</td>
<td><img src="./p/2.jpg" alt=""></td>
<td>有小雨,出门请带伞</td>
</tr>
</tbody>
</table>
输出:
日期 | 天气情况 | 出行情况 | |
---|---|---|---|
2020/1/1 | 白天 | 天气晴朗,适合出行 | |
夜晚 | 天气晴朗,适合出行 | ||
2020/1/2 | 白天 | 有小雨,出门请带伞 | |
夜晚 | 有小雨,出门请带伞 |
表格属性:单元格对齐方式
align | 属性值 |
---|---|
left | 左 |
center | 中 |
right | 右 |
valign | 属性值 |
---|---|
top | 上 |
middle | 中 |
bottom | 下 |
这些属性,放在不同的标签上,所影响的范围不同
代码:
<table border="1" cellpadding="30" cellspacing="1">
<caption>天气情况</caption>
<thead>
<tr align="right">
<th colspan="2" align="left">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody valign="bottom">
<tr>
<td rowspan="2">2020/1/1</td>
<td>白天</td>
<td><img src="./p/1.jpg" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./p/1.jpg" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
<tr>
<td rowspan="2">2020/1/2</td>
<td>白天</td>
<td><img src="./p/2.jpg" alt=""></td>
<td>有小雨,出门请带伞</td>
<tr>
<td>夜晚</td>
<td><img src="./p/2.jpg" alt=""></td>
<td>有小雨,出门请带伞</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
输出:
日期 | 天气情况 | 出行情况 | |
---|---|---|---|
2020/1/1 | 白天 | 天气晴朗,适合出行 | |
夜晚 | 天气晴朗,适合出行 | ||
2020/1/2 | 白天 | 有小雨,出门请带伞 | |
夜晚 | 有小雨,出门请带伞 |
表单
表单标签
form标签: 表单的最外层容器
input标签: 用于搜集用户信息,根据不同的type属性值,展示不同的控件
type属性 | 含义 |
---|---|
text | 普通的文本输入框 |
password | 密码输入框 |
checkbox | 复选框 |
radio | 单选框 |
file | 上传文件 |
submit | 提交按钮 |
reset | 重置按钮 |
代码
<!-- 表单 -->
<form action="http://www.sunlizhao.cn">
输入框:
<input type="text"> <br>
密码框:
<input type="password"> <br>
复选框:
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">葡萄 <br>
单选框:
<input type="radio" name="gender">男
<input type="radio" name="gender">女 <br>
上传文件:
<input type="file"> <br>
提交按钮:
<input type="submit">
重置按钮:
<input type="reset"> <br>
</form>
输出:
表单属性
action 提交的位置
action属性 点击提交按钮后,数据的提交位置
<form action="http://www.sunlizhao.cn">
checked 设置默认值
代码
<form action="http://www.sunlizhao.cn">
复选框:
<input type="checkbox" checked>苹果
<input type="checkbox" checked>香蕉
<input type="checkbox">葡萄 <br>
单选框:
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女 <br>
</form>
输出:
disabled 禁止选择某一项
代码:
<form action="http://www.sunlizhao.cn">
复选框:
<input type="checkbox" checked>苹果
<input type="checkbox" checked>香蕉
<input type="checkbox" disabled>葡萄 <br>
单选框:
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女 <br>
</form>
输出:
placeholder在数据框中添加提示信息
代码:
<form action="http://www.sunlizhao.cn">
用户名:
<input type="text" placeholder="请输入用户名"> <br>
密码框:
<input type="password" placeholder="请输入密码"> <br>
</form>
输出:
表单相关标签
textarea 多行文本框
textarea属性 | 描述 |
---|---|
cols | 列 |
rows | 行 |
代码:
<form action="http://www.sunlizhao.cn">
<textarea cols="30" rows="10"></textarea> <hr>
</form>
输出
select下拉菜单
默认选择第一行,selected属性设置默认值
代码:
<form action="http://www.sunlizhao.cn">
下拉菜单
<select>
<option>北京</option>
<option selected>上海</option>
<option>广州</option>
</select>
</form>
输出:
通过selected 和disabled实现提示信息,且不可选择
代码:
<form action="http://www.sunlizhao.cn">
下拉菜单
<select>
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</form>
输出
size属性设置下拉菜单展示的行数,默认为1
代码:
<form action="http://www.sunlizhao.cn">
下拉菜单
<select size="2">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</form>
输出
multiple多选属性
代码:
<form action="http://www.sunlizhao.cn">
下拉菜单
<select multiple>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</form>
输出:
multiple属性还支持在上传文件中使用
代码
<input type="file" multiple>
输出
label辅助表单
通过label标签可以实现单选框或复选框中,符号和文字是一个整体
代码:
<form action="http://www.sunlizhao.cn">
单选框:
<input type="radio" name="gender" checked id="man">
<label for="man">男</label>
<input type="radio" name="gender" id="woman">
<label for="woman">女</label>
<br>
复选框:
<input type="checkbox" id="apples">
<label for="apples">苹果</label>
<input type="checkbox" id="banana">
<label for="banana">香蕉</label>
<input type="checkbox" id="grape">
<label for="grape">葡萄</label> <br>
</form>
输出:
原文地址:https://www.cnblogs.com/inmeditation/p/12171727.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Mysql事物和锁
- PyTorch7:torch.nn.init
- Puppeteer 入门与实战
- 【DB笔试面试854】在Oracle中,删除数据库的方式有哪几种?
- 方差齐性检验
- Windows WSL2 htop打开黑屏的问题解决
- 【DB笔试面试855】在Oracle中,简单说说PSU升级的过程
- HashMap中add()方法的源码学习
- IOC容器实现
- Docker安装mysql
- 【LeeCode 面试题】二叉树的前序遍历,中序遍历,后序遍历递归和迭代的两种实现方式
- MySQL笔记汇总
- 【DB笔试面试856】在Oracle中,如何判定实例是否运行?
- 【DB笔试面试857】在Oracle中,若一个主机上有多个Oracle实例,则如何确定哪些共享内存段属于想要清掉的实例的内存段?
- vue + flask实现邮件密码找回功能