DevTools für Anfänger: Erste Schritte mit HTML und dem DOMDevTools for beginners: Get started with HTML and the DOM

  • 8 Minuten Lesedauer

Dies ist das erste in einer Reihe von Lernprogrammen, die Ihnen die Grundlagen der Webentwicklung vermitteln.This is the first in a series of tutorials that teach you the basics of web development. Erfahren Sie mehr über eine Reihe von Webentwicklertools namens Microsoft Edge DevTools, die Ihre Produktivität erhöhen können.Learn about a set of web developer tools, named Microsoft Edge DevTools, that may increase your productivity.

In diesem bestimmten Lernprogramm erfahren Sie mehr über HTML und das DOM.In this particular tutorial, you learn about HTML and the DOM. HTML ist eine der Kerntechnologien der Webentwicklung.HTML is one of the core technologies of web development. Es ist die Sprache, die die Struktur und den Inhalt von Webseiten steuert.It is the language that controls the structure and content of webpages. Das DOM steht auch im Zusammenhang mit der Struktur und dem Inhalt von Webseiten, erfahren Sie später mehr darüber.The DOM is also related to the structure and content of webpages, learn more about that later.

ZieleGoals

Sie lernen die Webentwicklung, indem Sie ihre eigene Website erstellen.You are going to learn web development by actually building your own website. Wenn Sie alle Lernprogramme in der DevTools for Beginners-Reihe abschließen, sieht Ihre fertige Website möglicherweise wie die folgende Abbildung aus.By the time you complete all of the tutorials in the DevTools for Beginners series, your finished site may look like the following figure.

Die fertige Website

Am Ende dieses Lernprogramms sollten Sie die folgenden Themen verstehen.By the end of this tutorial, you should understand the following topics.

  • Wie HTML und das DOM die Inhalte erstellen, die auf Webseiten angezeigt werden.How HTML and the DOM create the content that are displayed on webpages.
  • Wie Microsoft Edge DevTools Ihnen beim Experimentieren mit HTML- und DOM-Änderungen helfen kann.How Microsoft Edge DevTools may help you experiment with HTML and DOM changes.
  • Der Unterschied zwischen HTML und dem DOM.The difference between HTML and the DOM.

Sie haben auch eine echte Website.You also have a real website. Sie können die Website verwenden, um Ihren Lebenslauf oder Blog zu hosten.You may use the site to host your resume or blog.

VoraussetzungenPrerequisites

Bevor Sie dieses Lernprogramm versuchen, müssen Sie die folgenden Voraussetzungen erfüllen:Before attempting this tutorial, complete the following prerequisites:

  • Wenn Sie mit HTML nicht vertraut sind, lesen Sie Erste Schritte mit HTML.If you are unfamiliar with HTML, read Getting Started with HTML.
  • Laden Sie den Microsoft Edge-Webbrowser herunter.Download the Microsoft Edge web browser. Dieses Lernprogramm verwendet eine Reihe von Webentwicklungstools, die als Microsoft Edge DevTools bezeichnet werden, die in Microsoft Edge integrierte sind.This tutorial uses a set of web development tools, called the Microsoft Edge DevTools, that are built into Microsoft Edge.

Einrichten des CodesSet up your code

