html - <!DOCTYPE> 部分在 JSF 中应该如何显示? HTML5 还是 XHTML?

标签 html jsf browser jsf-2 doctype

这只是我现在的好奇心。在 Eclipse 中,这是 <head>例如,在 New Facelet 模板 上定义的部分,但对于大多数模板来说都是一样的:

<!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>

我想在上面使用更清晰的代码,所以我改为:

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

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

最佳答案

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

JSF 被正式指定为生成符合 XHTML 1.0 的标记(使用 herethere 在实现中只有少数违规行为已在 JSF 2.2 中修复和/或可通过上下文参数管理)。 JSF 可以设计为不生成非 XML sytnax(例如 <br> 而不是 <br/> ),因此旧的 HTML4 文档类型与 JSF 生成的 HTML 输出不兼容(也就是说,当您遵守标准和/或害怕 W3 validator ;但是,大多数(如果不是全部)浏览器都非常宽容)。与旧的 HTML4 文档类型相反,HTML5 文档类型允许使用 XML 语法,因此与 XHTML 文档类型兼容。因此,可以使用 HTML5 文档类型编写 JSF 页面。

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

  • Q - 怪癖模式。你真的不想拥有那个。它触发 box model bug在 IE 中。 CSS widthheight然后错误地覆盖了 paddingborder .
  • 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 中的重要性,这里有一段 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>

复制'n'粘贴'n'运行它。与 <!DOCTYPE html>现在,您会看到一个矩形。如果没有 doctype 行,您将看到一个真正的正方形(在 IE10 中,您需要在 webdeveloper 工具集中(按 F12)将“浏览器模式”更改为例如 IE9 才能看到它)。

enter image description here

另见:

关于html - &lt;!DOCTYPE> 部分在 JSF 中应该如何显示? HTML5 还是 XHTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16035349/

相关文章:

html - Bootstrap 固定导航和视差 : Highlight does not works

javascript - 如何使用 JavaScript 获取移动可排序 UIKit 3 元素的 "id"?

javascript - 单击时旋转 Font Awesome 图标

java - 以编程方式添加 p :resetInput (tag handler) onto a p:commandButton

java - 如何检测同一个java应用程序上的多个浏览器选项卡

html - 如何让选择/下拉列表中的外来字符在 IE 7 中正确显示?

jquery - 两个 jQuery 实例,忽略第二个包含

javascript - 在js之前加载css文件

javascript - 如果没有明确导入任何 require 框架,在 Electron 的客户端中使用 require 如何合法?

jsf - Primefaces - 自定义 p :confirmDialog content conditionally