Question

我正在建立网站，并且浏览器出于某些未知原因而不断重新排列我的HTML。这是我的代码：

<DOCTYPE! html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
      <p>This is some text</p>
  </body>
</html>

这是浏览器使用的屏幕截图：

Inspector

（抱歉，没有足够的声誉来插入真实图像）一切都很好，除了当我想使用链接将图标链接到页面时，除非它在头部，否则它不会显示（我使用浏览器的开发工具，从字面上将链接拖动到头部，看它是否出现立即）

我已经使用浏览器的开发人员工具检查了源代码，它看起来与我的代码编辑器中的代码完全相同，所以我知道我的Web服务器不会弄乱它。

在Chrome和Firefox中也是如此。似乎当浏览器扩展决定将其放置在脚本中时，它们都使用脚本头，但是即使没有浏览器扩展，它也会这样做。

我已经尝试过Notepad ++编码->转换为UTF-8技巧来删除BOM表字符，该字符本来可以解决我的问题，但效果不好。

那么如何使网页在显示时显示出来？

这是带有上述代码段的文件的下载链接： http://www.filedropper.com/testpage_1

感谢您的帮助！

Answer 1

您的文档类型无效。错误恢复导致将其视为文本。由于文本不允许在体外出现，因此它暗示了body元素的开始。

正确的语法是：

<!DOCTYPE html>

感叹号必须为第二个字符。

如果您有used a validator，这本来就可以找到的。

Answer 2

我用您的代码创建了一个测试页，我可以确认开发人员工具是否将其显示为这样。但是，DOCTYPE中有一个错字。将代码更改为以下代码以对其进行修复：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
      <p>This is some text</p>
  </body>
</html>

区别在于，感叹号必须在DOCTYPE之前，而不是之后。请参见HTML5规范中的The DOCTYPE，该文件还指出<!DOCTYPE html>不区分大小写。