Dieser Artikel fasst 30 Anleitungen zum Schreiben von HTML -Code zusammen. Solange Sie sie im Auge behalten und sie flexibel verwenden, um HTML -Code zu schreiben, werden Sie definitiv schöne Codes schreiben und so schnell wie möglich in die Reihen professioneller Entwickler eingeben.
Im vorherigen Seitenquellcode habe ich solche Aussagen oft gesehen:
<li>some text here.<li>some new text here.<li>you get the idea.Vielleicht könnten wir in der Vergangenheit solche nicht entworfenen HTML-Tags tolerieren, aber in den heutigen Maßstäben ist dies sehr unerwünscht und muss 100%vermieden werden. Achten Sie darauf, Ihr HTML -Tag zu schließen, da es ansonsten nicht die Überprüfung bestehen und möglicherweise einige unvorhergesehene Probleme verursachen.
Es ist am besten, dieses Formular zu verwenden:
<ul><li>some text here. </li><li>some new text here. </li><li>you get the idea. </li></ul>Der Autor hat sich vielen CSS -Foren früher beigetreten, wo wir, wenn ein Benutzer auf Probleme stoßen, vorschlagen würden, dass er zuerst zwei Dinge tut:
In der Regel stehen vier Dokumenttypen zur Auswahl :Die DOCTYPE -Definition teilt dem Browser mit, ob die Seite HTML, XHTML oder eine Mischung der beiden enthält, damit der Browser das Tag korrekt analysieren kann.
1. <!doctype html public -//w3c//dtd html 4.01//en http://www.w3.org/tr/html4/strict.dtd>2. <!doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/loose.dtd>3. <!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>4. <!doctype html public -//w3c//dtd xhtml 1.0 strict//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>Es gab immer unterschiedliche Meinungen darüber, welche Art von Dokumenttyperklärung verwendet werden soll. Es wird allgemein angenommen, dass die strengste Aussage die beste Wahl ist. Untersuchungen zeigen jedoch, dass die meisten Browser diese Aussage auf normale Weise analysieren, so dass viele Menschen den HTML4.01 -Standard verwenden. Das Fazit der Auswahl einer Aussage ist, dass sie nicht wirklich für Sie geeignet ist. Sie müssen daher in Betracht ziehen, eine Auswahl auszuwählen, die zu Ihrem Projekt passt.
Wenn Sie damit beschäftigt sind, Code zu schreiben, können Sie häufig beiläufig oder faul ein wenig eingebettetes CSS -Code hinzufügen, genau wie diese:
<p style=color: red;>网页设计</p>Dies sieht bequem aus und hat kein Problem, aber es wird Probleme in Ihrem Code verursachen.
Wenn Sie mit dem Schreiben von Code beginnen, ist es am besten, nach Abschluss der Inhaltsstruktur Style -Code hinzuzufügen.
Diese Codierungsmethode ist wie das Kampf gegen Guerilla, was ein sehr Nachahmeransatz ist. -Cris Coyier
Ein besserer Ansatz besteht darin, den Stil dieses P in der Stylesheet -Datei zu definieren:
someelement > p {color: red;}Theoretisch können Sie CSS -Stylesheets überall vorstellen, aber die HTML -Spezifikation empfiehlt, sie in das Kopf -Tag einer Webseite einzuführen, wodurch das Rendering der Seite beschleunigt werden kann.
Während des Entwicklungsprozesses von Yahoo haben wir festgestellt, dass die Einführung von Stilblättern in das Kopf -Tag das Laden von Webseiten beschleunigt.
Denn so kann die Seite Schritt für Schritt wiedergegeben werden. - 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>Ein Prinzip ist es, die Seite vor den Benutzern so schnell wie möglich vorzulegen. Wenn ein Skript geladen wird, wird die Seite geladen, bis das Skript vollständig geladen ist. Daher wird es mehr Zeit für Benutzer verschwenden.
Wenn Ihre JS -Datei nur bestimmte Funktionen implementieren möchte, z. B. Schaltfläche Klick -Ereignis, können Sie sie sicher am Boden des Körpers vorstellen, was definitiv der beste Weg ist, dies zu tun.
Zum Beispiel : <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>Vor vielen Jahren gab es eine Möglichkeit, JS -Code direkt zum HTML -Tag hinzuzufügen. Besonders sehr häufig in einfachen Fotoalben. Im Wesentlichen wird ein Onclick -Ereignis an ein Tag beigefügt, und sein Effekt entspricht einem JS -Code. Es ist nicht erforderlich, zu viel zu diskutieren, diese Methode sollte nicht verwendet werden, der Code sollte in eine externe JS -Datei übertragen werden und dann AddEventListener / Anhang an den Zeithörer. Oder verwenden Sie ein Framework wie JQuery, und die Taktmethode ist erforderlich.
$('a#morecorninfolink').click(function() {alert('want to learn more about corn?');});Viele Menschen verstehen die Bedeutung und den Wert der Standardüberprüfung nicht wirklich. Der Autor analysierte dieses Problem in einem Blog ausführlich. Mit einem Wort ist die Standardverifizierung für Sie, nicht für Sie Probleme.
Wenn Sie gerade erst mit der Produktion von Webseiten beginnen, wird dringend empfohlen, diese Tooleiste der Webseitenentwicklung herunterzuladen und jederzeit während des Codierungsprozesses die HTML -Standardüberprüfung und die CSS -Standardüberprüfung zu verwenden. Wenn Sie der Meinung sind, dass CSS eine sehr einfach zu lernende Sprache ist, wird Sie sterben lassen. Ihr komplizierter Code macht Ihre Seite ständig mit Lücken und Problemen. Ein guter Weg ist, zu überprüfen, zu überprüfen und dann zu überprüfen.
Firebug ist ein wohlverdientes bestes Plug-In für die Webentwicklung. Es debuggen nicht nur JavaScript, sondern ermöglicht es Ihnen auch, die Eigenschaften und den Ort von Seiten -Tags intuitiv zu verstehen. Unnötig zu sagen, laden Sie es herunter!
Nach der Beobachtung des Autors verwenden die meisten Benutzer nur 20% der Firebug -Funktion, was wirklich ein Verschwendung ist. Sie können genauso gut ein paar Stunden damit verbringen, dieses Tool im System zu lernen, und ich glaube, es wird Ihnen das doppelte Ergebnis mit der halben Anstrengung geben.
Firebug Tutorial :Theoretisch können Sie markierte Markierungen wie folgt schreiben:
<div><p>here's an interesting fact about corn. </p></div>Es ist am besten, nicht so zu schreiben. Es ist nutzlos, mehr Briefe einzugeben, und es wird den Code hässlich machen, was gut ist:
<div><p>here's an interesting fact about corn. </p></div>Der Autor empfiehlt, dass Sie alle sechs Tags auf Ihren Webseiten verwenden. Obwohl die meisten Menschen nur die ersten vier verwenden, haben die am häufigsten verwendeten H viele Vorteile, wie z. B. Gerätefreundliche, suchmaschinenfreundliche usw. Sie können Ihr P-Tag auch durch H6 ersetzen.
Heute initiierte der Autor eine Diskussion auf Twitter: Sollte H1 auf dem Logo oder im Titel des Artikels definiert werden, haben 80% der Personen die letzteren gewählt.
Wie man es verwendet, hängt natürlich von Ihren Anforderungen ab, aber ich schlage vor, dass Sie beim Einrichten eines Blogs den Titel des Artikels als H1 festlegen sollten, was für die Suchmaschinenoptimierung (SEO) sehr vorteilhaft ist.
In den letzten Jahren hat das Team von Yahoo in der Front-End-Entwicklung eine Menge großartiger Arbeit geleistet. Vor nicht allzu langer Zeit veröffentlichten sie eine Firebug -Erweiterung namens Yslow, die Ihre <Webseite analysiert und ein Transkript zurückgibt, das alle Aspekte dieser Webseite sorgfältig analysiert und Bereiche vorschlägt, die Verbesserungen erfordern. Obwohl es ein bisschen hart ist, wird es Ihnen definitiv helfen. Es ist sehr empfohlen - yslow!
Normalerweise verfügt die Website über ein Navigationsmenü. Sie können sie auf diese Weise definieren:
<div id=nav><a href=#>home </a><a href=#>about </a><a href=#>contact </a></div>Wenn Sie einen schönen Code schreiben möchten, ist es am besten, diese Methode nicht zu verwenden.
Warum UL zum Layout -Navigationsmenüs verwenden?
-Da UL geboren wurde, um sich auf die Definitionsliste vorzubereiten
Es ist am besten, es so zu definieren:
<ul id=nav><li><a href=#>home</a></li><li><a href=#>about</a></li><li><a href=#>contact</a></li></ul>IE war schon immer ein Albtraum für Front-End-Entwickler!
Wenn Ihr CSS -Stylesheet im Grunde genommen abgeschlossen ist, können Sie ein Stylesheet für IE erstellen, und dies wird dann nur für den IE wirksam: IE:
<!--[if lt ie 7]><link rel=stylesheet type=text/css media=screen href=path/to/ie.css /><![endif]-->Die Bedeutung dieser Codes lautet: Wenn der Browser des Benutzers IE6 oder unten ist, wird dieser Code wirksam. Wenn Sie IE7 einbeziehen möchten, ändern Sie [wenn lt dh 7] zu [wenn lte dh 7].
Egal, ob Sie ein Windows oder ein Mac -Benutzer sind, es gibt viele hervorragende Redakteure, aus denen Sie auswählen können:
Wenn wir auf die erste Seite zurückblicken, die die meisten von uns schreiben, werden wir definitiv ernsthafte Div -Gewohnheiten finden. Normalerweise besteht der Instinkt der Anfänger darin, einen Absatz mit einem DIV zu wickeln und dann mehr Divs zu setzen, um die Positionierung zu kontrollieren. - Tatsächlich ist dies ein ineffizienter und schädlicher Ansatz.
Nachdem Sie die Webseite geschrieben haben, müssen Sie sie mehrmals überprüfen, um die Anzahl der Elemente zu minimieren.
Wenn Sie UL -Layout -Listen verwenden können, verwenden Sie keine Divs, um sie zu layout.
So wie der Schlüssel zum Schreiben eines Artikels darin besteht, zu reduzieren, zu reduzieren und zu reduzieren, muss auch diesem Standard folgen.
Die Vorteile des Hinzufügens eines ALT -Attributs zu Bildern sind selbstverständlich. Dadurch können Benutzer, die Bilder deaktivieren oder spezielle Geräte verwenden, um Zugriff auf Ihre Prince -Informationen zu erhalten, und sind auch freundlich zu Bildsuchmaschinen.
Firefox unterstützt nicht das Anzeigen von Bild -Alt -Attribut. Sie können das Titelattribut hinzufügen:
<img src=cornimage.jpg alt=网页设计title=网页设计/>Ich lerne oft bis zum frühen Morgen, ohne es zu wissen, und ich denke, das ist eine gute Situation.
Meins ~ ha! Zeit (ah-ha Momente, in Bezug auf Momente, in denen das Licht der Weiden oder die Momente der Erleuchtung) normalerweise spät in der Nacht stattfinden. Zum Beispiel verstehe ich in diesem Fall das Konzept der Schließung in JavaScript gründlich. Wenn Sie keinen so wunderbaren Moment erlebt haben, probieren Sie es jetzt aus!
Nichts kann Ihnen helfen, HTML schneller zu lernen, als Ihr Idol nachzuahmen. Zuerst mussten wir alle bereit sein, einen Kopierer zu machen und dann langsam unseren eigenen Stil zu entwickeln. Erforschen Sie den Code Ihrer bevorzugten Website -Seite und sehen Sie, wie sie es implementieren. Dies ist der einzige Weg für Experten, Sie müssen es versuchen. Hinweis: Lernen Sie einfach und imitieren Sie ihren Codierungsstil, kopieren Sie nicht und kopieren Sie!
Achten Sie auf verschiedene coole JavaScript -Effekte im Internet. Wenn Sie anscheinend ein Plug-In verwenden, finden Sie den Plug-in-Namen basierend auf dem Dateinamen im Kopf-Tag im Quellcode und dann lernen Sie, ihn für Ihre eigene Verwendung zu verwenden.
Dies ist besonders notwendig, wenn Sie Websites für andere Unternehmen erstellen. Verwenden Sie das Blockquote -Tag nicht selbst? Dann kann der Benutzer es verwenden, benutzen Sie OL nicht selbst? Benutzer können auch. Nehmen Sie sich Zeit, um eine Seite zu erstellen, auf der die Elemente wie UL, OL, P, H1-H6, Blockquotes usw. angezeigt werden, und überprüfen Sie, ob Auslassungen vorhanden sind.
Anmerkung des Übersetzers: Der ursprüngliche englische Titel ist die Verwendung von Twitter
Es gibt viele APIs, die jetzt kostenlos zu Webseiten hinzugefügt werden können, und diese Tools sind sehr leistungsfähig. Es kann Ihnen helfen, viele clevere Funktionen zu implementieren, und was noch wichtiger ist, es kann Ihnen helfen, die Website zu bewerben.
Photoshop ist ein wichtiges Werkzeug für Front-End-Ingenieure. Wenn Sie bereits HTML und CSS beherrschen, können Sie auch mehr über Photoshop erfahren.
Obwohl einige HTML -Tags selten verwendet werden, sollten Sie sie dennoch verstehen. Zum Beispiel, ABBR, CITE usw., müssen Sie sie im Falle von Notfällen lernen.
Es gibt viele hervorragende Ressourcen im Internet, und es gibt viele Experten in der Community. Hier können Sie selbst lernen und erfahrene Entwickler fragen.
CSS Reset wird auch CSS zurückgesetzt, was bedeutet, einige HTML -Tag -Stile oder Standardstile zurückzusetzen.
Es gibt auch heftige Debatten darüber, ob das CSS -Reset im Internet verwendet werden soll, und der Autor empfiehlt dies. Sie können zuerst einige ausgereifte CSS -Zurücksetzen auswählen und sich dann langsam zu etwas entwickeln, das zu Ihnen passt.
Einfach ausgedrückt, sollten Sie Ihre Webelemente so weit wie möglich ausrichten. Sie können die Websites beobachten, die Sie mögen, und ihre Logos, Titel, Diagramme und Absätze sind definitiv sehr ordentlich korrekt. Andernfalls erscheint es chaotisch und unprofessionell.
Nachdem Sie das Wissen über HTML, CSS und Photoshop gemeistert haben, müssen Sie auch lernen, wie Sie PSD in Bilder und Hintergründe auf der Webseite umwandeln. Hier sind zwei gute Tutorials:
Es gibt viele hervorragende Frameworks für JavaScript und CSS, aber wenn Sie Anfänger sind, beeilen Sie sich nicht, sie zu verwenden. Wenn Sie CSS nicht geschickt beherrschen können, verwirren Sie mit Frameworks Ihr Wissenssystem.
Das CSS -Framework ist für qualifizierte Entwickler konzipiert, die ihnen viel Zeit sparen.