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用于定义表格标题。