html 如何引入一个公共的头部和底部

╰+哭是因爲堅強的太久メ 2022-05-11 16:46 274阅读 0赞

原文转自[https://yq.aliyun.com/articles/100662?t=t1\#][https_yq.aliyun.com_articles_100662_t_t1]

html 静态页面中引用外部页面没那么方便，主要方法有：

## 1.asp语言和PHP语言 ##

首先制作一个头部文件head.asp，或者一个底部文件foot.asp。如主页是index.asp，调用头部代码是在index.asp文件代码的开始位置（第一个标记后面，

标记前面）增加如下代码：

<!–  #include file=”head.asp”    –>

如果是PHP文件，文件名改为 head.php即可

## 2.使用框架来实现 ##

以前人们常常使用静态frame框架来做首尾(一般不是iframe)。现在越来越少见了。主要因为设计网页相对比较困难，而且还增加了连接数,占用线程较多，速度慢，而且也不利于搜索引擎的对头尾的收录

## 3.使用.js脚本来实现 ##

建立一个head.js的文件，找一个html转js的网站，然后把你头部的html代码转化成js代码，并放在head.js文件里面。然后在需要调用head文件代码的地方添加

这个地方src="js/head.js"的路径是你head.js文件的路径

html转换为JS:

document.writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
    document.writeln("<html xmlns=\"http://www.w3.org/1999/xhtml\">");
    document.writeln("<head>");
    document.writeln("<style>");
    document.writeln("</style>");
    document.writeln("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");
    document.writeln("<title></title>");
    document.writeln(" <link href=\'head.css\'  rel=\"stylesheet\" type=\"text/css\" />");
    document.writeln("</head>");
    document.writeln("<body >");
    document.writeln(" <div class=\'miaov_head\'>");
    document.writeln("    <ul>");
    document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">Mac</a></li>");
    document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">iPhone</a></li>");
    document.writeln("    </ul>");
    document.writeln("</div>");
    document.writeln(" ");
    document.writeln("</body>");
    document.writeln("</html>");
    document.writeln("");

以后无论在哪个页面，想调用该头部文件，直接插入head.js文件即可

这种方式的优点是方便，便于修改。缺点是由于搜索引擎读不懂javascript文件，头部文件和尾部文件搜索引擎无法收录，而且js文件过大会加重访问者的浏览器负担，影响访问速度

## 4.Behavior的download方式 ##

最好能有一种方法，就像asp页面包含其他页面时那样，用一小段包含语句就可以实现，不要将需要包含的内容出现在本页面内，而是分割出去到另外一个自己的页面

<span ><IE:Download STYLE="behavior:url(#default#download)" />
    <script>
        function onDownloadDone(downData){
            showImport1.innerHTML=downData
        }
        oDownload1.startDownload('top.htm',onDownloadDone)
    </script>

注：包含的页面为 top.htm 只要把需要包含的页面改掉就可以了！其中id=showimport 不能改为其他，这种写法为一次包含一个文件

## 5.通过`<object>`实现 ##

## 6.HTML中执行include file ##

使用ssi技术页面生成shtml文件，只用在头部文件位置加入：

SSI（Server Side Include)，通常称为"服务器端嵌入"或"服务器端包含"，是一种类似于ASP的基于服务器的网页制作技术。默认扩展名是 .stm、.shtm 和 .shtml。SSI就是在HTML文件中，可以通过注释行调用的命令或指针，SSI具有 强大的功能，只要使用一条简单的SSI命令就可以实现整个网站的内容更新，时间和日期的动态显示，以及执行shell和CGI脚本程序等复杂的功能

使用shtml的好处是对搜索引擎比较友好，需要处理的文件在服务器端完成的， 不会加重访问者的浏览器负担

## 7.HTML5 中的 `<embed>` 标签 ##

## 8.ajax动态填充 ##

## node代理 ##

1：使用ssi技术页面生成shtml文件，只用在头部文件位置加入，然后修改的时候只要修改header.htm文件就可以了。使用shtml的好处是对搜索引擎比较友好，需要处理的文件在服务器端完成的，不会加重访问者的浏览器负担

## 本地合并 ##

即将HTML硬拆成头、尾、内容三个部分的文件，在预览或者发布之前用脚本手工合并，没有后台的时候使用效果不错

## 9.使用JQuery的load方法 ##

/\*导入页面\*/   
$(document).ready(function()\{   
$(".top").load("top.html");   
$(".footer").load("footer.html");   
\});   
把他写入到js文件里，在需要的页面导入就可以了，

## 10.ajax动态拉取填充 ##

## 11.web服务器（比如IIS）中设定包含 ##

## 12.后台模板引擎处理（字符串拼接） ##

## 13.用图片、flash等外部资源做---不推荐，比较麻烦 ##

## 14.angular js里的的使用 ##

## 15.使用fis。有html嵌入功能 ##

LINK\[rel=import\]其实有点类似于IFRAME，它引用的对象也是一个完整的文档，而不是文档片段，而且里面的SCRIPT也会执行，对跨域的资源访问同样有同源策略的限制

和IFRAME不同的是，它和父文档的关系更密切。它自身确实是一个文档，可以通过link元素上的import属性访问，但在其内部的代码中，如果访问document则等同于访问父文档。这是很奇怪的设定，虽然内部的元素与父文档不在一个DOM树上（父文档上querySelector无法找到内部的元素），但他们却共用一个document对象，甚至共用一个全局环境。这意味着STYLE或SCRIPT之类的标签所执行的结果会影响到容器

[https_yq.aliyun.com_articles_100662_t_t1]: https://yq.aliyun.com/articles/100662?t=t1#