网页布局和框架

最新推荐文章于 2025-07-06 14:40:19 发布

原创最新推荐文章于 2025-07-06 14:40:19 发布 · 3.8k 阅读

CC 4.0 BY-SA版权

一、网页布局：
隆重推出<div>元素，<div> 元素常用作布局工具，能够轻松地通过 CSS 对其进行定位。
div+css布局好处：便于维护，有利seo（谷歌将网页打开速度作为排名因素及SEO因素），网页打开速度更快，符合web标准等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTE-8">
		<title>div</title>
		<style type="text/css">
			#global{
				width:500px;
				height: 500px;
				background-color: gray;	
			}
			#zhao{
				background-color: red;
			}
			#qian{
				background-color: blue;
			}
			#sun{
				background-color: yellow;
			}
			#li{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div id="global">
			<div id="zhao">我姓赵</div>
			<div id="qian">我姓钱</div>
			<div id="sun">我姓孙</div>
			<div id="li">我姓李</div>
		</div>
	</body>
</html>

在这里插入图片描述
使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分
HTML5 语义元素

元素	描述
header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

使用表格的 HTML 布局
<table> 元素不是作为布局工具而设计的，<table> 元素的作用是显示表格化的数据。
使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式。

二、框架：
框架集标签 <frameset>（要写在head里面）
框架集标签定义如何将窗口分裂为框架，每一个frameset定义一些行或列，rows/cols的值规定了每行或者每列占据屏幕的面积
内联框架：iframe（在网页中添加网页）
iframe可以设置一个框架嵌套一个框架。

<iframe src="URL"></iframe>

使用 iframe 作为链接的目标时，链接的 target 属性必须引用 iframe 的 name 属性。

另外：（1）假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize=“noresize”。
（2）不支持框架的浏览器添加标签
（3）不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）