15 HTML- oder CSS-Fehler oder -Tipps

Ich habe Fehler und Tipps aus eigener Erfahrung geschrieben. Wenn es Fehler wie "schlechte Ratschläge" gibt, würde ich mich über konstruktive Kritik freuen. Der Beitrag ist für Anfänger gedacht, die HTML und CSS lernen möchten. Es kann jedoch für Fachleute interessant sein, sich mit diesem Material vertraut zu machen.

1. W3C Validator


Es wird empfohlen, HTML und CSS der Website über den Dienst validator.w3.org zu überprüfen. Dieser Dienst scannt den Code und zeigt Fehler an, zum Beispiel:

  • tag ist nicht geschlossen;
  • nicht empfohlene Zeichen in Links;
  • Das empfohlene Tag wird nicht verwendet.
  • Erforderliches Attribut nicht angegeben
  • usw.

2. Layout im UTF-8-Format


Beim Seitenlayout müssen Sie sicherstellen, dass die Dateicodierung auf UTF-8 (ohne Stückliste) eingestellt ist . Jeder Texteditor legt seine eigene Codierung fest.

Eine Datei im UTF-8-Format ermöglicht die Verwendung von Sonderzeichen (z. B. Zeichen in verschiedenen Sprachen, Währungszeichen usw.).

Es ist auch erforderlich, die Browser darüber zu informieren, dass die Seite in UTF-8-Codierung geöffnet wird. Dies geschieht über das folgende Tag:


3. Identische ID für mehrere Elemente


Der ID-Attributwert im HTML-Code darf nicht wiederholt werden.


4. Sprites


Es wird empfohlen, mehrere kleine Bilder in einer Datei zusammenzufassen (eine solche Datei wird als Sprite bezeichnet). Dadurch wird die Anzahl der Anfragen an die Site verringert und die Geschwindigkeit beim Laden der Seite verbessert.

Beispiel für ein Sprite

Bild

Beispiel für JSFiddle

Jetzt ist es auch beliebt, anstelle von Sprites Symbolschriften zu verwenden. Das heißt Anstelle von Buchstaben werden Zahnradsymbole, Emoticon und andere Symbole angezeigt. Ein Beispiel sind die von Twitter Bootstrap verwendeten Glyphicons.

Die Vorteile von Schriften gegenüber Sprites sind die Erhaltung der Qualität bei der Größenänderung von Symbolen und eine kleinere Größe. Der Nachteil ist jedoch, dass Sie im Symbol nur eine Farbe verwenden können.

5. Viele Selektoren


Es wird nicht empfohlen, mehr als drei Selektoren zu verwenden, da Dies wirkt sich auf die Leistung der Website aus.

/* не рекомендуется, большая вложенность */
.page .item .title a {}
/* можно сократить */
.page .item a {}

Browser lesen CSS von rechts nach links. Das heißt Im obigen Code werden zuerst alle Links auf der Seite ausgewählt und dann die Links, die sich im Element .item befinden.

Wenn möglich, wird empfohlen, die Auswahl auf einen Selektor zu reduzieren:

/* рекомендуется */
.form-submit a {}
/* предпочтительнее примера выше, если есть возможность */
.form-submit-link {}

6. Stile in HTML


HTML dient zur Anzeige von Informationen (Text, Bilder). Inhaltsgestaltung (Größe ändern, Farbe, Schriftart) erfolgt in CSS.

Ошибка в коде

Ошибка в коде


7. Ungültige Klassennamen


Wenn Sie Text grün machen müssen, fügen viele Schriftsatz-Codierer die Klasse .green hinzu.

Текст сообщения


Das ist falsch, weil Wenn Sie das Design ändern, können sich viele Farben ändern. Beispielsweise kann der Nachrichtentext in Blau anstelle von Grün angezeigt werden. Dann müssen Sie nach allen Tags suchen, die eine .green-Klasse haben, und diese durch .blue ersetzen.

Um solche Situationen zu vermeiden, wird nicht empfohlen, Klassen zum Ändern der Farben, Ausrichten von Text und Ändern der Groß- / Kleinschreibung zu verwenden. Es ist notwendig, die Elemente selbst zu benennen (Header, Keller, Nachricht) und ihre eigenen Stile darauf anzuwenden.

Текст сообщения

Текст сообщения


8. Pixel in Teilwerten


In einigen Browsern können Sie Pixel in Bruchzahlen angeben, z. B. "1.5px". Aber das ist falsch, weil Ein Pixel ist eine unteilbare Einheit. Anstelle von "1.5px" ist es besser, "1.5em" zu verwenden.

p {
    /* не правильно */
    letter-spacing: 1.5px;
    /* правильно */
    letter-spacing: .005em;
}

9. Klassen anstelle von id verwenden


Es wird empfohlen, nach Klassen anstelle von id auszuwählen, weil Selektoren mit id haben mehr Gewicht als Klassen, und es wird schwierig sein, sie neu zu definieren.

#modal a {
    color: blue;
}
/* цвет ниже не получится переопределить,
   т.к. #modal имеет больший вес, чем у классов */
.modal-header a {
    color: #333;
}
/* в этом случае придётся добавить #modal */
#modal .modal-header a {
    color: #333;
}

Die Verwendung von! Important wird ebenfalls nicht empfohlen, da Sein Gewicht ist höher als das des ID-Attributs, und es wird auch schwierig sein, es neu zu definieren.

10. Menü


Das Menü sollte als Liste angelegt sein.

ГлавнаяНовостиО компании


11. Fehlendes Alt in Bildern


In den Tags müssen Sie das alt-Attribut angeben (Sie können es leer lassen).

Картинка

12. Tags


Es sollte nur eine Überschrift pro Seite geben

. Grundsätzlich ist dieses Tag der Name der Seite.

13. Transkription


Die Namen aller Elemente müssen in der englischen Übersetzung geschrieben sein. Auch wenn Sie nicht wissen, wie das Wort auf Englisch geschrieben ist, gibt es viele kostenlose Dienste, die übersetzt werden können. Wenn die Namen der Elemente durch Transkription gefunden werden, sieht es unprofessionell aus.

/* неправильно */
.tovar {}
.stranica {}
.zapros {}
/* правильно */
.product {}
.page {}
.query {}

14. Clearfix


Es ist schwer, in aller Kürze über Clearfix zu schreiben, aber ich möchte darauf hinweisen, dass meiner Meinung nach viele Layouter einen Fehler machen.

Die .clearfix-Klasse muss im übergeordneten Tag angegeben und darf nicht daneben stehen.


15. HTML - Programmiersprache


Einige HTML-Neulinge glauben, HTML sei eine Programmiersprache. Tatsächlich ist HTML keine Programmiersprache, sondern kann mit Microsoft Word verglichen werden. Um beispielsweise den Text fett darzustellen, müssen Sie in Word auf die Schaltfläche klicken und in HTML den Code registrieren. Das heißt HTML ist nur ein Werkzeug, das Text, Bilder, Tabellen und andere Elemente hinzufügt.

Jetzt auch beliebt: