2

私の Web サイトには、次のコードがあります。

<input type="image" src="images/btn.png" alt="Submit" border="0" height="25" width="102" />

多くの HTML バリデーターの 1 つを使用して自分の Web サイトを実行すると、次のようなメッセージが表示されます。

  • 国境
  • 身長
  • 幅

INPUT 要素の無効な属性です。

ただし、YSlow と Google PageSpeed は、HTML の解析速度を向上させるために常に画像のサイズを含める必要があることを教えてくれます。

HTML が有効であり、YSlow の推奨事項に従っている場合に、画像送信ボタンを使用する他の方法はありますか?

4

4 に答える 4

5

CSS を使用して同じ目標を達成します。インライン CSS のいずれか:

<input type="image" src="images/btn.png" alt="Submit"
       style="border:0; width:102px; height:25px;" />

さらに良いことに、CSS ファイルにスタイルを追加します。

HTML:

<input type="image" src="images/btn.png" alt="Submit"
       class="somethingMeaningful" />

CSS:

input.somethingMeaningful { border: 0; width: 102px; height: 25px; }

それでも yslow または Google PageSpeed が文句を言う場合は、無視してください。

于 2009-07-24T05:04:51.277 に答える
1

検証と解析速度は 2 つの異なるものであり、これら 3 つのツールはそれぞれに焦点を当てています。バリデーターの警告については、それらのタグにそのような情報を含む仕様がなく、HTML ではなく CSS で追加できるためです。

input{ 
    border: none; 
    height:25px; 
    width: 102px; 
}
于 2009-07-24T05:07:18.900 に答える
0

HTML バリデーターはスタイリング値が設定されていないことを確認するため、CSS 外部ファイルを介してこれらを追加する必要があります。

検証の背後にある考え方は、CSS なしでページを表示できるようにすることです。ただし、Google ページの速度の背後にある考え方は、ページの読み込みを最速にすることです。

CSS を使用してこれらの宣言を追加すると、両方ともバリデーターを通過できるはずです。実際の画像ファイルのサイズを正しく設定していれば、読み込み時間も問題ありません。

于 2009-07-24T05:04:06.067 に答える
0

borderでheightありwidth、W3C 仕様の一部ではない: http://www.w3schools.com/TAGS/tag_input.aspであるため、無効です。HTML 解析の高速化には役立ちませんが、ブラウザーが寸法を計算する必要がないため、画像のレンダリングには役立ちます。

このゲインは非常に小さいです (ロードしている画像の数によって異なります)。したがって、ほとんど無視できます。画像の実際の寸法以外のものとして定義しようとしている場合は、CSS を使用して寸法を指定できます。

于 2009-07-24T05:08:21.300 に答える