适用于初学者的 DevTools:HTML 和 DOM 入门DevTools for beginners: Get started with HTML and the DOM

这是一系列教程中第一个介绍 Web 开发基础知识的教程。This is the first in a series of tutorials that teach you the basics of web development. 了解一组 Web 开发人员工具(名为 Microsoft Edge DevTools)可能会提高工作效率。Learn about a set of web developer tools, named Microsoft Edge DevTools, that may increase your productivity.

在此特定教程中,你将了解 HTML 和 DOM。In this particular tutorial, you learn about HTML and the DOM. HTML 是 Web 开发的核心技术之一。HTML is one of the core technologies of web development. 它是控制网页结构和内容的语言。It is the language that controls the structure and content of webpages. DOM 还与网页的结构和内容相关,稍后将了解相关内容。The DOM is also related to the structure and content of webpages, learn more about that later.

目标Goals

你将通过实际构建自己的网站来学习 Web 开发。You are going to learn web development by actually building your own website. DevTools for Beginners 系列中完成所有教程后,完成的网站可能如下图所示。By the time you complete all of the tutorials in the DevTools for Beginners series, your finished site may look like the following figure.

已完成的网站

在本教程结束时,你应该了解以下主题。By the end of this tutorial, you should understand the following topics.

  • HTML 和 DOM 如何创建网页上显示的内容。How HTML and the DOM create the content that are displayed on webpages.
  • Microsoft Edge DevTools 如何帮助你试验 HTML 和 DOM 更改。How Microsoft Edge DevTools may help you experiment with HTML and DOM changes.
  • HTML 和 DOM 的区别。The difference between HTML and the DOM.

您还有一个真实的网站。You also have a real website. 您可以使用该网站托管简历或博客。You may use the site to host your resume or blog.

必备条件Prerequisites

在尝试本教程之前,请完成以下先决条件:Before attempting this tutorial, complete the following prerequisites:

  • 如果您不熟悉 HTML,请阅读 HTML 入门If you are unfamiliar with HTML, read Getting Started with HTML.
  • 下载 Microsoft Edge Web 浏览器。Download the Microsoft Edge web browser. 本教程使用一组内置于 Microsoft Edge 中的 Web 开发工具(称为 Microsoft Edge DevTools)。This tutorial uses a set of web development tools, called the Microsoft Edge DevTools, that are built into Microsoft Edge.

设置代码Set up your code

你将在名为 Glitch 的联机代码编辑器中生成网站。You are going to build your site in an online code editor called Glitch.

  1. 打开 源代码Open the source code. 此选项卡在本教程 中称为" 编辑器"选项卡。This tab is called the editor tab throughout this tutorial.

    编辑器选项卡

  2. 选择 "启发式"。Choose alluring-shock. 将在左上角打开"项目选项"菜单。The Project Options menu opens in the top-left corner.

    项目选项菜单

  3. 选择 "重新混合项目"。Choose Remix Project. 小故障会创建一个可以编辑的项目副本,并随机为该项目生成一个新名称。Glitch creates a copy of the project that you may edit and randomly generates a new name for the project. 内容与之前相同。The content is the same as before.

    重新混合的项目

  4. 如果你计划完成本系列中的下一个教程,请选择"登录", 然后使用 GitHub 或 Facebook 帐户登录小故障。If you plan on completing the next tutorial in this series, choose Sign In and sign into Glitch with your GitHub or Facebook account. 如果选择不登录帐户,则关闭编辑选项卡后将失去编辑项目的能力。If you choose to not sign into your account, you lose the ability to edit the project after you close the editing tab.

  5. 选择 "显示",然后选择"新建窗口"。Choose Show and choose In a New Window. 将打开一个新选项卡,显示实时页面。A new tab opens, showing you the live page. 此选项卡在本教程 中称为实时 选项卡。This tab is called the live tab throughout this tutorial.

    实时选项卡

添加内容Add content

