常见的页眉/页脚与静态的HTML
用静态的HTML / XHTML创build常见的页眉/页脚文件在网站的每个页面上显示是否有体面的方式？ 我知道你显然可以用PHP或服务器端指令做到这一点，但有什么办法可以做到这一点，绝对没有依赖于服务器的一切为你缝合？
编辑：所有非常好的答案，是我的预期。 HTML是静态的，句号。 如果没有运行服务器端或客户端的东西，没有真正的方法来改变。 我发现服务器端包括似乎是我最好的select，因为它们非常简单，不需要脚本。
有三种方法可以做你想做的事情
服务器脚本
这包括诸如php，asp，jsp之类的东西….但是你对此说不
服务器端包括
您的服务器正在提供页面，为什么不利用内置的服务器端包括 ？ 每个服务器都有自己的方式来利用它。
客户端包含
这个解决scheme可以在页面已经加载到客户端之后再回到服务器。
由于HTML没有“包含”指令，我只能想到三种解决方法
- 框架
- 使用Javascript
- CSS
对每种方法稍加评论。
帧可以是标准帧或iFrames。 无论哪种方式，你将不得不为他们指定一个固定的高度，所以这可能不是你正在寻找的解决scheme。
Javascript是一个相当广泛的主题，可能有很多方法可以用来达到预期的效果。 但是我可以想到两种方法：
- 成熟的AJAX请求，请求页眉/页脚，然后将它们放在页面的正确位置;
-
document.write('My header goes here');有一些像这样的东西：document.write('My header goes here');
这样做通过CSS将是一个真正的滥用。 CSS的content属性允许你插入一些HTML内容，虽然它并不是真的打算这样使用。 此外，我不确定浏览器支持这个结构。
JQuery的load（）函数可以用来包含常见的页眉和页脚。 代码应该是这样的
<script> $("#header").load("header.html"); $("#footer").load("footer.html"); </script>
你可以在这里finddemo
你可以用javascript做到这一点，我不认为它需要那样的花式。
如果你有一个header.js文件和一个footer.js。
那么header.js的内容可能是类似的
document.write("<div class='header'>header content</div> etc...")
请记住要转义您正在编写的string中的嵌套引号字符 。 然后你可以用你的静态模板来调用它
<script type="text/javascript" src="header.js"></script>
和footer.js类似。
注：我不推荐这个解决scheme – 这是一个黑客攻击，并有一些缺点（search引擎优化和可用性，只为初学者） – 但它确实符合提问者的要求。
你可以使用jquery轻松做到这一点。 没有必要的PHP这样一个简单的任务。 只需在您的网页中包含一次。
$(function(){ $("[data-load]").each(function(){ $(this).load($(this).data("load"), function(){ }); }); })
现在使用任何元素的数据加载从外部HTML文件调用其内容，你只需要添加行到你的HTML代码，你想要放置的内容。
例
<nav data-load="sidepanel.html"></nav> <nav data-load="footer.html"></nav>
最好的解决scheme是使用具有模板/包括支持的静态站点生成器。 我使用锤子为Mac，这是伟大的。 还有Guard，一个监视文件变化的rubygem，编译sass，连接任何文件，可能包括。
HTML框架，但它不是一个理想的解决scheme。 你将基本上一次访问3个独立的HTML页面。
你的其他select是使用AJAX我想。
最实际的方法是使用服务器端包含 。 当你的页面不止一页时，实现起来非常简单，节省了大量的工作。
不可以。静态HTML文件不会更改。 你可能会用一些花哨的JavaScript AJAXy解决scheme来做到这一点，但这将是糟糕的。
现在每种脚本语言都不存在使用像现在这样的数百个本地模板系统，甚至使用sed或m4自制程序，并将结果发送到服务器，否则至less需要SSI。
你可以使用任务跑步者，如吞咽或咕噜声。
有一个NPM gulp软件包，可以dynamic地执行文件，并将结果编译成输出HTML文件。 你甚至可以将值传递给你的分支。
https://www.npmjs.com/package/gulp-file-include
<!DOCTYPE html> <html> <body> @@include('./header.html') @@include('./main.html') </body> </html>
一个吞咽任务的例子：
var fileinclude = require('gulp-file-include'), gulp = require('gulp'); gulp.task('html', function() { return gulp.src(['./src/html/views/*.html']) .pipe(fileInclude({ prefix: '@@', basepath: 'src/html' })) .pipe(gulp.dest('./build')); });
包含静态HTML的另一个文件的唯一方法是iframe。 我不认为这是一个非常好的解决scheme的页眉和页脚。 如果您的服务器由于某些奇怪的原因而不支持PHP或SSI，则可以使用PHP并在上载之前在本地进行预处理。 我会考虑比iframe更好的解决scheme。
