当前位置：工具盒子 > HTML > 正文

HTML网页引用公共的头部和底部（亲测有效的三种方法）

2024-12-14 分类：HTML 阅读(31) 评论(0)

HTML静态页面引用公共的头部和底部 {#menu_index_1}

方法一： {#menu_index_2}

通过load()函数，分别引入公共头部和底部文件;

header.html 顶部页面

<!DOCTYPE html>
<html>
    <head>
        <link href="./header.css" rel="stylesheet">
    </head>
    <body>
       <div class="header">
           <h4>头部</h4>
       </div>
   </body>
</html>

footer.html 底部页面

<!DOCTYPE html>
<html>
    <head></head>
    <body>
       <div class="footer">
           <h4>这里是底部</h4>
       </div>
   </body>
</html>

index.html 正文页面

<!DOCTYPE html>
<head></head>
<body>
    <!-- 顶部导航 -->
    <div class="headerpage"></div>
    <!--顶部导航 over-->    
&amp;lt;!--中部主体--&amp;gt; 
    &amp;lt;p&amp;gt;正文部分&amp;lt;/p&amp;gt;
&amp;lt;!--中部主体 over--&amp;gt;  

&amp;lt;!--footer--&amp;gt;  
&amp;lt;div class=&quot;footerpage&quot;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;!--footer over--&amp;gt;
&amp;lt;script src=&quot;/js/jquery-3.4.1.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;/*引用或下载官网最新js代码*/
&amp;lt;script&amp;gt;
    $(function(){
        /*公共部分
        * 导航栏
        * footer CopyRight
        */
        // $(&quot;.headerpage&quot;).load(&quot;load/header.html&quot;);/*浏览器容易引起跨域问题*/
        $(&quot;.headerpage&quot;).load('http://www.load.com/header.html');
        $(&quot;.footerpage&quot;).load(&quot;http://www.load.com/footer.html&quot;);
    });
&amp;lt;/script&amp;gt;

&lt;/body&gt; &lt;/html&gt;

注意：load函数里最好不要写本地的文件，容易引起跨域问题导致浏览器找不到页面，我这里是用域名来解决的。

方法二： {#menu_index_3}

引用<object>来实现

<object type="text/x-scriptlet" data="header.html" width=100% height=30></object>

方法三： {#menu_index_4}

HTML5 中的 <embed> 标签

<embed type="text/html" src="header.html" />

小维认为方法一在HTML静态页面中的使用是最合适不过的哦。

注意：方法二和方法三必须设置宽和高，高必须固定，设置auto会出现页面显示不完整的情况。（亲测方法三会出现滚动条）

这里不提iframe，主要因为设计网页相对比较困难，占用线程较多，速度慢，而且也不利于搜索引擎的对头尾的收录。

HTML网页引用公共的头部和底部（亲测有效的三种方法） - 原文链接：https://blog.isww.cn/309.html

未经允许不得转载：工具盒子 » HTML网页引用公共的头部和底部（亲测有效的三种方法）

标签：

厉飞雨

众生皆苦，唯有自渡！

相关推荐