HTML——表格与框架
-
- 表格
- 表格的创建
- 表格的属性
- 框架
- 1、frameset标签
- 2、frame标签
- 3、noframe标签
- 4、iframe标签
- a标签与iframe的区别
- a标签中的target属性
- 表格
表格
表格的创建
- 由行和列组成的一种结构。
创建HTML表格：
1、表格内容包含在table双标签里。
2、caption标签定义标题表格。
3、tr标签定义表格中的一行【table row】
4、td【table data cell —单元格】标签和th【table header cell—单元格头部】标签定义一个单元格。th标签中内容默认粗体、局中显示。
<table>
<caption>表格标题caption>
<tr>
<th>1行1列的内容th>
<th>1行2列的内容th>
…
tr>
<tr>
<td>2行1列的内容td>
<td>2行2列的内容td>
…
tr>
…
table>表格的属性
table：
1、border：设置表格最外面边框的宽度。
2、width：设置表格整体的宽度。
3、align:表格相对于其它标签的水平对齐方式，建议使用float。
4、bgcolor:表格整体的背景颜色。
5、cellpadding：设定单元格边界与单元格内容之间的间距（单位：px）。
6、cellspacing：指定单元格之间的间距（单位：px）。
tr、th、td:都具有align（水平对齐方式），bgcolor，valign(垂直对齐方式)
th和td除此之外：
4、width和height：单元格的宽度和高度。
5、colspan标签属性和rowspan标签属性：分别设定单元格横跨的列数和横跨的行数。
【横跨行列数是默认从上到下和从左到右，同时需要将后面的单元格删除】
6、nowrap：设定单元格的内容是否换行 。
框架
1、frameset标签
- 框架集标签，用于规定框架集中有多少个框架窗口或框架集。
【frameset不能与body同时使用】
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<frameset rows="20%,*,40%">//表示三行，第一行占据20%，第三行占据40%
<frame src="top.html"/>
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="right.html"/>
frameset>
<frame src="bottom.html" />
frameset>
html>
left.html代表一个框架
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body style="background-color: red;">
body>
html>2、frame标签
- 框架标签，单标签，用于在frameset 中定义一个框架窗口
【每个框架口都有一个名字】，有多个属性。
1、src标签属性：当前frame框架中显示的文档的地址；
2、name标签属性：定义当前frame框架的名称，用于在 JavaScript 中引用元素或者作为链接的目标。
3、noresize标签属性：取消用户调整框架的大小。
4、scrolling标签属性：设定是否在框架中显示滚动条。
5、frameborder标签属性：是否显示框架周围的边框，1表示有边框（默认值），0 表示无边框。
3、noframe标签
- 当浏览器不支持frameset标签或frame时，浏览器解释执行noframes标签中的html标签。注意：noframes标签必须使用body标签。
4、iframe标签
在页面中嵌入另外一个页面，双标签。
属性：
1、src标签属性：指定iframe 中显示的页面url。2、width 标签属性：指定iframe 的宽度，可以是像素或%
3、height标签属性：指定iframe 的高度，可以是像素或%
4、scrolling标签属性：设定是否在 iframe 中显示滚动条，其值可以是yes、no或auto。
注意：当iframe【一定为双标签】写成单标签时，后面的div无法显示。
a标签与iframe的区别
a标签不显示href指定的页面，它只是一个超链接；
而iframe会在页面中显示src指定的网页。
a标签中的target属性
- 设定在哪儿打开链接。
1、_blank：在新窗口中打开被链接文档。
2、_self：在当前窗口、frame或iframe中打开被链接文档，默认值。
3、target_name:在指定的窗口中打开被链接文档。
4、_top：清除所有被包含的框架并将文档载入整个浏览器窗口。
5、_parent：在父窗口中打开被链接。即在直接包含它的那个窗口打开。
frame.html
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<frameset rows="20%,*,20%">
<frame src="top.html"/>
<frameset cols="20%,*,20%">
<frame src="left.html" noresize="noresize" frameborder="0"/>
<frame src="center.html" frameborder="0"/>
<frame src="right.html" />
frameset>
<frame src="bottom.html" name="bottom"/>
frameset>
html>top
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body style="background-color: red;">
body>
html>
bottom
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body style="background-color: greenyellow;">
body>
html>
left
<html>
<head>
<meta charset="UTF-8">
<title>title>
head >
<body style="background-color: white;">
<a href="http://www.baidu.com" target="bottom">百度一下a>
body>
html>
center
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body style="background-color: yellow;">
<a href="http://www.baidu.com" target="_top">百度一下a>
body>
html>
right
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body style="background-color: skyblue;">
<a href="http://www.baidu.com" target="_parent">百度一下a>
body>
html>