8.10前端之Html框架
作用
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
-
每份HTML文档称为一个框架
-
每个框架都独立于其他的框架。
使用框架的坏处：
-
开发人员必须同时跟踪更多的HTML文档
-
很难打印整张页面
分类
框架结构标签<frameset>
框架标签<frame>
一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
重要提示
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
使用<noframes>标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="这是一个框架的练习" />
<title>A demo about frame</title>
</head>
<frameset cols="40%,30%,30%">
<frame src="SemanticDemoPractice.html" />
<frame src="BootstrapDemoPractice.html" />
<frame src="ColumnPracticeDemoNo1.html" />
<noframes>
<body>
浏览器无法处理框架!!!
<body>
</noframes>
</frameset>
</html>
垂直框架--->cols(列属性)
<frameset cols="40%,30%,30%">
<frame src="SemanticDemoPractice.html" />
<frame src="BootstrapDemoPractice.html" />
<frame src="ColumnPracticeDemoNo1.html" />
<noframes>
<body>
浏览器无法处理框架!!!
<body>
</noframes>
</frameset>
水平框架--->rows(行属性)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="这是一个框架的练习，试用水平排版" />
<title>This is a practice about rows</title>
</head>
<frameset rows="30%,20%,30%">
<frame src="IframePractice.html" />
<frame src="PracticeDemoNo1.html" />
<frame src="ResponsiveDesignPractice.html" />
</frameset>
<body>
</body>
</html>
混合框架结构--->嵌套<frameset>标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="这是一个关于框架的练习Demo" />
<title>This is a Demo</title>
</head>
<frameset rows="50%">
<frame src="FramesetPracticeDemoNo3.html" />
<frameset cols="30%,30%,40%">
<frame src="SemanticDemoPractice.html" />
<frame src="PracticeList.html" />
<frame src="IframePractice.html" />
</frameset>
</frameset>
</html>
导航框架
目标Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="BootstrapDemoPractice.html" target="showframe">没有锚的连接</a>
<br />
<a href="SemanticDemoPractice.html#C10" target="showframe">带有锚的连接</a>
</body>
</html>
SemanticDemoPractice
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="语义元素的练习" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Practice about Semantic Elements</title>
</head>
<body>
<nav>
<a href="TablePracticeDemoNo1.html">Table</a> |
<a href="SemanticDemoPractice.html">Semantic</a> |
<a href="ResponsiveDesignPractice.html">Response</a>
</nav>
<section contenteditable="false">
<h1>Semantic Elements</h1>
<p contenteditable="true" style="font-family: '微软雅黑'; color: saddlebrown; font-size: medium;">This is a content about Semantic Elements</p>
</section>
<section contenteditable="false">
<h1>Content</h1>
<p contenteditable="true" style="font-family: '微软雅黑'; color: darkmagenta; font-size: large;">Input Something</p>
</section>
<article contenteditable="false" style="font-family: '微软雅黑'; color: black; font-size: large;">
<h1>What can you do</h1>
<p contenteditable="false" style="font-family: '微软雅黑'; color: royalblue; font-size: medium;">It is a content</p>
</article>
<br />
<article contenteditable="false" style="font-family: '微软雅黑'; color: blanchedalmond;">
<header contenteditable="false"