html公共部分

HTML公共代码的公用是网页开发中一个常见的需求，它有助于保持网站的一致性，减少重复代码，简化维护工作，以下是一些实现HTML公共代码公用的方法：

1. 包含（Include）文件

使用服务器端包含（SSI）

如果你的网站托管在一个支持服务器端包含（Server Side Includes, SSI）的服务器上，你可以使用#include指令来引入公共的HTML文件。

<!
#include virtual="/path/to/header.html" >

这里header.html是一个包含公共代码的文件，它将被服务器在发送页面之前插入到指定位置。

使用PHP包含

如果你的网站使用PHP，你可以使用include或require语句来包含公共的HTML文件。

<?php include 'header.html'; ?>

或者

<?php require 'header.html'; ?>

include和require的区别在于，当包含的文件不存在时，include会产生一个警告，但脚本会继续执行，而require则会产生一个致命错误，并停止脚本的执行。

2. 客户端包含

使用JavaScript

在客户端，你可以使用AJAX技术动态加载HTML内容，使用jQuery的load方法：

$(function() {
    $("#header").load("header.html");
});

在这个例子中，header.html文件的内容会被加载到ID为header的元素中。

使用iframe

另一个客户端的解决方案是使用iframe元素来嵌入公共的HTML页面：

<iframe src="header.html" frameborder="0"></iframe>

这种方法的缺点是iframe会创建一个新的浏览器窗口上下文，这可能会影响CSS样式和JavaScript的作用范围。

3. 使用模板引擎

模板引擎是一种更高级的解决方案，它可以帮助你更有效地管理和重用代码，流行的模板引擎如Mustache, Handlebars, Jinja2等，都提供了在HTML文件中插入变量和逻辑的功能。

使用Handlebars模板引擎：

<!header.hbs >
<header>
    <nav>
        <ul>
            {{#each items}}
                <li>{{this}}</li>
            {{/each}}
        </ul>
    </nav>
</header>

在JavaScript中使用这个模板：

var template = Handlebars.compile($('#header').html());
var html = template({items: ['Home', 'About', 'Contact']});
$('body').append(html);

4. 预处理器和构建工具

使用预处理器如Pug (formerly Jade) 或构建工具如Webpack可以帮你组织和管理你的HTML代码，这些工具通常允许你创建组件化的HTML模块，并在构建过程中自动将这些模块合并到一个文件中。

使用Webpack和HtmlWebpackPlugin，你可以将多个HTML文件合并成一个，同时自动注入所有的JavaScript和CSS资源。

上文归纳

实现HTML公共代码的公用有多种方法，选择哪种方法取决于你的具体需求和技术栈，服务器端包含适合简单的静态网站，而客户端包含和模板引擎更适合动态内容和复杂的交互，预处理器和构建工具则是现代化前端开发的标准做法，它们提供了更高的灵活性和扩展性。