源代码如何查看网页源代码

制作网页除了需要自己不断的灵感源泉更需要借鉴前人们的经验和宝贵资源平时多看别人的作品来丰富自己的知识库是十分好的方法那我们怎么来借鉴别人的作品呢当然是看别人的页面源代码了。

互联网发展如此迅速靠的就是它开源、共享的几个特性所以更应该发挥这个特性。针对目前流行的几种浏览器我们挑重点分别介绍一下几种查看页面源代码的方法。

IE浏览器查看源代码的方法

IE浏览器就是微软公司出品的Internet Explorer一般内置在各个版本的Windows操作系统中现在流行的版本有IE6、 IE7也有少数人开始用IE8但它还不完善建议还是使用稳定的IE6或IE7。

打开浏览器输入一个网址待页面全部打开。找到一块你觉得感兴趣的地方然后找到它的源代码反正是举例我就随便找个目标 比如首屏的“滚动热点” 。

好 目标寻找完毕在页面的空白处点击鼠标右键在菜单中可以看到“查看源文件”的选项如图一点击它然后会弹出一个文本文档你会看到一大堆代码这就是这个页面的源文件了。

不过有些做页面的朋友不厚道不想让别人看到源文件于是添加代码禁止在网页中点击右键这时候你可以点击浏览器菜单栏里的“查看” 里面有“源文件”选项如图二效果和右键查看源代码相同。

如果这个也给禁止了呢那我们就把页面另存一下点击浏览器菜单栏里文件--另存为如图三存好了之后再拿Dreamweaver或者记事本之类的软件打开就行了。

如果这个也用不了. . . . . .那只能再根据具体情况分析了稍后再谈这个。那么长的源文件看了都头晕怎么找到自己想要的那个部分搜索呀寻找有代表性的关键词搜索有时候可以搜索文字有时候可以搜索图片名称。这个例子比较好找只要找到“滚动热点”就可以了。在记事本中按Ctrl+F或者工具栏中编辑里的查找如图四输入“滚动热点” 一下就搜到了。然后再看一

下原来滚动字幕就在<div id="HomeRollText"></div>里面包含着。 OK 目标找到了。

现在绕回去说刚才没有解决的那个问题有些网页禁止右键、禁止查看源文件怎么办有一款对网页开发非常实用的浏览器还有很多相关插件可以增强其性能它就是Firefox。

Firefox浏览器查看源代码的方法

Firefox浏览器有助于网页开发制作的功能要远胜于IE而且有些禁用页面效果的Javascript脚本在Firefox里是失效的再加上Firefox的网页开发插件那就更加如虎添翼了。

Firefox浏览器查看网页源代码的方法基本和IE相似也是在页面空白处点击右键选择“查看页面源代码” 直接按Ctrl+U或者点击工具栏上的查看“查看页面源代码” 如图五。

如果还是不能查看源代码我们可以借助一下插件 Firefox有一个专业的网页开发插件叫Web Developer可以在Firefox的官方网站下载到https://addons.mozil la.org/zh-CN/firefox/addon/60如图六 点击“安装到F i r e f ox”按钮在弹出的窗口中点击“安装” 等到下载完毕就会直接安装到浏览器中了重启Firefox浏览器如果你能看到一个新的工具条这表示它可以正常使用了。Web Develpoer插件在制作网页中最常用到的两个功能是查看CSS View Css和查看源代码View Source 只需要点击按钮就可轻松搞定。

依照上面的步骤打开页面等待全部加载完毕然后点击Web Developer工具栏中从右数第二项的View Source在下拉菜单中再点击View Source立刻会弹出一个页面这就是页面的源代码而它不是用记事本或其它工具打开的是Firefox自带的代码查看器。在查看器中直接按Ctrl+F或者点击工具栏菜单中的编辑--查找搜索“滚动热点” 一下就能找到了这个插件十分方便尤其是遇到禁用脚本的时候。

OK查看源代码的几种方法就介绍到这不过这些技巧需要随时变通活学活用希望这些技巧能对你有些帮助。