Sie erstellen Ihre Website in einem Onlinecode-Editor namens Glitch.You are going to build your site in an online code editor called Glitch.

  1. Öffnen Sie den Quellcode.Open the source code. Diese Registerkarte wird in diesem Lernprogramm als Editorregisterkarte bezeichnet.This tab is called the editor tab throughout this tutorial.

    Die Registerkarte Editor

  2. Wählen Sie alluring-shockaus.Choose alluring-shock. Das Menü Projektoptionen wird in der oberen linken Ecke geöffnet.The Project Options menu opens in the top-left corner.

    Das Menü Projektoptionen

  3. Wählen Sie #A0 aus.Choose Remix Project. Glitch erstellt eine Kopie des Projekts, die Sie bearbeiten können, und generiert nach dem Zufallsprinzip einen neuen Namen für das Projekt.Glitch creates a copy of the project that you may edit and randomly generates a new name for the project. Der Inhalt ist der gleiche wie zuvor.The content is the same as before.

    Das gemixte Projekt

  4. Wenn Sie planen, das nächste Lernprogramm in dieser Reihe zu beenden, wählen Sie Anmelden aus, und melden Sie sich mit Ihrem GitHub- oder Facebook-Konto bei Glitch an.If you plan on completing the next tutorial in this series, choose Sign In and sign into Glitch with your GitHub or Facebook account. Wenn Sie sich nicht bei Ihrem Konto anmelden, verlieren Sie die Möglichkeit, das Projekt zu bearbeiten, nachdem Sie die Bearbeitungsregisterkarte geschlossen haben.If you choose to not sign into your account, you lose the ability to edit the project after you close the editing tab.

  5. Wählen Sie Anzeigen aus, und wählen Sie In einem neuen Fenster aus.Choose Show and choose In a New Window. Eine neue Registerkarte wird geöffnet, auf der die Liveseite angezeigt wird.A new tab opens, showing you the live page. Diese Registerkarte wird in diesem Lernprogramm als Liveregisterkarte bezeichnet.This tab is called the live tab throughout this tutorial.

    Die Registerkarte Live

Hinzufügen von InhaltenAdd content

Ihre Website ist ziemlich leer.Your site is pretty empty. Führen Sie die folgenden Schritte aus, um einige Inhalte hinzuzufügen.Follow the steps below to add some content to it.

  1. Ersetzen Sie auf der Registerkarte Editordurch <!-- You're "About Me" will go here. --> <h1>About Me</h1> .In the editor tab, replace <!-- You're "About Me" will go here. --> with <h1>About Me</h1>.

    ...
...
<body>
<p> Your site!</p>
<main>
<h1>About Me</h1>
</main>
...
...
...

    Der neue Code wird auf der Registerkarte Editor hervorgehoben.

  2. Zeigen Sie Ihre Änderungen auf der Registerkarte Live an. Der Text About Me ist auf der Seite sichtbar.View your changes in the live tab. The text About Me is visible on the page. Der Text, der größer als der umgebende Text ist, da <h1> das Element eine Abschnittsüberschrift darstellt.The text larger than the surrounding text, because the <h1> element represents a section heading. In Ihrem Webbrowser werden Überschriften automatisch in größeren Schriftgraden formatiert.Your web browser automatically styles headings in larger font sizes.

    Die neue Überschrift wird auf der Registerkarte Live angezeigt.

  3. Fügen Sie zurück auf der Registerkarte Editordie Zeile unten ein, in der Sie gerade eingefügt <p>I am learning HTML. Recent accomplishments:</p> <h1>About Me</h1> haben.Back in the editor tab, insert <p>I am learning HTML. Recent accomplishments:</p> on the line below where you just put <h1>About Me</h1>.

    ...
...
<body>
<p> Your site!</p>
<main>
<h1>About Me</h1>
<p>I am learning web development.  Recent accomplishments:</p>
</main>
...
...
...

    Der aktualisierte Code wird auf der Registerkarte Editor hervorgehoben.

  4. Zeigen Sie Ihre Änderung auf der Registerkarte Live an.View your change in the live tab.

  5. Fügen Sie auf der Registerkarte Editoreine Liste Ihrer Erfolge hinzu:Back in the editor tab, add a list of your accomplishments:

    ...
...
...
<p>I am learning web development.  Recent accomplishments:</p>
<ul>
<li>Learned how to set up my code in Glitch.</li>
<li>Added content to my HTML.</li>
<li>TODO: Learn how to use Microsoft Edge DevTools to experiment with content changes.</li>
<li>TODO: Learn the difference between HTML and the DOM.</li>
</ul>
...
...
...

    Der aktualisierte Code wird auch auf der Registerkarte Editor hervorgehoben.

  6. Wechseln Sie erneut zur Registerkarte Live, um sicherzustellen, dass der neue Inhalt ordnungsgemäß angezeigt wird.Again, go back to the live tab to make sure that the new content is displaying correctly.

    Die neue Liste wird auf der Registerkarte Live angezeigt.

