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

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

asp语言和PHP语言

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

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

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

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

使用框架来实现

<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.htm” height=“auto” width="100%"></iframe>

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

使用.js脚本来实现

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

<script language="javascript" type="text/javascript" src="js/head.js"></script>

这个地方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文件过大会加重访问者的浏览器负担，影响访问速度

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 不能改为其他，这种写法为一次包含一个文件

通过<object>实现

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

HTML中执行include file

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

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

<!--#include file="library/common_header.html" -->

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

HTML5 中的 <embed> 标签

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

ajax动态填充

node代理

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

本地合并

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

ajax动态拉取填充

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

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

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

angular js里的的使用

使用fis。有html嵌入功能

<link rel="import" href="demo.html?__inline">

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

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

时间： 2024-09-14 20:44:56

html 如何引入一个公共的头部和底部的相关文章

js调试-利用easyui panel控件中的href 引入一个html代码片段，片段里面的js怎么调试？

问题描述 利用easyui panel控件中的href 引入一个html代码片段,片段里面的js怎么调试? Firefox和chrome的js调试页面都不显示片段js文件.唯一的办法是在要调试的地方加上debugger: 关键字.可是这样很麻烦,有没有其他的办法供调试用呢?

tabhost-如何从TabHost中引用一个子activity来调用一个公共函数？

问题描述 如何从TabHost中引用一个子activity来调用一个公共函数? 在TabHost中有两个子activity,这两个子activity在两个tab中.在其中的一个activity实现了一个公共函数,我想从父类TabHost中调用这个函数,来触发tab中的一些action.能否从TabHost中引用activity本身来调用一个公共函数?tabhost设置: res = getResources(); tabHost = getTabHost(); TabHost.TabSpec s

c#- (C#中有一个公共的窗体 我需要这个公共窗体关闭后跳转到刚才把公共窗体打开的那个窗体)

问题描述 (C#中有一个公共的窗体 我需要这个公共窗体关闭后跳转到刚才把公共窗体打开的那个窗体) (C#中有一个公共的窗体 我需要这个公共窗体关闭后跳转到刚才把公共窗体打开的那个窗体) 谢谢大家了 新手求指教 在线等 解决方案 主窗口写 this.Hide(); Form2 f = new Form2(); //公共子窗体 f.ShowDialog(); this.Show();

在首页中iframe引入一个加载中的页面，在ie浏览器中该部分出现几秒钟白屏，怎么解决？？？

问题描述 在首页中iframe引入一个加载中的页面,在ie浏览器中该部分出现几秒钟白屏,怎么解决??? 在首页中iframe引入一个加载中的页面,在ie浏览器中该部分出现几秒钟白屏,怎么解决??? 解决方案 加载的那个页面初始化数据也是需要时间的,你可以在加载的时候有一个对应的提示[正在加载]或者加一个等待的gif图片.

PHP 自动引入一个目录的所有 PHP 文件

   代码如下 复制代码 /*  *引入一个目录的所有文件  *http://www.111cn.net */ function Bing_include_all_php( $folder ){  foreach( glob( "{$folder}/*.php" ) as $filename ) require_once $filename; } 使用方法就是直接调用这个函数,第一个参数放上要引入的相对目录即可. 还有一种办法可以使用魔术方法__autoload来加载  代码如下 复制

采用SOA后，各个系统如何实现共用部分组件，如头部、底部

问题描述 公司的内部办公系统进行了服务化改造,基于阿里的dubbo,最终整套系统运行时包含好多子系统,tomcat之间实现了session共享,通过nginx实现反向代理,使用户看起来还是一个系统. 现在有几个问题一直困惑我:1.多个子系统中其实有部分内容是相同的    1.1 典型的就是头部和底部,现在是通过ajax请求来实现,但是这样的用户体验非常不好.    1.2 原先在一个系统中可以通过include等方式实现页面的复用,很容易实现如所有页面都要包含一段html的需求.2.现在按照一个

站内优化系列教程二：网站头部和底部优化

前面给大家讲了<站内优化系列教程一:导航优化和结构优化>和<站内优化系列教程二:URL和网站地图优化>两课,今天讲第三课<站内优化系列教程二:网站头部和底部优化>.给网站做站优化最基本的目的就是为了提高网站的排名,相对来说这也是大部分站长优化的主要目的,毕竟如果网站排名不靠前,自然就无法从搜索引挚获取大量的流量,而对于网站运营.提高网站知名度.打造网站特有的品牌则是难之又难.回归正题,大部分站长做网站优化都是特别的重视站外优化,而忽视站内的基本优化,其实最基本的提高用户

Android RecyclerView添加头部和底部的方法_Android

如果只是想添加头部,可是使用GitHub里面这个项目,它可以为LinearLayoutManager,GridLayoutManager ,StaggeredGridLayoutManager布局的RecyclerView添加header.使用起来也十分简单: 只需将RecyclerViewHeader布局放在RecyclerView的上层. <FrameLayout android:layout_width="match_parent" android:layout_heigh

android-如何让一个布局文件在活动底部，不随着滚动，是顶部和底部不滚动，中间滚动

问题描述 如何让一个布局文件在活动底部,不随着滚动,是顶部和底部不滚动,中间滚动 如何让一个布局文件在活动底部,不随着滚动,是顶部和底部不滚动,中间滚动, 解决方案 在w3chool上有关css有这样的例子 解决方案二: AmazeUI滚动到底部或者滚动到顶部甚至任意位置ScrollView滚动到底部和顶部的检测 解决方案三: 中间的控件放到一个 ScrollView 中就可以了.: 解决方案四: 头尾固定,中间放可滚动的控件 解决方案五: 整个页面父布局改成 relativeLayout 里面