質問1.htmlマークアップを記述せずに文字列のみを含むhtmlページを作成した場合(本文、html、doctypeなし)、ブラウザがそれをレンダリングし、文字列を段落のように表示するのはなぜですか? ?
これに対して、私はブラウザがそれを段落として表示することができるという最善の推測を使用しました。これが最善の推測であり、作成者が望んでいたものであると想定して欠落しているタグを補うため、手動で書いたことはありません。
どちらの場合も、<!DOCTYPE ...>
は使用されないため、初期挿入モードの最後のステップでは見つかりません。したがって、ドキュメント全体がクァークズモードでレンダリングされます。
ブラウザ(少なくともFirefoxとChrome)は段落として解析しませんが、デフォルトでは、単純な文字列をクァークズモードの段落と同じようにレンダリング します。これは、「ドキュメントがクァークズモードの場合、本文要素の上部または下部にあるHTML要素の垂直方向の余白がゼロに折りたたまれることが予想される」ためです(ソース、余白の折りたたみについて詳しく説明します)。のを効果的に消費します。単純な文字列には余白がないため、何も起こりません。最終的に、テキストの段落とテキスト自体の両方が同じように表示されます。margin-top
body
margin-top
p
これは、ブラウザが単純な文字列を処理する方法です。ドキュメントの最終的な構造が何であるかを示すDOMビューに特に注意してください。比較のために、段落がどのように見えるかを確認してください。レンダリングでは同じように見えるかもしれませんが、構造は同じではありません。
ここで、余白を折りたたむことについての私のポイントを説明するために、内容(テキストまたは段落)を、折りたたまれdiv
ていborder
ない余白を表示するためのaでラップします。これは、ブラウザがプレーンテキストを処理する方法ですが、ブラウザが段落を処理する方法です。
ただし、<!DOCTYPE ...>
(ブラウザーがクァークズモードに入らないようにするために)含まれている場合、プレーンテキストドキュメントは段落付きのドキュメントと同じようには表示されません(要素のが要素のに折りたたまれません)。margin-top
p
margin-top
body
質問2.上記の例で、htmlのソースコードの異なる行に複数の文字列を記述した場合でも、ブラウザはそれらを1行のテキストとして表示します。
繰り返しになりますが、私は最善の推測を使用して、HTMLは自由形式の言語であり、したがってソースコードにスペースやインデントがいくつあるかは関係ないと結論付けました。
HTMLは、すべての空白を(white-space
以外に設定されていない限りnormal
)単一の空白(折りたたまれた)として扱います。エルゴは、test\n\ntest
と同等test test
です。
しかし、彼女は満足していないようでした。私の答えは間違っていましたか?はいの場合、それらは完全にまたは部分的に間違っていましたか?これらの質問に対する正しい答えは何ですか?
あなたの結論はやや正しいですが、エッジケースをうまく処理していません(たとえば、ブラウザがp
要素のフォント/色などを変更した場合)。