logo标签列表

HTML能够包含两个HEAD标签吗？

htmljsp
32

在我的Web应用程序中，我有一个包含默认头部内容的Header.jsp文件。我通过在每个单独页面的body标签中使用jsp:include标签来将其包含在所有其他页面中。

Header.jsp 包含自己的 HEAD 标签以指定默认的元标记、链接样式表、脚本和一些 HTML 元素。同时，在所有其他单独页面中，我将有另一组头标记来定义标题、特定于页面的脚本和样式表。

例如:

Header.jsp

<head>
   <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/favicon.ico" type="image/x-icon" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <script src="js/jquery.js"></script>
   <link rel=stylesheet type="text/css" href="dashboard.css" >
</head>
<h2>Dashboard</h2>

Main.jsp

<!DOCTYPE html> 
<html>
   <head>
      <title>Main page</title>
      <script src="main.js"></script>
   </head>
   <body>
      <jsp:include page="Header.jsp" flush="true" />
      .....
      other HTML contents specific to main page
      .....
   </body>
</html>

这样做是否有效？

дҪ дёҚиғҪжҠҠJSPж–Ү件еҢ…еҗ«еңЁ<head>ж ҮзӯҫеҶ…пјҢ然еҗҺеҸӘдҪҝз”ЁдҪ йңҖиҰҒзҡ„иЎҢпјҢжҜ”еҰӮ<meta>гҖҒ<script>е’Ң<link>еҗ—пјҹжҲ‘еҜ№JSP并дёҚжҳҜеҫҲдәҶи§ЈпјҢеҰӮжһңжҲ‘иҜҙй”ҷдәҶпјҢиҜ·зә жӯЈжҲ‘гҖӮ - Déjà vu
3
当然可以。真正的问题是：是否可以有两个头部标签？根据W3C规范，答案是否定的。 - Gwenc37
7个回答
89

简短的答案是是。

这不是一个好的解决方案，但绝对可以行得通。

人们通常在理论上回答这些问题，比如“不行，因为它不符合标准”。没错，它确实不符合标准。将来的浏览器可能不支持它，某些源代码解析器可能会混淆，HR/IT专家检查你的作品集时可能认为你知道得比琼·雪还少，以及各种糟糕的事情。从理论上说。但是在现实世界中确实发生了，浏览器并不愚蠢：他们知道你的意思，他们会同时处理head标记并按预期工作。

这不仅是偶然的。
他们有很好的理由：

1. head标记是可选的。（请参阅文章下面的注释！）
浏览器甚至可以接受类似head标记的内容放在标记外面，因此实际上它们完全忽略了标记本身。如果他们忽略了一个，他们也可能忽略几个。

2. 访问者是非常珍贵的。
浏览器希望您享受愉快的阅读体验。他们想要展示他们所能组成的最佳页面，以展现互联网的工作原理，并不是为了教您发现您喜欢的网站有多糟糕。如果他们能够找到 HTML 代码表达的意图（并且结构没有歧义），他们会尽力修复页面。

3. 容错性是一项重要的特质。
浏览器不仅耐心宽容，有时还会做出一些灵活的动作来使您的内容正常工作。看看这个可怕的代码混乱情况：