Experimentieren mit Inhaltsänderungen in Microsoft Edge DevToolsExperiment with content changes in Microsoft Edge DevTools

Wenn Sie eine große Seite mit viel HTML entwickelt haben, ist es etwas mühsam, hunderte Male zwischen der Editorregisterkarte und der Liveregisterkarte hin- und her zu wechseln, um Ihre Änderungen anzeigen zu können, insbesondere wenn Sie nicht sicher sind, was genau auf der Seite angezeigt werden soll.If you were developing a big page with a lot of HTML, it is somewhat tedious to go back-and-forth between the editor tab and the live tab hundreds of times in order to display your changes, especially if you are unsure what exactly to put on the page. Microsoft Edge DevTools hilft Ihnen, mit Inhaltsänderungen zu experimentieren, ohne die Liveregisterkarte zu verlassen.Microsoft Edge DevTools helps you experiment with content changes without ever leaving the live tab.

Erfahren Sie mehr über den Unterschied zwischen HTML und dem DOMLearn the difference between HTML and the DOM

Bevor Sie mit der Bearbeitung Ihrer Inhalte von Microsoft Edge DevTools beginnen, sollten Sie den Unterschied zwischen HTML und dem DOM verstehen.Before you start editing your content from Microsoft Edge DevTools, you should understand the difference between HTML and the DOM. Die beste Methode, um zu lernen, ist ein Beispiel:The best way to learn is by example:

  1. Navigieren Sie zur Registerkarte Live. Am unteren Rand der Seite wird der A new element!?! Text angezeigt.Navigate to the live tab. At the bottom of your page, the text A new element!?! is displayed.

    Am unteren Rand der Seite der Text Ein neues Element!?! wird angezeigt

  2. Wechseln Sie zurück zur Registerkarte Editor, und versuchen Sie, den Text in zu index.html finden.Go back to the editor tab and try to find the text in index.html. Der Text ist nicht enthalten.The text is not there.

    Der Geheimnistext Ein neues Element!?! ist nirgends in index.html

  3. Wechseln Sie zurück zur Registerkarte Live, zeigen Sie auf , öffnen Sie das kontextbezogene Menü (mit der rechten Maustaste A new element!?! auf), und wählen Sie Überprüfenaus.Go back to the live tab, hover on A new element!?!, open the contextual menu (right-click), and choose Inspect.

    Überprüfen von Text

    DevTools wird neben Ihrer Seite geöffnet.DevTools opens up alongside your page. <div>A new element!?!</div> ist blau hervorgehoben.is highlighted blue. Obwohl diese Struktur in DevTools wie Ihr HTML aussieht, handelt es sich tatsächlich um die DOM-Struktur.Although this structure in DevTools looks like your HTML, it is actually the DOM Tree.

    DevTools ist neben der Seite geöffnet

Wenn Ihre Seite geladen wird, verwendet der Browser Ihre HTML, um den anfänglichen Inhalt der Seite zu erstellen.When your page loads, the browser takes your HTML to create the initial content of the page. Das DOM stellt den aktuellen Inhalt der Seite dar, der sich im Laufe der Zeit ändern kann.The DOM represents the current content of the page, which may change over time. Der rätselhafte Inhalt wird Ihrer Seite aufgrund des Tags am unteren <div>A new element!?!</div> <script src="new.js"></script> Rand Ihres HTML hinzugefügt.The mysterious <div>A new element!?!</div> content is added to your page because of the <script src="new.js"></script> tag at the bottom of your HTML. Dieses Tag bewirkt, dass javaScript-Code ausgeführt wird.This tag causes some JavaScript code to run. Erfahren Sie mehr über JavaScript in einem späteren Lernprogramm, sehen Sie es aber vorerst als Programmiersprache an, die den Inhalt Ihrer Seite ändern kann.Learn more about JavaScript in a later tutorial, but for now think of it as a programming language that may change the content of your page. In diesem speziellen Fall wird Der JavaScript-Code <div>A new element!?!</div> zu Ihrer Seite hinzufügt.In this particular case, JavaScript code adds <div>A new element!?!</div> to your page. Aus diesem Grund ist dieser Mysterientext auf Ihrer Liveseite sichtbar, aber nicht in Ihrem HTML.That is why this mystery text is visible on your live page, but not in your HTML.

