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, Ihre HTML -Tags zu schließen, da sie 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 :DocType definiert, dass vor dem Erscheinungsbild des HTML -Tags dem Browser angegeben ist, ob diese 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 solche Aussagen 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ächenklickereignis), können Sie sie sicher am unteren Rand 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, HTML -Tags direkt JS -Code 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 und dann AddEventListener / AttachEvent an den Zeithörer übertragen werden. Oder verwenden Sie ein Framework wie JQuery, das die Verwendung seiner Taktmethode erfordert.
$('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 in der Webseitenproduktion arbeiten, wird dringend empfohlen, diese Webentwicklungs -Symbolleiste herunterzuladen und jederzeit während des Codierungsprozesses HTML -Standardüberprüfung und 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 Funktionen von Firebug, 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 Sie mit der halben Anstrengung doppelt so hoch wie das Ergebnis.
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 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 separates Stylesheet für den IE erstellen, und dann wird dies nur für den IE wirksam werden:
<!--[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] in [wenn lte dh 7].
Unabhängig davon, ob Sie ein Windows- oder Mac -Benutzer sind, gibt es 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 Division -Divies finden. Normalerweise besteht der Instinkt der Anfänger darin, einen Absatz mit 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 verwenden können, verwenden Sie Div nicht, um die Liste zu layern.
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 des Himmels oder die plötzliche Erleuchtung) normalerweise spät in der Nacht passiert. Zum Beispiel verstehe ich in diesem Fall das Konzept der Schließungen 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 die verschiedenen coolen 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 können 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 verwendet 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 CSS -Reset verwendet werden soll, und der Autor empfiehlt es. 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 HTML, CSS und Photoshop -Wissen 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.
CSS -Frameworks sind für qualifizierte Entwickler ausgelegt, die ihnen viel Zeit sparen.