Web-Frontend
js-Tutorial
Entwickeln Sie sich zum Erstellen von Web-Benutzeroberflächen: Teil HTML verstehen
Entwickeln Sie sich zum Erstellen von Web-Benutzeroberflächen: Teil HTML verstehen
Webentwicklung ist heute eine der gefragtesten Fähigkeiten. Dabei geht es darum, benutzerfreundliche und ansprechende Websites zu erstellen, die über einen Browser aufgerufen werden können. Der erste Schritt auf dem Weg zum Webentwickler besteht darin, HTML zu verstehen.
HTML (Hyper Text Markup Language) ist das Rückgrat jeder Webseite. Dabei handelt es sich um die Standardsprache zur Strukturierung einer Webseite, die bestimmt, wie Inhalte im Browser angezeigt werden. Während das Erscheinungsbild einer Seite durch CSS (Cascading Style Sheets) und ihre Funktionalität durch JS (Javascript) bestimmt wird, HTML ist für das Grundgerüst oder die Grundstruktur verantwortlich.
Bevor Sie in diesen Teil des Kurses eintauchen, ist es wichtig, bekannte und wiederkehrende Fachbegriffe zu verstehen, die auf Ihrer Reise verwendet werden. Diese werden Ihnen im weiteren Verlauf helfen, die Konzepte zu verstehen (und es dem Autor auch leichter machen, Dinge zu erklären ;-) ).
Die Jargons verstehen
- Programmiersprache: Eine Reihe von Anweisungen, die in einer bestimmten Syntax (Art einer Programmiersprache) geschrieben sind und die ein Computer ausführen kann. Denken Sie daran, dass der Computer nur Binärcode (entweder 1 oder 0) versteht. Damit der Computer die Logik versteht und auch einen Kompromiss findet, haben wir (Menschen) eine Programmiersprache erstellt, die einfach zu bedienen ist uns zum Codieren und auch für den Computer, um es zu verstehen.
- Compiler: Ein Tool, das in einer Programmiersprache geschriebenen Code in Maschinensprache übersetzt, die ein Computer verstehen und ausführen kann.
- Syntax: Die Regeln, die die Struktur einer Programmiersprache definieren. Betrachten Sie es als die Art und Weise, wie Wörter in einem Satz so angeordnet werden, dass sie einen Sinn ergeben.
- Kommentare: Hinweise im Code, die erklären, was bestimmte Teile des Codes bewirken. Kommentare helfen anderen Entwicklern (oder Ihrem zukünftigen Ich), die Logik hinter Ihrem Code zu verstehen.
-
DOM (Document Object Model): Das DOM ist eine baumartige Darstellung des HTML-Dokuments. Jedes Tag in Ihrem HTML wird zu einem Knoten in diesem Baum. Wenn Ihr HTML beispielsweise einen Tag mit einem
(Absatz) darin erstellt der Browser einen Körperknoten mit einem Absatzknoten als untergeordnetem Knoten.
-
Kinder: Sie werden dies im Laufe der Zeit verstehen. Elemente, die in einem anderen Element verschachtelt sind. Beispielsweise würde in HTML ein Absatz-Tag (
) innerhalb eines div-Tags (
) als untergeordnetes Element des div betrachtet.- Element auf Blockebene: Im Laufe Ihres Fortschritts werden Sie mit diesem Jargon vertraut gemacht. Dieser Begriff beschreibt normalerweise die Eigenschaft des Elements, dass es die volle verfügbare Breite einnimmt.
Mit HTML loslegen
HTML steht für Hyper Text Markup Language
Hypertext: Bezieht sich auf die Fähigkeit von HTML, verschiedene Dokumente miteinander zu verknüpfen.
Auszeichnungssprache: Verwendet Tags, um Text mit Anmerkungen zu versehen und zu definieren, wie er in einem Browser angezeigt werden soll.
Hier ist die Grundstruktur eines HTML-Dokuments:
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <p>Hello, world!</p> </body> </html>Nach dem Login kopierenTags: In HTML werden Tags verwendet, um Elemente zu definieren. Tags werden in spitze Klammern eingeschlossen, z. B. oder
.
Elemente: Bestehen aus einem öffnenden Tag und einem schließenden Tag, die Inhalte enthalten können. Zum Beispiel
Hallo Welt!
ist ein Absatzelement.
HTML-Dokumentstruktur
Jedes HTML-Dokument folgt einer Grundstruktur:
- : Declares the document type and version of HTML.
- : The root element that encloses all other HTML elements.
- : Contains meta-information about the document, such as the title and links to stylesheets.
-
: Sets the title of the webpage, displayed in the browser's title bar or tab. - : Provides metadata about the HTML document, such as character set, author, and viewport settings. It's a self-closing tag.
- : Embeds CSS code to style the HTML elements.
- <script></script>: Embeds JavaScript code for adding interactivity to the webpage.
- : Encloses the content that will be visible to users on the webpage.
Commonly Used HTML Elements
Here are some basic HTML elements you’ll use frequently:
- : Defines a paragraph.
- : A block-level element used to group other elements together.
- : An inline element used to group text for styling purposes.
-
: Represents the introductory content or navigational links of a section. -
to : Headings, with
being the highest level and
the lowest.
-
: Inserts a line break (self-closing tag — meaning there is no need to close the tag). - : Used to create an HTML form for user input.
- : Creates an input field, typically used within a form.
- : Creates a dropdown list.
- : Associates a text label with a form element.
-
: Defines a table.
-
: Defines a row in a table. -
: Defines a cell in a table row. -
: Defines a header cell in a table row. -
-
- : Defines a list item.
Creating Your First HTML File
To create an HTML file, you can use any text editor, such as Notepad or VS Code. Here’s a simple example:
- Open your text editor and type the following code:
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <h1>Example Number 1</h1> <p>Hello, world!</p> </body> </html>
Nach dem Login kopieren- Save the file with a .html extension (e.g., index.html)
- Open the file in your web browser to see your first HTML webpage in action!
- To inspect your code, press Ctrl + Shift + C in Google Chrome to open the Developer Tools and explore the DOM structure.
- Go to the network tab in the Developer Tools and refresh your browser tab.
You can find that there is a request in the name that you have saved as in this picture.
In the response tab, you will find the code that you have written as in the following picture
Now, what happened is that, once you opened the file you have saved as html, the computer began running the file in browser. The browser wanted something to show, so it made a request call to the file from which it was launched. The file gave the browser your code and that was found in the response section. Since it was a html file, the browser begins reading the HTML code from the top to the bottom. This process is known as parsing. During parsing, the browser encounters different HTML tags (like ,
, , etc.) and starts to build a structure called DOM based on these tags. As the browser builds the DOM, it simultaneously renders the content on your screen.
Creating a Table
Let’s take a step further by creating a simple table in HTML:
- Open the same HTML file and add the following code inside the tag:
<p>Table Example</p> <table> <tr> <th>Name</th> <th>Power</th> <th>Is Kurama Present</th> </tr> <tr> <td>Naruto</td> <td>Rasengan</td> <td>Yes</td> </tr> <tr> <td>Sasuke</td> <td>Sharingan</td> <td>No</td> </tr> </table>Nach dem Login kopieren- Save the file and refresh your browser to see the table displayed.
Notice the heading is being rendered by paragraph tag. Alternatively, you can also use
tag, which will center the heading of the table. Experiment with the caption tag and refresh to see the changes. Note that
tag should only be used immediately after the opening tag.
You’ve now successfully created a basic table in HTML. Feel free to experiment with additional rows and columns to get more comfortable with HTML syntax.
Conclusion
Congratulations on completing your first steps into web development with HTML! The key to mastering HTML is practice. Experiment with different elements, create your own webpages, and don’t be afraid to make mistakes — every error is a learning opportunity.
Remember, this is just the beginning. As you continue to build on this foundation, you’ll soon be able to create more complex and dynamic websites. Let’s make the web a better place, one line of code at a time.
Dieser Artikel wurde von Anantha Krishnan verfasst, einer Expertin mit Erfahrung in IT und Maschinenbau. Mit einem Hintergrund in der Full-Stack-Entwicklung und einer Leidenschaft für mechanische und elektrische Systeme konzentriert sich Anantha Krishnan nun auf die Erstellung von Bildungsinhalten, um Anfängern in seinen Fachgebieten zu helfen.
Das obige ist der detaillierte Inhalt vonEntwickeln Sie sich zum Erstellen von Web-Benutzeroberflächen: Teil HTML verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Erklärung dieser WebsiteDer Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
<🎜>: Wachsen Sie einen Garten - Komplette Mutationsführer3 Wochen vor By DDDWie kann ich KB5055612 in Windows 10 nicht installieren?3 Wochen vor By DDD<🎜>: Bubble Gum Simulator Infinity - So erhalten und verwenden Sie Royal Keys3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌Mandragora: Flüstern des Hexenbaum3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌Nordhold: Fusionssystem, erklärt3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Java-Tutorial
1667
14
CakePHP-Tutorial
1426
52
Laravel-Tutorial
1328
25
PHP-Tutorial
1273
29
C#-Tutorial
1255
24
See all articles
JavaScript -Engines: Implementierungen vergleichen
Apr 13, 2025 am 12:05 AM
Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.
Python vs. JavaScript: Die Lernkurve und Benutzerfreundlichkeit
Apr 16, 2025 am 12:12 AM
Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.
Von C/C nach JavaScript: Wie alles funktioniert
Apr 14, 2025 am 12:05 AM
Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.
JavaScript und das Web: Kernfunktionalität und Anwendungsfälle
Apr 18, 2025 am 12:19 AM
Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.
JavaScript in Aktion: Beispiele und Projekte in realer Welt
Apr 19, 2025 am 12:13 AM
Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.
Verständnis der JavaScript -Engine: Implementierungsdetails
Apr 17, 2025 am 12:05 AM
Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.
Python gegen JavaScript: Community, Bibliotheken und Ressourcen
Apr 15, 2025 am 12:16 AM
Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.
Python vs. JavaScript: Entwicklungsumgebungen und Tools
Apr 26, 2025 am 12:09 AM
Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.
