有效地将一个html文件包含在另一个html文件中

Question

我有一个文件， a.html和一个css文件， a_style.css ，链接到一个<head> 。 我现在想要包含第二个html文件b.html ，它有自己的样式包含在<style>标记中。 具体来说， b.html在a.html中指定了我想要的页脚。 我的问题是： a_style.css文件定义了也适用于b.html的标题，边距等。 如果我在a.html中包含b.html ， a_style.css是否仍然适用于包含的文件？ 此外，以下是我必须在a.html中包含b.html ：

<div class="footer">
<?php include('./project/b.html');?>
</div>

这够了吗？ 或者我需要在<head>包含一些内容，类似于

<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

（这个特殊代码来自MathJax）？ 我没有PHP的先前知识，并在类似的问题上找到了这个片段：将一个HTML文件插入另一个HTML文件 。 这对我来说还没有用。 我尝试将扩展名更改为.php，但是eclipse编辑器不允许我再折叠/扩展单个标记，使脚本非常混乱。

Answer 1

如果你只想包含html代码，php命令include不是正确的工具。 如评论中所述，它曾用于包含PHP代码。 您只想读取文件并将其打印出来。 所以你想要使用的是readfile

<div class="footer">
<?php readfile('./project/b.html');?>
</div>

CSS / JS包含的位置无关紧要。 大多数人将它们包含在<head> -Tag中，其他人则喜欢在<body>标签的末尾进行。 但是如果你想让它发挥作用，它并不重要。

Answer 2

a_style.css文件定义了也适用于b.html的标题，边距等。 如果我在a.html中包含b.html ， a_style.css是否仍然适用于包含的文件？

首先我要说的是，这一切都取决于你包含文件的位置 。 冲突的样式将被最后一个覆盖。 让我解释一下。

假设您有三个文件：

• a.php只会
• a_style.css
• b.php

场景：1

在a.php文件中包含b.php 后包含a_style.css时 ：

a.php只会

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page A</title>

    <?php

        require_once("b.php");

    ?>

    <link href="a_style.css" type="text/css" rel="stylesheet" />

</head>

<body>

    <p>This is a paragraph</p>

</body>
</html>

a_style.css

p{
    color: #00ff00; /* green */
}

b.php

<style>
    p{
        color: #0000ff; /* blue */
    }
</style>

输出：

由于我们在b.php之后包含了a_style.css ，因此a_style.css将覆盖每个冲突的样式（在本例中为段落颜色），因此绿色段落。

场景：2

如果在a.php文件中包含b.php 之前包含a_style.css ：

a.php只会

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page A</title>

    <link href="a_style.css" type="text/css" rel="stylesheet" />

    <?php

        require_once("b.php");

    ?>

</head>

<body>

    <p>This is a paragraph</p>

</body>
</html>

a_style.css

p{
    color: #00ff00; /* green */
}

b.php

<style>
    p{
        color: #0000ff; /* blue */
    }
</style>

输出：

由于我们在b.php之前包含了a_style.css ，因此b.php将覆盖每个冲突的样式（在本例中为段落颜色），因此是蓝色段落。