无论您是网络行业的新手还是经验丰富的老手，查看不同网页的HTML源代码都是您在职业生涯中可能多次执行的操作。
对于那些不熟悉网页设计的人来说，查看网站的源代码是了解某些事情如何完成的最简单方法之一，这样您就可以从这项工作中学习并开始在自己的工作中使用某些代码或技术。正如今天工作的任何网页设计师，特别是那些从业界早期就开始工作的网站设计师，可以肯定的是，他们告诉你他们只是通过查看他们看到并被吸引的网页来源来学习HTML通过。除了阅读网页设计书籍或参加专业会议之外，查看网站的源代码是初学者学习HTML的好方法。
不只是HTML
要记住的一件事是源文件可能非常复杂（您查看的网站越复杂，网站代码可能越复杂）。除了构成您正在查看的页面的HTML结构之外，还将有CSS（级联样式表）来指示该站点的视觉外观。此外，如今许多网站都将包含随HTML一起提供的脚本文件。
事实上，可能包含多个脚本文件，每个脚本文件都支持网站的不同方面。坦率地说，网站的源代码看起来势不可挡，特别是如果您不熟悉这一点。如果您无法立即弄清楚该网站的情况，请不要感到沮丧。查看HTML源代码只是此过程的第一步。通过一点经验，您将开始更好地了解所有这些部分如何组合在一起，以创建您在浏览器中看到的网站。随着您对代码的熟悉程度越来越高，您将能够从中学到更多知识，这对您来说似乎并不那么令人生畏。
那么如何查看网站的源代码呢？以下是使用Google Chrome浏览器执行此操作的分步说明。
分步说明
-
打开 谷歌Chrome浏览器 （如果您没有安装Google Chrome，则可以免费下载）。
-
导航到 您想要检查的网页.
-
右键点击 这页纸 并查看出现的菜单。从该菜单中，单击 查看页面源代码.
-
该页面的源代码现在将显示为浏览器中的新选项卡。
-
或者，您也可以使用键盘快捷键 CTRL + U. 在PC上打开一个显示网站源代码的窗口。在Mac上，此快捷方式是 Command + Option + U..
开发者工具
除了简单 查看页面源代码 Google Chrome提供的功能，您还可以利用其出色的开发者工具深入挖掘网站。这些工具不仅可以让您看到HTML，还可以看到适用于该HTML文档中的视图元素的CSS。
要使用Chrome的开发者工具：
-
打开 谷歌浏览器.
-
导航 您要检查的网页.
-
点击 带有三条线的图标 在浏览器窗口的右上角。
-
从菜单中，将鼠标悬停在上方 更多工具 然后单击 开发者工具 在出现的菜单中。
-
这将打开一个窗口，显示窗格左侧的HTML源代码和右侧的相关CSS。
-
或者，如果您右键单击 网页中的元素 并选择 检查 从显示的菜单中，将弹出Chrome的开发人员工具，并在HTML中突出显示您选择的确切元素，并在右侧显示相应的CSS。如果您想了解有关网站的某个特定部分是如何制作的更多信息，这将非常有用。
查看源代码是否合法？
多年来，我们有许多新的网页设计师质疑是否可以接受查看网站的源代码并将其用于他们的教育，并最终用于他们所做的工作。虽然复制网站代码批发并将其作为您自己的代码在网站上传递肯定是不可接受的，但使用该代码作为跳板来学习实际上是在这个行业中取得了多少进步。
正如我们在本文开头提到的那样，你很难找到一个今天工作的网络专业人士，他没有通过查看网站的来源学到东西！是的，查看网站的源代码是合法的。使用该代码作为资源来构建类似的东西也很好。当你的工作开始遇到问题时，按原样执行代码并将其传递出去。
最后，网络专业人员相互学习，并经常改进他们所看到和受到启发的工作，所以不要犹豫，查看网站的源代码并将其用作学习工具。
