如何获取一段HTML源码

以http://www.thepaper.cn/newsDetail_forward_2064820为例,我现在需要该新闻评论部分的html源码,copy下来的同时,要求保存为“.html”文件后,打开的时候和在当前页面看到的一样,像这样:

一开始以为只要复制相应的代码就可以了,其实不然,对于不懂前端的我来说,着实有些坑。。。。。。下面记录一下笨办法copy html源码。

1.使用谷歌浏览器打开该链接

2.复制源码

通过“F12”启用Chrome DevTools工具,并选择“Elements”选项卡,这时候就可以看到“加载”后的html源码了,然后在源码位置,然后进行如下操作,鼠标右键-Copy-Copy outerHTML:

这时候就得到了“加载”后的html源码了,然后保存。

3.格式化源码

保存后,最好将得到源码格式化一下,这样在后面的编辑过程中方便查找,看起来也舒服一些,比如通过点击打开链接就可以格式化html源码。

4.补全

以此新闻为例,复制了新闻的源码并保存,在浏览器打开后可能是这样的:

懂一点点前端的同学都知道,这是因为当前页面没有加载CSS导致的。所以去复制的源码里看一下,可以看到许多带有外链的链接是不完整的:

	<link rel="stylesheet" type="text/css" href="//file.thepaper.cn/www/v3/css/css.css?v=5.76">
	<link rel="stylesheet" type="text/css" href="//file.thepaper.cn/www/v3/css/style.css?v=5.76">
	<link rel="stylesheet" type="text/css" href="//file.thepaper.cn/www/v3/css/news.css?v=5.76">
	<link rel="stylesheet" type="text/css" href="//file.thepaper.cn/www/v3/css/interact.css?v=5.76">
	<script type="text/javascript" src="//file.thepaper.cn/www/v3/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="//file.thepaper.cn/www/v3/js/jquery.infinitescroll.js"></script>
	<script type="text/javascript" src="//file.thepaper.cn/www/v3/js/jquery.leanModal.min.js"></script>
	<script type="text/javascript" src="//file.thepaper.cn/www/v3/js/main-3.0.js?v=5.76"></script>
	<script type="text/javascript" src="//file.thepaper.cn/www/v3/js/login.js?v=5.76"></script>
	<script type="text/javascript" src="//file.thepaper.cn/www/v3/js/autosize.js"></script>
    <script type="text/javascript" src="//file.thepaper.cn/www/v3/js/audioplayer.min.js"></script>

所以,需要将不完整的url进行补全,这里加上“http:”即可,这时候再重新打开保存的源码,就可以得到正常的网页了。

5.删除多余的代码

因为我只需要每条评论的那部分源码,所以接下来就需要将多余的代码删除。首先,可以把源码中所有script标签删除掉(就本次需求来讲,没什么用);之后,在谷歌浏览器中,通过“Ctrl+Shift+C”可以查看其他你想要删除的对象在HTML中对应的元素都是什么,像这样:

6.整理

通过多次删除、刷新(浏览器)操作后,就可以得到自己想要的源码了(注意保留需要用到的CSS样式的标签),整理后:

<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="http://file.thepaper.cn/www/v3/css/css.css?v=5.76">
    <link rel="stylesheet" type="text/css" href="http://file.thepaper.cn/www/v3/css/style.css?v=5.76">
    <link rel="stylesheet" type="text/css" href="http://file.thepaper.cn/www/v3/css/news.css?v=5.76">
    <link rel="stylesheet" type="text/css" href="http://file.thepaper.cn/www/v3/css/interact.css?v=5.76">    
    <body>
      <div class="bdwd main clearfix">
        <div class="main_lt" style="min-height: 2599px;">
          <div class="newscontent">
            <div id="aq_commt">
              <div id="commtid">
                <div id="mainContent" class="emoji_font">
                  <div class="comment_que" id="commentNew15483654">
                    <div class="aq_write clearfix">
                      <div class="aqwleft">
                        <div class="ansleft_hdimg">
                          <a>
                            <img src="http://www.thepaper.cn/www/publish/interaction/image//2/438/297.jpg">
                            <div class="hdimg_bg">
                              <img src="http://file.thepaper.cn/www/v3/img/headerimg_bg50.png"></div>
                          </a>
                        </div>
                      </div>
                      <div class="aqwright">
                        <h3>
                          <a ref="nofollow">别尽良宵</a>
                          <span>刚刚</span></h3>
                        <div class="ansright_cont">
                          <a>这是一个测试</a>
                        </div>
                        <div class="ansright_time">
                          <a id="15483654" class="ansright_zan">0</a>
                          <span>|</span>
                          <a>回复</a>
                        </div>
                      </div>
                      <div class="aqwright_bdbt"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </body>
</html>

在浏览器打开后的样子:

---------------------------- 2018年8月16日更新 ------------------------------

像这个页面:打开,使用上面的方法直接复制源码并保存后,在浏览器打开竟然会跳转(发生变化),这时候只要去掉源码中的所有script代码即可。

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值