[前端笔记008]html表格表单补充 -- form table

Plusmile1

已于 2022-11-17 10:30:03 修改

阅读量67

点赞数

分类专栏：前端文章标签：前端 html css

于 2022-11-14 01:02:07 首次发布

本文链接：https://blog.csdn.net/qq_29589765/article/details/127840161

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

资源

推荐zeal:离线文档查看器 https://zealdocs.org/
推荐w3c:线上文档 https://www.w3school.com.cn/
本笔记参考视频，尚硅谷:BV1XJ411X7Ud
我的笔记：https://gitee.com/plusmile/stackedit-app-data.git
我的CSS文件：https://gitee.com/plusmile/front-code.git

表格与长表格

下面会直接使用例子说明，看注释即可

<style>
/* 表格样式 */
table{
	/* 里面单元格的宽度会均匀分配 */
	width: 50%;
	
	/* 外边框,格子没边框 */
	border: 1px solid black;
	
	/* 指定边框之间的距离 */
	border-spacing: 1px;
	
	/* 设置边框的合并,设置完后spacing无效 */
	border-collapse:collapse ;

	/* 表格居中 */
	margin: 0 auto;
}
td{
	border: 1px solid black;
	/* td内容默认垂直居中,可以通过vertical/text-align改变,较特殊,可以影响其包含的所有子元素
	因此,可以通过display:table-cell;+vertical-align:middle的组合设置其他块元素的垂直居中,但用的不多 */
	vertical-align: bottom;
	text-align: center;
}
/* 变色设置 偶数行变色*/
tr:nth-child(2n){
	background-color: #bfa;
}
</style>
<body>
<!-- table创建表格,table属于块元素,tr表示一行,td表示一个单元格
表格设置网页样式的方法已经被淘汰 -->
<!-- 普通表格 -->
	<table>
		<tr>
			<td>1</td>
			<td>1</td>
			<!-- 纵向合并单元格 -->
			<td rowspan="2">1</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
			<!-- 横向合并单元格 -->
			<td colspan="2">1</td>
		</tr>
	</table>
<!-- 长表格 ,与html中的书写顺序无关,头永远在上,底永远在下-->
	<table>
		<!-- 头部 -->
		<thead>
		<!-- 表头 -->
			<tr>
			<!-- th与td相比,会有加粗居中的效果 -->
				<th>1</th>
				<th>1</th>
			</tr>
		</thead>
		<!-- 主体,没有创建时,浏览器会自动创建tbody,
		将tr全部放在tbody中,也就导致tr不是table的子元素,table>tr无效 -->
		<tbody>
		<!-- 内容 -->
		</tbody>
		<!-- 底部 -->
		<tfoot>
		<!-- 总计等 -->
		</tfoot>
	</table>
<body>

表单

下面会直接使用例子说明，看注释即可

<!-- form表单：在网页中使用表单将本地的数据提交给数据库 -->
<!-- 属性action为必须属性，指定要提交的服务器的地址 -->
<form action="./01-实体.html" autocomplete="off">
<!-- 一些属性
- autocomplete 是否开启自动补全
- readonly 将表单项设置为只读，数据会提交
- disabled 设置为禁用，数据不会提交
- autofocus 自动获取焦点 -->

	<!-- 表单项 -->
	<!-- 文本框 要提交到服务器，必须指定name作为键值对的key-->
	<input type="text" name="hello" value="默认值" autocomplete="on">  

	<!-- 密码框 也需要指定name-->
	<input type="password" name="password">

	<!-- 单选按钮 需要指定name和value属性，
	- 多个单选name相同时，只能选中一个
	- 属性checked,初次加载时默认选中-->
	<input type="radio" name="radio" value="yes">
	<input type="radio" name="radio" value="no" checked>  

	<!-- 多选框 -->
	<input type="checkbox" name="checkbox" value="1" checked>
	<input type="checkbox" name="checkbox" value="2">
	<input type="checkbox" name="checkbox" value="3">

	<!-- 下拉列表 select与option组合使用，selected表示默认选中-->
	<select name="select" >
		<option value="1" selected>选项1</option>
		<option value="2" >选项2</option>
	</select>

	<!-- email/tel,可以检查邮件格式，正常工作不用，使用正则实现
	在移动端常用，方便弹出对应的键盘 -->
	<input type="email">
	<input type="tel">  

	<!-- 普通按钮 -->
	<input type="button" value="OK">
	<button type="button">能加图片,链接等标签,比input更灵活 </button> 

	<!-- 重置按钮 重置表单内容-->
	<input type="reset">
	<button type="reset">reset </button>  

	<!-- 提交按钮 -->
	<input type="submit" value="按钮显示文字">
	<button type="submit">submit </button>
</form>