简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

Entwickeln Sie sich zum Erstellen von Web-Benutzeroberflächen: Teil HTML verstehen

WBOY
Freigeben： 2024-08-16 17:01:43
Original
1200 Leute haben es durchsucht

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.

Develop yourself to build Web UIs: Part Understanding HTML

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

  1. 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.
  2. Compiler: Ein Tool, das in einer Programmiersprache geschriebenen Code in Maschinensprache übersetzt, die ein Computer verstehen und ausführen kann.
  3. 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.
  4. 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.
  5. 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.

  6. 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.
  7. 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 kopieren

  • Tags: 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:

  1. : Declares the document type and version of HTML.
  2. : The root element that encloses all other HTML elements.
  3. : Contains meta-information about the document, such as the title and links to stylesheets.
  4. : Sets the title of the webpage, displayed in the browser's title bar or tab.
  5. : Provides metadata about the HTML document, such as character set, author, and viewport settings. It's a self-closing tag.
  6. : Embeds CSS code to style the HTML elements.
  7. <script></script>: Embeds JavaScript code for adding interactivity to the webpage.
  8. : 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 an unordered (bulleted) list.
      • : Defines an ordered (numbered) list.
      2. : 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:

      1. 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
      1. Save the file with a .html extension (e.g., index.html)
      2. Open the file in your web browser to see your first HTML webpage in action!
      3. To inspect your code, press Ctrl + Shift + C in Google Chrome to open the Developer Tools and explore the DOM structure.
      4. 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.
      Develop yourself to build Web UIs: Part Understanding HTML

      In the response tab, you will find the code that you have written as in the following picture
      Develop yourself to build Web UIs: Part Understanding HTML

      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:

      1. 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
      1. 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!

      Quelle：dev.to
      Vorheriger Artikel：Kurzschlüsse in JavaScript verstehen: Ein Leitfaden für Anfänger Nächster Artikel：So integrieren Sie Chat in eine Flask-App mit API: Eine umfassende Anleitung
      Erklärung dieser Website
      Der 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
      Neueste Artikel des Autors
      Aktuelle Ausgaben
      function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
      Aus 2024-04-29 11:01:01
      0
      2
      1776
      So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
      Aus 2024-04-23 00:22:19
      0
      10
      1919
      Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
      Aus 2024-04-19 15:37:47
      0
      1
      1631
      Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
      Aus 2024-04-18 23:52:34
      0
      1
      1541
      Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
      Aus 2024-04-16 10:10:18
      0
      0
      1578
      verwandte Themen
      Mehr>
      Beliebte Empfehlungen
      Beliebte Tutorials
      Mehr>
      Verwandte Tutorials
      Beliebte Empfehlungen
      Aktuelle Kurse
      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！