Was ist HBuilder?
HBuilder ist eine von DCloud (Digital Heaven) veröffentlichte Webentwicklungs-IDE, die HTML5 unterstützt. An der Entwicklung von HBuilder sind Java, C, Web und Ruby beteiligt. Der Hauptteil von HBuilder selbst ist in Java geschrieben und basiert auf Eclipse, sodass Eclipse-Plugins auf natürliche Weise unterstützt werden. Geschwindigkeit ist der größte Vorteil von HBuilder. Durch vollständige Syntaxhinweise, Codeeingabemethoden, Codeblöcke usw. wird die Entwicklungseffizienz von HTML, JS und CSS erheblich verbessert.
Wie installiert man HBuilder?
HBuilder-Downloadadresse: auf der offiziellen HBuilder-Websitehttp://www.dcloud.io/Klicken Sie auf Free Download, um die neueste Version von HBuilder herunterzuladen.
HBuilder gibt es derzeit in zwei Versionen: eine Windows-Version und eine Mac-Version. Wählen Sie beim Herunterladen die Version, die zu Ihrem Computer passt.
Erstellen eines neuen Projekts mit HBuilder
Klicken Sie nacheinander auf File → New → wählen Sie Web Project aus (drücken Sie Ctrl+N, W, um die Schnellerstellung auszulösen (unter macOS verwenden Sie Command+N und klicken Sie dann mit der linken Maustaste auf Web Project)).
Wie oben gezeigt, geben Sie in Bereich A den Namen des neuen Projekts ein, geben Sie in Bereich B den Projektspeicherpfad ein (oder wählen Sie ihn aus) (HBuilder zeichnet diese Pfadänderung auf und verwendet beim nächsten Mal standardmäßig den geänderten Pfad), und in Bereich C können Sie die zu verwendende Vorlage auswählen (Sie können auf Custom Template klicken und die readme.txt im geöffneten Verzeichnis lesen, um die Vorlage anzupassen).
Erstellen einer HTML-Seite mit HBuilder
Wählen Sie im Project Explorer das soeben erstellte Projekt aus, klicken Sie dann auf File → New → wählen Sie HTML File aus (drücken Sie Ctrl+N, W, um die Schnellerstellung auszulösen (unter macOS verwenden Sie Command+N und klicken Sie dann mit der linken Maustaste auf HTML File)), und wählen Sie die Vorlage Blank File aus, wie unten gezeigt.
Testen Sie die Live Preview von HBuilder, um Ihre Programmierergebnisse zu sehen
Unter Windows drücken Sie Ctrl+P (unter macOS Command+P), um den Live-Vorschaumodus zu aktivieren. In diesem Modus wird die aktuell geöffnete Datei, wenn es sich um eine HTML-Datei handelt, bei jedem Speichern automatisch aktualisiert, um die aktuelle Seitendarstellung anzuzeigen (handelt es sich um eine JS- oder CSS-Datei, wird sie ebenfalls aktualisiert, wenn sie eine Referenzbeziehung zu der in der aktuellen Browser-Ansicht geöffneten Seite hat).
HBuilder-Codeblöcke reduzieren repetitive Programmierarbeit erheblich
Geben Sie in der geöffneten getstart.html H ein, wie unten dargestellt.
Drücken Sie dann 8, um den grundlegenden HTML-Code automatisch zu generieren, wie unten dargestellt.
Was ist ein Codeblock?
Ein Codeblock ist eine häufige Codekombination. Wenn Sie beispielsweise in JS $ eingeben und Enter drücken, wird automatisch document.getElementById(id) eingefügt.
Um Codeblöcke anzuzeigen oder zu bearbeiten, gehen Sie zu Extras - Benutzerdefinierte Codeblöcke und wählen Sie den entsprechenden Codeblock aus, um ihn anzuzeigen und zu bearbeiten. Sie können auch auf das Bearbeiten-Symbol unten rechts in den Details im Code-Assistenten klicken, der den Codeblock aktiviert, um ihn zu ändern und anzuzeigen.
Prinzip der Aktivierungszeichen für Codeblöcke 1:Die Anfangsbuchstaben aufeinanderfolgender Wörter. Zum Beispiel: dg aktiviert document.getElementById(""); vari aktiviert var i=0; dn aktiviert display: none;
Prinzip der Aktivierungszeichen für Codeblöcke 2:Für ganze HTML-Segmente wird im Allgemeinen der Tag-Name verwendet. Zum Beispiel script, style. Normalerweise reicht die Eingabe von höchstens 4 Buchstaben aus, um den benötigten Codeblock zu finden; der vollständige Name muss nicht eingegeben werden. Zum Beispiel vervollständigen sc + Enter, st + Enter die Eingabe der Tags script und style.
Prinzip der Aktivierungszeichen für Codeblöcke 3:Für dasselbe Tag mit mehreren Codeblock-Ausgaben fügen Sie am Ende ein Suffix hinzu. Zum Beispiel gibt meta <meta name="" content=""/> aus, aber metau gibt <meta charset="UTF-8"/> aus, und metag ist ähnlich.
Aktivierungszeichen-Prinzip für Codeblöcke 4:Wenn die ursprüngliche Syntax mehr als 4 Zeichen lang ist, wird bei gängiger Syntax für die Aktivierungszeichen des ersten Wortes eine Abkürzung verwendet. Zum Beispiel wird input button zu inbutton abgekürzt; analog dazu ist intext das Eingabefeld.
Aktivierungszeichen-Prinzip für Codeblöcke 5:JS-Schlüsselwort-Codeblöcke entstehen, indem am Ende des Schlüsselworts ein wiederholter Buchstabe hinzugefügt wird. Wenn man beispielsweise if direkt eingibt, wird das Schlüsselwort if vorgeschlagen, aber iff + Enter zeigt den if-Codeblock. Ähnliche Beispiele sind forr, withh usw. Da "function" ein relativ langes Wort ist, wird die Abkürzung fun verwendet, um die Eingabe zu beschleunigen. Zum Beispiel gibt funn den function-Codeblock aus, während funa und func jeweils eine anonyme Funktion und eine Closure ausgeben.
Flexible Tastenkürzel halten die Hände beim Programmieren auf der Tastatur
Der Effekt wird unten gezeigt.
Nach dem Erstellen der grundlegenden HTML-Vorlage befindet sich der Cursor innerhalb des title-Tags. An diesem Punkt setzen wir den Titel des HTML auf hellohbuilder. Danach verwenden Sie Ctrl+Enter, um eine leere Zeile unter der aktuellen Zeile einzufügen und den Cursor in die nächste Zeile zu bewegen.
Hier verwenden wir den sc-Codeblock, um einen Skriptblock zum Schreiben von JS-Code zu erzeugen (sc eingeben, dann Enter), wie unten gezeigt.
- Verwenden Sie den funn-Codeblock, um eine JS-Methode helloworld zu schreiben (funn eingeben, dann Enter), wie unten gezeigt.
- An diesem Punkt ist der Methodenname der generierten Methode ausgewählt. Wir können einfach direkt den neuen Methodennamen helloworld eingeben, wie unten gezeigt.
Die grüne vertikale Linie in der obigen Abbildung ist die nächste vom Codeblock angegebene Bearbeitungsposition. Durch Drücken von Enter wird der Cursor direkt an die Position der vertikalen Linie bewegt.
Drücken Sie nun Down, Down, Ctrl+Enter, geben Sie style ein und drücken Sie Enter, um den CSS-Codebereich zu erzeugen.
Definieren Sie eine CSS-Klasse classA: Geben Sie .classA { Enter, font Enter Enter Enter ein.
Drücken Sie dann Alt+Down, Alt+Down, um zum nächsten Bearbeitungsbereich zu springen.
Geben Sie < d i v nacheinander ein (Sie können auch <dv + Enter, <iv + Enter eingeben; der Syntaxassistent kann das gewünschte Tag durch Fuzzy-Matching ermitteln), wie unten gezeigt.
Wie in der obigen Abbildung gezeigt, enthält der Code-Assistent links Zahlen; Sie können diese Zahlen verwenden, um den entsprechenden Eintrag auszuwählen. Die rechte Seite enthält Browserkompatibilitätsdaten und Beispiele.
Geben Sie i, Enter, d 1, Pfeil nach rechts, Leertaste, c, Enter, Enter ein.
Fahren Sie mit der Maus über das Klassenattribut classA des div-Tags, drücken Sie Alt und die linke Maustaste; nach dem Klicken können Sie zur Definition von classA springen.
Ctrl+Enter
div kann auch über einen Codeblock generiert werden. Geben Sie zum Beispiel divc, Enter, Enter, Enter ein und geben Sie dann helloworld ein, wie unten gezeigt.
Nach unten, Enter.
Verwenden Sie CSS-Selektor-Syntax, um HTML und CSS schnell zu entwickeln (unterstützt Emmet)
Geben Sie div#page>div.logo+ul#navigation>li*2>a ein und drücken Sie Tab, um den Code zu generieren, wie unten gezeigt.
HBuilder hat die Emmet-Funktion integriert, sodass Sie die CSS-Selektor-Syntax verwenden können, um HTML und CSS schnell zu entwickeln. Wenn Sie mehr über Emmet erfahren möchten, besuchen Sie bitte die entsprechende Seite.http://www.emmet.io/
Die leistungsstarke JS-Parsing-Engine beschleunigt die JS-Entwicklung erheblich
JS-Vorschläge für HTML, CSS
JS schlägt HTML-IDs vor
JS schlägt HTML-Tag-Namen vor
JS schlägt CSS-Klassennamen vor
Mit IDs, Tag-Namen und CSS-Klassennamen kann JS nicht nur HTML-Elemente abrufen, sondern auch ihre Elementtypen präzise analysieren und ihre Eigenschaften präzise vorschlagen. Wie oben gezeigt, kann es eine Liste vorschlagen
JS-Vorschläge für JSON
JS schlägt benutzerdefinierte Systemmethoden vor
JS schlägt Objektreferenzen und deren Eigenschaften und Methoden vor
JS schlägt Closure-Objekte vor
Zu Klassen-, ID- und JS-Methodendefinitionen springen
Drücken Sie Alt und klicken Sie mit der linken Maustaste auf einen referenzierten Methodennamen, eine ID, eine CSS-Klasse oder eine Datei (Link, Bild), um zur referenzierten Stelle zu springen. Dateiübergreifende Referenzen werden ebenfalls unterstützt.
Zu JS-Methodendefinition springen, wie unten gezeigt
Zu CSS-Klassendefinition springen, wie unten gezeigt
Zu ID-Definition springen, wie unten gezeigt
Zur Datei springen, wie unten gezeigt
Weitere verborgene Schätze
Jump-Helfer, Auswahl-Helfer, Escape-Helfer, Shortcut-Helfer halten Ihre Hände auf der Tastatur.
HTML5+-Unterstützung, Echtgeräte-Debugging auf Telefonen und Cloud-Kompilierung erleichtern die Entwicklung plattformübergreifender mobiler Apps.
Weitere spannende Funktionen: Refaktorisieren | Gliederung | Aufgaben | Versionsverlauf | Integrierter WebServer | Echtzeit-Upgrade | Sichere Projektverwaltung | Umschließen | Maskenkonvertierung | Intelligente Korrektur | Code-Faltung | Zur Definition springen | Code formatieren | URL-Kodierung/-Dekodierung | Basisumrechnung | Automatisches Schließen.
Noch nicht zufrieden? Laden Sie Plugins herunter, um weitere Funktionen zu erweitern; Experten können sogar Plugins entwickeln und sie teilen, um allen Entwicklern zu nützen.