常用浏览器上查看网页源代码的方法

原创 小智  2020-04-13 14:06  阅读 11,609 次

源代码是所有网站背后的程序语言,很多时候,在网页制作的工作中,我们常常需要学习优秀的网站,借鉴参考他们的页面源码,这就需要查看网站的源代码(比如:图片的地址,隐藏的背景音乐的地址等内容),文章将介绍如何在大部分常用浏览器(如:Google Chrome、火狐、360浏览器和IE浏览器)上查看网页源代码。

什么是网页源代码(源文件)?

源码是使用Html编写的,通过“浏览器”把它翻译成网页(可视化、可直观的形式表现出来的页面),源代码是一种语言,组织排版网页上的元素(图片,视频,音乐,文字等)的一种标准语言。网站源码分为两种,一种是动态源码如:ASP,PHP,JSP,.NET,CGI等,一种是静态源码如:HTML等。

怎么查看网页源代码,如何查看源文件?

方法一:打开"浏览器"(如:Google Chrome、火狐、360浏览器和IE浏览器)。打开一个网页。在这个网页的空白处鼠标“右击”---》“查看网页源代码”或“查看源文件” 即可在弹出的新窗口中浏览页面的源代码。

注:如果在网页图片和文字上“右击”,在弹出的菜单里就没有“查看网页源代码”这个选项了。

鼠标右击查看网页源代码

方法二:打开一个网页。使用快捷键“Ctrl+U”(Windows电脑)或“option+Command+U”(Mac电脑)来查看页面的源代码。

注:在Google Chrome、火狐、360浏览器中,在地址栏输入命令,view-source:想要查看的网址,即可查看页面的源代码。

查看网页源代码窗口

方法三:通过浏览器中的“菜单栏”查看网页源代码。打开一个网页。“查看”或“工具”---》“查看网页源代码”或“开发者工具”,即可查看页面源代码。

快捷查看网页源代码

常用的浏览器都可以在浏览网页时,鼠标"右击"网页空白处,在弹出的菜单中找到“查看网页源代码”选项,点击即可查看当前被打开的HTML网页源代码。

如果JS代码禁止用户鼠标右击查看源文件代码时,可通过快捷键“Ctrl+U”查看网页源代码。

各浏览器通过菜单栏具体查看网页源代码

1)、谷歌浏览器(Google Chrome)查看源代码的操作方法:在浏览器右上角“三横”(自定义及控制 Google Chrome)控制图标---》“更多工具”---》“开发者工具”(直接按”F12“也可打开“开发者工具”)。打开后,在“Elements”里的代码就是该页面的源代码了。

注:在Google Chrome开发者的界面中。点击顶部的手机平板图标 Toggle device toolbar 按钮,会变成手机浏览器的界面。输入需要查看的手机网站,可以在“Elements”中查看手机网站的网页源代码了(如果不显示手机页面可以刷新一下网页)。

Google Chrome开发者界面

2)、Firefox浏览器,查看页面源代码的操作方法:点击火狐firefox浏览器上方“工具(T)”---》“Web 开发者”---》“页面源代码”,即可查看网页源代码。

Firefox浏览器查看页面源代码

3)、微软IE浏览器,查看源文件的操作方法:通过IE浏览器菜单栏中的“查看(V)”---》“源文件”

微软IE浏览器查看源文件

4)、360浏览器,查看网页源代码的操作方法:通过360E浏览器菜单栏中的“查看”---》“查看网页源代码”

360浏览器查看网页源代码

本文地址:http://aszhi.com/jishu/html/24.html
关注我们:请关注一下微信号:扫描二维码爱思智前端的微信号
版权声明:本文为原创文章,版权归 小智 所有,欢迎分享本文,转载请保留出处!
PREVIOUS:已经是最后一篇了

发表评论


表情