day2 12iframe元素

最新推荐文章于 2024-09-23 16:31:40 发布

ryewsk

最新推荐文章于 2024-09-23 16:31:40 发布

阅读量57

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ryewsk/article/details/115433670

版权

本文探讨了网页布局中iframe的使用，包括如何通过调整scrolling属性解决内容显示问题，以及iframe对前进后退功能和SEO的潜在影响。建议尽量减少iframe的使用，转而采用div布局。示例代码展示了如何用div替代iframe实现导航栏和内容区域的展示，并提供了一个分类链接的结构。同时，文章提到了图片和列表的HTML元素用法。

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

 <iframe src="iframe/nav.html" scrolling="no" width="300%" frameborder="0"></iframe>

scrolling="no"如果内容被折叠，显示不出来，可改为scrolling=“auto”

在实际开发，尽量减少使用iframe，因为它破坏了前进和后退功能，且不利于SEO(搜索引擎优化)

因为内容是呈现在其他文件里面
可用div布局方式来解决
代码1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--banner-->
    <iframe src="iframe/banner.html" marginheight="0" scrolling="no" width="100%" frameborder="0"></iframe>

    <!--nav-->
    <iframe src="iframe/nav.html" scrolling="auto" width="30%" height="200" frameborder="0"></iframe>
    <!--content1-->
    <iframe src="iframe/conten1.html" name="main" scrolling="no" width="30%" height="200" frameborder="0"></iframe>
</body>
</html>

代码2

 <p>内容2...........</p>

代码3

<p>内容1.........</p>

代码4

<img src="../img/1.png" alt="banner"/>

代码5

<!--ul>li{分类$}*5>ul>li*5>a[href]{内容$}-->
<ul>
    <li>分类1
        <ul>
            <li><a href="conten1.html" target="main">内容1</a></li>
            <li><a href="content2.html" target="main">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
    <li>分类2
        <ul>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
    <li>分类3
        <ul>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
    <li>分类4
        <ul>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
    <li>分类5
        <ul>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
</ul>