你的网站相当空。Your site is pretty empty. 按照以下步骤向其中添加一些内容。Follow the steps below to add some content to it.

  1. 编辑器选项卡中,替换为 <!-- 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>
    ...
    ...
    ...
    
  2. 查看动态选项卡 中的更改。 文本 About Me 在页面上可见。View your changes in the live tab. The text About Me is visible on the page. 文本大于周围文本,因为 <h1> 元素表示节标题。The text larger than the surrounding text, because the <h1> element represents a section heading. Web 浏览器自动对字体大小较大的标题进行样式设置。Your web browser automatically styles headings in larger font sizes.

    新标题显示在活动选项卡中

  3. 返回到编辑器 选项卡中,插入下面 <p>I am learning HTML. Recent accomplishments:</p> 您刚刚放在的行 <h1>About Me</h1> 上。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>
    ...
    ...
    ...
    
  4. 查看动态选项卡 中的更改View your change in the live tab.

  5. 返回编辑器 选项卡,添加你的成就列表: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>
    ...
    ...
    ...
    
  6. 同样,返回到实时 选项卡 以确保新内容正确显示。Again, go back to the live tab to make sure that the new content is displaying correctly.

    新列表在活动选项卡中可见

在 Microsoft Edge DevTools 中试验内容更改Experiment with content changes in Microsoft Edge DevTools

如果要开发一个包含大量 HTML 的大页面,那么在编辑器选项卡和动态选项卡之间来回切换数百次以显示更改会有点繁琐,尤其是在不确定该页面上具体要放入哪些内容时。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 可帮助你试验内容更改,而无需离开实时 选项卡Microsoft Edge DevTools helps you experiment with content changes without ever leaving the live tab.

了解 HTML 和 DOM 的区别Learn the difference between HTML and the DOM

在开始从 Microsoft Edge DevTools 编辑内容之前,您应了解 HTML 和 DOM 的区别。Before you start editing your content from Microsoft Edge DevTools, you should understand the difference between HTML and the DOM. 学习最好的方法就是通过示例:The best way to learn is by example:

  1. 导航到 活动选项卡。 在页面底部显示 A new element!?! 文本。Navigate to the live tab. At the bottom of your page, the text A new element!?! is displayed.

    在页面底部,文本 A 新元素!?! 显示

  2. 返回到编辑器 选项卡, 并尝试在 中查找文本 index.htmlGo back to the editor tab and try to find the text in index.html. 文本不存在。The text is not there.

    格式文本 A 新元素!?! 在 index.html 中index.htm

  3. 返回到实时选项卡,悬停在 A new element!?! 上,打开上下文菜单 (右键单击) ,然后选择"检查 "。Go back to the live tab, hover on A new element!?!, open the contextual menu (right-click), and choose Inspect.

    检查某些文本

    DevTools 将随页面一起打开。DevTools opens up alongside your page. <div>A new element!?!</div> 突出显示为蓝色。is highlighted blue. 尽管 DevTools 中的此结构看起来像你的 HTML,但它实际上是 DOM 树Although this structure in DevTools looks like your HTML, it is actually the DOM Tree.

    DevTools 与页面一起打开

加载页面时,浏览器会采用 HTML 来创建 页面 的初始内容。When your page loads, the browser takes your HTML to create the initial content of the page. DOM 表示 页面的当前 内容,可能会随着时间的推移而更改。The DOM represents the current content of the page, which may change over time. 由于 HTML 底部的标记,这一神奇内容将添加到 <div>A new element!?!</div> <script src="new.js"></script> 页面。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. 此标记会导致某些 JavaScript 代码运行。This tag causes some JavaScript code to run. 在稍后的教程中了解有关 JavaScript 的信息,但现在认为它是可能会更改页面内容的编程语言。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. 在此特定情况下,JavaScript 代码 <div>A new element!?!</div> 将添加到页面。In this particular case, JavaScript code adds <div>A new element!?!</div> to your page. 这就是为什么此神奇文本在实时页面上可见,但在 HTML 中不可见的原因。That is why this mystery text is visible on your live page, but not in your HTML.

编辑 DOMEdit the DOM