Bearbeiten des DOMEdit the DOM

Wenn Sie schnell mit Inhaltsänderungen experimentieren möchten, ohne die Liveregisterkarte zu verlassen, versuchen Sie DevTools.If you want to quickly experiment with content changes without ever leaving the live tab, try DevTools.

  1. Zeigen Sie in DevTools auf , öffnen Sie das Kontextmenü (klicken Sie mit der rechten Your site! Maustaste), und wählen Sie Bearbeiten als HTML aus.In DevTools, hover on Your site!, open the contextual menu (right-click), and choose Edit as HTML.

    Bearbeiten des Knotens als HTML

  2. Ersetzen <p>Your site!</p> Sie durch den folgenden Code.Replace <p>Your site!</p> with the code below.

    ...
...
...
<header>
<p><b>Welcome to my site!</b></p>
<button>Download my resume</button>
</header>
...
...
...

    Aktualisieren des Knotens als HTML

  3. Wählen Control + Enter Sie (Windows, Linux) oder Command + Enter (macOS) aus, um Ihre Änderungen zu speichern, oder wählen Sie außerhalb des Felds aus.Select Control+Enter (Windows, Linux) or Command+Enter (macOS) to save your changes, or choose outside of the box. Ihre Änderungen werden automatisch in der Liveansicht Ihrer Seite angezeigt.Your changes automatically show up in the live view of your page. Der Text Your site! wurde durch den neuen Inhalt ersetzt.The text Your site! has been replaced with the new content.

    Der neue Inhalt wird sofort auf der Seite angezeigt

Dieser Workflow ist nur für das Experimentieren mit Inhaltsänderungen gut.This workflow is only good for experimenting with content changes. Wenn Sie die Seite aktualisieren oder die Registerkarte schließen, sind Ihre Änderungen für immer weg.If you refresh the page or close the tab, your changes are gone forever. Wenn Sie diesen Workflow verwenden und Ihre Änderungen speichern möchten, müssen Sie diese Änderungen manuell in Ihren HTML-Code kopieren.If you're using this workflow and you want to save your changes, you need to manually copy those changes over to your HTML. In den nächsten Abschnitten werden einige weitere Möglichkeiten zum Ändern von Inhalten aus der DOM-Struktur gezeigt.The next couple of sections show you some more ways that you may change content from the DOM Tree.

Neu anordnen von KnotenReorder nodes

Sie können auch die Reihenfolge der DOM-Knoten ändern.You may also change the order of DOM nodes. Beispielsweise befindet sich das Navigationsmenü auf Ihrer Webseite in der Nähe des unteren Rands.For example, on your web page the navigation menu is near the bottom. So verschieben Sie ihn nach oben:To move it to the top:

  1. Suchen Sie <nav> den Knoten in der DOM-Struktur von DevTools.Find the <nav> node in the DOM Tree of DevTools.

    Der Navigationsknoten ist in DevTools blau hervorgehoben.

  2. Ziehen Sie <nav> den Knoten nach oben, sodass der Knoten das erste untergeordnete Objekt des <body> Knotens ist.Drag the <nav> node to the top, so that the node is the first child of the <body> node.

    Ziehen des Navigationsknotens nach oben

    Der <nav> Knoten wird nun oben auf Der Seite angezeigt.The <nav> node is now displaying at the top of your page.

    Der Navigationsknoten befindet sich am oberen Rand der Seite.

