HTML基础知识(4)

HTML中的框架元素

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。通常可以用来做网页的布局。

frameset标签--表示一个框架集【它里面可以包含框架元素】

  1. <frameset>标签定义了如何将窗口拆分成框架。
  2. 每个frameset标签定义了一组行和列。
  3. 行[rows]/列[cols]的值指明了每个行/列在屏幕上所占的大小。
  4. 使用frameset标签时候不需要body元素

frame标签

<frame>标签定义了每个框架中放入什么文件。

frame的frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框

frame的noresize="noresize"属性frame边框禁止拖动。

name属性--设置框架的名称【通过a标记的点击动作实现点击切换】

src属性--独立的html文件的

在frameset标签后添加行[rows]/列[cols]的值,将表示每个行/列在屏幕上所占的大小

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="20%,80%,10%">
		<frame src="top.html" frameborder="0" noresize="noresize"></frame>
		<frameset cols="20%,80%">
			<frame src="left.html" frameborder="0" noresize="noresize"></frame>
			<frame name="iframe_right" src="right.html" frameborder="0" noresize="noresize"></iframe>
		</frameset>	
	</frameset>
</html>

 

 

 

HTML <div> 和 <span>

HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器

 <div> 元素实际上就是网页中的一块空白区域,在这个区域中可以包含其他的html元素。浏览器会在其前后显示折行。通常与css一起使用,可以用来设置网页的布局。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div</title>
	</head>
	<body>
		<div style="width: 500px;height: 500px;background-color: red;">
			<h1>这是一个div层,浏览器会在其前后显示折行</h1>
			<p>div元素实际上就是网页中的一块空白区域</p>
			<a href="#">在这个区域中可以包含其他的html元素</a>
			<table border="1px" width="400px">
				<tr>
					<tr>
						<td>lisi</td>
						<td>24</td>
						<td>西安</td>
						<td>2020-11-06</td>
					</tr>
					<tr>
						<td>lisi</td>
						<td>24</td>
						<td>西安</td>
						<td>2020-11-06</td>
					</tr>
					<tr>
						<td>lisi</td>
						<td>24</td>
						<td>西安</td>
						<td>2020-11-06</td>
					</tr>
				</tr>
			</table>
			<img src="imgs/avatar.png" />
		</div>
	</body>
</html>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值