HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)

この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつかの小さな問題の要約です。問題は小さいものですが、時には非常に厄介なこともあります。ここで記録し、後でそのような問題が発生した場合には、ここに追加していきます。

1. インラインタグ間のスペース

通常、HTMLコードを書くときには、改行やインデントなどの習慣があります。

XML/HTML コードコンテンツをクリップボードにコピー

<ヘッド>
<メタ文字セット= "utf-8" >
<スタイル>
html、body、div、dl、dt、dd、ul、ol、li、h1、h2、h3、h4、h5、h6、pre、code、form、fieldset、legend、input、button、textarea、p、blockquote、th、td{
マージン: 0;
パディング:0;
}
#私のDIV {
幅: 200ピクセル;
高さ: 200px;
背景色: #ff0;
}
#myDIV > div{
幅: 50px;
高さ: 50px;
表示: インラインブロック;
背景色: #f00;
}
</スタイル>
</ヘッド>
<本文>
< div id = "myDIV" >
<div> div1 </div>
<div> div2 </div>
</div>
</本文>

表示効果は

真ん中に空白があります。その理由は、2 つのインラインタグの間に連続したスペース、復帰、または改行がある場合 (または display: inline または inline-block が設定されている場合)、これらの記号はデフォルトでスペース記号として扱われるためです。

たとえば、2 つの div タグの間に「ddd dd d」を追加すると、効果は次のようになります。連続する空白文字がいくつあっても、最終的な効果は 1 つのスペース文字のみになります。

これは、インライン要素に文字を直接書き込むのに似ています。

ただし、インライン要素では先頭と末尾の空白が削除されます。

したがって、注意すべき点は次のとおりです。

インライン要素を配置するときに、タグ間の空白を避ける必要がある場合は、タグを近づけておく必要があります。

インライン要素のコンテンツを入力するときは、.innerText または .textContent を使用するようにしてください (Firefox は innerText をサポートしていませんが、このプロパティはサポートしています)。

HTML コード内に空白を記述する必要がある場合は、HTML のスペース表現方法を使用してください。

この時点で、インライン要素について誤解している人もいると思います。いわゆるインラインは、いわゆる「ブロック」の反対です。インライン要素はブロックを形成しません。障害物の周りを流れる水のように感じられます。例えばソースコード

XML/HTML コードコンテンツをクリップボードにコピー

< div id = "myDIV" >
< div > div1 </ div > ddd dd d < div > div2 </ div >
< span > d dd d </ span >
</div>

表示効果

span 内のコンテンツは 2 つのセクションに分割されており、完全なブロックではなくなりました。

2. bodyタグのデフォルトの余白境界

これについては何も言うことはありません。最新のブラウザ (CSS3 をサポート) と IE8 には、デフォルトの CSS スタイルマージン (本体に 8px) があります。他のタグも同様なので、ここでは例は挙げません。多くの場合、これは必要なく、一般的なプロジェクトスタイルの開始時に同様の設定が必要になります。

XML/HTML コードコンテンツをクリップボードにコピー

html、body、div、dl、dt、dd、ul、ol、li、h1、h2、h3、h4、h5、h6、pre、code、form、fieldset、legend、input、button、textarea、p、blockquote、th、td{
マージン: 0;
パディング:0;
}

3. 特殊な空白文字により表示異常が発生する

例えば、次のソースコードには問題はないようです

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE html >
<html>
<ヘッド>
<メタ文字セット= "utf-8" >
<スタイル>
html、body、div、dl、dt、dd、ul、ol、li、h1、h2、h3、h4、h5、h6、pre、code、form、fieldset、legend、input、button、textarea、p、blockquote、th、td{
マージン: 0;
パディング:0;
}
*{
-webkit-box-sizing: 境界線ボックス;
-moz-box-sizing: 境界線ボックス;
ボックスのサイズ: 境界線ボックス;
}
#私のDIV {
幅: 200ピクセル;
高さ: 40px;
背景色: #ff0;
}
#myDIV{
フロート: 左;
幅: 200ピクセル;
背景色: #f00;
}
</スタイル>
</ヘッド>
<本文>
< div クラス= "タブ可能" id = "タブ" スタイル= "border:none;" >
< div id = "myDIV" スタイル= "" >
　< データトグル= "タブ" href = "#タブコンテンツ0" >テスト0 </ a >
</div>
</div>
</本文>
</html>