【问题标题】:What does "<html xmlns="http://www.w3.org/1999/xhtml">" do?“<html xmlns="http://www.w3.org/1999/xhtml">”有什么作用?
【发布时间】:2011-04-29 23:22:51
【问题描述】:

我不敢相信我的网站上发生了什么。当我添加这一行时:

<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
 <head>

一切正常。而当我不这样做时,CSS 会“混乱”,一切都会变得不同,布局也会变得“丑陋”。

这条线如何解决所有问题?!

【问题讨论】:

  • 您的 HTML 第一行中是否有有效的文档类型?
  • 你确定不是 above 行有影响吗?你用什么浏览器测试?
  • @Dominic Barnes:我的第一行是:&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;
  • @hey:所以让我直截了当地说:如果你的前两行是&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;!DOCTYPE html&gt; - 那么一切正常。但是如果你的前两行是&lt;!DOCTYPE html&gt; &lt;html&gt;,那么一切都坏了?是这样吗?如果是这样,那就嗯..不好。
  • 我认为实际发生的情况是: 指定了 HTML 5,而文档不是 HTML 5。在其上方添加 HTML 标记并没有将其处理为 XHTML -- 它被处理为 HTML 4 (Quirks Mode)。 xmlns 行被忽略,HTML 5 文档类型和额外的 元素也是如此。

标签: html css xhtml


【解决方案1】:

您将HTMLXHTML 混淆了。

通常&lt;!DOCTYPE&gt; 声明用于区分 HTMLish 语言的版本(在本例中为 HTML 或 XHTML)。

不同的标记语言会有不同的表现。我最喜欢的例子是height:100%。在浏览器中查看以下内容:

XHTML

<!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" xml:lang="en" lang="en">
<head>
  <style type="text/css">
    table { height:100%;background:yellow; }
  </style>
</head>
<body>
  <table>
    <tbody>
      <tr><td>How tall is this?</td></tr>
    </tbody>
  </table>
</body>
</html>

...并将其与以下内容进行比较:(注意明显缺少&lt;!DOCTYPE&gt; 声明)

HTML(怪癖模式)

<html>
<head>
  <style type="text/css">
    table { height:100%;background:yellow; }
  </style>
</head>
<body>
  <table>
    <tbody>
      <tr><td>How tall is this?</td></tr>
    </tbody>
  </table>
</body>
</html>

您会注意到表格的高度完全不同,两个文档之间的唯一区别是标记的类型!

太好了……现在,&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 做了什么?

但这并不能回答您的问题。从技术上讲,xmlns 属性由 XHTML 文档的根元素使用:(根据Wikipedia

XHTML 文档的根元素必须是html,并且必须包含xmlns 属性以将其与XHTML 命名空间相关联。

您知道,了解 XHTML 不是 HTML 而是 XML - 一个非常不同的生物非常重要。 (好吧,一种不同的生物)xmlns 属性只是文档需要是有效 XML 的那些东西之一。为什么?因为从事该标准工作的人是这样说的;)(您可以阅读有关XML namespaces on Wikipedia 的更多信息,但我省略了该信息,因为它实际上与您的问题无关!)

但是为什么&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 修复了 CSS?

如果像这样构建您的文档...(正如您在 your comment 中建议的那样)

<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
[...]

... 正在修复您的文档,这让我相信您对 CSS 和 HTML 了解不多(无意冒犯!),而事实是 没有 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;它的行为正常,而 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 不是 - 而你只是 认为 它是,因为你习惯于编写无效的 HTML 并因此在 quirks mode 中工作。

我提供的上述示例是同一问题的示例;大多数人认为height:100% 应该导致&lt;table&gt; 的高度是整个窗口,而DOCTYPE 实际上正在破坏他们的CSS……但事实并非如此;相反,他们只是不明白他们需要添加html, body { height:100%; } CSS 规则才能达到他们想要的效果。

【讨论】:

  • "and thus working in quirks mode" - 我也认为是这样。正如我在评论中所说,"If so, it's umm.. not good.".
  • 这是一个勇敢的解释尝试,但有点混乱。在讨论 height:100% 问题时,最好将 XHTML 排除在外,因为只有 DOCTYPE(主要是它的存在或不存在)才是相关的,而不是 HTML 还是 XHTML 语法。然后将命名空间单独解释为 XHTML 的一个属性。
  • 您的 HTML 缺少文档类型,并且您暗示的是基于表格的布局
  • @teresko - 是的,但这就是重点;) @Alohci - 这也是正确的,但我不想偏离xmlns 太远,所以我使用了XHTML将其包含在其中。
  • 您是指“(注意明显缺少 声明)”之后的那个?这个示例是我解释为什么 OP 的标记呈现为怪癖模式 HTML 而不是 XHTML 的一部分?这意味着 OP 在浏览器中尝试并转到“哦,我的标记正在以怪癖模式呈现,因为我没有使用 DOCTYPE!”那是您指的 HTML 示例吗?
【解决方案2】:

它是一个 XML 命名空间。当您使用 XHTML 1.0 或 1.1 doctypes 或 application/xhtml+xml mimetypes 时,它是必需的。

您应该使用 HTML5 文档类型,那么对于 text/html 就不需要它了。最好从这样的模板开始:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>domcument title</title>
        <link rel="stylesheet" href="/stylesheet.css" type="text/css" />
    </head>
    <body>
            <!-- your html content -->
            <script src="/script.js"></script>
    </body>
</html>



当你把你的 Doctype 写直后 - 做并验证你 html 和你的 css
这通常会解决你的布局问题。

【讨论】:

  • 我更喜欢这个答案。简短而简单。
【解决方案3】:

听起来您的网站具有依赖于以怪癖模式运行的 CSS 或 JS。这就是为什么你需要在你的文档类型之上的垃圾来“正确”渲染。我建议删除上述垃圾,然后修复您的 CSS+JS 以在标准模式下实际工作;从长远来看,你会为自己省去很多痛苦。

【讨论】:

    【解决方案4】:
    The namespace name http://www.w3.org/1999/xhtml 
    is intended for use in various specifications such as:
    
    Recommendations:
    
        XHTML™ 1.0: The Extensible HyperText Markup Language
        XHTML Modularization
        XHTML 1.1
        XHTML Basic
        XHTML Print
        XHTML+RDFa
    

    在这里查看for more detail

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-09-24
      • 2019-08-24
      • 1970-01-01
      • 1970-01-01
      • 2019-06-02
      • 1970-01-01
      • 2017-01-27
      • 1970-01-01
      相关资源
      最近更新 更多