ホームページ > 記事 > ウェブフロントエンド > HTMLコードを書くときに注意すべき3つのポイント

HTMLコードを書くときに注意すべき3つのポイント

php中世界最好的语言オリジナル: 2018-01-22 10:48:371852ブラウズ

今回はHTMLコードを書く際の注意点について、実際の事例を交えてご紹介します。

この記事で話したい注意点はブラウザの互換性とは関係なく、主にプロジェクトで遭遇したいくつかの小さな問題をまとめたものです。後で遭遇した場合は、ここに記録してください。このような質問はここに追加され続けます。

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

通常、HTMLコードを書く際には、

<head>  
    <meta charset="utf-8">  
    <style>  
    html,body, p, 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 > p{   
      width: 50px;   
      height: 50px;   
      display: inline-block;   
      background-color: #f00;   
    }   
    </style>  
  
  </head>  
  <body>  
    <p id="myDIV">  
      <p>p1</p>  
      <p>p2</p>  
    </p>  
  </body>

のように、途中にスペースが入ってしまうなど、改行やインデントなどの癖があります。その理由は、2 つのインラインタグ (または表示: inline または inline-block に設定) の間に連続したスペース、キャリッジリターン、ラインフィードがある場合、これらの記号はデフォルトでスペース記号として処理されるためです。

例えば、2つのpタグの間に「 ddd dd d d 」を追加すると、結果は次のようになります。接続された空白記号の数に関係なく、最終的な効果は空白文字1文字だけになります

この合計。ではインラインです文字クラスを要素に直接記述することは

と似ていますが、インライン要素では先頭と末尾の空白文字が削除されます。

それでは、次のことを思い出してください:

インライン要素を配置するときに、ラベル間のスペースを避ける必要がある場合は、ラベルを密接に接続する必要があります。

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

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

そうは言っても、インライン要素について偏った理解を持つ人もいると思います。いわゆるインラインは、いわゆる「ブロック」の逆です。インライン要素はブロックされておらず、障害物に遭遇したときに水が流れているように感じられます。たとえば、ソースコード

<p id="myDIV">  
      <p>p1</p> ddd      dd      d       <p>p2</p>  
      <span>    d      dd      d       </span>  
    </p>

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

2. body タグのデフォルトのマージン境界線

最新のブラウザー (CSS3 をサポート) と IE8 には、本文のデフォルトの CSS スタイルのマージンが 8 ピクセルあります。他のレーベルにもこれがあるので、ここでは例を示しません。多くの場合、一般的なプロジェクトスタイルの開始時に同様の設定は必要ありません。

html,body, p, 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, p, 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>  
    <p class="tabbable" id="tabs" style="border:none;">  
      <!-- 页面标签列表 -->  
      <p id="myDIV" style="">  
      　<a data-toggle="tab" href="#tab-content-0" >test0</a>  
      </p>  
    </p>  
  </body>  
</html>

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

a の幅 #myDIV の幅は同じであるはずで、a はフローティングですが、表示効果が行折り返しになります。これは可能性がありますか?

通常の表示効果は

この異常な空白とは何かを見てみましょう。

1つ目は異常なスペースであり、そのURIコンポーネントは「%E3%80%80」としてエンコードされています

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

3 つ目 1 つ目は通常のタブ構造で、URI コンポーネントコードは「%20%20%20%20」で、実際には 4 つのスペースです。

ご覧いただけます。したがって、Web サイトにコピーされたコードのパフォーマンスに異常が発生する場合があります。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。