Emmet: Schreibe HTML+CSS wie ein Ninja

1. Kurseinführung: Hi, da. Ich bin Rich Armstrong. Ich bin Designer, Animator und Programmierer. Ich codiere seit über 10 Jahren, aber ich schreibe nicht besonders gerne Code. Ich schreibe Code, um Dinge zu machen. Je weniger Zeit ich mit dem Programmieren verbringe, desto besser. In dieser Klausel geht es darum, Emmet zu verwenden, um das Schreiben von HTML und CSS zu beschleunigen. Wenn Sie implementieren, was wir in dieser Klasse abdecken, können Sie Tage oder Wochen pro Jahr sparen. Das ist eine Menge Zeit. Wir werden Dinge wie HTML- und CSS-Abkürzungen, Codeumbruch, Tastenkombinationen , Code-Traversing und ein paar seltsame und wunderbare versteckte Edelsteine behandeln, die Emmet zu bieten hat. Emmet funktioniert in allen wichtigen Code-Editoren und sogar an Orten wie CodePen und JSFiddle ist das Schreiben mit Emmet die nächste Stufe. Wenn Ninjas tatsächlich Code geschrieben haben, verwenden sie Emmet. Also lasst uns reinspringen. 2. // LOSLEGEN: Hi da, ich bin super begeistert, dass du zusiehst. Ich habe diese Klasse in kurze Videos strukturiert, so dass du nach jedem Video selbst ausprobieren kannst und du Videos einfach wieder finden und ansehen kannst. Die Klasse ist in die folgenden Abschnitte unterteilt. Erste Schritte, CSS-Abkürzungen, CSS-Verknüpfungen, HTML-Abkürzungen, HTML-Shortcuts, mehr Emmet Awesomeness, Produktivität mit erhabenen und der letzte Abschnitt, Schlussfolgerung. In der Klasse werde ich alles in erhabenem Text auf einem Mac machen , aber ich werde Windows-Verknüpfungen und Informationen, wo möglich, bereitstellen. 3. Schnelle Theorie: Hier ist die unkomplizierte Theorie von Emmet. Schritt 1, schreiben Sie in HTML oder CSS Abkürzung. Schritt 2, erweitern Sie die Abkürzung in vollständig geformte HTML oder CSS. Schritt 3, Wiederholen. dies immer und immer wieder tun, sparen Sie eine Menge Zeit. Also lasst uns hineingehen. 4. Emmet installieren: Wir müssen Emmet nicht den Code-Editor installieren, um los zu gehen. Besuchen Sie EMMET. IO/Downloaden und folgen Sie Ihren IDEO-Code-Editoren Anweisungen. Im nächsten Video zeige ich Ihnen, wie Sie Emmet in Sublime Text installieren. Außerdem funktioniert Emmet und Online-Code-Editoren wie CodePen und JSFiddle, wenn Sie Punkte testen möchten, Abkürzung Erweiterung. 5. Emmet-Installation in Sublime: In diesem Video zeige ich Ihnen, wie Sie Emmet in Sublime Text auf einem Mac installieren. Es gibt verschiedene Möglichkeiten, dies zu tun, aber ich werde Ihnen einen wirklich einfachen Weg zeigen. Also gehen Sie zu Tools und wir werden die Paketsteuerung installieren, die es uns ermöglicht, Dinge aus dem Internet wirklich einfach zu installieren. Ich werde auf Paketsteuerung installieren klicken, und nach einer Weile sollte ich einen Bestätigungsdialog erhalten, der mir sagt, dass es installiert ist. Jetzt kann ich zu Werkzeugen gehen und meine Befehlspellets verwenden, oder ich kann Befehlshalt P drücken, und es öffnet meine Befehlspalette. Dies ist ein wirklich leistungsfähiges Sublime Text-Werkzeug. Als nächstes werde ich eintippen, installieren. Ich könnte Package Control install package eingeben, aber ich kann einfach Install eingeben und dann Return drücken oder Enter drücken. Von hier aus wird es eine Liste von Paketen herbeiführen, die wir installieren können. Ich werde ein Emmet eingeben, dann drücken Sie einfach die Eingabetaste, und von hier wird es Emmet installieren. Fantastisch. Ich sollte mir ein wenig auffordern und mir sagen, dass Emmet installiert wurde. Ich kann das schließen. Vielen Dank. Nun, lassen Sie uns einfach überprüfen, ob das funktioniert. Dies ändert sich also in HTML. Wenn ich div eintippe und ich die Tabulatortaste drücke, gehen wir. Es dehnt sich aus. Fantastisch. Es funktioniert. 6. // CSS-ABKÜRZUNGEN: Lassen Sie mich Ihnen in diesem Video die Grundlagen der Verwendung von Emmet für CSS sehr schnell zeigen. Das erste, was ich tun muss, ist sicherzustellen, dass die Syntax der Datei, an der ich arbeite, tatsächlich CSS ist. Wir können die Syntax der Datei unten rechts sehen. Diese Datei ist also derzeit ein reiner Text. Ich kann hier klicken, um es in CSS zu ändern. Ich kann es dann auch mit der Befehlspalette ändern. Also könnte ich zu Tools, Command Pallet gehen oder eine Tastenkombination, Command Shift P verwenden , und ich könnte die Syntax CSS eingeben. Wir könnten das gleiche für HTML tun, setzen Syntax HTML. Wir können Syntax CSS setzen gehen. Ein anderer Weg ist, dass wir das einfach speichern können, also Command S, und wir können es als style.css speichern. Das sollte die Syntax automatisch auf CSS setzen. Sobald wir das aus dem Weg haben, können wir anfangen, ein bisschen CSS zu schreiben. Nun, schreiben wir einfach etwas CSS für ein Body-Tag und ich kann C drücken, und Sublime kommt automatisch mit einer Reihe von Optionen. Ich kann die Eingabetaste drücken, und genau so, das ist ein bisschen Bild genau da. Wenn wir nicht die Eingabetaste drücken wollen, können wir tatsächlich einfach C und Tab drücken, oder wir könnten C und Control E drücken, um die Abkürzung zu erweitern. Das sind drei verschiedene Möglichkeiten, um Abkürzungen tatsächlich zu erweitern. Aber wir können dies für jede Regel verwenden, die wir wollen. Also Marge, lasst uns das machen. Was ist mit Polsterung? Lasst uns das machen. Was ist mit Hintergrund? Lasst uns das machen. Ziemlich cool, richtig? Was ist mit Bottom? Was ist mit Grenze oder Grenze rechts? Was ist mit Border-Top? Ziemlich cool, richtig? Was ist mit einem Grenzradius, Brds? Randradius. Super-cool, richtig? Ich meine, das ist mächtiges Zeug und es ist wirklich, wirklich einfach zu bedienen. Genau so habe ich schon eine Reihe von Regeln für mein Body-Tag. 7. Abkürzungen mit Werten: Wir kennen die Grundlagen, aber lassen Sie uns weiter zu etwas fortgeschritteneren Sachen kommen. Pos a tap, Position: absolut, tac, text-ausrichten: zentrieren. Was ist mit m12, Rand: 12 Pixel. Was ist mit t100p? Tap, 100 Prozent Das ist ein paar verrückte Sachen genau da. Was ist mit c und ffo, Farbe? Was ist mit cr, tippen, rgb? Was ist mit Cra? RGB mit einem Alphakanal. Jetzt können wir so etwas wie gehen, 200 tippen, 125 tippen, 123 tippen. Jetzt können Sie die Deckkraft anziehen. Das ist ein verrücktes cooles Zeug da. Was ist, wenn wir einen Boarder bd1 machen wollten? Boarder1 Pixel? Das ist großartig. Was ist mit bd1-s, und dann setzen wir auf den Farbwert, ffo-tap-one Pixel solid mit der Farbe. Sieh dir das an. C für Farbe. Dann setzen wir auf den Farbwert, also ffo, der gelb wäre. Dann setzen wir in 0,3 Tab. Es setzt den rgba-Wert genau dort ein. Ich meine, wenn du nicht siehst, wie das deine Produktivität beschleunigt, dann weiß ich es nicht. Was ist mit so etwas wie m, die Marge sein wird. Dann setzen wir 12rem ein. Was ist mit p, und wir setzen in so etwas wie 80em. Ziemlich cool. Mann, das ist verrückt. Dies ist nur der Anfang von CSS-Abkürzungen. Wir können verrückte Dinge mit Farbe, Farbverläufen , Hintergründen machen. Erstaunliche Dinge. 8. Was ist eine Abkürzung?: Woher weiß ich, was die Abkürzung ist? Woher kenne ich diese Abkürzung? Muss ich sie alle lernen? Nun, was wirklich cool ist, ist, dass es eine richtige Syntax wie Pause, Doppelpunkt, eine für Position absolut und, erhaben kann mit all diesem Müll kommen. Ich werde nur die Flucht drücken. Wenn ich hier die Tabulatortaste drücke, positionieren Sie absolut. Nun, das ist der richtige Weg, es zu tun, aber wir können auch eine Pause machen, wie so, oder vielleicht sogar wie PA, was würde das tun? Polsterung Okay, aber p würde auch Polsterung machen. Interessant. Was hier wirklich los ist , ist, dass emmet dieses Ding namens Fuzzy-Suche benutzt, es versucht im Grunde zu erraten oder zu verstehen, was du schreibst, wofür du gehst. Wenn Sie nicht wissen, was es ist, tippen Sie es aus, testen Sie es. Wenn ich so etwas wie einen Grenzradius machen wollte, wäre ich so, Boarder-Radius oder so etwas. Border-Stil, das kann ein guter sein. - Ich weiß es nicht. Was ist mit den bdrs, Grenzradius. Ok. Was ist mit dem Bdr? Was ist bdr? Grenzrechte. Es ist intuitiv, was wirklich cool ist. Manchmal habe ich keine Ahnung, was ich eigentlich schreiben muss, aber ich schreibe es einfach und teste es aus. Wenn Sie jedoch wirklich müssen, gibt es einen Spickzettel online und es gibt eine ganze Reihe von emmet-Dokumentation, die Sie sich ansehen können, können Sie sehen. Wenn Sie etwas so verwenden, wie Sie es mit einer ganzen Reihe von Farben wie Syntax oder Hintergründe oder Farbverläufe zu tun haben, gehen Sie Forschung, wie Sie das super gut machen, und behalten Sie es dann in Ihrem Gehirn. Dann können Sie es wie ein Profi verwenden. 9. Farbverläufe: Eines der coolsten Dinge, die Emmet es zu bieten hat, ist Gradienten-Syntax. Das ist echt cool. Sie gehen LG für linearen Farbverlauf und lassen Sie sich nicht von Sublime täuschen. Ja, drücken Sie einfach Escape und dann Klammern, und sie werden die Richtung geben. Gehen wir nach links, und sie werden den Mittelpunkt liefern, der 10% betragen würde. Du musst das nicht mal reinlegen. Die erste Farbe, so könnten wir sagen F Null, Null für rot und dann, schwarz Null, Null, Null am Ende. Dann werde ich es erweitern. Whoa. Das hat alles für mich geschrieben. Danke, Emmet. Du rockst. Aber jetzt fragen Sie sich vielleicht: „Nun, es sind all diese Werte für mich da, was passiert, wenn ich sie ändern will? Müsste ich sie dreimal wechseln?“ Nein, sieh dir das an. Lassen Sie uns das in Weiß ändern und Sie drücken die Tabulatortaste oder das Steuerelement E, um erneut zu erweitern, und es ändert sich alles für Sie. Fantastisch. Gehen wir zur oberen Zeile und vielleicht nehmen wir die 10% heraus, drücken Sie Tab. Voila. Erstaunlich, richtig? 10. Mehrere Regeln: Was passiert, wenn wir alle unsere Regeln auf einmal schreiben wollen? Pause A. Nun, ich möchte das nicht einfach erweitern und noch einen schreiben, ich möchte alles einmal schreiben. Wir können plus t 0 plus b, 0 plus o, 0 plus r 0 Tab gehen. Sie ist absolut und ist oben, unten, links und rechts bei Null positioniert . Wir können auch so etwas wie M tun und wir können sagen, 12 und auch plus p, und wir können dies auf acht und 12 Prozent, Tab, Voila. Jetzt gehe ich zurück, bis ich meine Positionslinie hier habe. Wenn ich das alles in einer einzigen Zeile möchte, weil es Position ist und alle diese Werte zueinander beziehen, kann ich Pipe S setzen und dann erweitern, und genau so habe ich all diese Regeln, die sich zueinander in einer Zeile beziehen. Das ist eine wirklich coole Funktion von erhabenen, die andere ist einzelne erzielte Fotos, die wir später bekommen werden, aber das ist wirklich hilfreich. In diesem Fall haben Sie Pipe S und legt alles auf eine einzige Zeile. Das ist wirklich cool, Sie können mehrere Regeln gleichzeitig ausführen und Sie können alle Ihre Regeln in einer einzigen Zeile setzen. Super rad. 11. Zusätzliche Informationen: Nehmen wir an, wir wollten ein bisschen mehr Informationen für unsere Regeln. Was wir tun können, ist einfach ein Plus nach einer Abkürzung zu setzen, also bg+, erweitern Sie das, und plötzlich haben Sie alles, was Sie für Ihre Hintergrundregel brauchen. Hier könnten wir so etwas wie ffo schreiben, Tab drücken, um zur URL zu gelangen, und wir könnten einen Wert bereitstellen, Tabs drücken, seine x-Position einstellen, also ist es 12 Pixel, Tab wieder, und wir konnten 40 Pixel und „No Repeat“ einstellen. Fantastisch, wirklich cool. Was ist mit Border? bg+ Tabulatorrahmen ändert sich in 10 Pixel, Tab solid. Was ist mit dem Bindestrich Tab? Und wir können das wieder in Rot ändern. Oder ich denke, das könnte gelb sein. Das ist wirklich cool darüber, mehr Informationen in Ihre Regeln zu bekommen, die Sie gerade ein Plus hinter ihnen setzen müssen. Offensichtlich funktionieren einige davon nicht. C plus, nichts viel mehr da, aber Dinge wie vielleicht f+ was wäre das? Schriftart. Da gehen wir hin. Wirklich cool, nicht wahr? 12. Herstellerpräfixe: Lassen Sie uns ein wenig mehr über Anbieter-Präfixe erzählen. In den meisten Fällen werden Eigenschaften, die Präfixe des Herstellers benötigen, von Emmet angewendet. Also TRF transformieren, ich werde nur die Flucht hier drücken. Du siehst also, dass es nicht erhaben ist, es ist hinterhältiges Ding zu machen. Tab, sieh dir das alles an. Fantastisch können wir sagen, alle tippen, wann immer wir wollen, da drüben. Was ist mit TRS? Du drückst einfach Tab-Übergang, okay, oder was immer wir wollen, rückgängig machen, was ist mit Textschatten? Tabulator-Text Schatten. Emmet stellt das also nicht von selbst vor. Also, was wir hier tun wollen, ist, dass wir vor der Hand einen Bindestrich hinzufügen und dann drücken, erweitern. Genau so kein Präfix alles über Eigenschaften für uns. Ich danke Ihnen vielmals. So könnten wir so etwas wie die H Offsets schreiben 12 Pixel Tab, Unschärfe Mengen. Alles klar, du bekommst das Bild. Also rückgängig machen. Wenn wir nur eine Art von Anbieter-Präfix anzeigen wollten, geben wir das Präfix W Bindestrich ein, und dann könnten wir erweitern, und ich würde nur Web-Kit hinzufügen. Wenn wir Opera hinzufügen wollten, würden wir es so tun. Wirklich cool. So können wir anfangen, unseren Regeln Präfixe hinzuzufügen. Was großartig ist, ist, dass, wenn Sie Sass oder Less schreiben, die in CSS kompiliert werden, keine Präfixe des Herstellers automatisch hinzugefügt werden. Dies macht das Lesen und Schreiben Ihres Codes viel einfacher und Ihr Compiler sollte die Präfixe selbst behandeln. 13. Coole Abkürzungen: Es wird eine Reihe von Abkürzungen geben, und ich werde sie Ihnen nicht alle zeigen. Sie müssen wählen, welche Sie lernen möchten, welche Sie recherchieren möchten, aber es gibt ein paar, das ich erstaunlich finde. Einer von ihnen ist die wichtige Erklärung, also sieh dir das an. Wir gehen P zum Auffüllen von 12 Pixeln und Knallen. Wir erweitern das einfach und wir bekommen eine wichtige Erklärung direkt dort, oder vielleicht haben wir M und wir wollen nur sicherstellen , dass es wichtig ist, und dann können wir den Wert eingeben. Wir können sagen, 80 Pixel. Ziemlich cool, stimmt's? Was ist mit, wenn wir eine wirklich schnelle Transformationsskala tun wollen, T-R, F für Transformation und dann Doppelpunkt und S, und wir drücken Tab und einfach so, können wir den x- und y-Wert skalieren. Ich werde 1.2 gehen und ich kann Tab drücken und ich kann bei 1.2 gehen, aber das ist das gleiche, also werde ich einfach alles entfernen und da gehen wir. Wir haben eine Transformationsskalierungseigenschaft des Lieferanten vorangestellt. Als nächstes ist etwas, das ich wirklich nicht genieße , und das ist die Eingabe einer neuen Schriftfamilie. Wir können bei F gehen, das erweitern und voila, wir haben eine Schriftart Gesicht, aber das ist nicht super nützlich. Wir können immer noch zwischen Schriftfamilie und der Quell-URL wechseln, aber wenn ich danach Plus setze und es dann erweitern, wow, überprüfen Sie das. Ich habe jetzt eine vollständige Font-Face-Deklaration. Ich kann die Schriftfamilie eingeben, meine coole Schriftfamilie und dann drücke ich Tab und ich kann den Dateinamen jetzt ändern, so meine Schriftart und drücken Sie Tab, Schriftart, Schriftgewicht. Das ist super cool. Als nächstes ist etwas, von dem ich auch nicht gerne viel mache, und das sind meine Schlüsselbilder. Erweitern Sie bei K-F. Wow. Sieh dir das an. Das hat alles für uns geschrieben. Ich werde dies meine Fade-Key-Frames drücken Sie die Registerkarte, damit ich meinen von Wert auf Null Prozent ändern kann , wenn ich möchte, und dann kann ich die Tabulatortaste drücken und die Deckkraft eingeben und auf Null setzen, drücken Sie die Tabulatortaste geht zu zwei. Jetzt kann ich das auf 100 Prozent setzen, wenn ich will. Ich werde dann erneut die Registerkarte drücken und op eingeben und erweitern, und dann werde ich es auf eins setzen. Genau so haben wir alle unsere Schlüsselbild-Setup voll. Unsere Fade-Animation. 14. // CSS-BEFEHLE: Wir haben CSS-Abkürzungen behandelt, aber es gibt noch eine Menge mehr Dinge, die Emmet uns bietet, besonders in Sublime Text. Wir werden die als Nächstes abdecken. 15. Zahl inkrementieren oder dekrementieren: Eines der großartigen Dinge über Emits ist die zusätzliche Funktionalität, die es bietet. Angenommen, wir haben ein bisschen CSS hier gemacht, wir haben 12 Pixel gesagt, und ich möchte das nur wirklich schnell bearbeiten. Ich werde Alt drücken und meine Tastaturpfeile verwenden, um nach oben oder unten zu gehen. Es erhöht ihn um 0,1 Pixel. Fantastisch. Wenn ich nun Befehlstaste und Alt drücke und nach oben und unten gehe, wird es um 10 Pixel erhöht, und wenn ich die Steuerungstaste nach oben oder unten drücke, werden Sie sehen, dass das nicht funktioniert. Was wir tun müssen, ist, dass wir zu den Systemeinstellungen gehen und zur Mission Control gehen, und lassen Sie uns Mission Control in off und Anwendung Windows auf off ändern und jetzt, wenn wir zurück zu Sublime Text gehen und Control nach oben oder unten drücken, es inkrementiert es um eins. Wirklich cool. Wir müssen nicht auf der Oberseite unserer Tastatur tippen, wir können einfach Tastenkombinationen verwenden. Dies funktioniert auch in HTML. 16. Ein bisschen Mathe: Jetzt als HTML- und CSS-Entwickler müssen wir viel Mathematik machen, aber manchmal bekommt unser Gehirn so ein Attribut, das nicht so gut in Mathematik ist. Bilder sind wirklich cool. Wenn wir etwas wie Breite oder Höhe haben, können wir einige Berechnungen im laufenden Betrieb durchführen. 100 minus 47, Befehlshalt Y 53, genau so. Was ist mit plus 1.278? Ich weiß nicht, ob du das aus der Hand weißt. Befehlshalterung Y Voila. Was ist mit zwei Befehl Verschiebung Y Voila multipliziert. Was ist mit minus 349? Kommando Shift Y. Ziemlich cool. Was ist mit minus 2.000? Das sollte ziemlich einfach sein. Kommando Shift Y, wirklich cool. Danach fügen Sie einfach Pixel hinzu. Wirklich cool. Ich mache Mathe im laufenden Betrieb. 17. CSS-Wert reflektieren: Angenommen, wir haben hier einige Hersteller-Präfix-Eigenschaften und wir ändern dies auf 0.4 und dann drücken wir „Strg + E“, um zu erweitern und nichts passiert, weil das manchmal passiert. Was machen wir denn? Ich dachte, das sollte produktiv sein? Jetzt muss ich vier Codezeilen ändern. Beruhigen Sie sich. Alles, was Sie drücken müssen, ist „Cmd + Shift + R“ und es spiegelt die Werte wider. Sieh dir das an. Sehen Sie, dass Sie dies sogar ändern können, sagen wir zehn. Cmd + Umschalt+R. Knall. Erstaunlich. 18. Kommentare: Also haben wir noch keine Kommentare behandelt. Normalerweise drücken Sie im Untertext Befehls- und Schrägstrich. Genau so wird Ihre Zeile kommentiert, aber manchmal funktionieren die Kommentare nicht so gut. Also mit Emmet, was wir tun können, ist Alt, Shift, Schrägstrich und einen Kommentarsatz 2. Oft ist ein gemeinsames Set besser, es ist intelligenter. So können Sie Ihren Code mit Emmet kommentieren oder einfach das Standard-Subline-Kommentieren verwenden. 19. CSS-Prozessoren: Gibt Arbeit für Präprozessoren wie Less und Sass aus, Die Antwort ist ja. Wenn du nicht weißt, was ein Präprozessor ist, mach dir keine Sorgen, du kannst dieses Video einfach überspringen. Ich komme auf eine andere Klasse, ein weiteres Tutorial darüber, was Präprozessoren sind, wenn Sie es wissen, schau dir das an. Ich werde Sass schnell installieren. Ich gehe zu meiner Befehlspalette und ich werde sagen , Paket installieren, Suche nach SAS. Lassen Sie das einfach installieren. Fantastisch. Ich werde dann meine Syntax auf SAS setzen und dann werde ich ein untergeordnetes Element stylen. Wir können sagen, lassen Sie uns Stil UC-Steuerung E. Nur so können wir Emit für das Styling unserer Sass und Weniger Stylesheets verwenden. 20. // HTML-ABKÜRZUNGEN: Also haben wir die Verwendung von Emmets behandelt, um das Schreiben von CSS schnell zu beschleunigen, jetzt wird das gleiche für HTML sein. Das erste, was ich tun muss, ist die Syntax meiner Datei zu ändern. Also kann ich entweder Command Shift P in Sublime drücken und HTML eingeben und die Syntax so einstellen. Oder ich kann hier unten auf Klartext klicken und HTML auswählen. Oder der letzte Weg, den ich tun kann, ist einfach Befehl S. In diesem Ordner kann ich es als index.html speichern. Genau so ist meine Syntax von Set HTML. Jetzt ist die Verwendung von emmets zum Schreiben von HTML sehr ähnlich wie beim Schreiben von CSS. Wenn ich also p tippe und p, Control E oder Tab erweitere , erstellt es ein Absatz-Tag. Wenn ich div mache und TAB drücke , erweitert es zu einem div. Wenn ich ein div mit einer Klasse erstellen wollte, könnte ich das tun. Some-Klasse, ähnlich wie CSS. Wenn ich das erweitere, wird es zu einem div mit einer Klasse von Some-Klasse. Dasselbe mit einer ID, meine-cool-div, schau dir das an. Ich kann das Gleiche auch mit einer Spanne machen. Zum Beispiel. Einmalige Kühlspanne. Das ist wirklich, wirklich mächtig. Was auch wirklich cool ist, ist, dass in einer ul, zum Beispiel, wenn ich Enter drücke und ich li tippe, was auch ziemlich cool ist. Wenn ich in.some-class eingeben müsste, würde dies normalerweise ein div werden, aber weil es sich in einer ul befindet, wird es zu einem li. Wenn ich dies erweitere, wird es zu einem Li mit einer Klasse von Some-Klasse, super mächtig, super cool. Dies sind nur die Grundlagen der Verwendung von emmet innerhalb von HTML. Es gibt noch viel zu decken, aber es ist genug, um dich aufgeregt zu werden. 21. Mehrere Klassen und IDs: Genau wie in unseren CSS-Dateien können wir Elemente mit mehreren Klassen und einer ID haben. Wenn wir eine ul mit einer Reihe von Klassen auf einigen class.red.amazing ul schreiben wollten , und wir erweitern dies. Sie werden sehen, dass diese drei Klassen darauf angewendet werden. Wenn wir dann ein div mit einer ID erstellen möchten, mit einer Reihe von Klassen auf. Wir könnten so etwas schreiben. Wir müssen nicht div schreiben, aber ich werde es trotzdem tun div und ich werde einige Klassen in. Dann werde ich auch einen Ausweis darauf setzen. Etwas wie Header. Okay, also das ist wirklich cool. In einer Zeile haben wir eine ID hinzugefügt, wir haben drei verschiedene Klassen hinzugefügt, und wir haben nicht so viel geschrieben. Fantastisch. 22. Tag-Arten: Einige Elemente, die wir in HTML schreiben, haben ein Attribut namens type. Sie erkennen dies also an einer Eingabe. Also, wenn wir dies erweitern würden, wird der Typ Text sein. Nun können Sie beispielsweise auch einen Kontrollkästchen-Typ oder einen Kennworttyp haben. Eine einfache Möglichkeit, dies mit HTML zu tun, besteht darin, Eingabe, Doppelpunkt und Passwort zu gehen. Wenn Sie das erweitern, erhalten Sie den Typ des Kennworts und es gibt Ihnen auch einen Namen und ID-Attribute. Das ist ziemlich cool. Sie können also hier den Namen eingeben, „Tab“ drücken und dann die ID eingeben. Es ist wirklich, wirklich praktisch. Sie können auch Eingabe, Doppelpunkt und Kontrollkästchen sagen . Genau so ist der Typ Checkbox. Es gibt einen Namen und eine ID. Fantastisch. Sie können dies auch mit einem Tag tun, das Ihnen standardmäßig auch eine HREF gibt. Aber, wenn Sie einen Link nach dem Doppelpunkt eingeben müssten, würde es Ihnen eine HTTP-Adresse geben oder wenn Sie Mail eingeben und erweitern müssen, können wir jetzt eine Mail zu verlinken haben, was großartig ist, wenn Sie auf einen Link klicken möchten und es öffnet sich eine E-Mail -Client. 23. HTML-Eigenschaften: Was ist nun mit Attributen? Nun, wir haben gesehen, dass das a-Tag, wenn es erweitert wird, das href-Attribut hat, aber was ist mit anderen Attributen? Nur mit einem Tag, was ist mit dem Zielattribut? Ein emmet das ist ziemlich einfach. Es gibt diese quadratischen Klammern, die wir dann schreiben können Ziel gleich Unterstrich leer, ähnlich wie wir es in CSS tun. Wenn wir das erweitern, erhalten wir ein href und ein Ziel. Manchmal ist es vielleicht nicht so schnell, aber es ist sicherlich das gleiche wie CSS. Manchmal können Sie sogar quer aus Ihrer CSS-Datei in Ihre HTML-Datei kopieren. Fantastisch. Wenn wir mehrere Attribute haben wollten, vielleicht wie TD, und in unserem TD haben wir einen colspan, und wir sagen colspan gleich drei, und dann ist unser rowspan gleich zwei. Wenn wir das wollen, könnten wir sogar einen Titel drauf setzen und sagen: „Hey da.“ Wenn wir das dann erweitern, erhalten wir alle diese Attribute in einem Element. Fantastisch, wirklich cool, wirklich hilfsbereit, und sehr ähnlich wie CSS. 24. Kinder, Multiplikation und inkrementelle Zahlen: Wie produktiv macht Emmet uns wirklich? Ich meine, wenn wir 1.000 Listenelemente schreiben wollten, wie würden wir das tun? Basierend auf dem, was wir bisher gelernt haben, könnten wir ul schreiben, erweitern, drücken Sie „Enter“ li, erweitern Sie das, schreiben Sie zuerst elem und dann könnten wir li gehen, erweitern das. Das dauert immer noch ein bisschen Zeit, ich werde das löschen. Sehen Sie sich das an, ul und dann werde ich ein größeres als li tun, dann werde ich das erweitern. Zuallererst schreiben wir die Elemente eines Elternteils und die untergeordneten Elemente. Lassen Sie uns das rückgängig machen und multiplizieren Sie das mit 10. Wow, sieh dir das an. Wir haben 10 Listenelemente. Erstaunlich. Wir könnten 100 oder 1.000 erschaffen. Nun, was wir tun können, ist, können wir sagen, elem 1, wir drücken „Tab“ jetzt und es geht automatisch zum Inhalt der Listenposition Nummer 2. Wir können Elem 2 gehen, und so weiter. Das ist echt cool. Lasst uns das ein bisschen rückgängig machen. Nun, sieh dir das an. Innerhalb jedes Listenelements könnten wir dann eine Spanne mit einem Anker-Tag setzen. Bam, sieh dir das an, wie verblüffend ist das? Wir können nun die href ausfüllen. Wenn wir HTTP so gehen und tippen Sie taptapkaboom.com. Drücken Sie „Tab“ hier und dann geht auf den Inhalt der a, die wir sagen können Website, drücken Sie „A“ es geht zum nächsten href. Das ist erstaunlich. Flipping cool. Nun, das ist sogar die nächste Stufe höher. Lasst uns hier nur ein bisschen zurückverfolgen. Wir haben jetzt URL bekommen, ich werde 10 Listenelemente dort erstellen. Aber jetzt möchte ich das schließen. Also werde ich li.some-class.some- gehen, und dann wird es eine Nummer danach setzen. Wenn ich das ausdehne, sieh dir das an. Es hat nur eine ganze Reihe von Zahlen für mich reingesteckt, ich muss sie nicht ausschreiben. Sieh dir das an. Mit diesem Dollarzeichen können wir tatsächlich Zahlen eingeben. Wir können drei Zahlen eingeben, wenn wir wollen, oder zwei, vier, oder was immer Sie wollen, oder wir könnten sogar rückwärts gehen. Sieh dir das an. Bei negativ, und dann, wenn wir dies erweitern, geht es von oben nach unten. Oder wir könnten sogar negative fünf sagen und so geht es auf 14 zu fünf. Wenn wir nicht von der Top-Nummer beginnen wollten, könnten wir dieses Negativ entfernen und einfach von fünf gehen, und wenn wir das erweitern, geht es von fünf auf 14. Das ist ein verrücktes Zeug da. Wenn dein Verstand nicht davon verwirrt ist und du nicht siehst, wie du mit Emmet produktiver sein kannst, weiß ich nicht, was mit dir los ist. 25. Geschwister und Gruppen: Wir haben jetzt untergeordnete Elemente abgedeckt, was ist mit Geschwisterelementen? Wenn wir ein div hätten und wir so „child1" hätten, wie würde ich „child2“ bekommen? Wenn ich „.child2" gehen müsste, erweitern Sie das. „ Child2" wäre in „child1" Ich möchte, dass „child2" neben „child1" ist. Ich möchte, dass sie Geschwister sind. Wie machen wir das? Nun, anstatt das Größer-als-Symbol zu verwenden, verwenden wir einfach das Plus-Symbol. Also, wenn wir das erweitern, haben wir „child1" und „child2“. Aber was passiert jetzt, wenn „child1" eine Reihe von Elementen darin hat? Vielleicht gibt es ein 'ul' und es gibt ein 'li' und da sind drei Elemente drin, und ich möchte ein 'a tag' innerhalb dieser drei Elemente und ich drücke „Tab“. Nun, was ist passiert? Ich möchte nicht, dass meine „Kind2" dreimal wiederholt wird, ich wollte nur, dass dies ein „Kind2“ ist. Was wir hier tun müssen, ist, wo es hier beginnt, und sagen „Kind1“, wir beginnen mit einer Klammer, und dann kurz vor dem Plus schließen wir die Klammer und wir sagen, das ist eine Gruppe. Wir könnten eine Gruppe um die „child2" Klasse setzen, aber das müssen wir nicht. Am Ende der Linie erweitern wir dies, und genau so haben wir „child 1" mit seinem Inhalt, was erstaunlich ist und wir haben „child 2" ohne Inhalt, was genau das ist, was wir wollten. Jetzt können wir anfangen, unser HTML, HTTP zu schreiben , und dann drücken wir „Tab“ und so weiter. Erstaunlich. 26. Hierarchien verändern: Eine andere Möglichkeit, mit Geschwistern und Kindern und Hierarchien zu arbeiten , besteht darin, die Methode zum Aufklettern zu verwenden. Wenn wir ein div und innerhalb dieses div haben, haben wir ein Element mit einer Klasse von C1. Innerhalb dieses Elements haben wir ein anderes Element mit einer Klasse von C2 und innerhalb dieses einen haben wir ein anderes für die Klasse von C3. Innerhalb dieses einen haben wir eine andere mit einer Klasse von C4. Wenn wir dies erweitern, haben wir eine wirklich schöne Hierarchie vor sich. Aber was passiert, wenn ich nicht möchte, dass mein C4-Klassenelement da ist? Nun, was ich hier tun kann, ist, anstatt dieses Größer-als-Symbol zu verwenden, kann ich dieses kleine Caret-Symbol verwenden, so dass, wenn ich expandiere, sehen Sie, dass das Element mit einer Klasse von C4 jetzt neben der Klasse von C2 sitzt. Wenn ich das rückgängig mache und ich eine weitere davon reinstelle und expandiere, wirst du sehen, dass die C4-Klasse jetzt bei C1 sitzt. Es sagt im Grunde, lasst uns ein Level steigen und lasst uns ein Level hoch gehen, und hey, wenn wir sogar noch einen machen und das erweitern wollen, wäre es ein Geschwister zum anfänglichen div-Tag. Ziemlich cool, richtig. 27. HTML-Text: Die nächste Sache ist, was ist mit dem Inhalt? Was ist mit Text? Wenn wir ein Tag schreiben und das erweitern müssen, müssten wir dann die h ref schreiben und dann Tab und dann den Inhalt schreiben. Aber es gibt einen anderen Weg, es zu tun. Also A, wir setzen diese geschweiften Klammern in die geschweiften Klammern, wir sagen dann Inhalt hier, und dann erweitern wir das und der Inhalt geht dorthin. Nun, wenn wir hier Inhalt sagen wollen, und lassen Sie uns so etwas tun, multipliziert mit 10, erweitern wir, dass die Inhalte hier eins sind, den ganzen Weg bis 10. Das ist erstaunlich. Genau so können Sie Ihre Inhalte innerhalb Ihrer Abkürzungen schreiben. Fantastisch. 28. Lorem Ipsum: Vielleicht ist es Ihre Aufgabe, diese schöne Website zu erstellen, aber es hat noch keinen Inhalt, die einige Alarmglocken klingeln sollte, denn wie können Sie wirklich eine Website gestalten oder entwickeln, die Website gibt es keinen Inhalt? Aber manchmal muss man das tun, und manchmal ist es wirklich toll, das zu tun. Aber Sie haben immer noch keine Inhalte. Also in HTML, wie generieren wir etwas Lorem ipsum? Nun, diese Websites und Plug-Ins und alle Arten von Sachen, aber sieh dir das an. Lorem200, erweitern Sie voila, eine ganze Reihe von Lorem ipsum. Was ist mit Lorem10? Nur ein bisschen Lorem ipsum. Was ist mit lorem2 Control E, Lorem ipsum, nur zwei Worte. So können Sie eine ganze Reihe von Müll erzeugen. Es funktioniert auch in CSS-Dateien, aber ich benutze dies meistens innerhalb einer HTML-Datei. Es ist erstaunlich. 29. Unbekannte Abkürzungen: Bis jetzt war es pfirsichig, es gab sehr wenig Fehler, die Dinge liefen reibungslos. Aber was passiert, wenn Sie eine ganze Abkürzung schreiben und versuchen, sie zu erweitern und nichts funktioniert? Tja, lasst uns das ausprobieren. Hey, wir haben dieses coole Element mit der Klasse „hey“ und wir wollen es erweitern. Also tippen wir auf „Tab“ und es wird nicht erweitert, ist nur tatsächlich mit Tab, wie es verwendet werden sollte. Also erzwingen wir sie mit „Control E“, und dann erkannten wir, dass, Oh, eigentlich ist das keine Klasse und das hat ein „hey“ Elemente erstellt, das ein bisschen peinlich ist. Wenn die Dinge nicht mit dem Tab funktionieren, besteht eine gute Chance, dass ein Fehler vorliegt. Vielleicht haben Sie ein Attribut etwas seltsam geschrieben, Sie haben zum Beispiel ein Zitat verpasst, und Sie erweitern es und nichts funktioniert oder sogar Ihr Steuerelement funktioniert nicht. Es gibt ein Problem. Reparieren Sie es. Wenn Sie etwas wie reagieren und „SomeCoolComponent“ haben und Sie Tab drücken und es sich nicht erweitert, ist das in Ordnung. Sie drücken einfach „Control E“, und genau so haben Sie Ihre benutzerdefinierten Komponenten. Wenn Sie „Command Shift“ drücken und genau so zitieren, können Sie es in einem einzigen Tag erhalten. Wir werden das im nächsten Abschnitt behandeln. Wenn Sie diese Verknüpfung erneut drücken, „Command Shift“ und Zitat, können Sie das schließende Tag erhalten. Da gehen wir. Das passiert, wenn Sie Fehler machen oder wenn Sie versuchen, Tags zu erweitern, die standardmäßig nicht in HTML vorhanden sind. 30. Lieblingsabkürzungen: Es gibt Tonnen von Abkürzungen, die Sie lernen können , die Sie lernen sollten oder die Sie lernen möchten, aber wenn es etwas gibt, das Sie besonders oft tun, gehen Sie es forschen, lernen Sie es. Hier ist die Website, auf der Sie alle Abkürzungen finden können. Davon abgesehen werde ich Ihnen ein paar meiner Lieblingsstücke zeigen. Einer meiner Lieblingsstücke ist ein:mail. Wenn Sie es erweitern, genau so, heißt es „mailto“. Ein anderer ist Link. Wenn Sie erweitern, geht es nur zu „Stylesheet“. Aber wenn Sie zum Link gehen, klicken Sie auf CSS und erweitern Sie das, es fügt Ihre CSS-Datei sofort dort ein. Viel Zeit werden meine CSS-Dateien style.css genannt. Das hat fantastisch. Jetzt ist das letzte, wenn Sie Ihr Dokument-Tag und Ihr Head-Tag und Ihr Body-Tag und all diese Art von Sachen schreiben müssen, was wirklich frustrierend ist. Nun, du schreibst nur Ausrufezeichen, weil das dich wütend macht. Ich weiß es nicht. Dann erweitern Sie es, und genau so steht all das für Sie geschrieben. Das sind ein paar meiner Lieblingsstücke, ich würde gerne wissen, was deine Lieblingsstücke sind. 31. BEM-Benennung: Wenn Sie sich für B-E-M- oder BEM-Benennungskonventionen entscheiden, dann werden Sie diese Funktion lieben. Wenn Sie nicht in BEM-Namenskonventionen sind oder Sie keine Ahnung haben, was es ist, ist es in Ordnung, Sie können einfach direkt überspringen. Ich werde später einen Kurs darüber machen. Aber mit einem Emmet-Filter können wir alle BEM-Klassen hinzufügen, die wir brauchen, ohne so viel Arbeit tun zu müssen. Sieh dir das an. Wenn wir Punkt-Inhalt Bindestrich Block unterstrichen groß und erweitern, dass, so steuern Sie E. Ich werde es in den Standard setzen. Aber, wenn wir Pipe-BEM tun mussten und das ist ein Filter, Kontrolle E. Überprüfen Sie, dass Inhalt Block, Inhalt Block groß. Lassen Sie uns dies rückgängig machen und schreiben Sie in Punktunterstrich orange und erweitern Sie dann diesen Inhaltsblock groß, Inhaltsblock orange sind jetzt Klassen auf diesem div. Erstaunlich. Lassen Sie uns das rückgängig machen und im Inneren von hier, lassen Sie uns eine Klasse von Avatar so setzen, unterstreichen, Avatar unterstreichen und dann all das erweitern. Dann genau so hat diese Avatar-Klasse einen Inhalts-Dash-Block davor. Es hält sich an BEM-Benennungskonventionen. Was ziemlich süß ist. Dies ist meiner Meinung nach ein Doppelgewinn, weil Sie Code schreiben, der wirklich beschreibend ist. Es hält sich an einige Konvention und Sie schreiben es schnell. 32. Alles zusammenführen: Mit EMMET können Sie eine ganze Website schreiben, indem Sie eine Abkürzung erweitern, aber dies dauert oft viel mehr Zeit, als es wert ist. Lassen Sie sich nicht zu lange und komplexe Abkürzungen schreiben. Schreiben Sie es in überschaubare Stücke. EMMET soll produktiv und nicht zeitaufwändig sein. Wenn Sie üben und CSS und HTML wirklich schnell schreiben können, ist eine Sache, die EMMET nicht ersetzt, eine gute Planung. EMMET kombiniert mit guter Planung ist der Weg des wahren Ninja. Ich bin tot ernst, ist es der Weg. 33. // HTML-BEFEHLE: Erweitern von Abkürzungen ist nicht alles, was Emmet tun kann, es gibt eine Reihe von anderen Dingen, die es für Sie in Ihren HTML-Dateien tun kann. Die meisten von ihnen erfordern, dass Sie eine neue Tastenkombination lernen, aber ich sage Ihnen, dass es sich lohnt. 34. Tags ausgleichen: Wenn Sie eine Menge Hierarchie vor sich haben oder Ihr Code ziemlich komplex ist, ist eines der besten Dinge, die Sie tun können, Ihre Tags auszugleichen. Sieh dir das an. Ich werde „Control J“ drücken. Kontrollieren Sie J erneut, und Sie werden sehen, dass es das öffnende und das schließende Tag auswählt. Wenn ich es erneut drücke, geht es in den Inhaltsbereich. Wenn ich „Control D“ drücke, wird es weiter nach außen wählen. Steuere D erneut, und du wirst sehen, dass es die übergeordneten A-Tags und dann Control D, wieder die übergeordneten li-Tags und so weiter auswählt . Hier sehen Sie, dass es den Inhalt zwischen dem öffnenden und dem schließenden ul Tag auswählt. Kontrolle D, es wählt die ul Tags, Control D, dasselbe, dasselbe. Wenn ich wieder „Control J“ drücke, wird es mich nach innen bringen, bis es zum innersten Punkt kommt. So balancierst du deine Zahnspangen aus. In Sublime können Sie darauf zugreifen, wenn Sie die Tastenkombination über Ihre Steuerungspalette vergessen , also Befehl Shift P und Sie geben einfach Balance ein. Da gehen wir. Gleichgewicht nach innen, Gleichgewicht nach außen. Es gibt auch Ihre Tastenkombinationen auf der rechten Seite. Sie können auch zu Tools und Befehlspaletten wechseln wenn Sie die Tastenkombination dafür nicht kennen. Das ist eine wirklich hilfreiche Möglichkeit, in Ihrem Code zu navigieren. Es ist schnell, es ist einfach und hilft mir oft, verwirrende und wirklich seltsame Fehler zu vermeiden. 35. Tag verbinden oder teilen: Es gibt Zeiten, in denen Sie ein Tag teilen oder verbinden müssen. beispielsweise ein Wenn Siebeispielsweise einBild schreiben und es dann erweitern möchten, wäre das kein gültiges React-Tag. Also, was Sie hier tun müssen, ist, dass Sie entweder ein Bild so schreiben müssen, was seltsam ist, oder Sie müssten es auf dem öffnenden Tag schließen. Emmet vorhanden ist, müssen Sie nur Befehlstaste, Umschalttaste und Zitat drücken. Genau so stellt es das schließende Tag zur Verfügung. Wenn Sie es wieder tun, wird es sich selbst schließen. 36. Springen zum Bearbeiten von Inhalten: Diese kleine Abkürzung ist ziemlich cool, wenn Sie Emmet Ausdrücke schreiben. Wenn wir Eingabe, Text schreiben wollen , und dann müssen wir das erweitern, wenn ich zu id springen und dann zurück zum Namen springen wollte, bevor ich etwas geschrieben hatte, drücke ich einfach Control Alt und rechts oder links. Dann kann ich zwischen diesen beiden Editierpunkten springen. Wirklich hilfsbereit. Sobald ich etwas schreibe und rückwärts springe, kann ich nicht mehr vorwärts springen, weil ich den Inhalt bereits geändert habe. 37. Nächstes & vorheriges Element wählen: Wir haben eine Reihe von Inhalten und ich möchte schnell zum nächsten Element gehen. Wie mache ich das? Wir befehlen Shift und größer als. Nur so können wir zwischen unseren Elementen springen oder wenn wir rückwärts gehen wollen, gehen wir weniger als ziemlich einfach, richtig? Es ist wirklich hilfreich. 38. Tag entfernen: Die Standardmethode, diese Tags zu entfernen, wenn wir nicht mehr „li“ wollen, wäre einfach, sie zu klicken und vielleicht eine Maus zu bewegen und sie dann zu löschen. Aber es gibt einen schnelleren Weg, „Befehl“ und „Zitat“, kein Tag mehr. Wenn Sie dies in Verbindung mit anderen Verknüpfungen verwenden, wird das Leben einfach. 39. Tag umbenennen: Also haben wir eine Reihe von Codierung gemacht, unsere Website ist bereit, aber wir haben einige Fehler gemacht, und jetzt müssen wir einige der Tags ändern. Eine der Möglichkeiten, wie wir dies tun können, ist der Standardweg, nur zum öffnenden Tag zu gehen. Wählen Sie den UL-Text aus, und ändern Sie ihn dann in OL. Wenn wir hier „Enter“ drücken, gibt es uns ein unerwünschtes Ergebnis. Also lassen Sie uns das einfach löschen und dann können wir den ganzen Weg zum schließenden Tag gehen und „OL“ eingeben. Das ist der Standardweg. Sieh mal, wie schnell das ist. Wenn ich „Command Shift K“ gehe, wählt es sowohl das öffnende als auch das schließende Tag aus, und jetzt kann ich einfach „UL“ oder „Div“ eingeben. Nun, sieh dir das an. Wenn wir alle diese Li auswählen und drücken Sie „Befehl Shift L“, oder wir gehen Auswahlen, teilen sich in Linien, und dann drücken wir „Befehl“ und „Pfeil nach links“. Was hier passiert ist, ist, dass wir alle Zeilen ausgewählt haben, und jetzt können wir auf jeder Zeile tippen. Also werde ich meinen „Pfeil nach rechts“ drücken, und dann werde ich von hier aus auf „Befehlshalt K“ drücken, um meine Tags umzubenennen. Dann kann ich einfach diese beiden Spannweiten oder A-Tags ändern oder was immer ich will. Wirklich mächtig. 40. Passendes Tag-Paar finden: Möglicherweise haben Sie viele Inhalte, und wenn Sie nach unten scrollen, wissen Sie nicht, wo Sie sich befinden. Auch wenn es Zeilen und Unterzeilentext gibt oder einige Editoren eine klarere Möglichkeit haben zu unterscheiden, welche ein schließendes Tag für Ihr öffnendes Tag ist. Ein wirklich einfacher Weg ist, einfach irgendwo in der Nähe dieses öffnenden Tags oder schließenden Tag zu klicken und dann Control Shift T zu gehen, und es geht zum Anfang dieses, und dann Control Shift T, und dann geht es zum Ende. Steuere Shift T erneut, zurück zur Öffnung. Er findet sein Paar. Wäre das nicht toll, wenn alle Leute ihr exaktes Paar im Universum finden könnten , nur mit Control Shift T? 41. Verpacken mit Abkürzungen: Wir haben gelernt, wie man den Inhalt einer Abkürzung spezifiziert. Wenn wir dies erweitern, werden Sie sehen, dass mein Inhalt 1, ist der Text innerhalb des letzten Kindes dieser Abkürzung, fantastisch. Aber was passiert jetzt, wenn wir den Inhalt bereits haben? Nun, wir könnten einfach A drücken und das dann erweitern, aber dann wäre der Inhalt nicht in diesem Element. Lassen Sie uns rückgängig machen, was wir hier tun können, ist, dass wir den Inhalt auswählen und dann werden wir ihn umschließen. So steuern Sie W für Wrap. Hey, wir können hier eine Abkürzung eintragen. Also div oder wir könnten einen Klassennamen, meine-Klasse, oder wir könnten eine ganze Abkürzung schreiben, so Spanne und innerhalb der Spanne ist meine-Klasse, und in diesem ist ein Tag, wirklich cool. Drücken Sie „Enter“ und dann gehen wir. Wir haben gerade unsere Inhalte mit einer ganzen Reihe von Tags umhüllt. Es muss nicht nur der Inhalt allein sein, wir könnten dieses ganze Element mit einer Abkürzung umschließen. Also kontrolliere W und vielleicht willst du nur em oder vielleicht div.my-cool-class schreiben. Genau so, es zieht es für uns ein, fantastisch. So wickeln wir ein, ich werde nicht für dich wickeln. 42. Kommentare: Lassen Sie uns über kommentieren sprechen. In Sublime, wenn wir „Befehl“ und „Slash“ drücken, kommentiert es, wenn wir es erneut drücken, wird es kommentiert. Wenn wir in Emmet „ALT“, „Shift“ und „Slash“ drücken, macht es genau dasselbe, also wirklich einfach, das zu tun. Aber jetzt lasst uns über die nächste Ebene kommentieren. Wenn wir eine Reihe von divs in divs haben, und alle von ihnen haben Klassennamen, slide.class-1 und innerhalb von.class-2. Innerhalb davon ist.class-3 und innerhalb davon ist.class-4 und wir erweitern das. Wir haben einen Fehler gemacht, da drüben. Wir erweitern das. Was passiert, ist, dass die öffnenden Tags großartig sind, weil sie Ihnen sagen, welche Klasse es ist, aber es sagt Ihnen nie, welche Klasse es ist, wenn sie geschlossen wird. Was wir hier tun können, ist einen Filter zu verwenden, Sie Pipe und Sie drücken „C“, und dann erweitern Sie es. Dann setzt es Kommentare ein, und es sagt Ihnen, dass „Hey, wir haben gerade Klasse 4 geschlossen, wir haben gerade Klasse 3 geschlossen“. Dies ist wirklich hilfreich, wenn Sie eine wirklich lange Seite wie URL haben und innerhalb der URL viele Listenelemente haben. Sieh dir das an. Jetzt bist du nicht wirklich sicher, wann deine divs geschlossen werden und welche divs es ist, aber jetzt sagt es dir. Ziemlich cool. 43. Bildgröße aktualisieren: Stellen Sie sich vor, wir haben ein Bild-Tag und wir haben dieses reiche Gesichtsbild. Schauen Sie es sich an. Reiches Gesicht, das bin ich, wenn ich ein Gesicht ziehe. Ja, jetzt habe ich dieses reiche Gesicht kleines Bild, das ich dort anstelle des reichen Gesichtsbildes setzen möchte. Also gehen wir zurück zu unserer index.html und wir wechseln zu reichen Gesicht klein, und jetzt muss ich meine Weisheit, Augenhöhe, die ist immer eine solche Mission. Woher weiß ich, wie groß das ist, dann werde ich das überprüfen. Sie gehen einfach Control Shift I und [unhörbar] Breite und Höhe auf 300 eingestellt. Es weiß, wie groß diese Bilder sind. Verwendung dieser Tastenkombination funktioniert auch wirklich gut mit dem Auto Dateiname Sublime Plugin. Du solltest es dir ansehen. 44. // MEHR TOLLE TRICKS VON EMMET: Sie haben etwas von dem gesehen, was Emmet in Ihren HTML- und CSS-Dateien tun kann, aber es gibt noch wenige Dinge, über die Sie wissen sollten. In den nächsten Videos geht es darum, Ihnen diese Dinge zu zeigen. 45. Ein Bild in Daten kodieren: Das wird dir den Verstand verjagen, es hat mir den Verstand vermasselt. Ich habe dieses Bild, es heißt icon.png, ein erstaunliches Symbol. Jetzt, in Safari oder einem anderen Browser, habe ich es hier. Aber, wenn wir zum Finder gehen und wir unsere icon.png entfernen, entfernen, und dann sind wir zu aktualisieren, wird es ein Problem geben. Wir gehen zurück zu unserem Finder, drücken Command Z, unser Icon kommt zurück, wir aktualisieren, Gott sei Dank, es ist wieder da. Wenn wir jetzt zu Sublime Text gehen, um dies zu verhindern, und aus einer Reihe anderer Gründe, wenn wir uns nicht auf eine tatsächliche Datei in unserem Dateisystem oder auf einem Server verlassen wollten, was wir tun könnten, ist, dass wir das kodieren könnten. Ziemlich cool. Aber normalerweise braucht das ein wenig nachzudenken, man braucht einen Konverter oder was auch immer, aber Emmet hat das sortiert. Sieh dir das an. Control Shift D, und einfach so wandelt es Ihr Bild in Nur-Text um. Ich weiß, es ist ein bisschen lang, aber es hat seine Vorteile. Lasst uns das jetzt überprüfen. Wir speichern es, gehen wir in unseren Finder und entfernen es. Auf Wiedersehen. Dann gehen wir zurück zu Safari, wir erfrischen uns, schauen uns das an. Wir brauchen kein Bild mehr, wir haben alles im Text. Wie cool ist das? 46. Linien zusammenfügen: Manchmal haben Sie Inhalte über mehrere Zeilen, entweder ein HTML oder ein CSS, und Sie möchten, dass sie alle in einer einzigen Zeile liegen. Der einfachste Weg, dies zu tun, wenn Sie wirklich Ihre Inhalte haben, ist es, ihn auszuwählen. Also in diesem Fall werde ich nur alle auswählen und dann drücken Sie „Command shift P“, um Ihre Paletten hochzufahren. Geben Sie dann merge oder etwas Ähnliches ein. Du drückst „Enter“ und genau so ist alles in einer Zeile. Es ist das gleiche mit CSS. Sie haben eine Reihe von Regeln und Sie wählen sie aus, Befehl Shift P, Merge Zeilen, genau so, alles ist in einer einzigen Zeile. Wirklich hilfsbereit. Nun, der andere Weg, dies zu tun, wenn Sie ein bisschen vordenken können, ist, dass Sie es so schreiben. Also gehst du ul dot meine Liste, li multipliziert mit drei. Dann fügen Sie eine Pipe ein, weil Sie sie filtern möchten und Sie möchten, dass es sich um eine einzelne Zeile handelt. Dann erweitern Sie es und genau so ist alles in einer Zeile. Dann kannst du sagen: „Hey, da.“ Drücken Sie, „Tab“. „ Wie geht es, Drücken Sie „Tab“ gehen?“ Wirklich cool, richtig? Es ist genau das gleiche mit CSS. 47. Die Befehlspalette: Wenn Sie wie ich oder die meisten anderen Menschen sind, werden Sie wahrscheinlich diese Tastenkombinationen vergessen. Glücklicherweise ist es im erhabenen Text wirklich einfach, die Verknüpfungen zu finden. Sie gehen zu „Tools“, „Command Palets“, oder Sie könnten „Command Shift P“ drücken, wenn Sie sich an diese Verknüpfung erinnern, und dann von hier aus können Sie sehen, was alle Emmet Befehle tun, also Emmet und da gehen wir. Alle Befehle sind da mit allen Tastenkombinationen auf der rechten Seite. Super, super handlich. 48. Emmet-Einstellungen: Manchmal mögen Sie vielleicht nicht wirklich, was Emmet tut. Nun, ich ermutige Sie, die Einstellungen zu überprüfen. In Sublime Text ist es ziemlich einfach, Sie gehen Sublime Text, Voreinstellungen, und dann gehen Sie zu Paketeinstellungen, Emmet, und überprüfen Sie dann die Standardeinstellungen. Um einen von ihnen zu ändern, müssen Sie Ihre eigene Einstellungsdatei öffnen. Wir gehen zu Paketeinstellungen, Emmet und dann Einstellungen-Benutzer, und dann, was Sie tun können, ist, wenn Sie etwas nicht mögen, können Sie das einfach kopieren und dann diese geschweiften Klammern anziehen, weil es sich um ein benachbartes Objekt handelt und dann ändern Sie das einfach, speichern es. Möglicherweise müssen Sie Sublime Text oder Ihren Code-Editor neu starten, bevor die Einstellung funktioniert. Auf diese Weise aktualisieren Sie Ihre Einstellungen. Haben Sie einen Rückzug Standardeinstellungen ist eine Menge von Kommentaren hier in, die Ihnen genau sagen, was los ist. Recherche online, wenn du Hilfe brauchst, um herauszufinden, was diese bedeuten. 49. Filter: Lassen Sie uns über Filter sprechen. Wir haben Filter in Aktion in den HTML- und CSS-Abkürzung Videos gesehen, aber ich werde Ihnen zeigen, wie man sie macht und ein paar Beispiele. Was ist ein Filter? Nun, lasst uns zuerst ein Beispiel machen. Also hast du ein div, und du hast eine ul, und du hast drei li-Elemente darin. Wenn Sie das erweitern, sie in mehrere Zeilen eingefügt. Aber wenn Sie das nicht wollen, und Sie wollen alles auf einer Linie, setzen Sie einen Hecht und S. Nun, dieser Hecht ist der Filter, und höher filtert es, ist die S, dann würden Sie steuern E und erweitern, und alles wäre auf einer Linie. Fantastisch. Nun, anstelle von S, könnten Sie Jade schreiben, und es würde ein Jade-Markup für Sie erstellen, so. Oder Sie können haml schreiben, und es wird ein Haml Markup für Sie erstellen. Wirklich cool. Nun, wenn Ihre ul eine Klasse darin hatte, heißt sie „Meine Liste“. Was hier wirklich cool ist, ist, dass wir anstelle von Haml c schreiben könnten, was bedeutet, dass ich Kommentare möchte. Wenn wir dies erweitern, erhalten wir diese Kommentare am Ende unserer Elemente mit der Klasse und sagt: „Hey, wir haben dieses Tag gerade geschlossen.“ So verwenden Sie Filter. Es gibt noch eine ganze Menge mehr. Schau sie online an. 50. // PRODUKTIVITÄT mit SUBLIME: Die nächsten Videos zeigen, wie man in Sublime Text ein wenig produktiver ist, aber es ist sicherlich nicht alle Wege. Ich ermutige Sie auch zu erforschen, wie Sie alle Arten von Aufgaben beschleunigen können, nicht nur in Ihrem Code-Editor. 51. Ohne eine Maus: Nun, wenn Sie tippen und dann eine Maus verwenden und dann tippen und dann eine Maus verwenden, wird es wirklich frustrierend und es ist nicht produktiv. Manchmal wissen Sie nicht einmal, wo sich Ihre Maus befindet, aber Sie wissen, wo sich Ihr kleiner Cursor befindet. Können wir einfach die Maus überhaupt nicht benutzen? Was ist mit der Verwendung der Tastatur? Ich werde Ihnen ein paar Dinge zeigen, die Ihnen helfen, nur die Tastatur zu verwenden. Die Tastenkombinationen sie wirklich hilfreich zu wissen. Ich weiß, dass deine Köpfe wahrscheinlich mit all den anderen Tastenkombinationen explodieren , die du wissen solltest, aber diese sind wirklich hilfreich, besonders in Sublime. Der erste, den ich Ihnen zeigen möchte, ist die Verwendung von Befehl. Wenn Sie „Befehl“ und links oder rechts drücken, springt es zum Anfang oder Ende der Zeile. Wenn Sie Befehl und nach oben oder unten verwenden, springt es zum Anfang oder Ende des Dokuments. Gehen wir an den Anfang des Dokuments drücken Sie „Befehl“ und nach rechts, und wir gehen zum Ende dieser Zeile. Nun, wenn wir „Down“ drücken, geht es bis zum Ende dieser Zeile. Runter, runter, runter, runter und so weiter. Nun, Befehl nach links geht an den Anfang dieser Zeile und wenn wir nach oben gehen, oben, und bleibt nicht mehr am Anfang dieser Zeile, aber das ist okay. Befehl links geht es an den Anfang dieser Zeile. Wirklich cool. Also, was macht Alt? Nun, Alt und nach rechts springt es zum nächsten Wort. Das ist ziemlich cool. Manchmal macht es seltsame Dinge, wie es nicht ganz zum nächsten Wort springt und könnte zum nächsten Zeichen springen, wenn es Sonderzeichen gibt. Wie diese Alt und nach links, werden wir einfach zum Anfang von li springen. Auf der linken Seite springen wir zum Ende des Heus und so weiter. Was bewirkt Shift? Verschieben Sie sich in die rechte Aha, es schafft eine Auswahl. Wirklich hilfreich, wenn Sie kopieren und einfügen möchten. Also „Befehl C“ zum Kopieren und dann neue Zeile und Einfügen. Jetzt gibt es eine viel einfachere Möglichkeit zum Kopieren und Einfügen. Wir können drücken „Befehl“, „Shift“ und nach links und es wählt die gesamte Linie. Jetzt können wir das schneiden, so Command X und jetzt können wir drücken „Command Backspace“ um die gesamte Zeile und Rücktaste wieder zu entfernen und da gehen wir. Keine Zeile mehr und wir müssen nicht 1000 Mal „Backspace“ drücken. Wenn Sie etwas in der Mitte des Entfernens vollständig ausrichten und ein wenig für Stück schreiben möchten , können Sie „Alt“ und „Rücktaste“ drücken und es wird die Dinge nicht Stück für Stück entfernen, was manchmal ziemlich cool ist. Wenn Sie nun ein Wort auswählen möchten, in dem Sie sich befinden, drücken Sie einfach „Befehl D“ und es wählt dieses Wort aus und wenn Sie die gesamte Zeile auswählen möchten, drücken Sie „Befehl L.“ Das ist wirklich hilfreich für die Auswahl ganzer Zeilen, ganzer Wörter. Es ist wirklich schnell. Super. Eine andere Möglichkeit, dies zu tun, ist nur durch Drücken von „Alt“. Alt nach rechts und wieder nach rechts. Dann ALT nach rechts verschieben. Dann können Sie Wort zu Wort auswählen, anstatt zu versuchen, ein wenig für Stück auszuwählen. Sie können beginnen, um zu sehen, welche Befehle Alt und Shift tun. Sie sind wirklich, wirklich mächtig. Manchmal verwenden wir auch die Kontrolle in einigen der Verknüpfungen, aber ich zeige Ihnen nicht wirklich viel, was Kontrolle jetzt tun kann. Eines der nützlichsten Dinge, die ich Ihnen jetzt zeigen werde ist, wenn Sie diese drei Zeilen auswählen und sie dann kopieren müssen , und wir müssen nach unten gehen, um UL zu verlassen, und wir haben sie eingefügt Dinge sehen nicht so schön aus. Wenn Sie es aus einem anderen Bereich einfügen, der eine andere Einrückung hat, können Sie „Command Shift V“ verwenden und es im Grunde an Ort und Stelle einfügen, wirklich, wirklich nützlich. Eine andere Sache ist, ist das, was passiert, wenn Sie diese Dinge in einer anderen Reihenfolge einfügen wollen? Nun, gehen wir ein paar Zeilen hoch und lassen Sie uns kopieren, hey, lassen Sie uns dort kopieren und kopieren, wie Sie. Dann gehen wir hier runter und dann lassen Sie uns die Rücktaste, drücken Sie erneut „Tab“ und dann „Alt-Befehl V.“ Was bewirkt das? Nun, sieh dir das an. Es behält die Geschichte all Ihrer Kopien. Hey, wir können damit beginnen, wie Sie „Enter “ drücken, „Befehl Alt V“, und dann können wir dort sagen, wie Sie da sind, und dann Befehl Alt V und dann können wir sagen, hey, oder wir könnten sogar eine ganze Reihe von Verbündeten einfügen. Wirklich cool. Das sind einige coole Möglichkeiten zum Kopieren und Einfügen. Nun, was passiert, wenn Sie eine Zeile schnell unterhalb oder schnell darüber hinzufügen möchten? „ Command Shift Enter“ oben. „ Command Enter“ unten. Es ist so ziemlich das gleiche wie einfach nur betreten zu gehen. Ich mag „Command Shift Enter“. Die andere Sache, die wirklich cool ist, ist, wenn Sie eine Reihe von Text ausgewählt haben, drücken Sie „Tab“, es wird sie einrücken und wenn Sie „Umschalttaste“ drücken, wird es die Einrückung aufheben. Super-hilfsbereit, anstatt es Zeile für Zeile zu tun. Das letzte, was ich Ihnen hier zeigen möchte, ist, dass, wenn Sie ein Stück Text schreiben, also sagen wir, Sie haben gerade wie href geschrieben. Sie drücken „Gleich“, Sie müssen nicht zwei Sätze von Anführungszeichen drücken. Sie drücken es einfach einmal und Ihr Cursor befindet sich in der Mitte dieser beiden Anführungszeichen. Wirklich hilfsbereit. Dann kannst du etwas schreiben. Ein weiteres großartiges Beispiel dafür ist, wenn ich „Wie“ auswählen musste und dann „Shift“ und Zitat drücken musste, und ich werde dieses Wort mit Anführungszeichen umschließen. Oder ich würde das mit Klammern oder mit Klammern umwickeln. Wirklich, wirklich cool. Das sind ein paar Abkürzungen, die ich in Sublime verwende. Es gibt eine Tonne mehr. Wenn Sie wirklich wissen wollen, ob etwas getan werden kann, um den Prozess zu beschleunigen, machen Sie einige Recherchen. Es wird wahrscheinlich verfügbar sein oder jemand wird ein Plug-in erstellt haben , mit dem Sie dies tun können. 52. In Linien aufteilen: Eines der coolsten Dinge, die ich über Sublime Text finde ist die Fähigkeit, eine Reihe von Text in Zeilen zu teilen. Ich werde Befehl A drücken, alle auswählen, und dann gehe ich zu Auswahl, Split in Zeilen, aber wir könnten die Tastenkombination verwenden, also Command Shift O , und plötzlich haben wir eine Reihe von Zeilen ausgewählt ist. Wenn wir hier wieder Abstand setzen, hey, können wir ein paar Sachen schreiben, aber das ist nicht zu nützlich. Wenn ich Befehlstaste und links drücke, geht es an den Anfang jeder dieser Zeilen. Von hier aus kann ich so etwas wie div machen und erweitern. Ich kann dann das schließende Tag auswählen, das ausschneiden , Befehlstaste und nach rechts drücken und dann einfügen. Es tut es für jede einzelne Zeile. Es ist wirklich, wirklich mächtig. 53. Zwischen Registerkarten navigieren: Wenn Sie eine Reihe von Tabs geöffnet haben, ist es wirklich frustrierend, einfach mit der Maus zu gehen, und klicken Sie dann, und klicken Sie dann auf. Es gibt ein paar Möglichkeiten, dies zu tun. Es ahmt Google Chrome wirklich schön, so dass Sie Befehl ein, zwei, drei drücken könnten , um zwischen Ihren verschiedenen Tabs zu navigieren. Manchmal haben Sie so viele Registerkarten geöffnet, dass Sie nicht wissen , auf welcher Registerkarte Sie sich befinden oder auf welcher Registerkarte Sie gehen möchten. Sie könnten einfach die Steuerungstabelle drücken und es wird zwischen Ihren Tabs oder Control Alt Tab wechseln und es wird in die andere Richtung wechseln, oder wenn Sie wirklich absichtlich darüber sein wollten, welchen Weg Sie gegangen sind, Befehl Alt rechts, Befehl Alt links. Es gibt drei Möglichkeiten, zwischen Ihren Registerkarten zu navigieren. Ich benutze normalerweise nur Control Tab, oder wenn ich ein paar Tabs geöffnet habe, Befehl eins, zwei, drei. Super einfach, super einfach. 54. Emojis einfügen: Wenn du Dinge wie „Oh mein, ich liebe Einhörner“ schreibst , musst du nur ein Emoji reinlegen, oder? Wie machen wir das? Nun, auf einem Mac ist es wirklich einfach. Du gehst Kontrolle, Kommando und Raum. So kannst du Einhorn suchen, da gehen wir. Dann stecken wir einfach das Einhorn da rein. Fantastisch. Wenn Sie das tun, Ihr Bildschirm sieht so aus, dann drücken Sie einfach diesen kleinen Knopf auf der rechten Seite hier und es wird zu diesem kleinen Pop-up. Wenn Sie das nächste Mal verwenden, gehen Sie zu Control, Command und Space, und dann wird Ihr Emoji-Picker angezeigt. Super praktisch für Emojis. - Ja. 55. // SCHLUSSBEMERKUNG: Jetzt fühlst du dich wie in der Nähe? Matrix Dial oder ein Weltklasse-Hacker-Center, da Sie wie Mr. Hacker sind, oder Mr. Near oder Mrs. Near Trinity, wer auch immer Sie denken, Sie sind. Ich habe eine Herausforderung für Sie und eine Frage. Die Herausforderung ist, dass Sie eine Website in einer einzigen Abkürzung schreiben und diesen Ausdruck in Ihrer Projektgalerie posten. Jeder andere kann kopieren, einfügen und erweitern und voila, sie sollten eine Website haben. Dann ist die Frage, bitte sagen Sie uns, was sollten wir mit all der zusätzlichen Zeit tun, die Sie sparen, sobald Sie Emmet verwenden. Diese deine beiden Dinge, die ich will, dass du jetzt tust. Viel Spaß mit ihnen. Das ist das Ende des Unterrichts. Sie sind jedoch viele weitere Möglichkeiten, Ihre Produktivität zu beschleunigen, besonders wenn Sie codieren und vor allem, wenn Sie sich in erhabenem Text befinden. Wenn Sie die Klasse genossen haben, überprüfen Sie sie bitte und teilen Sie sie mit allen, von denen Sie denken, dass sie davon profitieren wird. Wenn Sie in Kontakt bleiben möchten, schauen Sie sich meine Website an und folgen Sie mir in den sozialen Medien. Ich bin @TAPTAPKABOOM auf den meisten Plattformen. Ok. Wir sehen uns bald. Tschüss.