欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML学习(二)

程序员文章站 2022-04-29 12:33:34
...

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

  1. frame不能脱离frameset单独使用，iframe则可以。
  2. fram不能放置与body中，这意味着如果你想使用框架布局则整个页面都必须使用框架，不能有其他的标签，iframe则没有这个限制
  3. 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>

效果如图：
HTML学习(二)

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

  1. 框架结构有时会让人迷惑，特别是你拥有特别多滚动条时，会压榨原本属于内容的空间。
  2. 它调用外部的页面，也会额外调用外部界面的CSS，给页面额外的请求次数。
  3. 阻塞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>

这里top:50%,left:50%将元素的左上角定位在页面的*，margin-top: -100px, margin-left: -150px，各取高宽的一半，则将元素向上和向左各移动元素高宽的一班，达到居中效果。

相关标签： html 标签 框架 布局

上一篇： 总结node.js常用fs文件系统（全面）

下一篇： 【HTML】什么是 HTML 中的图片标签 img

推荐阅读