发布于 由forky99

Chrome DevTools for Beginners：开始使用HTML和DOM

凯瑟琳杰克逊
由 凯瑟琳· 杰克逊
技术作家实习生，Chrome DevTools

这是一系列教程中的第一篇，它们将教您Web开发的基础知识。您还将了解一组名为Chrome DevTools的Web开发人员工具，可以提高您的工作效率。

在这个特定的教程中，您将了解HTML和DOM。HTML是Web开发的核心技术之一。它是控制网页结构和内容的语言。DOM也与网页的结构和内容有关，但您稍后会对此有所了解。

目标

您将通过实际构建自己的网站来学习Web开发。当您完成DevTools for Beginners系列中的所有教程时，您完成的站点将如图1所示。

完成的网站。
图1。完成的网站

在本教程结束时，您将了解：

  • HTML和DOM如何创建您在网页上看到的内容。
  • Chrome DevTools如何帮助您尝试HTML和DOM更改。
  • HTML和DOM之间的区别。

你还有一个真正的网站！您可以使用此站点来托管您的简历或博客。

先决条件

在尝试本教程之前，请完成以下先决条件：

  • 如果您不熟悉HTML，请阅读HTML 入门。
  • 下载Google Chrome网络浏览器。本教程使用一组内置于Google Chrome中的Web开发工具，称为Chrome DevTools。

设置你的代码

您将在名为Glitch的在线代码编辑器中构建您的站点。

  1. 打开源代码。在本教程中，此选项卡将被称为编辑器选项卡。
    编辑器选项卡。
    图2。编辑器选项卡
  2. 单击dfb1。“项目选项”菜单将在左上角打开。
    “项目选项”菜单。
    图3。“项目选项”菜单
  3. 单击“重新混音”。Glitch会创建项目的副本，您可以编辑该项目并随机为项目生成新名称。内容与以前相同。
    重新混合的项目。
    图4。重新混合的项目
  4. 如果您打算完成本系列的下一个教程，请单击“ 登录”并使用您的GitHub或Facebook帐户登录Glitch。如果您未登录，则在关闭编辑选项卡后，您将无法编辑此项目。
  5. 点击查看直播。将打开一个新选项卡，显示实时页面。在本教程中，此选项卡将被称为实时选项卡。
    实时标签。
    图5。实时标签

添加内容

你的网站很空。请按照以下步骤添加一些内容！

  1. 在编辑器选项卡中，替换<!-- You're "About Me" will go here. --> 为<h1>About Me</h1>。 
    ... 
<body> <p> 您的网站！</ p> <main> <h1> 关于我</ h1> </ main>   ...
  
  
    
 
    新代码在编辑器选项卡中突出显示。
    图6。新代码在编辑器选项卡中突出显示
  2. 在实时标签中查看您的更改。文本About Me在页面上可见。它比文本的其余部分大，因为<h1>元素代表一个部分标题。您的Web浏览器会自动为较大字体的标题设置样式。
    新标题在实时标签中可见。
    图7。新标题在实时标签中可见
  3. 返回编辑器选项卡，<p>I am learning HTML. Recent accomplishments:</p>在下面的行中插入<h1>About Me</h1>。 
    ... 
<body> <p> 您的网站！</ p> <main> <h1> 关于我</ h1> <p> 我正在学习网页开发。最近的成就：</ p> </ main>   ...
  
  
    
    
 
    新代码在编辑器选项卡中突出显示。
    图8。新代码在编辑器选项卡中突出显示
  4. 在实时标签中查看您的更改。
  5. 返回编辑器选项卡，添加您的成就列表： 
    ... 
  <p> 我正在学习网络开发。最近的成就：</ p> <ul> <li> 了解如何在Glitch中设置我的代码。</ li> <li> 向我的HTML添加了内容。</ li> <li> TODO：了解如何使用Chrome DevTools试验内容更改。</ li> <li> TODO：了解HTML和DOM之间的区别。</ li> </ ul> ......
  
    
    
    
    
 
    新代码在编辑器选项卡中突出显示。
    图4。新代码在编辑器选项卡中突出显示
  6. 再次，返回实时选项卡以确保新内容正确显示。
    新列表在实时选项卡中可见。
    图4。新列表在实时选项卡中可见

尝试Chrome DevTools中的内容更改

