Mein HTML-INPUT ist kein gültiges Markup, bitte helfen Sie

StackOverflow https://stackoverflow.com/questions/1175802

  •  19-09-2019
  •  | 
  •  

Frage

Auf meiner Website habe ich den folgenden Code:

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

Wenn ich meine Website über einen der vielen HTML-Validatoren laufen lasse, werden sie aufgefordert, mir Folgendes mitzuteilen:

  • Grenze
  • Höhe
  • Breite

sind ungültige Attribute des INPUT-Elements.

YSlow und Google PageSpeed ​​informieren mich jedoch darüber, dass ich immer Bildabmessungen angeben sollte, um die Geschwindigkeit beim Parsen von HTML zu erhöhen.

Welche andere Möglichkeit gibt es für mich, eine Schaltfläche zum Senden von Bildern zu verwenden, während ich weiterhin HTML-gültig bin und den Empfehlungen von YSlow folge?

War es hilfreich?

Lösung

Verwenden Sie CSS, um dasselbe Ziel zu erreichen.Entweder Inline-CSS:

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

oder noch besser, mit einem Stil in Ihrer CSS-Datei:

HTML:

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

CSS:

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

Wenn sich yslow oder Google PageSpeed ​​weiterhin beschweren, ignorieren Sie es.

Andere Tipps

Validierung und Parsing-Geschwindigkeit sind zwei verschiedene Dinge, diese drei Tools haben ihren eigenen Fokus.Die Warnung im Validator liegt daran, dass es keine Spezifikation gibt, die diese Art von Informationen zu diesen Tags enthält, und sie können mit CSS statt mit HTML hinzugefügt werden.

input{ 
    border: none; 
    height:25px; 
    width: 102px; 
}

Sie sollten diese über eine externe CSS-Datei hinzufügen, da HTML-Validatoren prüfen, ob keine Stilwerte festgelegt sind.

Die Idee hinter der Validierung ist, dass die Seite ohne CSS angezeigt werden kann.Die Idee hinter Google Page Speed ​​besteht jedoch darin, dass die Seite am schnellsten geladen wird.

Wenn Sie diese Deklarationen mit CSS hinzufügen, sollten Sie beide den Validator passieren können.Solange Sie die Größe Ihrer eigentlichen Bilddatei richtig eingestellt haben, sollte auch die Ladezeit in Ordnung sein.

border, height Und width sind nicht Teil der W3C-Spezifikationen: http://www.w3schools.com/TAGS/tag_input.asp und daher ungültig.Sie beschleunigen nicht das HTML-Parsen, sondern das Rendern von Bildern, da der Browser die Abmessungen nicht berechnen muss.

Dieser Gewinn ist sehr gering (abhängig davon, wie viele Bilder Sie laden).Man kann es also größtenteils ignorieren.Sie können CSS verwenden, um ihm die Abmessungen zuzuweisen, wenn Sie versuchen, diese als etwas anderes als die tatsächlichen Abmessungen des Bildes zu definieren.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top