Question

我写了一个简单的HTTP服务器，它服务于一些HTML。这是代码：

var http = require('http');

http.createServer(function(req, res) {

  res.writeHeader(200, {"Content-Type": "text/html"});

  var html = '<DOCTYPE!>' +
    '  <html>' +
    '    <head>' +

    '      <title>' +
    '        Test page' +
    '      </title>' +

    '    </head>' +
    '  <body>' +

    '    <p>' +

    '      This is a test page !' +

    '    </p>' +

    '  </body>' +
    '  </html>';

  res.write(html);

  res.end();

}).listen(8080);

生成的HTML页面如下：

<html>
<head>
</head>
<body>
<doctype!>
<title> Test page </title>
<p> This is a test page ! </p>
</doctype!>
</body>
</html>

所以我的问题如下：

为什么html“字符串”包含在HTML的正文中？
除了使用模板引擎（jade）之外，是否可以在HTML中进行缩进？

最后一个问题有点分开：

如果我有一个名为index.html的网页，只显示img.jpg。我怎么知道用户对img.jpg的请求与index.html有关？我所说的“相关”是：“img.jpg是index.html的链接/依赖”。

提前谢谢！

Answer 1

为什么html“字符串”包含在HTML的主体中？

那是因为<DOCTYPE!>无效。它应该是：

<!DOCTYPE html>

按原样，它看起来更像是浏览器的一个元素，它试图规范化标记并将其放入<body>。

除了使用模板引擎（jade）之外，是否可以在HTML中进行缩进？

许多模板引擎，包括Jade，实际上minify标记，删除了所有不必要的空白，以减少带宽消耗。

但是，您可以考虑使用“美化”，例如html。

如果我有一个名为index.html的页面，它只显示img.jpg。我怎么知道用户对img.jpg的请求与index.html有关？我所说的“相关”是：“img.jpg是index.html的链接/依赖”。

您可以在大多数浏览器中调试器中查看“资源”，这些调试器将列出您的页面请求的图像，脚本，样式表等。

您也可以尝试web scraping您的应用，也许使用jsdom：

jsdom.env('http://localhost:8080/', [
    'http://code.jquery.com/jquery.min.js'
],
function (err, window) {
    var $ = window.$;

    var hrefs = $('a[href]').map(function () {
        return $(this).attr('href');
    }).get();
    console.log(hrefs);
});

Answer 2

这实际上并不是最终的HTML。您的服务器所提供的HTML正是您所认为的服务...浏览器发现该HTML有问题。

<DOCTYPE!>

浏览器不知道<DOCTYPE!>是什么，所以它假定它是某种任意标记。当浏览器看到任意标记时，它会认为它本身就是在标记中。对于不平衡标记错误更正，它会在正文末尾以<DOCTYPE!>关闭</DOCTYPE!>标记。

您打算使用<!DOCTYPE>或更有可能<!DOCTYPE html>。

正文中的节点HTML

2 个答案: