什么"<html xmlns ="http://www.w3.org/1999/xhtml">"做什么?

goo*_*ing 44 html css xhtml

我无法相信我网站上发生的事情.当我添加这一行时:

<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
 <head>
Run Code Online (Sandbox Code Playgroud)

一切正常.当我不这样做时,CSS"混乱",一切都变得不同,布局变得"丑陋".

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

Ric*_*uen 82

你正在将HTMLXHTML混合在一起.

通常,<!DOCTYPE>声明用于区分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>
Run Code Online (Sandbox Code Playgroud)

......并将其与以下内容进行比较:(注意明显缺乏<!DOCTYPE>声明)

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>
Run Code Online (Sandbox Code Playgroud)

您会注意到表格的高度差别很大,而且两个文档之间的唯一区别就是标记的类型!

那太好了......现在,<html xmlns="http://www.w3.org/1999/xhtml">做什么了?

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

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

你知道,重要的是要理解XHTML不是HTML而是XML - 一种非常不同的生物.(好吧,一种不同的生物)xmlns属性只是文档需要有效的XML之一.为什么?因为有人在标准工作这么说;)(你可以阅读更多关于维基百科XML命名空间,但我忽略这些信息"因为它不是你的问题实际上是相关的)!

但那么为什么要<html xmlns="http://www.w3.org/1999/xhtml">修复CSS呢?

如果像这样构建你的文档...(正如你在评论中建议的那样)

<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
[...]
Run Code Online (Sandbox Code Playgroud)

......是固定的文档,它使我相信,你不知道很多关于CSS和HTML(没有犯罪!)那,而且事实是,没有 <html xmlns="http://www.w3.org/1999/xhtml">它的运作正常,并 <html xmlns="http://www.w3.org/1999/xhtml">它不是-你只是觉得它是的,因为你习惯于编写无效的HTML,因此在怪癖模式下工作.

我提供的上述示例是同一问题的一个例子; 大多数人认为height:100%应该导致<table>整个窗口的高度,并且DOCTYPE实际上是在破坏他们的CSS ...但事实并非如此; 相反,他们只是不明白他们需要添加html, body { height:100%; }CSS规则来实现他们想要的效果.

  • 这是一个勇敢的尝试解释,但有点混乱.在讨论高度时:100%重要,最好不要使用XHTML,因为只有DOCTYPE(大多数只是它的存在与否)是相关的,而不是它是HTML还是XHTML语法.然后将命名空间分别解释为XHTML的属性. (3认同)
  • 您指的是“(注意明显缺少 &lt;!DOCTYPE&gt; 声明)”之后的那个?这个例子是我解释为什么 OP 的标记呈现为怪异模式 HTML 而不是 XHTML 的一部分?OP 的意思是在浏览器中尝试,然后“哦哦,我的标记正在以怪异模式呈现,因为我没有使用 DOCTYPE!” 这是您所指的 HTML 示例吗? (3认同)

ter*_*ško 23

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

你应该使用HTML5 doctype,然后你不需要它用于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>
Run Code Online (Sandbox Code Playgroud)



当您直接放置Doctype时 - 执行并验证您的HTML和您的CSS.
这通常会让你解决布局问题.


Bor*_*sky 7

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