<!DOCTYPE> 部分在 JSF 中应该如何显示？ HTML5 还是 XHTML？答案

【问题标题】：How should a <!DOCTYPE> section look in JSF? HTML5 or XHTML?<!DOCTYPE> 部分在 JSF 中应该如何显示？ HTML5 还是 XHTML？
【发布时间】：2013-04-08 18:11:28
【问题描述】：

这只是我现在的好奇心。例如，在 Eclipse 中，这是在 New Facelet 模板 上定义的 <head> 部分，但大多数模板是相同的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
  ..
</head>

我想在上面使用更 clear 的代码，所以我改为：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
  ..
</head>

它在开发中运行良好，但我想知道这种方法是否会在未来通过许多浏览器或设备（移动设备）产生任何问题。

【问题讨论】：

标签： html jsf browser jsf-2 doctype

【解决方案1】：

这是 HTML5 文档类型，它应该可以在所有浏览器中正常工作，包括 IE6。

JSF 被正式指定为生成符合 XHTML 1.0 的标记（here 和 there 仅在 JSF 2.2 中修复和/或由上下文参数管理的实现中存在一些违规行为）。 JSF 在设计上不能生成非 XML sytnax（例如 <br> 而不是 <br/>），因此旧的 HTML4 文档类型与 JSF 生成的 HTML 输出决不兼容（也就是说，当您尊重标准和/或害怕W3 validator；但是，如果不是所有浏览器，大多数浏览器都非常宽容）。与旧的 HTML4 文档类型相反，HTML5 文档类型允许 XML 语法，因此与 XHTML 文档类型兼容。因此，JSF 页面可以使用 HTML5 文档类型编写。

文档类型仅对 webbrowser 如何解释和呈现 HTML 标记（在您的特定情况下由 JSF 生成，但 HTML 不一定需要由 JSF 生成，因此浏览器的呈现在技术上与JSF）。尤其是 Microsoft IE 在某些 doctype 方面存在重大问题，或者完全没有 doctype。 At the bottom of this page 您可以结合某些文档类型找到浏览器行为的简明概述。共有三种标准行为：

Q - 怪癖模式。你真的不想拥有那个。它在 IE 中触发 box model bug。 CSS width 和 height 然后错误地覆盖了 padding 和 border。
A - 几乎是标准模式。经济实惠，只有表格单元格的垂直尺寸不符合 CSS2 规范。如果您想避免使用mysterious gaps of images in table cells，这很有用。
S - 标准模式。浏览器尝试完全符合 w3 HTML/CSS 标准。首选模式，因为它是唯一一种模式，您可以或多或少确定您的网站在所有浏览器中的外观是否完全相同。

在您的特定情况下，随着从 XHTML 1.0 过渡文档类型到 HTML5 文档类型的更改，Firefox、Chrome、Safari 和 IE>=8 将从“A”变为“S”。因此，如果您想要像素完美的设计，您绝对应该查看浏览器对您网站的展示，以了解表格单元格中的图像填充。

关于 IE 中 doctype 的重要性，这里有一段 HTML 演示了 IE6-9 中“Q”触发的盒子模型错误（注意，这在 IE10 中不再出现）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Remove DOCTYPE to trigger quirksmode</title>
        <style>
            #box { 
                background: yellow; 
                width: 100px;
                padding: 20px; 
                border: 20px solid black; 
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div id="box">box</div>
    </body>
</html>

复制并粘贴并运行它。在存在<!DOCTYPE html> 的情况下，您会看到一个矩形。如果没有 doctype 行，您将看到一个真正的正方形（在 IE10 中，您需要在 webdeveloper 工具集中（按 F12）将“浏览器模式”更改为例如 IE9 才能看到它）。

另见：

【讨论】：

谢谢朋友的回答，很有帮助。一如既往！

【解决方案2】：

最好的解决方案是在索引模板中只使用一次详细声明，并在其中包含标题和正文模板。如果这不可能，您可以离开此声明。这是“标准”，但不是真正必要的！

【讨论】：