如果你想要在不离开实时选项卡的情况下快速试验内容更改,请尝试使用 DevTools。If you want to quickly experiment with content changes without ever leaving the live tab, try DevTools.

  1. 在 DevTools 中,悬停在上,打开上下文菜单 Your site! (右键单击) ,然后选择"编辑为 HTML"。In DevTools, hover on Your site!, open the contextual menu (right-click), and choose Edit as HTML.

    将节点编辑为 HTML

  2. 替换为 <p>Your site!</p> 下面的代码。Replace <p>Your site!</p> with the code below.

    ...
    ...
    ...
    <header>
    <p><b>Welcome to my site!</b></p>
    <button>Download my resume</button>
    </header>
    ...
    ...
    ...
    
  3. 选择 Control + Enter (Windows、Linux) 或 Command + Enter (macOS) 保存更改,或在框外选择。Select Control+Enter (Windows, Linux) or Command+Enter (macOS) to save your changes, or choose outside of the box. 你的更改会自动显示在页面实时视图中。Your changes automatically show up in the live view of your page. 文本 Your site! 已替换为新内容。The text Your site! has been replaced with the new content.

    新内容会立即显示在页面上

此工作流仅适用于试验内容更改。This workflow is only good for experimenting with content changes. 如果刷新页面或关闭选项卡,更改将永久消失。If you refresh the page or close the tab, your changes are gone forever. 如果使用此工作流并且想要保存更改,则需要手动将这些更改复制到 HTML 中。If you're using this workflow and you want to save your changes, you need to manually copy those changes over to your HTML. 接下来的几节将介绍一些从 DOM 树更改内容的其他方法。The next couple of sections show you some more ways that you may change content from the DOM Tree.

对节点重新排序Reorder nodes

您还可以更改 DOM 节点的顺序。You may also change the order of DOM nodes. 例如,在网页上,导航菜单靠近底部。For example, on your web page the navigation menu is near the bottom. 若要将其移动到顶部:To move it to the top:

  1. <nav> DevTools 的 DOM 树 中查找节点。Find the <nav> node in the DOM Tree of DevTools.

    导航节点在 DevTools 中突出显示为蓝色

  2. <nav> 节点拖动到顶部,以便节点是节点的第一个 <body> 子节点。Drag the <nav> node to the top, so that the node is the first child of the <body> node.

    <nav>节点现在显示在页面顶部。The <nav> node is now displaying at the top of your page.

    导航节点位于页面顶部

:::row-end:::

删除节点Delete a node

您还可以从 DOM 树中删除节点。You may also remove nodes from the DOM Tree.

  1. DOM 树中,选择 <div>A new element!?!</div>In the DOM Tree, choose <div>A new element!?!</div>. DevTools 突出显示节点蓝色。DevTools highlights the node blue.

    选择要删除的节点

  2. 选择 Delete 键盘上的键。Select the Delete key on your keyboard. 将从 <div>A new element!?!</div> DOM 树中删除节点。The <div>A new element!?!</div> node is removed from your DOM Tree.

    节点已删除

复制更改Copy your changes

你几乎已完成。You're almost done. 你已对 DevTools 中的页面进行了一些更改,但尚未保存到源代码中。You've made a few changes to your page in DevTools, but they're not yet saved to your source code.

  1. 刷新你的 实时选项卡。 在 DOM 树中所做的更改将消失。Refresh your live tab. The changes that you made in the DOM Tree disappear. 特别是,文本返回到页面顶部,文本 Your site! A new element!?! 返回底部。In particular, the text Your site! returns to the top of the page, and the text A new element!?! returns to the bottom.

    你所做的更改已消失

  2. 复制下面的代码。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. 返回到编辑器 选项卡 ,将文件内容 index.html 替换为刚复制的代码。Go back to the editor tab and replace the contents of your index.html file with the code that you just copied.

    index.html 文件的外观

后续步骤Next steps

  • 完成本系列中的下一个教程 "CSS入门",了解如何设置页面样式,以及如何在 Microsoft Edge DevTools 中试验样式更改。Complete the next tutorial in this series, Get Started with CSS, to learn how to style your page and experiment with style changes in Microsoft Edge DevTools.
  • 阅读 DOM 简介 ,详细了解 DOM。Read Introduction to the DOM to learn more about the DOM.
  • 查看 Web 开发 简介等 课程,获取更多动手 Web 开发体验。Check out a course like Introduction to Web Development to get more hands-on web development experience.

联系 Microsoft Edge 开发工具团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。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.
原始页面位于 此处, 由一名技术编写器 (Chrome DevTools) 。The original page is found here and is authored by Katherine Jackson (Technical Writer Intern, Chrome DevTools).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.