Erklären Sie, welches div Sie schließen
Die meiste Zeit, wenn ich eine Website-Quelle anschaue, sehe ich ganz unten auf der Seite eine schier endlose Liste von schließenden Tags. Tatsächlich denken viele Anfänger, dass sie nur divs anstelle von Tabellen verwenden müssen, um Qualitätscode zu erstellen. Divs sind Reiniger als Tabellen, aber ohne richtige Codeorganisation kann es als (oder manchmal sogar mehr) chaotisch wie tabellenbasierter Code sein.
Die Verwendung von Einrückungen ist ein guter Anfang. Aber ein Tipp, der Sie auf jeden Fall viel Zeit sparen kann, ist, jedes div-Tag zu kommentieren, das Sie schließen, wie im folgenden Beispiel gezeigt:
<div id="header"> <div id="sub">... </div><!-- #sub.first.left --> </div><!-- #header -->
Verwenden eines CSS-Resets
Es sei denn, Sie sind ein Anfänger oder wenn Sie im Urlaub auf einer einsamen Insel für die letzten 6 Jahre waren, könnten Sie bereits wissen, wie nützlich ein CSS zurücksetzen. Da Browser standardmäßig nicht die gleiche Standardformatierung auf HTML-Elemente anwenden, stellt ein CSS-Reset sicher, dass alle Elemente keinen bestimmten Stil haben, sodass Sie Ihren eigenen Stil definieren können, ohne das Risiko vieler browserübergreifender Renderingprobleme.
html, Körper, div, Span, Applet, Objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, Akronym, Adresse, groß, zitieren, code, del, dfn, em, font, img, ins, kbd, q, s, samp, klein, streiken, stark, sub, sup, tt, var, b, u, i, Mitte, dl, dt, dd, ol, ul, li, Fieldset, Form, Etikett, Legende, Tabelle, Beschriftung, Tbody, tfoot, thead, tr, th, td Spielraum: 0; Polsterung: 0; Grenze: 0; Umriss: 0; Schriftgröße: 100%; vertikal ausgerichtet: Basislinie; Hintergrund: transparent; } Körper . Linienhöhe: 1; } ol, ul list-style: keine; } blockquote, q Zitate: keine; } blockquote:before, blockquote:after, q:vorher, q:nach Inhalt: ''; Inhalt: keine; } /* Denken Sie daran, Fokusstile zu definieren! */ :Fokus Umriss: 0; } /* denken Sie daran, Inserts irgendwie hervorzuheben! */ ins Textdekoration: keine; } del Textdekoration: Line-Through; } /* Tabellen benötigen noch 'cellspacing="0"' im Markup */ Tabelle Grenzzusammenbruch: Kollaps; Grenzabstand: 0; }
Quelle:http://meyerweb.com/eric/tools/css/reset/index.html
Verwenden Sie keine @import
CSS-Dateien können mithilfe der @import-Direktive eingeschlossen werden. Dies kann nützlich sein, wenn Sie z. B. ein Stylesheet in ein anderes einschließen möchten. Eine weitere gängige Praxis ist es, CSS-Datei in HTML-Dokumente mit den folgenden zu schließen:
<style type="text/css>
@import url('a.css');
@import url('b.css');
</style>
Während es funktioniert, ist die @import-Direktive viel langsamer als die andere Möglichkeit, Stylesheets in ein HTML-Dokument einzuschließen:
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'>
Es wird keinen Unterschied auf Websites mit geringem Traffic machen, aber wenn Sie die Möglichkeit haben, eine beliebte Website zu besitzen, verschwenden Sie nicht die Zeit Ihres Besuchers mit @import.
Quelle:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
"Smush" Ihre Bilder
Als Entwickler fand ich immer, dass es nicht einfach war, meine Bilder für das Web zu optimieren. Ich habe den guten alten Photoshop-Befehl "Save for web" ausprobiert, aber die meiste Zeit landete ich mit Bildern, die entweder zu groß oder ohne ausreichende Qualität waren.
Als Ergebnis hatte ich die schlechte Angewohnheit, unoptimierte Bilder auf meinen Websites zu verwenden. Dies ist kein Problem, wenn Sie sich nicht um die Bandbreite Ihrer Website kümmern müssen, aber nach meinem kürzlichen Wechsel auf meinem vps.net virtuellen privaten Server musste ich vorsichtig mit Bildgrößen sein.
Zu diesem Zeitpunkt fand ich ein sehr cooles Werkzeug namens Smush It: Sie geben Ihre nicht optimierte Bild-URL ein, und Smush Es wird ein perfekt optimiertes Bild für Sie erstellen. Sie können bis zu 70 % der Dateigröße speichern, während Sie die ursprüngliche Qualität beibehalten. Als Beispiel wurden alle Bilder aus meiner Liste der Online-Code-Editoren "geschmuggelt".
CSS nicht mit HTML mischen
Als Markup-Sprache ist die richtige Verwendung von HTML, um Dokumente zu organisieren, indem sie eine Kopfzeile, eine Fußzeile, Listen, Blockquotes usw. definieren. Vor einiger Zeit verwendeten Front-End-Webentwickler häufig veraltete HTML-Attribute, um ein bestimmtes Element zu stylen.
Heutzutage ermöglicht das style-Attribut Entwicklern, CSS direkt in ein HTML-Dokument einzufügen. Dies ist sehr nützlich für Tests oder wenn Sie es eilig haben. Aber das Stilattribut ist schlechte Praxis, das widerspricht völlig der CSS-Philosophie.
Das folgende Beispiel veranschaulicht, wie schmutzig und schwer zu lesen eine einfache Codezeile mit dem style-Attribut werden kann:
<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who Code</a>
Javascript nicht mit HTML mischen
Genau wie das Mischen Ihres HTML-Codes mit css ist schlechte Praxis, sollten Sie kein Javascript in Ihren HTML-Dokumenten verwenden. Die folgende fehlerhafte Übung veranschaulicht ein Onclick-Ereignis:
<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">Cats Who Code</a>
Das gleiche Ergebnis kann mit freiem Javascript erzielt werden. In diesem Beispiel verwende ich das beliebte jQuery-Framework:
(document).ready(function()
('#cwc').click(function()
alert ('Ich liebe diese Website');
});
});
Dies mag auf den ersten Blick etwas schwieriger erscheinen, vor allem für Anfänger; aber es ist definitiv nicht, und es wird Ihr HTML-Dokument sauber zu halten.
Verwenden bedingter Kommentare
Sie wissen es, IE saugt, und einige Kunden saugen noch mehr, indem sie von Ihnen verlangen, Webseiten zu erstellen, die mit diesem veralteten Browser kompatibel sind. Um bestimmte Versionen von IE als Ziel zu verwenden, können Sie die bekannten IE-Hacks verwenden, wie unten gezeigt:
Höhe: 200px; /* normale Browser */ _height: 300px; /* IE6 */ .höhe: 250px; /* IE7 */ *Höhe: 350px; /* Alle IEs */
Diese Hacks sind manchmal äußerst nützlich, aber sie sind nicht der beste Weg, um eine bestimmte Version von IE zu zielen, und es wird dazu führen, dass Ihre CSS-Validierung fehlschlägt.
Stattdessen sollten Sie den unten gezeigten bedingten Kommentar verwenden, um IE6 als Ziel zu verwenden.
<link href="style.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Javascript-Datei unten platzieren
Eine beliebte Praxis der späten 90er/Anfang der 2000er Jahre war es, Javascript-Dateien innerhalb der<head>Und</head>Schilder. Das Problem ist, dass Ihre Javascript-Dateien zuerst geladen werden, und folglich werden Ihre Inhalte nach geladen.
Wenn Sie Javascript-Dateien am unteren Rand Ihrer Dokumente platzieren, stellen Sie sicher, dass JS-Dateien nur geladen werden, wenn der Inhalt ordnungsgemäß angezeigt wurde.
... <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
HTML semantisch verwenden
HTML ist keine Programmiersprache. Es handelt sich um eine Markupsprache, die zum Erstellen strukturierter Dokumente verwendet wird, indem strukturelle Semantik für Text wie Überschriften, Absätze, Listen und mehr bezeichnet wird.
Wenn Sie begannen, Websites in den guten alten 90er Jahren oder zu Beginn des Jahrhunderts zu erstellen, wissen Sie, wie schmutzig das Markup zu der Zeit war. Aber happilly, es hat sich entwickelt.
Unter anderem ist es wichtig, html-Elemente semantisch zu verwenden. Ein Navigationsmenü sollte beispielsweise immer eine ungeordnete Liste sein:
<ul> <li><a href="#">Startseite</a></li> <li><a href="#">Über</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Blog</a></li> </ul>
Testen Sie WHILE, die Sie erstellen, um browserübergreifende Probleme zu vermeiden
Einer der größten Fehler, den ich je bei der Entwicklung von HTML, CSS und Javascript gemacht habe, war nicht, meine Seiten auf mehreren Browsern zu testen, während ich sie schrieb. Stattdessen habe ich meinen gesamten Code geschrieben und einfach in Firefox angezeigt, um zu sehen, wie er gerendert wurde.