|
Fügen Sie der Seite einen DOCTYPE hinzu
Da verschiedene Browser Tags und Stylesheets unterschiedlich interpretieren, ist es notwendig, einen Standarddokumenttyp für HTML-Dateien zu definieren, damit verschiedene Browser Seiten gemäß einem einheitlichen HTML-Standard analysieren und rendern können.
Die !DOCTYPE-Deklaration gibt die DTD an, der das Dokument entspricht, beispielsweise:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Richtige Verwendung von Standard-HTML-Tags: Versuchen Sie, für das Layout ein Div+CSS-Layout anstelle einer Tabelle zu verwenden.
Die Verwendung von Tabellen für das Layout kann leicht zu Code-Redundanz führen und der Code ist komplexer als beim Schreiben mit <div></div>. Darüber hinaus muss die Tabelle vor der Anzeige alle Elemente herunterladen und die entsprechende Webseite wird langsamer geöffnet.
Es sollte eine standardisierte Seitenstruktur verwendet werden: DIV+CSS. Diese Layoutmethode bietet prägnanten Code, schnelle Seitendurchsuchgeschwindigkeit und flexibles Seitenlayout. Beim Überarbeiten der Seite müssen Sie nur den CSS-Stil ändern, um das Seitenlayout neu zu gestalten, ohne das Programm ändern zu müssen. Dadurch werden die Kosten für die Website-Überarbeitung reduziert.
Achten Sie auf die schließende Beziehung der Tags, insbesondere beim Verschachteln anderer Tags wie z. B. div im Formular-Tag.
Manchmal gibt es zusätzlichen Leerraum auf der Seite, der sich auch durch Zurücksetzen des Rands nicht vermeiden lässt. Dies kann daran liegen, dass die schließenden Tags der Seitenelemente nicht übereinstimmen, wie zum Beispiel:
<div Klasse="äußere">
<Formularname=”Testformular”>
<div Klasse="inner">
<Eingabename=”Titel” Typ=”Text” />
</form>
</div>
</div>
Verwenden Sie beim Definieren einer Tabelle das tbody-Element, um sicherzustellen, dass alle Browser, einschließlich IE, sie korrekt verwenden können . Auch wenn die Tabelle kein explizites tbody-Element definiert, geht der Browser davon aus, dass der übergeordnete Knoten des tr-Knotens ein automatisch hinzugefügter Standard-tbody-Knoten ist. Um Missverständnisse bei der Manipulation des tr-Knotens mit JavaScript zu vermeiden, ist es besser, einen manuell hinzuzufügen, beispielsweise:
<Tabellen-ID=”meineTabelle”>
<tbody id=”meinTabellenkörper”>
<tr>
<td>
</td>
</tr>
</tbody>
</Tabelle>
Achten Sie auf die Groß- und Kleinschreibung von Tags und Attributen. <br />Manchmal reagieren einige an Elemente gebundene Ereignisse im Internet Explorer-Browser, aber nicht in Safari oder anderen Browsern. Zu diesem Zeitpunkt müssen Sie die Richtigkeit der Ereignisbindungsmethode überprüfen. Für die Bindung erweiterter Ereignisse müssen zwei Sätze JavaScript geschrieben werden, um zwischen IE und anderen Browsern zu unterscheiden. Beim einfachen Ereignismodell muss hingegen auf die Groß- und Kleinschreibung des gebundenen Ereignisnamens geachtet werden. wie:
<Eingabetyp=”Text” Name=”Schlüsselwortsuche” onFocus=”Wert löschen()” >
Hier sollte der Kleinbuchstabe „onfocus“ verwendet und das Tag-Schließsymbol explizit hinzugefügt werden, um die Standardschreibweise zu gewährleisten.
<Eingabetyp = "Text" Name = "Schlüsselwortsuche" onfocus = "ClearValue()" />
Beachten Sie die Attributwerteinstellung des Tags
Die Sprach- und Typattribute des <script>-Tags
Das Sprachattribut des <script>-Tags wird verwendet, um die Version der Skriptsprache zu definieren. Die korrekte Zuweisung sollte in der Form <script> erfolgen, das dem Browser (hauptsächlich IE) mitteilt, dass er zur Interpretation die JavaScript-Syntax der Version 1.2 verwenden soll. Das Typattribut wird verwendet, um den Skripttyp zu definieren. Es ist ein Standardattribut des W3C und die Verwendung von Attributen in Kleinbuchstaben entspricht dem Standard. Wenn es keine besondere Situation gibt, in der Sie dem Browser mitteilen müssen, dass er die Interpretation gemäß einer niedrigeren Version der JavaScript-Sprache vornehmen soll (die meisten Browser unterstützen derzeit JavaScript Version 1.5), müssen Sie das Sprachattribut im Allgemeinen nicht definieren, das Typattribut muss jedoch definiert werden. Sie sollten also den Code
<SCRIPT Language="JavaScript">Ändern zu <script>
Alt- und Titelattribute des <a>-Tags <br />Obwohl die Werte der Alt- und Titelattribute als Tooltip angezeigt werden, wenn die Maus im IE über das Element bewegt wird, besteht dennoch ein Unterschied zwischen den beiden. alt ist die alternative Anzeige, wenn das Bild nicht angezeigt wird, und title ist die Eingabeaufforderung, wenn die Maus darauf platziert wird.
aktivierte und schreibgeschützte Attribute des <input>-Tags <br />In früheren HTML-Versionen gab es keine zwingende Anforderung, allen Attributen Werte zuzuweisen. Bei der Darstellung eines ausgewählten Kontrollkästchens wurde <input checked > erkannt. Gemäß dem XHTML-Standard ist eine solche Grammatik jedoch kein striktes XML-Format. Es sollte darauf geachtet werden, dass die Zuweisung von Attributen und das Schließen von Tags dem Entwicklungstrend des HTML-Standards entspricht und wie folgt geschrieben wird:
<input checked="geprüft" />
<input readonly="schreibgeschützt" />
Das ausgewählte Attribut des <option>-Tags
Aus dem gleichen Grund wie dem vorherigen sollte dem ausgewählten Attribut des <option>-Tags in der <select>-Option ebenfalls ein Wert zugewiesen werden:
<Option ausgewählt="ausgewählt" />
Das align="absmiddle"-Attribut des <img>-Tags <br />Gemäß dem XHTML-Standard sollten sich HTML-Tags auf die Darstellung des Inhalts und nicht auf die Steuerung des Stils konzentrieren, und der Stil sollte durch CSS angepasst werden. Aus diesem Grund wurden einige alte Tags und Attribute aufgegeben. Beispielsweise sorgen die Tags <em> und <i> dafür, dass der Text im Tag-Inhalt kursiv dargestellt wird. Das Tag <i>, das einfach nach dem Stil benannt ist, ist jedoch zu einem aufgegebenen Standard geworden. Es wurde durch das Tag <em> ersetzt, das Hervorhebung bedeutet. Ebenso gibt das Attribut align="absmiddle" des <img>-Tags an, dass das Bild und der angrenzende Text vertikal in der Mitte ausgerichtet sind. Dies ist auch ein Attribut, das den Stil darstellt. Anstelle dieses Attributs sollte CSS verwendet werden, um den Ausrichtungsstil des Bildes zu steuern und eine gegenseitige Beeinflussung der beiden Stilsteuerelemente zu vermeiden.
<iframe>-Tag Frameborder-Attribut <br />Wenn Sie iframe verwenden, müssen Sie möglicherweise nur border="0" in IE festlegen, um den iframe-Rahmen auszublenden, aber das Standardattribut, das den Rahmen des Frame-Fensters steuert, ist frameborder. Sie sollten frameborder="0" festlegen, um den Frame-Rahmen in anderen Browsern als IE auszublenden:
<iframe frameborder="0" />
Cellpadding-Attribut des <table>-Tags <br />Dieses Attribut ist, wie das Align-Attribut des <img>-Tags, ein Attribut, das über die eigene Verantwortung von HTML, Inhalt darzustellen und Stil zu steuern, hinausgeht. Es gibt den Abstand zwischen Zellen an. Aus praktischer Sicht ist es besser, kein Cellpadding anzugeben, sondern CSS zu verwenden, um das Padding der Zelle zu steuern.
Das nowrap-Attribut des <td>-Tags
Nowrap ist ein Attribut, das angibt, dass der Inhalt nicht automatisch umbrochen wird. Wie die obigen Attribute ist dies jedoch ein Attribut, das den Stil steuert. In HTML 4.01 sind „bgcolor“, „height“, „width“ und „nowrap“ des <td>-Tags veraltet. In XHTML 1.0 Strict DTD werden „bgcolor“, „height“, „width“ und „nowrap“ des <td>-Tags nicht unterstützt.
|