:::row-end:::

Löschen eines KnotensDelete a node

Sie können auch Knoten aus der DOM-Struktur entfernen.You may also remove nodes from the DOM Tree.

  1. Wählen Sie in der DOM-Strukturdie Option <div>A new element!?!</div> aus.In the DOM Tree, choose <div>A new element!?!</div>. DevTools hebt den Knoten blau hervor.DevTools highlights the node blue.

    Auswählen des zu löschende Knotens

  2. Wählen Sie Delete die Taste auf der Tastatur aus.Select the Delete key on your keyboard. Der <div>A new element!?!</div> Knoten wird aus der DOM-Struktur entfernt.The <div>A new element!?!</div> node is removed from your DOM Tree.

    Der Knoten wurde gelöscht

Kopieren Der ÄnderungenCopy your changes

Sie sind fast fertig.You're almost done. Sie haben einige Änderungen an Ihrer Seite in DevTools vorgenommen, aber sie werden noch nicht im Quellcode gespeichert.You've made a few changes to your page in DevTools, but they're not yet saved to your source code.

  1. Aktualisieren Sie Ihre Live-Registerkarte. Die Änderungen, die Sie in der DOM-Struktur vorgenommen haben, verschwinden.Refresh your live tab. The changes that you made in the DOM Tree disappear. Insbesondere wird der Text am oberen Rand der Seite Your site! zurückgegeben, und der Text A new element!?! kehrt nach unten zurück.In particular, the text Your site! returns to the top of the page, and the text A new element!?! returns to the bottom.

    Die von Ihnen vorgenommenen Änderungen sind nicht mehr

  2. Kopieren Sie den folgenden Code.Copy the code below.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <header>
            <p>Welcome to my site!</p>
        </header>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/contact.html">Contact</a></li>
            </ul>
        </nav>
        <main>
            <h1>About Me</h1>
            <p>I am learning web development.  Recent accomplishments:</p>
            <ul>
                <li>Learned how to set up my code in Glitch.</li>
                <li>Added content to my HTML.</li>
                <li>Learned how to use Microsoft Edge DevTools to experiment with content changes.</li>
                <li>Learned the difference between HTML and the DOM.</li>
            </ul>
        </main>
    </body>
</html>

  3. Wechseln Sie zurück zur Registerkarte Editor, und ersetzen Sie den Inhalt Ihrer Datei durch den index.html Code, den Sie gerade kopiert haben.Go back to the editor tab and replace the contents of your index.html file with the code that you just copied.

    So sollte ihre index.html aussehen

Nächste SchritteNext steps

Mit dem Microsoft Edge-Entwicklungstools-Team Kontakt aufnehmenGetting in touch with the Microsoft Edge DevTools team

Verwenden Sie die folgenden Optionen, um die neuen Features und Änderungen im Beitrag, oder andere Themen, die mit Entwicklungstools zu tun hat, zu diskutieren.Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Senden Sie Ihr Feedback über das Symbol Feedback senden, oder wählen Sie Alt+Shift+I (Windows, Linux) oder Option+Shift+I (macOS) in Entwicklungstools aus.Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet auf @EdgeDevTools.Tweet at @EdgeDevTools.
  • Senden Sie einen Vorschlag an The Web We Want.Submit a suggestion to The Web We Want.
  • Verwenden Sie den folgenden Feedback-Abschnitt, um Fehler in diesem Artikel zu melden.To file bugs about this article, use the following Feedback section.

Das Symbol „Feedback senden“ in den Microsoft Edge-Entwicklungstools

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden.Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
Die ursprüngliche Seite befindet sich hier und wird von Katherine Jackson (Technical Writer Intern, Chrome DevTools) verfasst.The original page is found here and is authored by Katherine Jackson (Technical Writer Intern, Chrome DevTools).

Creative Commons License
Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.This work is licensed under a Creative Commons Attribution 4.0 International License.