HTML学习(二)

最新推荐文章于 2024-01-10 22:40:06 发布

Andrew_Lii

最新推荐文章于 2024-01-10 22:40:06 发布

阅读量327

点赞数

分类专栏： html javascript 文章标签： html 标签框架布局

本文链接：https://blog.csdn.net/Andrew_Lii/article/details/78935079

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

如果试图使用框架布局编写网页，在H5中”frame”标签已被弃用（”frameset”标签自然也被弃用了），取而代之的是”iframe”标签。后者比之前者后者用用更加优越的灵活性。
例如：

frame不能脱离frameset单独使用，iframe则可以。
fram不能放置与body中，这意味着如果你想使用框架布局则整个页面都必须使用框架，不能有其他的标签，iframe则没有这个限制
frame不能独立调整大小，只能通过frameset实现，而iframe可以通过css调整大小

下面是一个展示a标签中的target属性与iframe标签结合的栗子:

主页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>老阿姨黄可，2333</title>
</head>
<body>
<iframe style="width: 50%;height: 100%;position: absolute;top: 0;left: 0" src="左框架.html" name="左框架"></iframe>
<iframe style="width: 50%;height: 100%;position: absolute;top: 0;left: 50%" src="右框架.html" name="右框架"></iframe>
</body>
</html>

左框架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左框架</title>
</head>
<body style="background-color: #68acd3">
<iframe name="左框架的子框架" src="左框架的子框架.html" style="position: absolute;top: 0;left: 0px;height: 50%;width: 100%"></iframe>
</body>
</html>

左框架的子框架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左框架的子框架</title>
</head>
<body style="background-color: #FFCCCC">
    <ul>
        <li><a href="test.html" target="_blank">_blank</a></li>
        <li><a href="test.html" target="_self">_self</a></li>
        <li><a href="test.html" target="_parent">_parent</a></li>
        <li><a href="test.html" target="_top">_top</a></li>
        <li><a href="test.html" target="右框架">右框架</a></li>
    </ul>
</body>
</html>

右框架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右框架</title>
</head>
<body style="background-color: #ff6600">

</body>
</html>

test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黄可老阿姨</title>
</head>
<body>
<div style="background-color: #FF0000;width: 600px;height: 400px;position: absolute;top: 50%;left: 50%;margin-left: -300px;margin-top: -200px">
    <p style="text-align: center;line-height: 400px;">黄可老阿姨,2333</p>
</div>
</body>
</html>

效果如图：
这里写图片描述

但是使用框架布局也有不少坏处,例如：

框架结构有时会让人迷惑，特别是你拥有特别多滚动条时，会压榨原本属于内容的空间。
它调用外部的页面，也会额外调用外部界面的CSS，给页面额外的请求次数。
阻塞window的onload事件触发，如果使用iframe标签，那么onload需要在所有iframe加载完毕之后（包括外部页面的各种元素）才能触发。这会给人一种非常慢的感觉，

注释：window.onload事件是一个在文档与图片加载完毕之后才会触发的事件，常用于避免JavaScript脚本获取不到对象的情况的发生

CSS布局是一项需要多练习的技能，有时候一些比较简单的问题，却得不到一个好的答案，比如元素的自适应定位。

例如自适应的居中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应居中</title>
</head>
<body>
    <div style="
    position: absolute;
    top: 50%;
    left: 50%;
    height: 200px;
    width: 300px;
    margin-top: -100px;
    margin-left: -150px;
    background-color: #FFCCCC"
    >
    </div>
</body>
</html>