html/cssの基本 - いくつかの警戒点のhtmlコード作成プロセス（必見）

この記事では、警戒ポイントは、ブラウザの互換性とは何の関係もないことを言いたいのですが、主に私がプロジェクトで発生したいくつかの小さな問題の要約であり、小さいながらも、時には非常に困って、ここに記録するために、後でそのような問題がある場合は、ここで追加を継続します。

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

のように、改行やインデントなどをしてhtmlコードを書くのが普通です。

のように表示されます。

間にスペースがあります。これは、2つのインラインタグの間にスペース、キャリッジリターン、ラインフィード文字が連続している場合（またはdisplay: inlineやinline-blockを設定した場合）、これらはデフォルトでスペース文字として扱われるためです。

例えば、2つのdivタグの中に " ddd dd d " を追加すると、以下のような効果があり、空白記号がいくつ連続しても、最終的には1つの空白文字になります。

これは、インライン要素に直接文字を書き込むのと同じです。

しかし、インライン要素では 先頭と末尾の空白文字を削除します。 .

つまり、必要なヒントは

タグ間の空白を避ける必要がある場合、インライン要素はタグが近くになるように配置する必要があります。

textContent (FirefoxはinnerTextをサポートしていませんが、このプロパティはサポートしています)。

htmlコードに空白を書かなければならない場合、htmlのスペース表現&nbspを使用します。

とはいえ、インライン要素について誤解している人もいると思うんです。インラインはブロックの対極にあるものです。インライン要素はブロックではなく、邪魔になると巻きついてくる流れのようなものだと感じています。例えば、ソースコード

表示効果

スパン内のコンテンツが2つに分割され、完全なブロックではなくなりました。

2. bodyタグのデフォルトのマージンボーダー

 これについては何も言うことはありません。モダンブラウザ（CSS3対応）とIE8では、cssスタイルのmargin:8pxがデフォルトでbodyに設定されています。他のタグも同様で、ここに例はありません。多くの場合、それは必要なく、一般的なプロジェクトのスタイルの最初に同様の設定が必要です。

3. 特殊な空白文字は表示上の例外を引き起こす

例として、ソースコード上では以下のように正常に表示されます。

aタグの前には、実は異常な空白文字があり、次のようになります。

aと#myDIVの幅は同じはずだし、aは浮いているのに、表示効果が改行って、おかしすぎるでしょ？

<スパン 通常の表示は

この非正規のホワイトスペースが何であるかを見てみましょう。

<イグ

は、URI成分が"%E3%80%80"としてエンコードされた非正規空間である。

2つ目は通常のスペースで、URIコンポーネントは"%20"としてエンコードされています。

3番目は通常のTab構築で、URIコンポーネントは"%20%20%20"とエンコードされており、実際には4つのスペースが存在します。

お分かりいただけたでしょうか？だから、サイトからコピーしたコードが異常に動作することがあり、それが原因かもしれません。

<スパン まだ完成していませんが、後で他のポイントを思いついたら追加します。また、子どもたちが関連する点を挙げてくれれば、必ず記入するつもりです。

上記のhtml/css基礎編-htmlコード作成プロセスいくつかの警戒ポイント（必見）は、私があなたと共有するすべてであり、私はそれがあなたに参照を与えることができます願って、また、より多くのスクリプトの家をサポートしています願っています。

元のアドレス：http://www.cnblogs.com/chuaWeb/p/5053644.html