<!-- no doctype! -->
<!-- no HTML tag! we're all gonna die! -->
<head>
    <style>
        body {background:#002233;}
    </style>
</head>
<head><!-- let's twist again! -->
    <style>
        body {color:white}
    </style>
<!-- we didn't even close the second one!! -->

See this text?<br>
With the background AND color properly set?<br>
<br>
Your browser's quite a badass.

关于浏览器的容错性，这里有更多超级丑陋的例子 - 确保你回来时忘记你看到的一切！

当然，原则是“成为浏览器的好朋友”，无论它如何聪明地修复你的错误。但如果你在黑暗的地牢中醒来，周围有饥饿的狮子，你唯一的出路是使用两个<head>标签 - 那么，请不要犹豫！这不是破损的语法，也不是HTML5规则的严重违反 - 它只是一个方便的欺骗。不要相信非标准、不整洁的网站会繁荣得多的普遍神话：人们通常只是不确定并想保持安全。通常他们是那些把失败的网络作者送进验证器的地狱的人。

简而言之，在实践中，两个头标签是有效的。

现在请尽可能只使用一个。

附加说明

正如@StanislavBerkov所指出的，W3C和MDN都建议HEAD标签是隐含的，这意味着最好完全不使用head标签。如果您只能使用其中一个标签，则不建议采用此方法，但没有标签比有两个标签要好。关于此主题的文档不是很清楚，因此请确保在主要浏览器中测试所有内容-但实际上，您将面临没有问题。

10
我在 Stack Overflow 上读到的最好写作的答案。信息量丰富、娱乐性强，同时还很简洁。 - Félix Paradis
2
最佳答案肯定 - AhammadaliPK
1
值得添加注释：根据https://www.w3.org/TR/html401/struct/global.html，对于head元素，“开始标签：可选，结束标签：可选”。同样根据 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head ，“如果<head>元素中的第一件事是一个元素，则可以省略开始标记。”因此，我们可以将head视为隐含元素。只需不使用head标签，直接将内容放在html标签中即可。@dkellner请更新您的发布) - Stanislav Berkov
@StanislavBerkov 有趣的补充！文档似乎有点不清楚 - “如果 head 元素的第一项是一个元素，则可以省略 head”，好吧，但是当它没有开始标记时，如何知道哪个是元素中的第一个？它是否包括 html 标记后的换行符、缩进空格等。也许这只是 MDN 的措辞不够清晰。同样，“如果 head 元素后面的第一项不是空格或注释，则可以省略结束标记”，同样的问题。也许我没有理解。但无论如何都需要更新！ - dkellner
作为该用法的示例，您可以查看 https://learnxinyminutes.com/docs/html/ - Onat Korucu
18

根据标准，这不是有效的。

相关部分:

4.2.1 head元素

类别: 无。

可以使用此元素的上下文: 作为html元素中的第一个元素。

您的第二个<head>元素不会是html文档中的第一个元素。

3
从技术上讲，你在引用一份文件，该文件表示：“这是一份草案文件，可能随时会被其他文件更新、替换或淘汰。将此文件视为正在进行的工作以外的任何内容都是不恰当的。”但是所有 HTML 规范和草案都遵循同样的原则：每个文档只允许有一个 head 元素。 - Jukka K. Korpela
1
当然，因为HTML5规范仍处于RC状态，但是根据所选择的标签，发布者要求使用HTML5。 - mvillar
1
所以它不是标准，更不是“标准”。 - Jukka K. Korpela
作为该用法的示例，您可以查看 https://learnxinyminutes.com/docs/html/ - Onat Korucu
2

以下是一个你可以尝试的想法

在你的主头文件中执行以下操作

<!DOCTYPE html> 
<html>
<head>
   <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/favicon.ico" type="image/x-icon" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <script src="js/jquery.js"></script>
   <link rel=stylesheet type="text/css" href="dashboard.css" >

注意我省略了结束头标签。然后在所有文件中，您必须关闭头标签或添加额外的标题内容，然后关闭头标签，例如：
      <title>Main page</title>
      <script src="main.js"></script>
   </head>
   <body>
      <jsp:include page="Header.jsp" flush="true" />
      .....
      other HTML contents specific to main page
      .....
   </body>
</html>

关于页面标题，您可以运行一些PHP代码来确定您所在的页面。

2

很好的回复@Gwenc37。你可以在任何其他标签中使用任何标签，但最好还是遵守W3C标准和规范。在项目后期，您可能会遇到HTML无法在浏览器中正确解析甚至更糟的情况。

为了安全起见，最好遵守W3C标准。这样就不会出错了。希望这可以帮到你。

1
根据W3C标准，不行！你不能这样做。
在您的情况下，您正在使用JSP作为服务器端脚本。可以通过使用样式表/脚本/其他HTML元素的常量来解决问题。
您只需要根据页面要求在“main.jsp”文件中添加条件即可。
0
根据W3C标准，您不能有两个HEAD标签。
关于您的问题，您可以在没有HEAD标签的情况下调用header.jsp文件，或者将其重命名为scripts.jsp或constants.jsp。
例如：

Header.jsp

<link rel="shortcut icon" href="<%=request.getContextPath()%>/images/favicon.ico" type="image/x-icon" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="js/jquery.js"></script>
<link rel=stylesheet type="text/css" href="dashboard.css" >

Main.jsp

<!DOCTYPE html>
<html>
<head> 
<title>Main page</title>
<script src="main.js"></script>
<jsp:include page="Header.jsp" flush="true" />
</head>
<body> 
..... 
other HTML contents specific to main page
..... 
</body>
</html>
0

实际上.. 是的

你可以在HTML中像这个例子一样添加两个标签：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Document</title>
</head>

<head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
  </head>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接