多个<head>和<body>标签

Question

多个<head>和<body>标签

4

我正在尝试创建一个非常简单的网络应用程序，主要是为了了解HTML5、CSS和JavaScript编码的最佳实践。

我的应用程序有3-4个页面，每个页面都使用相同的菜单头。因此，我想通过编写一个单独的文件（可以是PHP或HTML）来使其可重用。

head.php（将被重用）：

<!DOCTYPE html>
<html>
<head>
    <link href="../../css/headermenu.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="menu">
    <li><a href="#" class="home">Home<span></span></a></li>
</ul>
<p> 
</p>
</body>
</html>

front.php:

<?php
    include ("$_SERVER[DOCUMENT_ROOT]/page/common/head.php");
?>

HTML标记（不规范的代码）：

<!DOCTYPE html>
<html>
<head>
    <!DOCTYPE html>
<html>
<head>
    <link href="../../css/headermenu.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="menu">
    <li><a href="#" class="home">Home<span></span></a></li>
</ul>
<p> 
</p>
</body>
</html></head>
<body>
    <div>
    </div>
    <p>
    </p>
</body>
</html>

我有以下问题：

head.php文件中包含了<body>和<head>标签，那么我应该在哪里写这些PHP代码来引用它？（是在<head>还是<body>中）（我不想在最终页面中出现多个<head>和<body>）
我还应该遵循哪些最佳实践？（欢迎提供任何参考链接）

我已经阅读了w3schools。

- user811602

1

@AmalMurali +1:). 有没有关于纠正我的基础知识的参考/链接 :) - user811602

@pc-shooter 不要因为某人合理地认为谷歌上的第一个结果是好的而对其进行负面评价。应该责怪谷歌/W3Schools。 - ceejayoz

@ceejayoz 你说得对！再次点赞谢谢。 - toesslab

3个回答

3

PHP可以渲染HTML，如果两个文件中都有头部信息，当然会打印两次。

你应该将头部信息分离到include文件中，不要在两个文件中都写标签。

例如：

<header>
<?php
    // this file should not include <head> taf
    include ($_SERVER[DOCUMENT_ROOT] . '/page/common/header.php);
?>
</header>
BODY
<header>
<?php
    include ($_SERVER[DOCUMENT_ROOT] . '/page/common/foot.php);
?>
</header>

使用 include 语句可以将 head.php 和 foot.php 的内容导入到 index.php 文件中。

- Anri

谢谢。这确实是一种模块化的方式。又出现了同样的问题。如果head.php需要head.css，foot.php需要foot.css，那么index.php需要在其头部包含两者（这会使它紧密耦合）。有没有办法在各自的文件中包含CSS而不添加<head>标签？ - user811602

是的，您可以添加不带头文件的内容...但是您可以将其添加到主文件中而不是包含的文件中，或者您可以将其添加到页眉和页脚中并分开处理，这不是问题。享受 :) - Anri

2

另一个避免多个头部标签且可以添加额外 CSS 文件的可能解决方案是：

<?php
// head.php
$html = <<< EOF
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
  <head>
    <title>{$title}</title>
    {$meta}
    <link href="../../css/headermenu.css" rel="stylesheet" type="text/css"/>
    {$additional_style}
  </head>
  <body>
    <ul id="menu">
        <li><a href="#" class="home">Home<span></span></a></li>
    </ul>
    {$mainbody}
    {$footer}
    {$javascript}
  </body>
  </html>
EOF;
?>

<?php
// page1.php

$title = 'some title';
$meta = '';
$additional_style = '';
$mainbody = 'your body';
$footer = '';
$javascript = '';

include_once("head.php");
echo $html;
?>

<?php
// page2.php

$title = 'some other title';
$meta = '';
$additional_style = '<link href="../../css/page2.css" rel="stylesheet" type="text/css"/>';
$mainbody = 'your body';
$footer = '';
$javascript = '';

include_once("head.php");
echo $html;
?>

它还允许多级继承（例如，您可以为几个页面定义相同的页脚）。这个原则也可以在没有EOF的情况下使用，但我认为这样看起来更好。

主要缺点是如果您没有在包含它的页面中设置head.php的所有变量，则会收到警告。

- tim

谢谢你的解决方案。我怀疑这是否是标准做法，但作为一种替代方案，它确实非常棒，具有完全解耦和无冗余的特点。 - user811602

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- toesslab · Accepted Answer

我认为阅读有关模板系统的内容或者查看框架/CMS如何处理这一问题是一个好主意。

按照你自己的方式，你无法完全避免在每个content.php中重复例如闭合头标签</head>等内容。

所以这只是一个想法：

head.php

<?php
    // Some other includes / requires,
   // code snippets...
?>
<!DOCTYPE html>
<html>
    <head>

        <!-- site-wide stylesheets -->
        <!-- & js-files -->
        <link href="css/main.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="my/global/scripts.js"></script>

content.php

<?php
    include ($_SERVER['DOCUMENT_ROOT'] . '/page/common/head.php');
?>

    <!-- put page specific scripts &     
    <!-- styles here -->
    <link href="my/pages/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="my/pages/js/scripts.js"></script>
</head>
<body>
    <div id="container">
        <!-- content start -->
        <div id="content">
            <h1>title</h1>
            <p>Your content</p>
        </div>
        <!-- end of content div -->
<?php
    include ($_SERVER['DOCUMENT_ROOT'] . '/page/common/foot.php');

foot.php

        <div id="foot">
               copyright etc
        </div> 
    </div> <!-- end of container div -->
</body>
</html>