文件大小:53.39 MB  文件版本:V 0.0.117

本地下载 官方下载 本地下载

当前位置: 首页 >  浏览器教程 > chrome教程攻略 > 如何在谷歌浏览器中查看HTML源代码?

如何在谷歌浏览器中查看HTML源代码?

2022-05-10 16:43:27    来源:浏览器部落    作者:admin

     这篇文章解释了如何访问网站的HTML源代码在谷歌Chrome网络浏览器中,以及访问和使用Chrome的开发者工具。查看一个站点的源代码是初学者学习HTML的一个很好的方法。

谷歌浏览器器HTM源代码

  在Chrome中查看源代码

  那么如何查看一个网站的源代码呢?以下是使用谷歌Chrome浏览器的分步说明。

  1、打开谷歌Chrome网络浏览器(如果您没有安装了谷歌浏览器,这是免费下载)。

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

  3、右键单击页面看看出现的菜单。从菜单中,单击查看页面源。

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

  5、或者,您也可以使用的键盘快捷键计算机的ctrl按键+U在PC上打开一个显示站点源代码的窗口。在Mac上,此快捷键是命令+[计]选项+U

  使用Chrome的开发工具

  除了简单的查看页面源能力,你也可以利用他们的优秀开发者工具更深入地挖掘一个地点。这些工具不仅允许您查看HTML,还允许您查看应用于HTML文档中视图元素的CSS。

  要使用Chrome的开发工具:

  1、打开谷歌浏览器。

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

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

  4、从菜单中,将鼠标悬停在更多工具然后选择开发者工具在出现的菜单中。

  5、将会打开一个窗口,在窗格的左侧显示HTML源代码,在右侧显示相关的CSS。

  6、或者,如果您右键单击网页中的元素并选择检查从出现的菜单中,Chrome的开发者工具将弹出并高亮显示你在HTML中选择的特定部分,相应的CSS显示在右边。如果你想更多地了解某个网站的某个部分,这是非常有用的。

  查看源代码合法吗?

  这些年来,我们有许多新的网页设计师质疑查看网站的源代码并将其用于他们的教育和最终的工作是否可以接受。虽然大量复制一个网站的代码并在网站上冒充自己的代码肯定是不可接受的,但使用这些代码作为跳板来学习实际上是这个行业取得了多少进步。

  正如我们在本文开始时提到的,你很难找到一个今天还在工作的web专业人员没有通过查看站点的源代码学到什么!是的,查看一个网站的源代码是合法的。使用这些代码作为资源来构建类似的东西也是安全的。照原样使用代码,并把它当作您的工作,这是您开始遇到问题的地方。

  最后,web专业人员相互学习,并经常改进他们看到的和受到启发的工作,所以不要犹豫查看网站的源代码,并将其用作学习工具。

  不仅仅是HTML

  需要记住的一点是,源文件可能非常复杂(你浏览的网站越复杂,该网站的代码就可能越复杂)。除了组成页面的HTML结构之外,还会有CSS(层叠样式表)来决定网站的视觉外观。此外,今天的许多网站都将脚本文件与HTML一起包含在内。

  可能包含多个脚本文件;事实上,每一个都为网站的不同方面提供能量。坦白地说,一个站点的源代码可能看起来让人不知所措,尤其是如果你是新手的话。如果你不能马上弄清楚那个网站发生了什么,不要沮丧。查看HTML源代码只是这个过程的第一步。有了一点经验,你会开始更好地理解所有这些部分是如何组合在一起创建你在浏览器中看到的网站的。随着您对代码越来越熟悉,您将能够从中学习到更多的东西,并且它对您来说不会显得那么令人生畏。

浏览器推荐下载

  • 本文关键词:
  • 谷歌浏览器
  • HTML源代码
标签:
网页

本站发布的资源与软件仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持或者购买正版!

如侵犯到您的权益,请及时通知我们,我们会及时处理,对系统之家有任何投诉或建议,请与管理员联系. 邮箱:17587008659@163.com

Copyright©2011 浏览器部落(www.liulanqibuluo.com) 版权所有 闽ICP备2022006079号-1