如何在Google Chrome中查看HTML源

本文介绍了如何访问网站的HTML源代码在Google Chrome Web浏览器中，以及访问和使用Chrome的开发人员工具。查看网站的源代码是初学者学习HTML的一个绝佳方式。

查看Chrome中的源代码

那么如何查看网站的源代码？以下是使用Google Chrome浏览器执行此操作的逐步说明。

1. 打开Google Chrome Web浏览器（如果你没有谷歌浏览器安装了，这是免费下载）。

2. 导航到您想检查的网页。

3. 右键点击这页纸并查看出现的菜单。从该菜单中，单击查看页面源代码。

   

4. 该页面的源代码现在将显示为浏览器中的新选项卡。

5. 或者，您也可以使用键盘快捷键Ctrl.+你在PC上打开一个带有站点的源代码的窗口。在Mac上，这个快捷方式是命令+选项+你。

使用Chrome的开发人员工具

除了简单查看页面源代码能够谷歌Chrome提供，您也可以利用他们的优秀开发者工具挖掘甚至更深地进入一个网站。这些工具将允许您不仅要查看HTML，还允许您在该HTML文档中应用于查看元素的CSS。

要使用Chrome的开发人员工具：

1. 打开谷歌浏览器。

2. 导航您想检查的网页。

3. 选择三点菜单在浏览器窗口的右上角。

4. 从菜单中，悬停在一起更多工具然后选择开发者工具在出现的菜单中。

   

5. 一个窗口将打开，显示窗格左侧的HTML源代码以及右侧的相关CSS。

6. 或者，如果您右键单击网页中的一个元素并选择检查从出现的菜单中，Chrome的Developer工具将弹出并突出显示您在HTML中选择的特定部分，其中包含右侧的相应CSS。如果您想了解有关一个特定网站的特定部分，这是超级有用的。

查看源代码合法吗？

多年来，我们有许多新的网络设计师质疑是否可以接受查看网站的源代码并将其用于他们的教育，并最终为他们所做的工作。在复制网站的代码批发并将其作为网站上的当肯定是不可接受的，使用该代码作为跳板来学习，实际上是在这个行业中提出了多少进步。

正如我们在本文首次提及的那样，您将被难以努力寻找今天的工作Web专业，这些专业人员通过查看网站的来源而没有学到的东西！是的，看到网站的源代码是合法的。使用该代码作为构建类似的资源也是安全的。按照您的工作，以代码为单位并将其传递在您开始遇到问题的地方。

最终，Web专业人员彼此学习，往往会改善他们看到的工作并受到启发，因此请不要犹豫，查看网站的源代码并将其用作学习工具。

不仅仅是html

要记住的一件事是，源文件可以非常复杂（并且您正在查看的网站的越复杂是，该网站的代码可能是更复杂的）。除了HTML结构构成页面，也会有CSS（层叠样式表）这决定了该网站的视觉外观。此外，今天许多网站将包括与HTML一起包含的脚本文件。

可能包含多个脚本文件;实际上，每个一个都是网站的不同方面。坦率地说，一个网站的源代码似乎绝大多姿，特别是如果你是新的事情。如果您无法弄清楚立即与该网站发生了什么，不要受挫。查看HTML源只是此过程的第一步。通过一点经验，您将开始更好地了解所有这些作品如何合适，以创建您在浏览器中看到的网站。当您更熟悉代码时，您将能够从中学习更多，并且对您来说似乎不会那么令人困惑。