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