Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags
|
HTML hat versucht, sich von der Präsentation weg und hin zum Inhalt zu bewegen, was zu einer Logik führte: die Bedeutung des Inhalts (HTML) von der Präsentation (CSS) zu trennen. Dadurch wird die Größe von Webseiten reduziert, da ein Satz von Präsentationsanweisungen (in Form eines externen CSS-Dokuments) auf mehrere Seiten angewendet werden kann. Dadurch wird auch die Verwaltung der Site einfacher, da globale Änderungen durch die Änderung einer einzelnen Datei vorgenommen werden können. Bei einigen der fehlerhaften Tags handelt es sich im Wesentlichen um Präsentations-Tags (wie etwa small ), die durch aussagekräftigere und einfachere CSS-Regeln ersetzt werden können. Andere dienen nicht nur der Präsentation, sondern sind entweder unnötig sperrig (wie font Tag) oder so aufdringlich, dass sie die Benutzerfreundlichkeit beeinträchtigen (wie blink ). Tags Hier sind einige Tags, die Ihnen häufig begegnen und für die es bessere Optionen gibt: b kann verwendet werden, um Elemente fett darzustellen. Es wäre sinnvoller, stattdessen strong (also starke Hervorhebung) zu verwenden oder die Aufgabe mit CSS zu erledigen und font-weight: bold hinzuzufügen, um fett gedruckte Elemente anzuzeigen. i kann verwendet werden, um Elemente kursiv darzustellen. Verwenden Sie em (zur Hervorhebung), das macht auch mehr Sinn. Oder Sie können CSS für Kursivschrift verwenden: font-style: italic big können Sie eine größere Schriftart erzeugen. Verwenden Sie stattdessen Überschriften (wie etwa h1 , h2 usw., wenn der Text bereits eine Überschrift ist), um Bedeutung hinzuzufügen, oder verwenden Sie einfach die font-size in CSS, um mehr Kontrolle zu erhalten. small kann kleine Schriftarten erzeugen. Auch hier gibt uns CSS ( font-size ) mehr Kontrolle. hr kann eine horizontale Linie angezeigt werden. Im CSS-Design wird hr selten verwendet. Die CSS-Eigenschaften border-top und border-bottom oder einfache Bilder funktionieren besser.Obwohl die oben genannten Tags mit den neuesten HTML-Standards kompatibel sind, haben sie für den Inhalt nicht die Bedeutung, die ein guter Tag haben sollte. Sie könnten nützlicher sein, sind aber nicht besonders schädlich und könnten neben den folgenden schmutzigen Tags leicht mit unschuldigen, nicht auf der Zunge schmelzenden Butterstückchen purer Güte verwechselt werden. u können Elemente unterstreichen. Es erinnert uns daran, dass der unterstrichene Text viele Zusammenhänge hat. Aus diesem Grund wurde dieses Tag schon vor langer Zeit aufgegeben – Sie müssen nicht zusammenhängenden Text nicht unterstreichen. center können Elemente innerhalb eines Elements zentriert werden. Die CSS-Eigenschaft text-align ermöglicht nicht nur center , sondern auch left , right und justify . Mit menu wird eine Menüliste erstellt. Es ist nicht so perfekt wie ul , da ungeordnete Listen vielseitiger sind und ul die Leiche von menu weit überragt. layer ähneln div Elementen darin, dass sie durch CSS positioniert werden. Dies funktioniert nur in älteren Versionen von Netscape und ist daher nicht mehr nützlich. blink oder marquee . Sag laut „Nein“! Das ist auch zu erwarten, aber sie haben nur sehr begrenzte Unterstützung und machen nur sehr, sehr kranke Witze. font , mit dem sich Schriftname, -größe und -farbe eines Elements definieren lassen, hat sich in der Tag-Welt zu Recht der berüchtigte Titel „König der Tags“ verdient. Alte (und sogar neue) Websites überfluten die Seiten wie eine Ameisenplage. font Tags sind in der Webdesign-Software zu finden, die mithilfe font Tags Farbe und Größe für jedes Element festlegen. font -Tag wird missbraucht, um bei jedem sich wiederholenden Element zu erscheinen (z. B. jedes Mal, wenn Sie ein p -Element verwenden), während CSS auf sich wiederholende Elemente angewendet werden oder sogar die gesamte Website mit einem kurzen Code steuern kann. Durch die Verwendung des CSS-Ansatzes wird die Seite nicht nur schlanker, als wenn sie mit font Tags vollgestopft wäre, sondern sie ist auch leichter zu pflegen, weil Sie nur eine Zeile in der CSS-Datei ändern müssen und nicht alle font Tags einzeln ändern müssen. Dadurch erhöht sich auch die Wahrscheinlichkeit, dass die Website im Laufe der Zeit einen einheitlichen Designstil behält. font -Tags und der falsche Einsatz von Tabellen sind zwei der Hauptgründe für eine unnötige Aufblähung von Webseiten. Attribute Sie sind vielleicht der Meinung, dass Sie gute Tags verwenden, aber es lauern immer noch einige lästige Parasitenattribute, die jederzeit auftauchen können. name wird verwendet, um einen Namen für ein Element anzugeben. Es ist in Formularelementen wie input vollkommen akzeptabel, aber an anderen Stellen wurde die Aufgabe von name durch id ersetzt. text und bgcolor können im body -Start-Tag die grundlegende Textfarbe und Hintergrundfarbe der Seite definiert werden. Dies ist auch mit den CSS-Eigenschaften „ color und background-color möglich, wenn sie auf body Selektor angewendet werden. background Sie können im Body-Tag ein Hintergrundbild angeben. Mit Eigenschaften wie „background-image“ kann CSS Hintergrundbilder besser verarbeiten. link “, alink und vlink werden im body -Tag verwendet, um Links (unbesucht, aktiv und besucht) anzugeben. CSS-Babes – :link , :active und :visited erledigen die Arbeit. align kann verwendet werden, um den Inhalt eines Elements auszurichten (wie <div align="center">Stuff</div> ), aber wie beim center -Tag ist die CSS-Eigenschaft „ text-align der neue Boss. target kann einen Link auf verschiedene Arten öffnen. Am häufigsten wird ein neues Fenster geöffnet (z. B. <a href="wherever.html" target="_blank">Help me</a> ). Sieht gut aus, aber das tun Sie Ihrer Site nicht an. Benutzer rechnen nicht damit, dass merkwürdige Dinge (wie neue Fenster) erscheinen, und das am häufigsten verwendete Browsertool ist die Zurück-Schaltfläche des Browsers, die nicht funktioniert, wenn Sie ein neues Fenster öffnen. Es ist illegal und unbrauchbar. Beachten Sie, dass Präsentationsattribute von Tags wie width und height für Bilder sowie cellpadding und cellspacing für Tabellen erhalten bleiben, da diese Elemente häufig unterschiedliche Werte verwenden. Dies ist zwar keine perfekte Lösung, aber wenn Ihre Seiten viele Bilder und Tabellen enthalten, bleibt Ihnen keine sinnvolle Wahl, als diese zu verwenden.Das verwirrendste Präsentationsattribut ist der textarea Tag, der nur zwei gültige Attribute hat, cols und rows , die auch in den neuesten HTML-Versionen erforderlich sind. Gutes Etikett, schlechter Gebrauch. Um in Ihr Schlafzimmer zu gelangen, können Sie sich bücken und durch ein Hundeloch gehen, aber warten Sie, es gibt auch eine Tür für Menschen mit einer Klinke! Wow, schau mal – gerade genug, damit einer hineinkommt.Es gibt einen sehr guten Grund, HTML-Tags (gute Tags) zu verwenden, ob Sie es glauben oder nicht (glauben Sie es!): Je besser Sie sie verwenden, desto bessere Ergebnisse erzielen Sie. Die Webseite selbst ist für Benutzer einfacher zu verwenden als die Syntax und Semantik von HTML-Tags. Bildschirmleseprogramme heben ein ul Tag oder ein Titel-Tag häufig mit h1 oder h2 hervor, wenn sie darauf stoßen.Das am häufigsten missbrauchte Tag in der HTML-Welt ist die Tabelle. Tabellen werden häufig für das Layout verwendet, sie sollten jedoch gemäß ihrer Konzeption nur zur Anzeige tabellarischer Daten verwendet werden. Der tabellenfreie Layout-Ansatz ist keine Art Zen-artiges Streben nach Erleuchtung; er kann nicht nur die Größe einer Webseite erheblich reduzieren, sondern auch ihre Wartung und Neugestaltung erleichtern. Beachten Sie, dass Designer die hier erwähnten Tags und Attribute manchmal verwenden (insbesondere die Verwendung von Tabellen für das Layout), um Übergangsdesigns zu erstellen, die sowohl auf älteren Browsern (insbesondere Netscape 4) als auch auf modernen Browsern funktionieren. In Netscape 4, wo CSS nicht die nötige Leistung bringt, ist die Darstellung von Tabellen besser kontrollierbar. Leider gibt es nur wenige derartige Benutzer, während die Zahl der Benutzer mobiler Geräte zunimmt, bei denen die Mängel von Tabellenlayouts deutlich sichtbar sind. Das oben beschriebene tabellenlose Design vermeidet diese Nachteile durch geringfügige Leistungsänderungen für eine kleine Untergruppe von Benutzern, während die volle Funktionalität in allen Ansichten erhalten bleibt. rahmen Goldlöckchen denkt, eine Tasse Müsli wäre eine gute Idee, aber plötzlich tauchen drei große fleischfressende Säugetiere auf und werfen sie aus dem Fenster. Der Rahmen ist die Tasse, in der sich das Müsli befindet. Sie mögen gut erscheinen, aber sie sind gefährdet und werden bald verschwinden. Die meisten Websites verwenden keine Frames und normale Benutzer behandeln ein Dokument auch als Seite. In manchen Fällen reicht es aus, Frames zu verwenden, wenn Sie beispielsweise verhindern möchten, dass Benutzer bestimmte Webseiten zu ihren Lesezeichen hinzufügen, oder wenn Sie möchten, dass Benutzer bestimmte Webseiten per E-Mail oder über Instant Messaging-Software empfehlen, oder wenn Sie die gesamte Website sehr kompliziert gestalten möchten, sodass Benutzer mit Bildschirmleseprogrammen häufig zwischen Frames wechseln müssen, oder wenn Sie Suchmaschinen verwirren möchten. Kurz gesagt: Frameworks erhöhen nur die Komplexität und verlieren an Benutzerfreundlichkeit . Beachten Sie, dass Sie in Zukunft keine Fehler machen werden, solange Sie diese Regeln befolgen: 1) Wenn ein Tag oder Attribut auch nur eine geringe Korrelation mit der Leistung aufweist, verwenden Sie es nicht. Das ist die Sache von CSS. Und CSS macht es besser. 2) Verwenden Sie das Etikett für den Zweck, den sein Name impliziert . Das Tabellentag wird für tabellarische Daten verwendet. Für Titel werden Titel-Tags verwendet. Und so weiter und so fort. 3) Verwenden Sie passende Tags für spezifische Inhalte. Verwenden Sie list für Listen, „hx“ (x = 1 – 7) für Überschriften usw. Weiterführende Literatur: HTML-Leitfaden für Fortgeschrittene: Schlechte Gewohnheiten ablegen und zu Standards wechseln - XHTML-Kompatibilität |
<<: Tipps zum reflektierenden Lernen von JavaScript
>>: Lösen Sie das Problem, nachdem Sie --subnet zum Docker-Netzwerk hinzugefügt haben.
Artikel empfehlen
Detaillierte Erläuterung der Konzepte, Prinzipien und allgemeinen Verwendung von gespeicherten MySQL-Prozeduren
Dieser Artikel erläutert anhand von Beispielen di...
Lösen Sie das Problem, dass der Knotenprozess im Linux-System ausgeführt wird, aber nicht beendet werden kann
Lassen Sie mich Ihnen zunächst vorstellen, dass d...
Detaillierte Erläuterung der Implementierungsmethode und Verwendung von abgerundeten Ecken mit CSS3-Randradius
Früher war es ziemlich mühsam, abgerundete Ecken ...
Ein vollständiges Beispiel für die Abfrage von Batchdaten aus einer Tabelle durch MySQL und deren Einfügen in eine andere Tabelle
Sag es im Voraus Nodejs liest die Datenbank als a...
MySQL-Performance-Optimierung: So nutzen Sie Indizes effizient und richtig
Die Praxis ist der einzige Weg, die Wahrheit zu t...
Was tun, wenn Sie Ihr MySQL-Passwort vergessen?
Zweimal Ihr MySQL-Passwort vergessen? Zuerst habe...
React + Threejs + Swiper vollständiger Code zum Erzielen eines Panoramaeffekts
Schauen wir uns den Panorama-Effekt an: Adresse a...
JavaScript-Canvas zum Erstellen eines Rubbellos-Beispiels
In diesem Artikel wird der spezifische Code von J...
Details zum JavaScript-Abschluss
Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...
Implementierung effektiver Benutzergruppen und anfänglicher Benutzergruppen in Linux
Überprüfen Sie zuerst die Datei /etc/group: [root...
Der Unterschied zwischen z-index: 0 und z-index: auto in CSS
Ich habe vor Kurzem etwas über Stapelkontexte gel...
Beispielcode zur Implementierung eines zufälligen Roll Callers in HTML
Nachdem dieses Namensaufrufgerät mit dem Aufruf d...
Beispielcode für das Testskript für Indizes und Sperren auf den Isolationsebenen RR und RC
Grundlegende Konzepte Aktueller Lesevorgang und S...
Tutorial-Diagramm zur kostenlosen 64-Bit-Installationsversion von MySQL 5.7.31
1. Herunterladen Download-Adresse: https://dev.my...
Installation und Verwendung von Vue
Inhaltsverzeichnis 1. Vue-Installation Methode 1:...