Heim  >  Artikel  >  Web-Frontend  >  Achten Sie auf die Verwendung von HTML-Tags bei der Webseitenproduktion_HTML/Xhtml_Webseitenproduktion

Achten Sie auf die Verwendung von HTML-Tags bei der Webseitenproduktion_HTML/Xhtml_Webseitenproduktion

WBOY
WBOYOriginal
2016-05-16 16:45:231376Durchsuche

HTML hat versucht, die Präsentation zu entfernen und sich in Richtung Inhalt zu bewegen, was zu der Begründung geführt hat, Inhaltsbedeutung (HTML) von Präsentation (CSS) zu trennen. Dadurch werden Webseiten schlanker, da eine Reihe von Präsentationsanweisungen (in Form externer CSS-Dokumente) auf mehrere Seiten angewendet werden kann. Dadurch wird die Site auch einfacher zu verwalten, da globale Änderungen durch die Änderung einer einzelnen Datei vorgenommen werden können.
Einige fehlerhafte Tags sind im Grunde Präsentations-Tags (z. B. small), die durch aussagekräftigere und einfachere CSS-Regeln ersetzt werden können. Andere dienen nicht nur der Präsentation, sondern sind unnötig sperrig (wie das font-Tag) oder störend auf Kosten der Benutzerfreundlichkeit (wie das blink-Tag). Etikett
Die folgenden Tags finden Sie möglicherweise häufig und bieten möglicherweise bessere Auswahlmöglichkeiten: b kann verwendet werden, um fette Elemente zu erzeugen. Es ist sinnvoller, stattdessen strong (was starke Hervorhebung bedeutet) zu verwenden oder CSS zu verwenden und die font-weight: bold-Regel hinzuzufügen, um fette Elemente anzuzeigen. i kann zum Generieren kursiver Elemente verwendet werden. Verwenden Sie em (zur Hervorhebung), was auch sinnvoller ist. Oder Sie können CSS verwenden, um Kursivschrift auszudrücken: font-style: italic big kann zu einer größeren Schriftgröße führen. Verwenden Sie stattdessen einen Titel (z. B. h1, h2 usw., wenn der Text bereits ein Titel ist), der ihm Bedeutung verleiht, oder verwenden Sie einfach das Attribut font-size in CSS, um mehr Kontrolle zu erlangen. small kann kleine Schriftarten erzeugen. CSS (font-size) übernimmt wieder mehr Kontrolle. hr kann verwendet werden, um eine horizontale Linie anzuzeigen. Es kommt selten vor, dass hr zum Entwerfen in CSS verwendet wird. Die border-top-Attribute oder einfachen Bilder von CSS sind hierfür besser geeignet. border-bottomObwohl die oben genannten Tags mit den neuesten HTML-Standards kompatibel sind, haben sie für den Inhalt keine Bedeutung, die gute Tags haben sollten. Sie könnten nützlicher sein, aber sie sind nicht besonders schädlich und könnten leicht mit unschuldigen Butterklumpen purer Güte verwechselt werden, die nicht auf der Zunge zergehen, wenn man neben den folgenden schmutzigen Tags steht.
u kann Unterstreichungen für Elemente erzeugen. Es erinnert Sie daran, dass der unterstrichene Text viele Zusammenhänge hat. Aus diesem Grund gab es dieses Tag schon lange nicht mehr – Sie müssen nicht verbundenen Text nicht unterstreichen. center kann verwendet werden, um Elemente innerhalb von Elementen zu zentrieren. Die CSS-Eigenschaft erlaubt nicht nur text-align, sondern auch center, left und right. justifymenu wird zum Erstellen von Menülisten verwendet. Es ist nicht so perfekt wie , weil ungeordnete Listen vielseitiger sind und ul ganz oben auf der Speisekarte steht. Die Elemente ullayer und ähneln sich darin, dass sie oben im CSS positioniert sind. Dies funktioniert nur in älteren Versionen von Netscape und ist daher nicht mehr sinnvoll. divblink oder marquee. Sag laut Nein! Das sollte man von ihnen erwarten, aber sie haben nur sehr begrenzte Unterstützung und machen nur sehr, sehr kranke Witze. font, mit dem sich der Schriftname, die Größe und die Farbe eines Elements definieren lassen, hat sich in der Tag-Welt zu Recht den Titel des berüchtigten Königs der Tags verdient. Alte Websites (und auch neue) wimmeln auf den Seiten wie eine weltweite Ameisenplage. Der größte Teil der Verbreitung von -Tags geht auf font Web-Erstellungs--Software zurück, die das -Tag einschließlich Farbe und Größe für jedes Element verwendet. Das font-Tag wird missbraucht, um auf jedem sich wiederholenden Element zu erscheinen (d. h. jedes Mal, wenn Sie ein font-Element verwenden), während Sie mit CSS sich wiederholende Elemente mit einem kurzen Code anwenden oder sogar die gesamte Website steuern können. Mit der CSS-Methode kann die Seite nicht nur schlankerp sein als eine font, die durch eine große Anzahl von -Tags parasitiert wird, sondern sie ist auch einfacher zu warten, da Sie nur das ändern müssen Zeile in der CSS-Datei, anstatt jedes -Tag einzeln zu ändern. Dies erhöht auch die Wahrscheinlichkeit, eine Website mit einem durchgehend einheitlichen Design zu pflegen. font-Tags und die unangemessene Verwendung von Tabellen sind zwei Hauptursachen für unnötiges Aufblähen. Eigentum fontVielleicht denken Sie, dass Sie gute Etiketten verwenden, aber es lauern immer noch einige problematische Parasitenattribute, die jederzeit auftauchen können. name wird verwendet, um einen Namen für ein Element anzugeben. Es wird in Formularelementen wie input vollständig akzeptiert, aber an anderer Stelle wurde die Funktion von name durch das Attribut id ersetzt . text und bgcolor können die grundlegende Textfarbe und Hintergrundfarbe der Seite im body-Start-Tag definieren. Die CSS-Eigenschaften color und background-color bewirken dies auch, wenn sie auf den body-Selektor angewendet werden. backgroundSie können im Body-Tag ein Hintergrundbild angeben. CSS wird einen besseren Job machen, indem es Eigenschaften wie „background-image“ verwendet, um Hintergrundbilder zu verarbeiten. link, alink, vlink werden im body-Tag verwendet, um die Verbindung anzugeben (unbesucht, aktiviert und besucht). CSS-Babys─:link, :active und :visited werden den Job erledigen. align kann verwendet werden, um den Inhalt eines Elements auszurichten (z. B. <div align="center">Stuff</div>).), aber wie beim center<code>center-Tag ist die CSS-Eigenschaft text-align<code>text-align der neue Chef. target<code>target kann eine Verbindung auf unterschiedliche Weise öffnen. Am häufigsten wird das Öffnen eines neuen Fensters verwendet (z. B. <a href="wherever.html" target="_blank). „>Hilf mir</a><code><a href=" wherever.html>Help me</a>). Es sieht toll aus, aber Sie machen das nicht mit Ihrer Website. Benutzer erwarten nicht, dass etwas Magisches (wie ein neues Fenster) erscheint, und das häufigste Browser-Tool ist die Zurück-Schaltfläche des Browsers, die nicht verfügbar ist, wenn Sie ein neues Fenster öffnen. Es ist illegal und nicht einfach zu verwenden. Beachten
behält die Präsentationseigenschaften von Tags wie width<code>width und height<code>height für Bilder sowie cellpadding<code>cellpadding und cellspacing<code>cellspacing für Tabellen bei, da diese Elemente verwenden häufig unterschiedliche Werte. Es ist keine perfekte Lösung, aber wenn Ihre Webseite viele Bilder und Tabellen enthält, haben Sie keine andere Wahl, als diese zu verwenden.
Das verwirrendste Leistungsattribut ist das textarea<code>textarea-Tag, das in der neuesten HTML-Version nur zwei zulässige Attribute hat, cols<code>cols und rows<code>rows. Dies ist auch der Fall notwendig. Gutes Etikett, schlechte Verwendung
Um in Ihr Schlafzimmer zu gelangen, bücken Sie sich durch ein Hundeloch, aber warten Sie, es gibt eine Tür für Menschen mit einem Griff! Wow, schau mal – genau richtig, um einzutreten.
Verwenden Sie HTML-Tags (gute Tags), ob Sie es glauben oder nicht (glauben Sie es!), es gibt einen guten Grund: Sie verwenden sie mit einer guten Prämisse und Sie werden ein besseres Ergebnis erzielen.
Die Webseite selbst ist für Benutzer einfacher zu verwenden als die HTML-Tag-Syntax und -Semantik. Bildschirmleser stoßen häufig auf ein ul<code>ul-Tag oder haben h1<code>h1 oder h2<code>h2 Heben Sie sie hervor, wenn Sie Titel-Tags verwenden.
Das am häufigsten missbrauchte Tag in der Welt der HTML-Tags ist die Tabelle. Tabellen werden oft für das Layout verwendet, aber Tabellen sollten, wie vorgesehen, nur zur Anzeige tabellarischer Daten verwendet werden. Die Layout-Methode ohne Tabellen ist kein Zen-Aufklärungsstreben. Sie reduziert nicht nur das Gewicht der Webseite erheblich, sondern erleichtert auch die Pflege und Neugestaltung. Beachten
Manchmal verwenden Designer auch die hier genannten Tags und Attribute (insbesondere die Verwendung von Tabellen für das Layout), um Übergangsdesigns zu erstellen, die in älteren Browserversionen (insbesondere Netscape 4) funktionieren und auch darauf funktionieren moderne Browser. Tabellen ermöglichen eine bessere Präsentationskontrolle unter Netscape 4, wo CSS inkompetent ist. Leider gibt es nur wenige dieser Benutzer, während die Zahl der Benutzer mobiler Geräte, die die Mängel von Tabellenlayouts aufdecken, zunimmt. Das oben beschriebene tabellenlose Design verhindert diese Mängel und bleibt trotz einiger geringfügiger Leistungsänderungen für eine kleine Untergruppe von Benutzern in allen Browsern voll funktionsfähig. rahmen
Goldilocks hält eine Tasse Müsli für eine gute Idee, doch plötzlich tauchen drei riesige fleischfressende Säugetiere auf und werfen sie aus dem Fenster. Der Rahmen ist der Müslibecher. Sie scheinen zwar in Ordnung zu sein, aber sie haben das gefährdete Stadium erreicht und werden bald verschwinden.
Die meisten Websites verwenden keine Frames und normale Benutzer behandeln ein Dokument als Seite.
In einigen Fällen möchten Sie beispielsweise verhindern, dass Benutzer bestimmte Webseiten zu Lesezeichen hinzufügen, oder Sie möchten, dass Benutzer bestimmte Webseiten per E-Mail oder Instant-Messaging-Software empfehlen, oder Sie möchten, dass die gesamte Website sehr kompliziert wird. Dadurch wird es für Benutzer schwierig, Screenreader-Benutzer häufig zwischen Frames zu wechseln, oder Sie möchten Suchmaschinen verwirren. Genug ist genug, verwenden Sie Frames!
Kurz gesagt, Frameworks erhöhen nur die Komplexität und verlieren an Benutzerfreundlichkeit. Beachten
Solange Sie die folgenden Regeln befolgen, werden Sie nie einen Fehler machen:
1) Verwenden Sie kein Tag oder Attribut, auch wenn es nur geringfügig mit der Leistung übereinstimmt. Das ist eine CSS-Sache. Und CSS macht es besser.
2) Verwenden Sie das Tag für den Zweck , der durch seinen Namen vorgeschlagen wird. Tabellen-Tags werden für Tabellendaten verwendet. Titel-Tags werden für Titel verwendet. Warte, warte.
3) Verwenden Sie passende -Tags für bestimmte Inhalte. Verwenden Sie list<code>list für Listen, hx (x = 1 - 7) für Titel usw.

Erweiterte Lektüre Grundlegendes zu Standards aus dem Advanced Guide to HTML: Brechen Sie schlechte Gewohnheiten ab und wechseln Sie zu Standards – XHMTL-Kompatibilität

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn