ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML codeを書く際のいくつかの注意点_html/css_WEB-ITnose
HTML codeを書く際のいくつかの注意点_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:31:501206ブラウズ
この記事でお話したい注意点はブラウザの互換性とは関係なく、主にプロジェクトで遭遇したいくつかの小さな問題をまとめたものです。後でそのような問題があれば、ここに追加し続けます。
1. インラインタグ間のスペース
通常HTMLコードを書く際、
<head> <meta charset="utf-8"> <style> 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{ margin: 0; padding:0; } #myDIV { width: 200px; height: 200px; background-color: #ff0; } #myDIV > div{ width: 50px; height: 50px; display: inline-block; background-color: #f00; } </style> </head> <body> <div id="myDIV"> <div>div1</div> <div>div2</div> </div> </body> などの改行やインデントなどの癖がありますが、表示効果は
中間があります。空白。その理由は、2 つのインライン タグ (または表示設定: inline または inline-block) の間に連続したスペース、キャリッジ リターン、ライン フィードがある場合、これらの記号はデフォルトでスペース記号として処理されるためです。
例えば、2つのdivタグ内に「 ddd dd d d 」を追加した場合、その効果は次のようになります。接続された空白記号の数に関係なく、最終的な効果は空白文字1文字だけになります
この合計は次のようになります。 inline 要素内 文字を直接書くのは
と似ていますが、inline 要素では先頭と末尾の空白文字が削除されます。
それで、次のことを思い出してください:
インライン要素を配置するときに、ラベル間のスペースを避ける必要がある場合は、ラベルを密接に接続する必要があります。
インライン要素でコンテンツを埋める必要がある場合は、.innerText または .textContent を使用するようにしてください (Firefox は innerText をサポートしていませんが、この属性はサポートしています)。
HTMLコード内に空白を記述する必要がある場合は、HTML空間表現方法を使用してください
そういえば、インライン要素について偏った理解を持つ人もいると思います。いわゆるインラインは、いわゆる「ブロック」の逆です。インライン要素はブロック内に存在せず、障害物に遭遇したときに水が流れるように感じられます。たとえば、ソースコード
<div id="myDIV"> <div>div1</div> ddd dd d <div>div2</div> <span> d dd d </span> </div>
表示効果
スパン内のコンテンツは完全なブロックではなく、2 つの段落に分割されています。
2. body タグのデフォルトのマージン境界線
最新のブラウザー (CSS3 をサポート) と IE8 の本体のデフォルトは、どちらも CSS スタイルのマージン: 8px です。他のレーベルにもこれがあるので、ここでは例を示しません。多くの場合、一般的なプロジェクト スタイルの開始時に同様の設定は必要ありません。
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{ margin: 0; padding:0; }
3. 特殊な空白文字が表示異常を引き起こす
例えば、以下のソースコードでは問題ないようですが
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> 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{ margin: 0; padding:0; } *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #myDIV { width: 200px; height: 40px; background-color: #ff0; } #myDIV a{ float: left; width: 200px; background-color: #f00; } </style> </head> <body> <div class="tabbable" id="tabs" style="border:none;"> <!-- 页面标签列表 --> <div id="myDIV" style=""> <a data-toggle="tab" href="#tab-content-0" >test0</a> </div> </div> </body></html> 実際には、 の前に異常な空白文字がありますa タグの表示効果は以下の通りです
a の幅と #myDIV の幅は同じであるはずで、a は浮動しているのに、表示効果が行折り返されます。可能？
通常の表示効果は
この異常な空白とは何かを見てみましょう。
1つ目は異常な空間であり、そのURIコンポーネントは「%E3%80%80」としてエンコードされています
2つ目は通常の空間であり、そのURIコンポーネントは「%20」としてエンコードされています
3 つは通常のタブ構造で、その URI コンポーネントは「%20%20%20%20」としてエンコードされており、実際には 4 つのスペースです。
見えますね。したがって、Web サイトにコピーされたコードのパフォーマンスに異常が発生する場合があります。
続きます、その他の点も思いついたら追記していきます。また、子供用の靴についても関連する点について触れていただければと思いますので、ぜひ追記させていただきます。
この記事が良いと思ったら右下の【おすすめ】をクリックしてください！