So schreiben Sie HTML-Code schneller
Moderne Websites erfordern viel HTML-Code. Komplexe Layouts mit mehreren unterschiedlichen Ansichten und Zuständen können mit nur einem einfachen Texteditor schwierig zu erstellen sein. Zum Glück gibt es eine Vielzahl von HTML-Generierungswerkzeugen, mit denen Sie arbeiten können. Hier werfen wir einen kurzen Blick auf zwei der beliebtesten Werkzeuge, Emmet und Pug.
Sie müssen jedoch noch Ihren HTML-Code kennen, um diese beiden leistungsstarken zeitsparenden Tools verwenden zu können. Bevor Sie eintauchen, stellen Sie sicher, dass Sie die beliebte Semantik verwenden HTML-Tags der richtige Weg. Siehe auch unsere Anleitung zur Verwendung von a HTML Boilerplate .
Möchten Sie den Code ausweichen? Probiere diese Website-Ersteller . Oder wählen Sie für zusätzliche Hilfe auf dem Weg a Web-Hosting Service mit technischem Support.
Generieren Sie HTML im laufenden Betrieb
Wenn Sie große Mengen HTML auf einmal schreiben, kann das Schreiben jedes Tags von Hand sehr mühsam und sehr schnell werden. Wenn Sie beispielsweise eine Liste mit Links schreiben, müssen Sie sicherstellen, dass die ,
und Tags öffnen und schließen sich alle an der richtigen Stelle. Andernfalls funktionieren die Links möglicherweise nicht und das gesamte Seitenlayout wird komplett durcheinander geraten.
Wie benutzt man Emmet?
Um sicherzustellen, dass Sie die Wahrscheinlichkeit verringern, dass dies geschieht, können Sie die Talente von einsetzen Emmet . Dies ist ein Tool, mit dem Sie viel tippen und Ihren HTML- und CSS-Workflow erheblich verbessern können. Mit Emmet können Sie Elemente erstellen, indem Sie einen CSS-ähnlichen Selektor eingeben. Dieses Element wird dann analysiert und in reguläres HTML erweitert. Unten sehen Sie das ursprüngliche Element, das in Emmet erstellt wurde.
nav>ul>li*3>a.chapter{Chapter $ of 3}Emmet erkennt dieses Element, analysiert es und wandelt es dann wie unten gezeigt in Standard-HTML um. Ein kurzer Blick auf das Emmet-Element legt dies nahe wird multipliziert mit ( *3 ) und jede Die Instanz wird als Kapitel gefolgt von der entsprechenden Nummer (bis zu 3) bezeichnet.
Beachten Sie, wie viele Zeichen das Emmet-Element enthält und wie viele das Standard-HTML enthält. Selbst dieser kleine Codeausschnitt zeigt, wie viel Zeit mit der Emmet-Kurzschrift gespart werden kann.
- Chapter 1 of 3
- Chapter 2 of 3
- Chapter 3 of 3
Emmet ist sich auch des Kontexts bewusst. Zum Beispiel, wenn wir a bearbeiten Dies ist nur ein kurzes Beispiel dafür, was Emmet kann, aber es stehen noch viele weitere Konfigurationsoptionen zur Verfügung. Dazu gehören die CSS-Bearbeitung, die Erstellung von BEM-Klassen (Block Element Modifier) und sogar ein Lorem Ipsum-Generator. Es ist auch erwähnenswert, dass die meisten Code-Editoren entweder Emmet eingebaut haben oder es über Plugins unterstützen. Mehr dazu erfahren Sie auf der Emmet-Dokumentation Seite. Während Emmet ideal für statische Inhalte ist, was passiert, wenn Inhalte dynamischer sein müssen? Beispielsweise müssen wir möglicherweise personalisierte Homepages, komplexe Auftragstabellen generieren oder allgemeine HTML-Blöcke wiederholen. Dies ist alles in JavaScript möglich, aber durch das Vorrendern dieses Inhalts können wir einen zusätzlichen Geschwindigkeitsschub erzielen, ohne auf den Browser des Benutzers angewiesen zu sein. Denken Sie daran, wenn Sie eine medienintensive Seite haben, möchten Sie diese zuverlässig sichern Cloud-Speicher . Schritt vorwärts Mops. Dies ist ein Vorlagenwerkzeug für HTML. Sie können Seiten im Format '.pug' schreiben, und Pug liest diese Datei, fügt einige dynamische Daten ein und gibt Standard-HTML zurück. Im folgenden Beispiel würden Sie den Code in Pug schreiben, um denselben HTML-Code wie im Emmet-Beispiel (oben) zu erstellen. Eine Mops-Datei verwendet nur Einrückungen, um die Verschachtelung anzuzeigen. Es kann über Werte iterieren, um große Mengen an HTML in einem Durchgang zu generieren. Diese '.pug' -Dateien können im gesamten Projekt mehrmals verwendet werden. Dieser Inhalt erschien ursprünglich in der Zeitschrift Web Designer. Weiterlesen: es ist wahrscheinlich, dass wir welche wollen werden
(dies sind Zeilen) Elemente, um es zu füllen. Wir müssten lediglich angeben, wie viele wir benötigen. Verwenden Sie Pug für dynamischen Inhalt
ul each val in [1, 2, 3] li a(href=””, class=”chapter”) Chapter #{val} of 3
Pug kann über den Paketmanager installiert werden Über dem Meeresspiegel . Wenn Sie jedoch weitere Informationen zu den ersten Schritten mit Pug wünschen, besuchen Sie das Webseite .Interessant In Der Welt Des Designs
