2

HTML を提供する単純な HTTP サーバーを作成しました。コードは次のとおりです。

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 の body に html の "string" が含まれるのはなぜですか?
  • テンプレート エンジン (jade) を使用する以外に、HTML にインデントを設定することはできますか?

そして最後の質問は少し別です:

  • index.htmlのみを表示するというページがある場合img.jpg。img.jpgユーザーのリクエストが に関連していることをどのように知ることができindex.htmlますか? 「関連する」とは、「それimg.jpgはリンクされている/依存関係にあるindex.html」ということです。

前もって感謝します ！

4

2 に答える 2

1

HTML の body に html の "string" が含まれるのはなぜですか?

<DOCTYPE!>有効ではないからです。そのはず：

<!DOCTYPE html>

そのままでは、ブラウザには要素のように見え、マークアップを正規化して に配置しようとし<body>ます。

テンプレート エンジン (jade) を使用する以外に、HTML にインデントを設定することはできますか?

Jade を含む多くのテンプレート エンジンは実際にマークアップを縮小し、帯域幅の消費を抑えるために不要な空白をすべて削除します。

ただし、 htmlなどの「美化ツール」を使用することもできます。

img.jpg のみを表示する index.html というページがあるとします。img.jpg に対するユーザーのリクエストが index.html に関連していることをどのように確認できますか? 「関連」とは、「その img.jpg は index.html のリンク/依存関係である」という意味です。

ほとんどのブラウザー内デバッガーで「リソース」を表示できます。これには、ページが要求した画像、スクリプト、スタイルシートなどが一覧表示されます。

おそらくjsdomを使用して、アプリケーションのWeb スクレイピングを試すこともできます。

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 に答える