2

我编写了一个简单的 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”。

先感谢您 ！

4

2 回答 2

1

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

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

<!DOCTYPE html>

就目前而言，它看起来更像是浏览器的一个元素，它试图规范化标记并将其放入<body>.

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

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

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

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

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

您也可以尝试使用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);
});
于 2012-09-06T01:01:35.197 回答
1

这实际上不是生成的 HTML。您的服务器提供的 HTML 正是您认为它提供的内容……浏览器发现该 HTML 有问题。

<DOCTYPE!>

浏览器不知道是什么<DOCTYPE!>，所以它假定它是某种任意标签。当浏览器看到任意标签时，它会假定它应该在正文中。并且通过不平衡标签纠错，它会在正文的末尾关闭您的<DOCTYPE!>标签。</DOCTYPE!>

您打算使用的是<!DOCTYPE>或更可能是<!DOCTYPE html>.

于 2012-09-06T01:01:44.407 回答