HTML5页面基础（一）页面交互性、表格标签

最新推荐文章于 2022-10-27 17:09:17 发布

小白Melody

最新推荐文章于 2022-10-27 17:09:17 发布

阅读量673

点赞数

分类专栏： HTML5 文章标签： HTML5页面基础（一）页面交互性与表格标签

本文链接：https://blog.csdn.net/weixin_42468092/article/details/100924791

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5页面基础（一）页面交互性、表格、表单标签

summary标签j经常与details标签配合使用，作为details标签的第一个子元素，用于为details定义标题。当单机标题时，可以显示或隐藏details中的其他内容。

table标签用于实现表格效果。表格的行使用tr标签，列使用td标签。

实列1：表格与details、summary标签

显示效果

HTML5实列

// 交互性与表格标签
<!DOCTYPE html>
<html>
	<head>//头部
		<meta charset="UTF-8">//编码格式
		<title>细节展示</title>//标题
	</head>
	<body>
		<details>
			<summary>1.1HTML5 介绍</summary>
			<ul>//无序列表
				<li>1.1.1终将失败的Flash</li>
				<li>1.1.2Web 移动应用开发</li>
			</ul>
		</details>
		<details>
			<summary>1.2 HTML5 新特性</summary>
		</details>
		<table border="1">
			<thead>//表格头部
				<tr>//行
					<th>存储时间</th>//列
					<th>存储利率</th>
				</tr>
			</thead>
			<tfoot>//表格尾部
				<tr>
					<td colspan="2">注：数据来源于中国工商银行</td>//跨行显示
				</tr>
			</tfoot>
			<tbody>//表格主体
				<tr>
					<td>一年</td>
					<td>1.75</td>
				</tr>
				<tr>
					<td>三年</td>
					<td rowspan="2">2.75</td>//跨列显示
				</tr>
				<tr>
					<td>五年</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

table标签要点：
border属性用于设置边框是否显示，值为“0”时没有边框，为“1”时有边框。table标签中用thead、tbody、tfoot标签分别定义表格的头部、数据行、脚注。caption用于定义表格标题。

小白Melody

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5页面基础（一）页面交互性、表格标签

HTML5页面基础（一）页面交互性、表格、表单标签summary标签j经常与details标签配合使用，作为details标签的第一个子元素，用于为details定义标题。当单机标题时，可以显示或隐藏details中的其他内容。table标签用于实现表格效果。表格的行使用tr标签，列使用td标签。实列1：表格与details、summary标签显示效果HTML5实列// 交互性与表格...
复制链接

扫一扫