在前一篇博客中HTML的常用基础标签,重新复习了一遍html中的常用基础标签,这篇博客来学习一下比较复杂并且总要的几个标签。
1、表格(table)
1.1基本使用
表格由 <table>
标签来定义。每个表格均有若干行(由 <tr>
标签定义),每行被分割为若干单元格(由 <td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
</head>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
注意:表格默认是没有边框
的,在table标签中加入border="1"后才会有1px的边框,但是推荐在css中设置表格样式。
1.2表格跨行跨列
在td和th中添加rowspan和colspan属性可以实现表格的跨行和跨列。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>单元格跨两行:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
table标签的cellpadding
属性用于设置每个表格中内容的内边距。
table标签的cellspacing
属性用于设置每个表格单元格之间的距离,默认并不是0,如果设置为0,则每个单元格之间由一条实线隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨行跨列的表格</title>
</head>
<body>
<h4>未设置cellspacing和cellpadding:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
</tr>
</table>
<h4>设置cellspacing和cellpadding:</h4>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
</tr>
</table>
</body>
</html>
效果:
<thead>
元素与 <tbody>
和 <tfoot>
元素结合起来使用,用来规定表格的各个部分(表头、主体、页脚)。方便区分表格的部分,使表格的结构更加清晰,没有实际的含义。
2、框架(iframe)
这里的框架,并不是指vue.js、react.js等框架,而是“当前页面中嵌入其他页面”,通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
基本语法:
<iframe src="URL"></iframe>
其中URL是指其他网页的网址链接。
frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe</title>
</head>
<body>
<div class="app">
<iframe src="https://www.runoob.com/try/demo_source/demo_iframe.htm" frameborder="0"></iframe>
</div>
</body>
</html>
iframe与超链接a搭配使用,可以实现点击a标签,将a标签的目标页面显示在iframe中,但是iframe的name属性应该和a标签的target属性一致:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe</title>
</head>
<body>
<div class="app">
<iframe src="https://www.runoob.com/try/demo_source/demo_iframe.htm" frameborder="0" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>
</div>
</body>
</html>
点击超链接后:
iframe配合a标签可以实现菜单
的功能。