31

例 1

<div><button>one</button><button>two</button></div>

<div>
    <button>one</button>
    <button>two</button>
</div>
​

最初の div では 2 つのボタンの間にスペースがありませんが、2 番目の div にはスペースがあります。

次に、別の例を考えてみましょう。

例 2

<div>a</div>
<div> b</div>​​​​​​​​​​​​

その前にスペースはありませんb。

例 3

a<b> bold</b> man

今、前の空白bold は重要です

例 4

a <b> bold</b> man

これで、スペースの 1 つ ("a" の後または "bold" の前) だけが重要になります。

質問

空白が取り除かれたり折りたたまれたりするときの正確なルールは何ですか?

4

3 に答える 3

16

現実はやや複雑です。2つの部分があります

  1. 解析の内容。
  2. レンダリングの機能。

解析では、(マークアップとは対照的に) テキストの解析中に、実際にはほとんど空白が削除されません。and要素の先頭と無効な要素の最初の改行文字を削除し<textarea><pre>ます<listing>が、それだけです。

Jukka は HTML 4.01 セクションB.3.1 改行を参照して、「開始タグの直後の改行は、終了タグの直前の改行と同様に無視する必要があります」と述べていますが、これは非規範的な付録にあり、ブラウザはそうしています。上記の3つの要素以外は従わないでください。

これは、空白のない改行でJukka の例を使用して実証できます。ツリー表示のボタン要素の周りのノードに注意してください。#text:改行が削除されると、「#text:」ノードは表示されなくなります。

ここでの仕様の最初の例を使用すると、ルールが適用されないこともわかります。追加display:preすると、改行が完全に無視されるわけではなく、2 つの例を同じようにレンダリングすることは、デフォルトの空白処理のプロパティにすぎないことが明らかです。white-space:normal

これにより、関連する仕様である16.6.1 CSS 仕様の「空白」処理モデルが表示されます。これは、各空白設定値のテキスト文字に適用される体系的な規則をカバーしています。

于 2012-10-12T19:25:07.810 に答える
7

HTML は、連続する空白を 1 つの空白にまとめますが、それを排除しません。改行は空白、つまりスペースです。

先頭/末尾だけではありません-要素内の連続した空白も単一の空白としてレンダリングされます。これらは同じようにレンダリングされます:

<div>   a   b   </div>
<div> a b </div>
<div>a b</div>
于 2012-10-12T16:48:16.870 に答える
7

「HTML で空白が重要になるのはいつですか?」という質問に対する完全な回答です。かなり長く詳細になり、属性仕様間の空白や のような特別な規則を持つ要素について議論する必要がありますtextarea。しかし、主な関心事と思われるアドレス：

タグ間の空白は、通常、匿名のテキスト ノードを作成します。リーフ要素 (他の要素を含まない要素) 内の空白は、要素のテキスト コンテンツの一部を構成します。

レンダリングに関する決まったルールはほとんどありませんが、ブラウザーは通常、要素のテキスト コンテンツ内の先頭と末尾の空白を無視します。

インラインでレンダリングされるbutton要素 (既定の要素など) の間に空白がある場合、通常は 1 つのスペースに相当する区切り文字として機能します。

ただし、仕様上、改行1つで構成される空白は無視されます。 そして通常、ブラウザの練習では、開始タグの直後または終了タグの前にある場合。そう

<div>
<button>one</button>
<button>two</button>
</div>

改行が存在しないかのように扱われます。しかし、次のようにスペースが使用される場合

<div>
  <button>one</button>
  <button>two</button>
</div>

button次に、最初の要素の前と 2 つの要素の間に無名テキスト ノードがありますbutton。通常は後者のみが重要であり、通常の単語スペースのように機能します。

更新:以下のコメントと Alohci の回答が指摘しているように、この古い (HTML 4.01) 原則はほとんどブラウザーに実装されておらず、HTML5 ではほとんど削除されています。そのため、ほとんどの場合、要素間の改行によって、改行文字を含むテキスト ノードが作成され、スペースと同等に扱われます。

于 2012-10-12T17:14:15.327 に答える