如果您正在开发包含大量HTML的大页面，您可以想象在编辑器选项卡和实时选项卡之间来回数百次以查看更改可能有点单调乏味，特别是如果您不知道究竟要放在页面上的是什么。Chrome DevTools可以帮助您体验内容更改，而无需离开实时标签。

了解HTML和DOM之间的区别

在您开始从Chrome DevTools编辑内容之前，了解HTML和DOM之间的区别很有帮助。学习的最佳方式是通过示例：

  1. 转到实时选项卡。在页面底部，您会看到文字A new element!?!。
    在页面底部的文字'一个新的元素！？！' 看得见。
    图9。在页面底部A new element!?!可以看到 文本
  2. 返回编辑器选项卡，尝试查找此文本index.html。它不存在！
    在index.html中找不到神秘文本。
    图10。神秘的文字A new element!?!无处可寻index.html
  3. 返回实时选项卡，单击鼠标右键A new element!?!，然后选择“ 检查”。
    检查一些文字。
    图11。检查一些文字

    DevTools会在您的页面旁边打开。<div>A new element!?!</div>突出显示为蓝色。虽然DevTools中的这个结构看起来像你的HTML，但实际上它是DOM树。

    DevTools在页面旁边打开。
    图12。DevTools在页面旁边打开

当您的页面加载时，浏览器会使用您的HTML来创建页面的初始内容。DOM表示页面的当前内容，可以随时间变化。<div>A new element!?!</div由于<script src="new.js"></script>HTML底部的标记，神秘内容会添加到您的网页中 。此标记会导致某些JavaScript代码运行。您将在以后的教程中了解有关JavaScript的更多信息，但现在将其视为可以更改页面内容的编程语言。在这种特殊情况下，JavaScript代码会添加<div>A new element!?!</div>到您的页面中。这就是为什么这个神秘文本在您的实际页面上可见，而不是在您的HTML中。

编辑DOM

如果您想在不离开实时标签的情况下快速尝试内容更改，请尝试使用DevTools。

  1. 在DevTools中，右键单击Your site!并选择“ 编辑为HTML”。
    将节点编辑为HTML。
    图13。将节点编辑为HTML
  2. 替换<p>Your site!</p>为下面的代码。 
    <header> <p> <b> 欢迎来到我的网站！</ b> </ p> <button> 下载我的简历</ button> </ header>
  
 
    将节点编辑为HTML。
    图14。将节点编辑为HTML
  3. 按Command+ Enter（Mac）或Control+ Enter （Windows，Linux，Chrome OS）保存更改，或单击框外部。您的更改会自动显示在您网页的实时视图中。该文本Your site! 已被新内容替换。
    新内容会立即显示在页面上。
    图15。新内容会立即显示在页面上

此工作流程仅适用于试验内容更改。如果您重新加载页面或关闭选项卡，您的更改将永远消失。如果您正在使用此工作流程并且想要保存更改，则需要手动将这些更改复制到HTML。

接下来的几节将向您展示更多可以从DOM树更改内容的方法。

重新排序节点

您还可以更改DOM节点的顺序。例如，在您的网页上，导航菜单位于底部附近。将其移至顶部：

  1. <nav>在DevTools 的DOM树中查找节点。
    nav节点在DevTools中以蓝色突出显示。
    图16。nav节点在DevTools中以蓝色突出显示
  2. 将<nav>节点拖到顶部，这样它就是<body>节点下面的第一个子节点。
    将导航节点拖到顶部。
    图17。将导航节点拖到顶部

    该<nav>节点现在显示在页面顶部。

    导航节点位于页面顶部。
    图18。导航节点位于页面顶部

删除节点

您还可以从DOM树中删除节点。

  1. 在DOM树中，单击<div>A new element!?!</div>。DevTools突出显示蓝色节点。
    选择要删除的节点。
    图19。选择要删除的节点
  2. 按Delete键盘上的键。该<div>A new element!?!</div>节点将从DOM树中删除。
    该节点已被删除。
    图20。该节点已被删除

复制您的更改

你几乎完成。您已在DevTools中对页面进行了一些更改，但它们尚未保存到您的源代码中。

  1. 重新加载您的实时标签。您在DOM树中所做的更改将消失。特别是，文本Your site!返回页面顶部，文本A new element!?!返回到底部。
    你所做的改变已经消失了。
    图21。你所做的改变已经消失了