HTML使用iframe元素实现页面内容的跳转功能

最新推荐文章于 2023-08-18 10:28:51 发布

前端菜菜阿海

最新推荐文章于 2023-08-18 10:28:51 发布

阅读量4.7k

点赞数 3

分类专栏：前端学习手记文章标签： html5 html css css3 前端

本文链接：https://blog.csdn.net/zxh996/article/details/118390817

版权

本文介绍了HTML5中的iframe元素，用于在页面中插入其他文档，实现静态页面跳转功能。通过设置target属性、frameborder属性和scrolling属性，可以创建并控制iframe的行为。同时，提供了一个简单的主页面和内容页面的代码示例，展示了如何通过iframe进行页面内容的切换。

摘要由CSDN通过智能技术生成

前言

在前端的学习中，不免有一些页面的跳转功能的实现，而身为初学者的我们没有过快的接触JavaScript，无法实现动态的页面跳转，所以我在这里使用了一种HTML的元素实现页面元素跳转功能，仅供参考学习。

一、iframe是什么？

irame是 HTML5 中的新增加的属性，所以在HTML5之前的版本是不支持的，作用是文档中的文档，或者浮动的框架。iframe元素会创建包含另外一个文档的内联框架（即行内框架）。可理解为在HTML页面中加入HTML页面，可用于制作简易的页面框架。

二、iframe的使用

1.主页面内容代码

代码如下（示例）：

    <style>
        ul {
    
            list-style: none;
        }
        ul li {
    
            width: 30px;
            height: 30px;
            text-align: center;
            margin-bottom: 5px;
            line-height: 30px;
        }
        ul li a {
    
            text-decoration: none;
            color: #222222