Heim > Artikel > Web-Frontend > 15 Best Practices für HTML-Anfänger
15 Best Practices für HTML-Anfänger
- 高洛峰Original
- 2017-02-24 10:27:341374Durchsuche
Im Folgenden sind dreißig Best Practices für HTML-Anfänger aufgeführt, die allen als Referenz zur Verfügung gestellt werden. Die spezifischen Inhalte lauten wie folgt:
1. Tags geschlossen halten
In der Vergangenheit habe ich es oft gesehen ähnlich Der folgende Code (Anmerkung: Wie lange ist das her...):
<li>Some text here. <li>Some new text here. <li>You get the idea.
Beachten Sie, dass das UL/OL-Label auf der Außenverpackung fehlt (wer weiß, ob das beabsichtigt oder unbeabsichtigt ist), und es wird auch vergessen, das LI-Tag zu schließen. Nach heutigen Maßstäben ist dies eindeutig eine schlechte Praxis und sollte zu 100 % vermieden werden. Halten Sie das Etikett auf jeden Fall geschlossen. Andernfalls kann es bei der Validierung von HTML-Tags zu Problemen kommen.
Ein besserer Weg
<ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li> </ul>
2. Deklarieren Sie den richtigen Dokumenttyp
Wenn Benutzer auf Probleme stoßen, wird dies empfohlen dass er zuerst zwei Dinge tut:
1. Überprüfen Sie die CSS-Datei, um sicherzustellen, dass keine Fehler vorliegen.
2. Bestätigen Sie, dass der richtige Dokumenttyp hinzugefügt wurde.
DOCTYPE erscheint vor dem HTML-Tag. Es teilt dem Browser mit, ob die Seite HTML, XHTML oder eine Mischung aus beiden enthält Browser kann korrekt analysieren.
Normalerweise stehen vier Dokumenttypen zur Auswahl:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 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”> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Es gibt unterschiedliche Meinungen darüber, welche Dokumenttypdeklaration verwendet werden soll. Es wird allgemein davon ausgegangen, dass die Verwendung der strengsten Deklaration die beste Wahl ist. Untersuchungen zeigen jedoch, dass die meisten Browser die normale Methode zum Parsen dieser Deklaration verwenden. Daher entscheiden sich viele Menschen für die Verwendung des HTML4.01-Standards. Entscheidend bei der Auswahl einer Aussage ist, ob sie wirklich für Sie geeignet ist. Daher müssen Sie sie umfassend berücksichtigen, um eine Aussage auszuwählen, die für Ihr Projekt geeignet ist.
3. Verwenden Sie niemals Inline-Stile
Wenn Sie in das Schreiben von Code vertieft sind, fügen Sie oft beiläufig oder nachlässig ein wenig Inline-CSS-Code hinzu
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>
Das scheint praktisch und kein Problem zu sein. Dies ist jedoch ein Fehler in Ihrer Codierungspraxis.
Wenn Sie Code schreiben, fügen Sie am besten keinen Stilcode hinzu, bis die Inhaltsstruktur vollständig ist.
Diese Codierungsmethode ähnelt einem Guerillakrieg, ein sehr nachahmender Ansatz. ——Chris Coyier
Ein besserer Ansatz besteht darin, den P-Stil nach Abschluss des Tag-Teils in einer externen Stylesheet-Datei zu definieren.
Empfehlung
#someElement > p {
color: red;
}
4. Platzieren Sie alle externen CSS-Dateien im Head-Tag
Theoretisch können Sie CSS-Stylesheets überall einführen, aber in der HTML-Spezifikation wird die Einführung empfohlen im Head-Tag der Webseite, was das Rendern der Seite beschleunigen kann.
Während des Entwicklungsprozesses von Yahoo haben wir festgestellt, dass die Einführung eines Stylesheets im Head-Tag das Laden von Webseiten beschleunigt, da die Seite dadurch schrittweise gerendert werden kann. —— ySlow Team
<head> <title>My Favorites Kinds of Corn</title> <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> </head>
5. Platzieren Sie die Javascript-Datei unten
Ein Grundsatz, den Sie beachten sollten, besteht darin, die Seite so schnell wie möglich vor dem Benutzer anzuzeigen. Wenn ein Skript geladen wird, wird der Ladevorgang der Seite angehalten, bis das Skript vollständig geladen und ausgeführt ist. Daher wird mehr Zeit des Benutzers verschwendet.
Wenn Ihre JS-Datei nur bestimmte Funktionen implementieren muss (z. B. Schaltflächenklickereignisse), können Sie diese gerne am Ende des Hauptteils einführen. Dies ist definitiv der beste Weg.
Empfehlung
<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html>
6. Verwenden Sie niemals Inline-Javascript. Es ist nicht mehr 1996!
Vor vielen Jahren gab es noch eine Möglichkeit, JS-Code direkt in HTML-Tags einzufügen. Dies kommt vor allem bei einfachen Fotoalben häufig vor. Im Wesentlichen ist dem Tag ein „onclick“-Ereignis zugeordnet, dessen Wirkung einem JS-Code entspricht. Sie sollten diese Methode nicht verwenden. Sie sollten den Code in eine externe JS-Datei übertragen und dann den Ereignis-Listener mit „addEventListener/attachEvent“ hinzufügen. Oder verwenden Sie ein Framework wie jquery und verwenden Sie einfach die „Klick“-Methode.
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});
7. Überprüfen Sie während der Entwicklung
Wenn Sie gerade erst mit der Erstellung von Webseiten begonnen haben, wird dringend empfohlen, die Web Developer Toolbar herunterzuladen (Chrome-Benutzer suchen bitte im Sie können den App Store selbst verwenden, d. h. Benutzer Es kann eine Verschwendung sein) und verwenden Sie jederzeit während des Codierungsprozesses „HTML-Standardsvalidierung“ und „CSS-Standardsvalidierung“. Wenn Sie glauben, CSS sei eine sehr einfach zu erlernende Sprache, wird Sie das umbringen. Ihr laxer Code führt dazu, dass Ihre Seite voller Lücken und ständiger Probleme ist. Eine gute Möglichkeit besteht darin, zu überprüfen, zu überprüfen und erneut zu überprüfen.
8. Firebug herunterladen
Firebug ist zweifellos das beste Plug-in für die Webentwicklung. Es kann nicht nur JavaScript debuggen, sondern Sie auch intuitiv die Attribute und Positionen von Seiten-Tags verstehen lassen. Laden Sie es ohne weiteres herunter!
9. Verwenden Sie Firebug
Nach der Beobachtung des Autors nutzen die meisten Benutzer nur 20 % der Firebug-Funktionen, was eine solche Verschwendung darstellt. Sie können sich genauso gut ein paar Stunden Zeit nehmen, um dies zu lernen Das Tool wird Ihnen auf jeden Fall dabei helfen, mit halbem Aufwand das Doppelte des Ergebnisses zu erzielen.
10. Behalten Sie Tag-Namen in Kleinbuchstaben
Theoretisch wird bei HTML die Groß-/Kleinschreibung nicht beachtet, Sie können es so schreiben, wie Sie möchten, zum Beispiel:
<DIV> <P>Here's an interesting fact about corn. </P> </DIV>
Aber es ist so Es ist am besten, es nicht so zu schreiben, es hat keinen Sinn, größere Buchstaben einzugeben, und der Code wird dadurch hässlich.
Empfehlungen
<div> <p>Here's an interesting fact about corn. </p> </div>
11. Verwenden Sie H1-H6-Tags
Es wird empfohlen, dass Sie alle sechs dieser Tags auf Webseiten verwenden. Obwohl die meisten Menschen nur die ersten vier verwenden, bietet das am häufigsten verwendete H viele Vorteile, wie z. B. Gerätefreundlichkeit, Suchmaschinenfreundlichkeit usw. Sie können Ihre P-Tags genauso gut durch H6 ersetzen.
<h1>This is a really important corn fact! </h1> <h6>Small, but still significant corn fact goes here. </h6>
12. Verwenden Sie eine ungeordnete Liste (UL), um das Navigationsmenü zu umschließen
Normalerweise verfügen Websites über Navigationsmenüs, Sie können sie auf diese Weise definieren:
<div id="nav"> <a href="#">Home </a> <a href="#">About </a> <a href="#">Contact </a> </div>
如果你想书写优美的代码，那最好不要用这种方式。
为什么要用UL布局导航菜单？ ——因为UL生来就是为定义列表准备的
最好这样定义：
<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
15.学习如何应对IE
IE一直以来都是前端开发人员的噩梦！
如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> <![endif]-->
这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。
以上就是本文的全部内容，希望对大家学习有所帮助。
更多HTML初学者适用的十五条最佳实践相关文章请关注PHP中文网！